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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
{% 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 Release Entity</h1>
<form class="ui form" id="edit_release_form" method="POST" action="{% if editgroup %}/editgroup/{{ editgroup.editgroup_id }}{% endif %}/release/{{ existing_ident }}/edit">
{% endblock %}
{{ form.hidden_tag() }}
<h3 class="ui dividing header">Editgroup Metadata</h3>
{{ edit_macros.editgroup_dropdown(form, editgroup, potential_editgroups) }}
<br>
<h3 class="ui dividing header">The Basics</h3>
<div class="ui grid">
<div class="three wide column" style="padding-bottom: 0px;"></div>
<div class="twelve wide column" style="padding-bottom: 0px;">
<div class="ui equal width fields">
{{ edit_macros.form_field_basic(form.release_type, "required") }}
{{ edit_macros.form_field_basic(form.release_stage) }}
</div>
</div>
<div class="one wide column" style="padding-bottom: 0px;"></div>
</div>
{{ edit_macros.form_field_inline(form.title, "required") }}
{{ edit_macros.form_field_inline(form.original_title) }}
{{ edit_macros.form_field_inline(form.work_id) }}
{{ edit_macros.form_field_inline(form.release_date) }}
<div class="ui grid">
<div class="three wide column" style="padding-bottom: 0px;"></div>
<div class="twelve wide column" style="padding-bottom: 0px;">
<div class="ui equal width fields">
{{ edit_macros.form_field_basic(form.language) }}
{{ edit_macros.form_field_basic(form.license_slug) }}
</div>
</div>
<div class="one wide column" style="padding-bottom: 0px;"></div>
</div>
<br>
<h3 class="ui dividing header">Contributors</h3>
<div class="list-group" id="contrib_list" name="contrib_list">
{% for cform in form.contribs %}
<div class="list-group-item ui grid" style="padding-right: 1em;">
{{ cform.hidden_tag() }}
<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="three wide column" style="padding-bottom: 0px; padding-left: 0px;">
<div class="field {% if cform.role.errors %}error{% endif %}">
{{ cform.role() }}
</div>
</div>
<div class="eleven wide column" style="padding-bottom: 0px;">
<div class="field {% if cform.raw_name.errors %}error{% endif %}">
{{ cform.raw_name() }}
{{ edit_macros.form_field_errors(cform.raw_name) }}
</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-contrib-button"><i class="trash icon"></i></button>
</div>
</div>
{% endfor %}
</div>
<br>
<button type="button" id="add-contrib-button" class="ui right floated icon green button" style="margin-right: 0.3rem;">
<i class="plus icon"></i>
</button>
<br>
<br>
<h3 class="ui dividing header">Identifers</h3>
<br>
{{ edit_macros.form_field_inline(form.doi) }}
{{ edit_macros.form_field_inline(form.wikidata_qid) }}
{{ edit_macros.form_field_inline(form.isbn13) }}
<div class="ui grid">
<div class="three wide column" style="padding-bottom: 0px;"></div>
<div class="twelve wide column" style="padding-bottom: 0px;">
<div class="ui equal width fields">
{{ edit_macros.form_field_basic(form.pmid) }}
{{ edit_macros.form_field_basic(form.pmcid) }}
</div>
</div>
<div class="one wide column" style="padding-bottom: 0px;"></div>
</div>
<br>
<h3 class="ui dividing header">Container</h3>
<br>
{{ edit_macros.form_field_inline(form.container_id) }}
{{ edit_macros.form_field_inline(form.publisher) }}
<br>
<div class="ui grid">
<div class="three wide column" style="padding-bottom: 0px;"></div>
<div class="twelve wide column" style="padding-bottom: 0px;">
<div class="ui equal width fields">
{{ edit_macros.form_field_basic(form.pages) }}
{{ edit_macros.form_field_basic(form.volume) }}
{{ edit_macros.form_field_basic(form.issue) }}
</div>
</div>
<div class="one wide column" style="padding-bottom: 0px;"></div>
</div>
<br><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 Release!">
<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() {
// these javascript dropdowns hide the original <input>, which breaks browser
// form focusing (eg, for required fields) :(
//$('#release_type').dropdown();
//$('#release_stage').dropdown();
$('.ui.dropdown') .dropdown();
var fixup_contrib_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];
prev_el = item_el.querySelectorAll("input")[0];
input_el = item_el.querySelectorAll("input")[1];
select_el = item_el.querySelectorAll("select")[0];
//console.log(input_el.id);
//console.log(select_el.id);
input_el.id = "contribs-" + i + "-raw_name";
input_el.name = input_el.id;
prev_el.id = "contribs-" + i + "-prev_index";
prev_el.name = prev_el.id;
select_el.id = "contribs-" + i + "-role";
select_el.name = select_el.id;
//console.log(input_el.id);
//console.log(select_el.id);
};
console.log("re-named contrib rows up to i=" + i);
};
var contrib_list = document.getElementById('contrib_list');
var contrib_sortable = Sortable.create(contrib_list, {
handle: '.sortable-handle',
animation: 150,
onSort: function(evt) {
fixup_contrib_numbering(contrib_list);
},
});
fixup_contrib_numbering(contrib_list);
var contrib_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_contrib_numbering(contrib_list);
};
var attach_contrib_delete_handler = function(topthing) {
Array.from(topthing.querySelectorAll(".delete-contrib-button")).forEach((el) => {
el.addEventListener("click", contrib_delete_handler);
});
};
attach_contrib_delete_handler(document);
// XXX: really need some way to not duplicate this code from above...
var contrib_template = `
<div class="list-group-item ui grid" style="padding-right: 1em;">
<input id="contribs-X-prev_index" name="contribs-X-prev_index" type="hidden" value="">
<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="three wide column" style="padding-bottom: 0px; padding-left: 0px;">
<select id="contribs-X-role" name="contribs-X-role"><option value="author">Author</option><option value="editor">Editor</option><option value="translator">Translator</option></select>
</div>
<div class="eleven wide column" style="padding-bottom: 0px;">
<input id="contribs-X-raw_name" name="contribs-X-raw_name" 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-contrib-button"><i class="trash icon"></i></button>
</div>
</div>
`;
var add_contrib_button = document.getElementById("add-contrib-button");
add_contrib_button.addEventListener("click", function(){
contrib_list.insertAdjacentHTML('beforeend', contrib_template);
attach_contrib_delete_handler(contrib_list.lastElementChild);
fixup_contrib_numbering(contrib_list);
});
console.log("Page loaded");
});
</script>
{% endblock %}
|
