1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
{% import "edit_macros.html" as edit_macros %}
{% extends "base.html" %}
{% block body %}
{% block edit_form_prefix %}
<div class="ui segment">
<h1 class="ui header">Edit Container Entity</h1>
<form class="ui form" id="edit_container_form" method="POST" action="{% if editgroup %}/editgroup/{{ editgroup.editgroup_id }}{% endif %}/container/{{ existing_ident }}/edit">
{% endblock %}
{{ form.hidden_tag() }}
<br>
{{ edit_macros.editgroup_dropdown(form, editgroup) }}
<h3 class="ui dividing header">The Basics</h3>
<br>
{{ edit_macros.form_field_inline(form.container_type, "required") }}
{{ edit_macros.form_field_inline(form.name, "required") }}
{{ edit_macros.form_field_inline(form.publisher) }}
{{ edit_macros.form_field_inline(form.issnl) }}
{{ edit_macros.form_field_inline(form.wikidata_qid) }}
<br>
<h3 class="ui dividing header">Homepage URLs</h3>
<i>Landing page or mirror locations of container as a whole.</i>
<br><br>
<div class="list-group" id="url_list" name="url_list">
{% for cfield in form.urls %}
<div class="list-group-item ui grid" style="padding-right: 1em;">
<div class="one wide column middle aligned center aligned sortable-handle" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
<i class="arrows alternate vertical icon"></i>
</div>
<div class="fourteen wide column" style="padding-bottom: 0px;">
<div class="field {% if cfield.errors %}error{% endif %}">
{{ cfield() }}
{{ edit_macros.form_field_errors(cfield) }}
</div>
</div>
<div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
<button type="button" class="ui icon red button delete-url-button"><i class="trash icon"></i></button>
</div>
</div>
{% endfor %}
</div>
<br>
<button type="button" id="add-url-button" class="ui right floated icon green button" style="margin-right: 0.3rem;">
<i class="plus icon"></i>
</button>
<br>
<h3 class="ui dividing header">Submit</h3>
{{ edit_macros.form_field_basic(form.edit_description) }}
This description will be attached to the individual edit, not to the
editgroup as a whole.
{% block edit_form_suffix %}
<br><br>
<input class="ui primary submit button" type="submit" value="Update Container!">
<p>
<i>Edit will be part of the current editgroup, which needs to be submited and
approved before the change is included in the catalog.</i>
</form>
</div>
{% endblock %}
{% endblock %}
{% block postscript %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
<!-- Form code -->
$(document).ready(function() {
$('.ui.accordion').accordion();
var fixup_url_numbering = function(group_item) {
items = Array.from(group_item.querySelectorAll(".list-group-item"))
for (var i = 0; i < items.length; i++) {
var item_el = items[i];
input_el = item_el.querySelectorAll("input")[0];
//console.log(input_el.id);
input_el.id = "urls-" + i;
input_el.name = input_el.id;
//console.log(input_el.id);
};
console.log("re-named url rows up to i=" + i);
};
var url_list = document.getElementById('url_list');
var url_sortable = Sortable.create(url_list, {
handle: '.sortable-handle',
animation: 150,
onSort: function(evt) {
fixup_url_numbering(url_list);
},
});
fixup_url_numbering(url_list);
var url_delete_handler = function(ev) {
row = ev.target.parentNode.parentNode;
// I don't understand why this hack is needed; maybe because of the sortable stuff?
if(!row.classList.contains("list-group-item")) {
row = row.parentNode;
}
// console.log(row);
console.assert(row.classList.contains("list-group-item"));
row.parentNode.removeChild(row);
fixup_url_numbering(url_list);
};
var attach_url_delete_handler = function(topthing) {
Array.from(topthing.querySelectorAll(".delete-url-button")).forEach((el) => {
el.addEventListener("click", url_delete_handler);
});
};
attach_url_delete_handler(document);
// XXX: really need some way to not duplicate this code from above...
var url_template = `
<div class="list-group-item ui grid" style="padding-right: 1em;">
<div class="one wide column middle aligned center aligned sortable-handle" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
<i class="arrows alternate vertical icon"></i>
</div>
<div class="fourteen wide column" style="padding-bottom: 0px;">
<input id="urls-X" name="urls-X" type="text" value="">
</div>
<div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
<button type="button" class="ui icon red button delete-url-button"><i class="trash icon"></i></button>
</div>
</div>
`;
var add_url_button = document.getElementById("add-url-button");
add_url_button.addEventListener("click", function(){
url_list.insertAdjacentHTML('beforeend', url_template);
attach_url_delete_handler(url_list.lastElementChild);
fixup_url_numbering(url_list);
});
});
</script>
{% endblock %}
|
