Mercurial > p > roundup > code

comparison website/issues/html/issue.item.html @ 6474:a2c340261290

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add button to clear file input. also add spacing between file inputs and descriptions to make the alignment more obvious. The display breaks when zooming in. The clear button and input get put on separate lines. Not sure what's causing the reflow.
author John Rouillard <rouilj@ieee.org>
date Sat, 28 Aug 2021 13:15:04 -0400
parents 83b67f65b8ff
children 10a8a6bc4667
comparison
equal deleted inserted replaced
6473:7655dae061b8 6474:a2c340261290
160 <td> 160 <td>
161 <input type="hidden" name="@link@files" value="file-1"> 161 <input type="hidden" name="@link@files" value="file-1">
162 <input type="file" id="file-1@content" name="file-1@content" size="40"> 162 <input type="file" id="file-1@content" name="file-1@content" size="40">
163 </td> 163 </td>
164 <th><label for="file-1@description" i18n:translate="">File Description</label>:</th> 164 <th><label for="file-1@description" i18n:translate="">File Description</label>:</th>
165 <td colspan=3><input type="edit" id="file-1@description" name="file-1@description" size="40"></td> 165 <td colspan=3><input type="edit" class="fileDesc" id="file-1@description" name="file-1@description" size="40"></td>
166 </tr> 166 </tr>
167 <tr tal:condition="context/is_edit_ok"> 167 <tr tal:condition="context/is_edit_ok">
168 <td colspan=4> 168 <td colspan=4>
169 <textarea readonly id="DropZone"> 169 <textarea readonly id="DropZone">
170 paste images or drag and drop files here.... 170 paste images or drag and drop files here....
220 target.style.display = "block"; 220 target.style.display = "block";
221 let body = document.body; 221 let body = document.body;
222 let fileInput = document.getElementById('file-1@content'); 222 let fileInput = document.getElementById('file-1@content');
223 let fileDesc = document.getElementById('file-1@description'); 223 let fileDesc = document.getElementById('file-1@description');
224 224
225 function make_clear_fileInput_closure(input) {
226 return function(ev) { input.value = "";
227 ev.preventDefault();}
228 }
229
230
231 function make_new_clear_button() {
232 newClearInput=document.createElement('button');
233 newClearInput.textContent = "X";
234 newClearInput.setAttribute("aria-label",
235 "Clear next file input.");
236 newClearInput.setAttribute("title",
237 "Clear next file input.");
238 newClearInput.classList.add("clearButton");
239 return newClearInput;
240 }
241
242 function make_new_file_input() {
243 newInput=document.createElement('input');
244 newInput.type="file";
245 newInput.id="file-" + NextInputNum +"@content";
246 newInput.name=newInput.id;
247 return newInput;
248 }
249
225 function add_file_input () { 250 function add_file_input () {
226
227 // Only allow one change listener on newest input. 251 // Only allow one change listener on newest input.
228 fileInput.removeEventListener('change', 252 fileInput.removeEventListener('change',
229 add_file_input, 253 add_file_input,
230 false); 254 false);
255 newClearInput = fileInput.insertAdjacentElement(
256 'beforebegin',
257 make_new_clear_button());
258
259 // add change handler to file clear button
260 newClearInput.addEventListener('click',
261 make_clear_fileInput_closure(fileInput),
262 false);
263
264 /* Insert break so next input is on new line */
265 br = fileInput.insertAdjacentElement('afterend',
266 document.createElement('br'));
231 267
232 /* create new file input to get next dragged file */ 268 /* create new file input to get next dragged file */
233 /* <input type="file" name="file-2@content"> for 2, 269 /* <input type="file" name="file-2@content"> for 2,
234 3, 4, ... */ 270 3, 4, ... */
235 newInput=document.createElement('input'); 271 fileInput = br.insertAdjacentElement('afterend',
236 newInput.type="file"; 272 make_new_file_input());
237 newInput.id="file-" + NextInputNum +"@content"; 273
238 newInput.name=newInput.id;
239 fileInput = fileInput.insertAdjacentElement('afterend',
240 newInput);
241 // add change hander to newest file input 274 // add change hander to newest file input
242 fileInput.addEventListener('change', 275 fileInput.addEventListener('change',
243 add_file_input, // create new input for more files 276 add_file_input, // create new input for more files
244 false); 277 false);
245 278
257 addLink.id="msg-1@link@files=file-" + NextInputNum; 290 addLink.id="msg-1@link@files=file-" + NextInputNum;
258 addLink.name="msg-1@link@files" 291 addLink.name="msg-1@link@files"
259 addLink.value="file-" + NextInputNum 292 addLink.value="file-" + NextInputNum
260 fileInput.insertAdjacentElement('afterend', addLink); 293 fileInput.insertAdjacentElement('afterend', addLink);
261 294
262 addLink=document.createElement('input'); 295 /* break line before description field to prevent
263 addLink.type="edit"; 296 wrapping multiple descriptions onto one line when
264 addLink.id="file-" + NextInputNum + "@description"; 297 zoomed out or large display.*/
265 addLink.name=addLink.id 298 br = fileDesc.insertAdjacentElement('afterend',
266 addLink.size = 40 299 document.createElement('br'));
267 fileDesc=fileDesc.insertAdjacentElement('afterend', addLink); 300 fileDesc=document.createElement('input');
301 fileDesc.type="edit";
302 fileDesc.id="file-" + NextInputNum + "@description";
303 fileDesc.name=fileDesc.id
304 fileDesc.size = 40
305 fileDesc.classList.add("fileDesc");
306 fileDesc=br.insertAdjacentElement('afterend', fileDesc);
268 307
269 NextInputNum = NextInputNum+1; 308 NextInputNum = NextInputNum+1;
270
271 } 309 }
272 310
273 function MarkDropZone(e, active) { 311 function MarkDropZone(e, active) {
274 active == true ? e.style.backgroundColor = "goldenrod" : 312 active == true ? e.style.backgroundColor = "goldenrod" :
275 e.style.backgroundColor = ""; 313 e.style.backgroundColor = "";
363 // do not paste contents to dropzone 401 // do not paste contents to dropzone
364 event.preventDefault(); 402 event.preventDefault();
365 }, false); 403 }, false);
366 </script> 404 </script>
367 <style tal:attributes="nonce request/client/client_nonce"> 405 <style tal:attributes="nonce request/client/client_nonce">
368 #FileArea input[type=file] ~ input[type=file] {display:block;} 406 #FileArea button.clearButton ~ input[type=file] {display:inline-block;}
369 #DropZone { /* don't display dropzone by default. 407 #DropZone { /* don't display dropzone by default.
370 Displayed as block by javascript. */ 408 Displayed as block by javascript. */
371 display:none; 409 display:none;
372 width: 100%; 410 width: 100%;
373 /* override textarea inset */ 411 /* override textarea inset */
376 /* add space below inputs */ 414 /* add space below inputs */
377 margin-block-start: 1em; 415 margin-block-start: 1em;
378 /* lighter color */ 416 /* lighter color */
379 background: rgba(255,255,255,0.4); 417 background: rgba(255,255,255,0.4);
380 } 418 }
419 button.clearButton, input.fileDesc {margin-block-end: 0.5em}
381 </style> 420 </style>
382 421
383 <p tal:condition="context/id" i18n:translate=""> 422 <p tal:condition="context/id" i18n:translate="">
384 Created on <b><tal:x replace="python:context.creation.pretty('%Y-%m-%d %H:%M')" i18n:name="creation" /></b> 423 Created on <b><tal:x replace="python:context.creation.pretty('%Y-%m-%d %H:%M')" i18n:name="creation" /></b>
385 by <b><tal:x replace="context/creator" i18n:name="creator" /></b>, 424 by <b><tal:x replace="context/creator" i18n:name="creator" /></b>,
Roundup Issue Tracker: http://roundup-tracker.org/