add redirect_uri add/remove buttons
parent
fa7912621d
commit
f633f2d617
|
@ -1,3 +1,4 @@
|
||||||
**/.ropeproject/*
|
**/.ropeproject/*
|
||||||
**/*.py[co]
|
**/*.py[co]
|
||||||
**/.env
|
**/.env
|
||||||
|
**/*.pem
|
||||||
|
|
|
@ -37,3 +37,7 @@ td.placeholder {
|
||||||
.form-group li {
|
.form-group li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
|
@ -34,6 +34,10 @@ None
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endmacro %}
|
{% 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='') %}
|
{% 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 field.type == 'BooleanField' %}<div class="checkbox"><label for="{{ field.id }}">{% endif %}
|
||||||
{% if prefix or suffix %}<div class="input-group {{ input_group_class }}">{% endif %}
|
{% if prefix or suffix %}<div class="input-group {{ input_group_class }}">{% endif %}
|
||||||
|
@ -46,8 +50,12 @@ None
|
||||||
{{ field(**kwargs) }}
|
{{ field(**kwargs) }}
|
||||||
{% elif field.type == 'FieldList' %}
|
{% elif field.type == 'FieldList' %}
|
||||||
{% for f in field.entries %}
|
{% 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 %}
|
{% 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 %}
|
{% else %}
|
||||||
{{ field(class_='form-control '+kwargs.pop('class_', ''), **kwargs) }}
|
{{ field(class_='form-control '+kwargs.pop('class_', ''), **kwargs) }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -53,10 +53,47 @@
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
document.querySelectorAll('button[data-toggle]').forEach(e => {
|
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);
|
const input = document.querySelector(e.attributes['data-toggle'].value);
|
||||||
input.type = (input.type === 'password') ? 'text' : 'password';
|
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>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue