@@ -74,11 +74,11 @@ export function initRepoCommentForm() {
74
74
}
75
75
76
76
if ( editMode === 'true' ) {
77
- const $ form = $ ( '# update_issueref_form') ;
77
+ const form = document . getElementById ( ' update_issueref_form') ;
78
78
const params = new URLSearchParams ( ) ;
79
79
params . append ( 'ref' , selectedValue ) ;
80
80
try {
81
- await POST ( $ form. attr ( 'action' ) , { data : params } ) ;
81
+ await POST ( form . getAttribute ( 'action' ) , { data : params } ) ;
82
82
window . location . reload ( ) ;
83
83
} catch ( error ) {
84
84
console . error ( error ) ;
@@ -138,12 +138,12 @@ export function initRepoCommentForm() {
138
138
hasUpdateAction = $listMenu . data ( 'action' ) === 'update' ; // Update the var
139
139
140
140
const clickedItem = this ; // eslint-disable-line unicorn/no-this-assignment
141
- const scope = $ ( this ) . attr ( 'data-scope' ) ;
141
+ const scope = this . getAttribute ( 'data-scope' ) ;
142
142
143
143
$ ( this ) . parent ( ) . find ( '.item' ) . each ( function ( ) {
144
144
if ( scope ) {
145
145
// Enable only clicked item for scoped labels
146
- if ( $ ( this ) . attr ( 'data-scope' ) !== scope ) {
146
+ if ( this . getAttribute ( 'data-scope' ) !== scope ) {
147
147
return true ;
148
148
}
149
149
if ( this !== clickedItem && ! $ ( this ) . hasClass ( 'checked' ) ) {
@@ -319,29 +319,32 @@ export function initRepoCommentForm() {
319
319
async function onEditContent ( event ) {
320
320
event . preventDefault ( ) ;
321
321
322
- const $ segment = $ ( this ) . closest ( '.header' ) . next ( ) ;
323
- const $ editContentZone = $ segment. find ( '.edit-content-zone' ) ;
324
- const $ renderContent = $ segment. find ( '.render-content' ) ;
325
- const $ rawContent = $ segment. find ( '.raw-content' ) ;
322
+ const segment = this . closest ( '.header' ) . nextElementSibling ;
323
+ const editContentZone = segment . querySelector ( '.edit-content-zone' ) ;
324
+ const renderContent = segment . querySelector ( '.render-content' ) ;
325
+ const rawContent = segment . querySelector ( '.raw-content' ) ;
326
326
327
327
let comboMarkdownEditor ;
328
328
329
- const setupDropzone = async ( $dropzone ) => {
330
- if ( ! $dropzone . length ) return null ;
329
+ /**
330
+ * @param {HTMLElement } dropzone
331
+ */
332
+ const setupDropzone = async ( dropzone ) => {
333
+ if ( ! dropzone ) return null ;
331
334
332
335
let disableRemovedfileEvent = false ; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
333
336
let fileUuidDict = { } ; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
334
- const dz = await createDropzone ( $ dropzone[ 0 ] , {
335
- url : $ dropzone. attr ( 'data-upload-url' ) ,
337
+ const dz = await createDropzone ( dropzone , {
338
+ url : dropzone . getAttribute ( 'data-upload-url' ) ,
336
339
headers : { 'X-Csrf-Token' : csrfToken } ,
337
- maxFiles : $ dropzone. attr ( 'data-max-file' ) ,
338
- maxFilesize : $ dropzone. attr ( 'data-max-size' ) ,
339
- acceptedFiles : ( [ '*/*' , '' ] . includes ( $ dropzone. attr ( 'data-accepts' ) ) ) ? null : $ dropzone. attr ( 'data-accepts' ) ,
340
+ maxFiles : dropzone . getAttribute ( 'data-max-file' ) ,
341
+ maxFilesize : dropzone . getAttribute ( 'data-max-size' ) ,
342
+ acceptedFiles : [ '*/*' , '' ] . includes ( dropzone . getAttribute ( 'data-accepts' ) ) ? null : dropzone . getAttribute ( 'data-accepts' ) ,
340
343
addRemoveLinks : true ,
341
- dictDefaultMessage : $ dropzone. attr ( 'data-default-message' ) ,
342
- dictInvalidFileType : $ dropzone. attr ( 'data-invalid-input-type' ) ,
343
- dictFileTooBig : $ dropzone. attr ( 'data-file-too-big' ) ,
344
- dictRemoveFile : $ dropzone. attr ( 'data-remove-file' ) ,
344
+ dictDefaultMessage : dropzone . getAttribute ( 'data-default-message' ) ,
345
+ dictInvalidFileType : dropzone . getAttribute ( 'data-invalid-input-type' ) ,
346
+ dictFileTooBig : dropzone . getAttribute ( 'data-file-too-big' ) ,
347
+ dictRemoveFile : dropzone . getAttribute ( 'data-remove-file' ) ,
345
348
timeout : 0 ,
346
349
thumbnailMethod : 'contain' ,
347
350
thumbnailWidth : 480 ,
@@ -350,46 +353,54 @@ async function onEditContent(event) {
350
353
this . on ( 'success' , ( file , data ) => {
351
354
file . uuid = data . uuid ;
352
355
fileUuidDict [ file . uuid ] = { submitted : false } ;
353
- const $input = $ ( `<input id="${ data . uuid } " name="files" type="hidden">` ) . val ( data . uuid ) ;
354
- $dropzone . find ( '.files' ) . append ( $input ) ;
356
+ const input = document . createElement ( 'input' ) ;
357
+ input . id = data . uuid ;
358
+ input . name = 'files' ;
359
+ input . type = 'hidden' ;
360
+ input . value = data . uuid ;
361
+ dropzone . querySelector ( '.files' ) . insertAdjacentHTML ( 'beforeend' , input . outerHTML ) ;
355
362
} ) ;
356
363
this . on ( 'removedfile' , async ( file ) => {
357
364
if ( disableRemovedfileEvent ) return ;
358
- $ ( `# ${ file . uuid } ` ) . remove ( ) ;
359
- if ( $ dropzone. attr ( 'data-remove-url' ) && ! fileUuidDict [ file . uuid ] . submitted ) {
365
+ document . getElementById ( file . uuid ) ? .remove ( ) ;
366
+ if ( dropzone . getAttribute ( 'data-remove-url' ) && ! fileUuidDict [ file . uuid ] . submitted ) {
360
367
try {
361
- await POST ( $ dropzone. attr ( 'data-remove-url' ) , { data : new URLSearchParams ( { file : file . uuid } ) } ) ;
368
+ await POST ( dropzone . getAttribute ( 'data-remove-url' ) , { data : new URLSearchParams ( { file : file . uuid } ) } ) ;
362
369
} catch ( error ) {
363
370
console . error ( error ) ;
364
371
}
365
372
}
366
373
} ) ;
367
374
this . on ( 'submit' , ( ) => {
368
- $ . each ( fileUuidDict , ( fileUuid ) => {
375
+ for ( const fileUuid of Object . keys ( fileUuidDict ) ) {
369
376
fileUuidDict [ fileUuid ] . submitted = true ;
370
- } ) ;
377
+ }
371
378
} ) ;
372
379
this . on ( 'reload' , async ( ) => {
373
380
try {
374
- const response = await GET ( $ editContentZone. attr ( 'data-attachment-url' ) ) ;
381
+ const response = await GET ( editContentZone . getAttribute ( 'data-attachment-url' ) ) ;
375
382
const data = await response . json ( ) ;
376
383
// do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
377
384
disableRemovedfileEvent = true ;
378
385
dz . removeAllFiles ( true ) ;
379
- $ dropzone. find ( '.files' ) . empty ( ) ;
386
+ dropzone . querySelector ( '.files' ) . innerHTML = '' ;
380
387
fileUuidDict = { } ;
381
388
disableRemovedfileEvent = false ;
382
389
383
390
for ( const attachment of data ) {
384
- const imgSrc = `${ $ dropzone. attr ( 'data-link-url' ) } /${ attachment . uuid } ` ;
391
+ const imgSrc = `${ dropzone . getAttribute ( 'data-link-url' ) } /${ attachment . uuid } ` ;
385
392
dz . emit ( 'addedfile' , attachment ) ;
386
393
dz . emit ( 'thumbnail' , attachment , imgSrc ) ;
387
394
dz . emit ( 'complete' , attachment ) ;
388
395
dz . files . push ( attachment ) ;
389
396
fileUuidDict [ attachment . uuid ] = { submitted : true } ;
390
- $dropzone . find ( `img[src='${ imgSrc } ']` ) [ 0 ] . style . maxWidth = '100%' ;
391
- const $input = $ ( `<input id="${ attachment . uuid } " name="files" type="hidden">` ) . val ( attachment . uuid ) ;
392
- $dropzone . find ( '.files' ) . append ( $input ) ;
397
+ dropzone . querySelector ( `img[src='${ imgSrc } ']` ) . style . maxWidth = '100%' ;
398
+ const input = document . createElement ( 'input' ) ;
399
+ input . id = attachment . uuid ;
400
+ input . name = 'files' ;
401
+ input . type = 'hidden' ;
402
+ input . value = attachment . uuid ;
403
+ dropzone . querySelector ( '.files' ) . insertAdjacentHTML ( 'beforeend' , input . outerHTML ) ;
393
404
}
394
405
} catch ( error ) {
395
406
console . error ( error ) ;
@@ -402,44 +413,44 @@ async function onEditContent(event) {
402
413
} ;
403
414
404
415
const cancelAndReset = ( dz ) => {
405
- showElem ( $ renderContent) ;
406
- hideElem ( $ editContentZone) ;
416
+ showElem ( renderContent ) ;
417
+ hideElem ( editContentZone ) ;
407
418
if ( dz ) {
408
419
dz . emit ( 'reload' ) ;
409
420
}
410
421
} ;
411
422
412
423
const saveAndRefresh = async ( dz ) => {
413
- showElem ( $ renderContent) ;
414
- hideElem ( $ editContentZone) ;
424
+ showElem ( renderContent ) ;
425
+ hideElem ( editContentZone ) ;
415
426
416
427
try {
417
428
const params = new URLSearchParams ( {
418
429
content : comboMarkdownEditor . value ( ) ,
419
- context : $ editContentZone. attr ( 'data-context' ) ,
430
+ context : editContentZone . getAttribute ( 'data-context' ) ,
420
431
} ) ;
421
432
for ( const file of dz . files ) params . append ( 'files[]' , file . uuid ) ;
422
433
423
- const response = await POST ( $ editContentZone. attr ( 'data-update-url' ) , { data : params } ) ;
434
+ const response = await POST ( editContentZone . getAttribute ( 'data-update-url' ) , { data : params } ) ;
424
435
const data = await response . json ( ) ;
425
436
if ( ! data . content ) {
426
- $ renderContent. html ( $ ( '# no-content') . html ( ) ) ;
427
- $ rawContent. text ( '' ) ;
437
+ renderContent . innerHTML = document . getElementById ( ' no-content') . innerHTML ;
438
+ rawContent . textContent = '' ;
428
439
} else {
429
- $ renderContent. html ( data . content ) ;
430
- $ rawContent. text ( comboMarkdownEditor . value ( ) ) ;
431
- const $ refIssues = $ renderContent. find ( 'p .ref-issue' ) ;
432
- attachRefIssueContextPopup ( $ refIssues) ;
440
+ renderContent . innerHTML = data . content ;
441
+ rawContent . textContent = comboMarkdownEditor . value ( ) ;
442
+ const refIssues = renderContent . querySelectorAll ( 'p .ref-issue' ) ;
443
+ attachRefIssueContextPopup ( refIssues ) ;
433
444
}
434
- const $ content = $ segment;
435
- if ( ! $ content. find ( '.dropzone-attachments' ) . length ) {
445
+ const content = segment ;
446
+ if ( ! content . querySelector ( '.dropzone-attachments' ) ) {
436
447
if ( data . attachments !== '' ) {
437
- $ content[ 0 ] . insertAdjacentHTML ( 'beforeend' , data . attachments ) ;
448
+ content . insertAdjacentHTML ( 'beforeend' , data . attachments ) ;
438
449
}
439
450
} else if ( data . attachments === '' ) {
440
- $ content. find ( '.dropzone-attachments' ) . remove ( ) ;
451
+ content . querySelector ( '.dropzone-attachments' ) . remove ( ) ;
441
452
} else {
442
- $ content. find ( '.dropzone-attachments' ) [ 0 ] . outerHTML = data . attachments ;
453
+ content . querySelector ( '.dropzone-attachments' ) . outerHTML = data . attachments ;
443
454
}
444
455
if ( dz ) {
445
456
dz . emit ( 'submit' ) ;
@@ -452,29 +463,29 @@ async function onEditContent(event) {
452
463
}
453
464
} ;
454
465
455
- if ( ! $ editContentZone. html ( ) ) {
456
- $ editContentZone. html ( $ ( '# issue-comment-editor-template') . html ( ) ) ;
457
- comboMarkdownEditor = await initComboMarkdownEditor ( $ editContentZone. find ( '.combo-markdown-editor' ) ) ;
466
+ if ( ! editContentZone . innerHTML ) {
467
+ editContentZone . innerHTML = document . getElementById ( ' issue-comment-editor-template') . innerHTML ;
468
+ comboMarkdownEditor = await initComboMarkdownEditor ( editContentZone . querySelector ( '.combo-markdown-editor' ) ) ;
458
469
459
- const $ dropzone = $ editContentZone. find ( '.dropzone' ) ;
460
- const dz = await setupDropzone ( $ dropzone) ;
461
- $ editContentZone. find ( '.cancel.button' ) . on ( 'click' , ( e ) => {
470
+ const dropzone = editContentZone . querySelector ( '.dropzone' ) ;
471
+ const dz = await setupDropzone ( dropzone ) ;
472
+ editContentZone . querySelector ( '.cancel.button' ) . addEventListener ( 'click' , ( e ) => {
462
473
e . preventDefault ( ) ;
463
474
cancelAndReset ( dz ) ;
464
475
} ) ;
465
- $ editContentZone. find ( '.save.button' ) . on ( 'click' , ( e ) => {
476
+ editContentZone . querySelector ( '.save.button' ) . addEventListener ( 'click' , ( e ) => {
466
477
e . preventDefault ( ) ;
467
478
saveAndRefresh ( dz ) ;
468
479
} ) ;
469
480
} else {
470
- comboMarkdownEditor = getComboMarkdownEditor ( $ editContentZone. find ( '.combo-markdown-editor' ) ) ;
481
+ comboMarkdownEditor = getComboMarkdownEditor ( editContentZone . querySelector ( '.combo-markdown-editor' ) ) ;
471
482
}
472
483
473
484
// Show write/preview tab and copy raw content as needed
474
- showElem ( $ editContentZone) ;
475
- hideElem ( $ renderContent) ;
485
+ showElem ( editContentZone ) ;
486
+ hideElem ( renderContent ) ;
476
487
if ( ! comboMarkdownEditor . value ( ) ) {
477
- comboMarkdownEditor . value ( $ rawContent. text ( ) ) ;
488
+ comboMarkdownEditor . value ( rawContent . textContent ) ;
478
489
}
479
490
comboMarkdownEditor . focus ( ) ;
480
491
}
0 commit comments