@@ -74,11 +74,11 @@ export function initRepoCommentForm() {
7474 }
7575
7676 if ( editMode === 'true' ) {
77- const $ form = $ ( '# update_issueref_form') ;
77+ const form = document . getElementById ( ' update_issueref_form') ;
7878 const params = new URLSearchParams ( ) ;
7979 params . append ( 'ref' , selectedValue ) ;
8080 try {
81- await POST ( $ form. attr ( 'action' ) , { data : params } ) ;
81+ await POST ( form . getAttribute ( 'action' ) , { data : params } ) ;
8282 window . location . reload ( ) ;
8383 } catch ( error ) {
8484 console . error ( error ) ;
@@ -138,12 +138,12 @@ export function initRepoCommentForm() {
138138 hasUpdateAction = $listMenu . data ( 'action' ) === 'update' ; // Update the var
139139
140140 const clickedItem = this ; // eslint-disable-line unicorn/no-this-assignment
141- const scope = $ ( this ) . attr ( 'data-scope' ) ;
141+ const scope = this . getAttribute ( 'data-scope' ) ;
142142
143143 $ ( this ) . parent ( ) . find ( '.item' ) . each ( function ( ) {
144144 if ( scope ) {
145145 // Enable only clicked item for scoped labels
146- if ( $ ( this ) . attr ( 'data-scope' ) !== scope ) {
146+ if ( this . getAttribute ( 'data-scope' ) !== scope ) {
147147 return true ;
148148 }
149149 if ( this !== clickedItem && ! $ ( this ) . hasClass ( 'checked' ) ) {
@@ -319,29 +319,32 @@ export function initRepoCommentForm() {
319319async function onEditContent ( event ) {
320320 event . preventDefault ( ) ;
321321
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' ) ;
326326
327327 let comboMarkdownEditor ;
328328
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 ;
331334
332335 let disableRemovedfileEvent = false ; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
333336 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' ) ,
336339 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' ) ,
340343 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' ) ,
345348 timeout : 0 ,
346349 thumbnailMethod : 'contain' ,
347350 thumbnailWidth : 480 ,
@@ -350,46 +353,54 @@ async function onEditContent(event) {
350353 this . on ( 'success' , ( file , data ) => {
351354 file . uuid = data . uuid ;
352355 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 ) ;
355362 } ) ;
356363 this . on ( 'removedfile' , async ( file ) => {
357364 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 ) {
360367 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 } ) } ) ;
362369 } catch ( error ) {
363370 console . error ( error ) ;
364371 }
365372 }
366373 } ) ;
367374 this . on ( 'submit' , ( ) => {
368- $ . each ( fileUuidDict , ( fileUuid ) => {
375+ for ( const fileUuid of Object . keys ( fileUuidDict ) ) {
369376 fileUuidDict [ fileUuid ] . submitted = true ;
370- } ) ;
377+ }
371378 } ) ;
372379 this . on ( 'reload' , async ( ) => {
373380 try {
374- const response = await GET ( $ editContentZone. attr ( 'data-attachment-url' ) ) ;
381+ const response = await GET ( editContentZone . getAttribute ( 'data-attachment-url' ) ) ;
375382 const data = await response . json ( ) ;
376383 // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
377384 disableRemovedfileEvent = true ;
378385 dz . removeAllFiles ( true ) ;
379- $ dropzone. find ( '.files' ) . empty ( ) ;
386+ dropzone . querySelector ( '.files' ) . innerHTML = '' ;
380387 fileUuidDict = { } ;
381388 disableRemovedfileEvent = false ;
382389
383390 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 } ` ;
385392 dz . emit ( 'addedfile' , attachment ) ;
386393 dz . emit ( 'thumbnail' , attachment , imgSrc ) ;
387394 dz . emit ( 'complete' , attachment ) ;
388395 dz . files . push ( attachment ) ;
389396 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 ) ;
393404 }
394405 } catch ( error ) {
395406 console . error ( error ) ;
@@ -402,44 +413,44 @@ async function onEditContent(event) {
402413 } ;
403414
404415 const cancelAndReset = ( dz ) => {
405- showElem ( $ renderContent) ;
406- hideElem ( $ editContentZone) ;
416+ showElem ( renderContent ) ;
417+ hideElem ( editContentZone ) ;
407418 if ( dz ) {
408419 dz . emit ( 'reload' ) ;
409420 }
410421 } ;
411422
412423 const saveAndRefresh = async ( dz ) => {
413- showElem ( $ renderContent) ;
414- hideElem ( $ editContentZone) ;
424+ showElem ( renderContent ) ;
425+ hideElem ( editContentZone ) ;
415426
416427 try {
417428 const params = new URLSearchParams ( {
418429 content : comboMarkdownEditor . value ( ) ,
419- context : $ editContentZone. attr ( 'data-context' ) ,
430+ context : editContentZone . getAttribute ( 'data-context' ) ,
420431 } ) ;
421432 for ( const file of dz . files ) params . append ( 'files[]' , file . uuid ) ;
422433
423- const response = await POST ( $ editContentZone. attr ( 'data-update-url' ) , { data : params } ) ;
434+ const response = await POST ( editContentZone . getAttribute ( 'data-update-url' ) , { data : params } ) ;
424435 const data = await response . json ( ) ;
425436 if ( ! data . content ) {
426- $ renderContent. html ( $ ( '# no-content') . html ( ) ) ;
427- $ rawContent. text ( '' ) ;
437+ renderContent . innerHTML = document . getElementById ( ' no-content') . innerHTML ;
438+ rawContent . textContent = '' ;
428439 } 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 ) ;
433444 }
434- const $ content = $ segment;
435- if ( ! $ content. find ( '.dropzone-attachments' ) . length ) {
445+ const content = segment ;
446+ if ( ! content . querySelector ( '.dropzone-attachments' ) ) {
436447 if ( data . attachments !== '' ) {
437- $ content[ 0 ] . insertAdjacentHTML ( 'beforeend' , data . attachments ) ;
448+ content . insertAdjacentHTML ( 'beforeend' , data . attachments ) ;
438449 }
439450 } else if ( data . attachments === '' ) {
440- $ content. find ( '.dropzone-attachments' ) . remove ( ) ;
451+ content . querySelector ( '.dropzone-attachments' ) . remove ( ) ;
441452 } else {
442- $ content. find ( '.dropzone-attachments' ) [ 0 ] . outerHTML = data . attachments ;
453+ content . querySelector ( '.dropzone-attachments' ) . outerHTML = data . attachments ;
443454 }
444455 if ( dz ) {
445456 dz . emit ( 'submit' ) ;
@@ -452,29 +463,29 @@ async function onEditContent(event) {
452463 }
453464 } ;
454465
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' ) ) ;
458469
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 ) => {
462473 e . preventDefault ( ) ;
463474 cancelAndReset ( dz ) ;
464475 } ) ;
465- $ editContentZone. find ( '.save.button' ) . on ( 'click' , ( e ) => {
476+ editContentZone . querySelector ( '.save.button' ) . addEventListener ( 'click' , ( e ) => {
466477 e . preventDefault ( ) ;
467478 saveAndRefresh ( dz ) ;
468479 } ) ;
469480 } else {
470- comboMarkdownEditor = getComboMarkdownEditor ( $ editContentZone. find ( '.combo-markdown-editor' ) ) ;
481+ comboMarkdownEditor = getComboMarkdownEditor ( editContentZone . querySelector ( '.combo-markdown-editor' ) ) ;
471482 }
472483
473484 // Show write/preview tab and copy raw content as needed
474- showElem ( $ editContentZone) ;
475- hideElem ( $ renderContent) ;
485+ showElem ( editContentZone ) ;
486+ hideElem ( renderContent ) ;
476487 if ( ! comboMarkdownEditor . value ( ) ) {
477- comboMarkdownEditor . value ( $ rawContent. text ( ) ) ;
488+ comboMarkdownEditor . value ( rawContent . textContent ) ;
478489 }
479490 comboMarkdownEditor . focus ( ) ;
480491}
0 commit comments