From 060988aafa353d77ddea6a4f52b08b101c979f3f Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Wed, 24 Jul 2024 15:34:26 +0200 Subject: [PATCH 1/3] Fix selector, remove jQuery --- .../js/user-notes-voting.js | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js index f3d59fa6e..02fd0c4a0 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js @@ -1,32 +1,42 @@ /** * Dynamic functionality for voting on user submitted notes. * + * @param {Object} wp The WordPress JavaScript object. */ -( function( $, wp ) { - $( '#comments' ).on( 'click', 'a.user-note-voting-up, a.user-note-voting-down', function( event ) { - event.preventDefault(); - - var $item = $( this ), - comment = $item.closest( '.comment' ); - - $.post( - wporg_note_voting.ajaxurl, - { - action: 'note_vote', - comment: $item.attr( 'data-id' ), - vote: $item.attr( 'data-vote' ), - _wpnonce: $item.parent().attr( 'data-nonce' ) - }, - function( data ) { - if ( '0' !== data ) { - $item.closest( '.user-note-voting' ).replaceWith( data ); - wp.a11y.speak( $( '.user-note-voting-count', comment ).text() ); +( function ( wp ) { + document.addEventListener( 'DOMContentLoaded', function () { + document.querySelectorAll( 'a[data-vote]' ).forEach( ( element ) => { + element.addEventListener( 'click', function ( event ) { + // Bail if the AJAX URL is not defined. + if ( typeof wporg_note_voting === 'undefined' ) { + return; } - }, - 'text' - ); + const target = event.target; + event.preventDefault(); + const comment = target.closest( '.comment' ); + + const params = new URLSearchParams(); + params.append( 'action', 'note_vote' ); + params.append( 'comment', target.getAttribute( 'data-id' ) ); + params.append( 'vote', target.getAttribute( 'data-vote' ) ); + params.append( '_wpnonce', target.parentNode.getAttribute( 'data-nonce' ) ); - return false; + fetch( wporg_note_voting.ajaxurl, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: params, + } ) + .then( ( response ) => response.text() ) + .then( ( data ) => { + if ( '0' !== data ) { + target.closest( '.user-note-voting' ).outerHTML = data; + wp.a11y.speak( comment.querySelector( '.user-note-voting-count' ).textContent ); + } + } ); + } ); + } ); } ); -} )( window.jQuery, window.wp ); +} )( window.wp ); From ad78d4322a899fcf82f21a3424f18367266c3303 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Fri, 26 Jul 2024 14:18:32 +0200 Subject: [PATCH 2/3] Refactor --- .../js/user-notes-voting.js | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js index 02fd0c4a0..94502b342 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js @@ -1,26 +1,23 @@ /** * Dynamic functionality for voting on user submitted notes. * - * @param {Object} wp The WordPress JavaScript object. + * @param {Object} windowWP The WordPress JavaScript object. */ -( function ( wp ) { +( function ( windowWP ) { document.addEventListener( 'DOMContentLoaded', function () { - document.querySelectorAll( 'a[data-vote]' ).forEach( ( element ) => { - element.addEventListener( 'click', function ( event ) { - // Bail if the AJAX URL is not defined. - if ( typeof wporg_note_voting === 'undefined' ) { - return; - } - const target = event.target; + document.querySelector( '.comment-list' ).addEventListener( 'click', function ( event ) { + if ( event.target.matches( 'a.user-note-voting-up, a.user-note-voting-down' ) ) { event.preventDefault(); - const comment = target.closest( '.comment' ); + + const item = event.target; + const comment = item.closest( '.comment' ); const params = new URLSearchParams(); params.append( 'action', 'note_vote' ); - params.append( 'comment', target.getAttribute( 'data-id' ) ); - params.append( 'vote', target.getAttribute( 'data-vote' ) ); - params.append( '_wpnonce', target.parentNode.getAttribute( 'data-nonce' ) ); + params.append( 'comment', item.getAttribute( 'data-id' ) ); + params.append( 'vote', item.getAttribute( 'data-vote' ) ); + params.append( '_wpnonce', item.parentNode.getAttribute( 'data-nonce' ) ); fetch( wporg_note_voting.ajaxurl, { method: 'POST', @@ -31,12 +28,14 @@ } ) .then( ( response ) => response.text() ) .then( ( data ) => { - if ( '0' !== data ) { - target.closest( '.user-note-voting' ).outerHTML = data; - wp.a11y.speak( comment.querySelector( '.user-note-voting-count' ).textContent ); + if ( data !== '0' ) { + item.closest( '.user-note-voting' ).outerHTML = data; + windowWP.a11y.speak( comment.querySelector( '.user-note-voting-count' ).textContent ); } } ); - } ); + + return false; + } } ); } ); } )( window.wp ); From b98015f19ab8512fde559ea820f182515dcb0747 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Fri, 26 Jul 2024 14:19:38 +0200 Subject: [PATCH 3/3] Ignore linting to keep consistency --- .../themes/wporg-developer-2023/js/user-notes-voting.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js index 94502b342..96491642f 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-voting.js @@ -1,10 +1,10 @@ /** * Dynamic functionality for voting on user submitted notes. * - * @param {Object} windowWP The WordPress JavaScript object. + * @param {Object} wp The WordPress JavaScript object. */ -( function ( windowWP ) { +( function ( wp ) { document.addEventListener( 'DOMContentLoaded', function () { document.querySelector( '.comment-list' ).addEventListener( 'click', function ( event ) { if ( event.target.matches( 'a.user-note-voting-up, a.user-note-voting-down' ) ) { @@ -30,7 +30,7 @@ .then( ( data ) => { if ( data !== '0' ) { item.closest( '.user-note-voting' ).outerHTML = data; - windowWP.a11y.speak( comment.querySelector( '.user-note-voting-count' ).textContent ); + wp.a11y.speak( comment.querySelector( '.user-note-voting-count' ).textContent ); } } );