add redirect_uri add/remove buttons
parent
fa7912621d
commit
f633f2d617
|
@ -1,3 +1,4 @@
|
|||
**/.ropeproject/*
|
||||
**/*.py[co]
|
||||
**/.env
|
||||
**/*.pem
|
||||
|
|
|
@ -37,3 +37,7 @@ td.placeholder {
|
|||
.form-group li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
|
@ -34,6 +34,10 @@ None
|
|||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro add_remove_button() %}
|
||||
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-remove"></i></button>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_field_inner(field, prefix=None, suffix=None, label=True, input_group_class='') %}
|
||||
{% if field.type == 'BooleanField' %}<div class="checkbox"><label for="{{ field.id }}">{% endif %}
|
||||
{% if prefix or suffix %}<div class="input-group {{ input_group_class }}">{% endif %}
|
||||
|
@ -46,8 +50,12 @@ None
|
|||
{{ field(**kwargs) }}
|
||||
{% elif field.type == 'FieldList' %}
|
||||
{% for f in field.entries %}
|
||||
{{ render_field_inner(f) }}
|
||||
<div class="input-group" data-fieldlist="{{ field.name }}">
|
||||
{{ render_field_inner(f) }}
|
||||
<span class="input-group-btn" data-remove="">{{ add_remove_button() }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<button class="btn btn-default btn-xs center-block" data-add="{{ field.name }}" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
|
||||
{% else %}
|
||||
{{ field(class_='form-control '+kwargs.pop('class_', ''), **kwargs) }}
|
||||
{% endif %}
|
||||
|
|
|
@ -53,10 +53,47 @@
|
|||
</div>
|
||||
<script>
|
||||
document.querySelectorAll('button[data-toggle]').forEach(e => {
|
||||
e.addEventListener('click', () => {
|
||||
e.addEventListener('click', evt => {
|
||||
evt.preventDefault();
|
||||
const input = document.querySelector(e.attributes['data-toggle'].value);
|
||||
input.type = (input.type === 'password') ? 'text' : 'password';
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
function bindRemove(node) {
|
||||
node.querySelector('[data-remove]').addEventListener('click', evt => {
|
||||
evt.preventDefault();
|
||||
|
||||
if (document.querySelectorAll('[data-fieldlist="' + node.attributes['data-fieldlist'].value + '"]').length === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
node.parentNode.removeChild(node);
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-fieldlist]').forEach(e => {
|
||||
bindRemove(e);
|
||||
});
|
||||
|
||||
document.querySelectorAll('button[data-add]').forEach(e => {
|
||||
e.addEventListener('click', evt => {
|
||||
evt.preventDefault();
|
||||
const nodes = document.querySelectorAll('[data-fieldlist="' + e.attributes['data-add'].value + '"]');
|
||||
console.info(nodes[nodes.length-1]);
|
||||
|
||||
const newNode = nodes[nodes.length-1].cloneNode(true);
|
||||
let [name, idx] = newNode.querySelector('input').id.split('-');
|
||||
idx = parseInt(idx);
|
||||
newNode.querySelector('input').id = `${name}-${idx+1}`;
|
||||
newNode.querySelector('input').name = `${name}-${idx+1}`;
|
||||
bindRemove(newNode);
|
||||
nodes[nodes.length-1].after(newNode);
|
||||
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue