From a9fed3c36bf8d1d49d965be7ad2998aad4733361 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Mon, 22 Jul 2024 18:06:16 +0200 Subject: [PATCH 1/5] Remove jQuery from user notes preview --- .../inc/user-content-preview.php | 2 +- .../js/user-notes-preview.js | 158 +++++++++--------- 2 files changed, 81 insertions(+), 79 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/inc/user-content-preview.php b/source/wp-content/themes/wporg-developer-2023/inc/user-content-preview.php index 95391726c..fea26aedf 100644 --- a/source/wp-content/themes/wporg-developer-2023/inc/user-content-preview.php +++ b/source/wp-content/themes/wporg-developer-2023/inc/user-content-preview.php @@ -46,7 +46,7 @@ public static function scripts_and_styles() { wp_enqueue_script( 'wporg-developer-preview', get_stylesheet_directory_uri() . '/js/user-notes-preview.js', - array( 'jquery', 'wporg-developer-function-reference', 'wporg-developer-tabs' ), + array( 'wporg-developer-function-reference', 'wporg-developer-tabs' ), filemtime( dirname( __DIR__ ) . '/js/user-notes-preview.js' ), true ); diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js index f2d819e82..88b1ca589 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js @@ -3,125 +3,127 @@ * */ -( function( $ ) { +( function( ) { - var textarea, tabContentHeight, text, preview, previewContent, tabs, processing, spinner; + let textarea, text, preview, previewContent, tabs, processing, spinner; function init() { - - if ( undefined === wporg_note_preview ) { + if (typeof wporg_note_preview === 'undefined') { return; } - - textarea = $( '.comment-form textarea' ); - preview = $( '#comment-preview' ); - tabs = $( '#commentform .tablist' ).find( 'a' ); - spinner = $( '' ); + + textarea = document.querySelector('.comment-form textarea'); + preview = document.querySelector('#comment-preview'); + tabs = document.querySelectorAll('#commentform .tablist a'); + spinner = document.createElement('span'); + spinner.className = 'spinner'; + spinner.style.display = 'none'; text = ''; processing = false; - - // Show tabs with Javascript. - $( '#commentform .tablist').show(); - - if ( textarea.length && preview.length && tabs.length ) { - + + // Show tabs with JavaScript. + document.querySelector('#commentform .tablist').style.display = 'flex'; + + if (textarea && preview && tabs.length > 0) { // Append spinner to preview tab - tabs.parents( 'li[role="presentation"]:last' ).append( spinner ); - - previewContent = $( '.preview-content', preview ); - - if ( previewContent.length ) { - - if ( !textarea.val().length ) { - previewContent.text( wporg_note_preview.preview_empty ); + tabs[tabs.length - 1].parentNode.appendChild(spinner); + + previewContent = preview.querySelector('.preview-content'); + + if (previewContent) { + if (!textarea.value.length) { + previewContent.textContent = wporg_note_preview.preview_empty; } - + previewEvents(); } } } function previewEvents() { - - tabs.on( "keydown.note_preview, click.note_preview", function( e ) { - + const commentFormComment = document.getElementById('comment-form-comment'); + const tabContentHeight = commentFormComment.offsetHeight; // outerHeight equivalent in vanilla JS + tabs.forEach(tab => { + tab.addEventListener('keydown', handlePreviewEvent); + tab.addEventListener('click', handlePreviewEvent); + }); + + function handlePreviewEvent(e) { // Preview tab should be at least as tall input tab to prevent resizing wonkiness. - tabContentHeight = $( '#comment-form-comment' ).outerHeight( false ); - - if ( 0 < tabContentHeight ) { - preview.css( 'min-height', tabContentHeight + 'px' ); + + if (tabContentHeight > 0) { + preview.style.minHeight = `${tabContentHeight}px`; } - - if ( 'comment-preview' === $( this ).attr( 'aria-controls' ) ) { - - if ( !processing ) { - current_text = $.trim( textarea.val() ); - if ( current_text.length && ( current_text !== wporg_note_preview.preview_empty ) ) { - if ( wporg_note_preview.preview_empty === previewContent.text() ) { + + if (this.getAttribute('aria-controls') === 'comment-preview') { + if (!processing) { + let current_text = textarea.value.trim(); + if (current_text.length && current_text !== wporg_note_preview.preview_empty) { + if (wporg_note_preview.preview_empty === previewContent.textContent) { // Remove "Nothing to preview" if there's new current text. - previewContent.text( '' ); + previewContent.textContent = ''; } // Update the preview. - updatePreview( current_text ); + updatePreview(current_text); } else { - previewContent.text( wporg_note_preview.preview_empty ); + previewContent.textContent = wporg_note_preview.preview_empty; } } - + // Remove outline from tab if clicked. - if ( "click" === e.type ) { - $( this ).blur(); + if (e.type === "click") { + this.blur(); } } else { textarea.focus(); } - } ); + } } - function updatePreview( content ) { - + function updatePreview(content) { // Don't update preview if nothing changed - if ( text == content ) { - spinner.hide(); + if (text === content) { + spinner.style.display = 'none'; // Hide spinner return; } - - spinner.show(); + + spinner.style.display = ''; // Show spinner text = content; processing = true; - - $.post( wporg_note_preview.ajaxurl, { - action: "preview_comment", - preview_nonce: wporg_note_preview.nonce, - preview_comment: content - } ) - - .done( function( response ) { - updatePreview_HTML( response.data.comment ); - } ) - - .fail( function( response ) { - //console.log( 'fail', response ); - } ) - - .always( function( response ) { - spinner.hide(); + + fetch(wporg_note_preview.ajaxurl, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `action=preview_comment&preview_nonce=${wporg_note_preview.nonce}&preview_comment=${encodeURIComponent(content)}` + }) + .then(response => response.json()) + .then(response => { + updatePreview_HTML(response.data.comment); + }) + .catch(error => { + console.error('Error:', error); + }) + .finally(() => { + spinner.style.display = 'none'; // Hide spinner processing = false; - + // Make first child of the preview focusable - preview.children().first().attr( { - 'tabindex': '0' - } ); - } ); + if (preview.firstChild) { + preview.firstChild.setAttribute('tabindex', '0'); + } + }); } - function updatePreview_HTML( content ) { + function updatePreview_HTML(content) { // Update preview content - previewContent.html( content ); - - spinner.hide(); + previewContent.innerHTML = content; + + // Hide spinner + spinner.style.display = 'none'; } init(); -} )( jQuery ); +} )( ); From 94120f86c3f234edaa9e6c1fc864ca23ed2bee45 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 23 Jul 2024 10:38:56 +0200 Subject: [PATCH 2/5] Fix comments --- .../js/user-notes-preview.js | 63 +++++++++---------- 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js index 88b1ca589..d677b20bd 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js @@ -25,7 +25,7 @@ document.querySelector('#commentform .tablist').style.display = 'flex'; if (textarea && preview && tabs.length > 0) { - // Append spinner to preview tab + // Append spinner to preview tab. tabs[tabs.length - 1].parentNode.appendChild(spinner); previewContent = preview.querySelector('.preview-content'); @@ -42,7 +42,7 @@ function previewEvents() { const commentFormComment = document.getElementById('comment-form-comment'); - const tabContentHeight = commentFormComment.offsetHeight; // outerHeight equivalent in vanilla JS + const tabContentHeight = commentFormComment.offsetHeight; tabs.forEach(tab => { tab.addEventListener('keydown', handlePreviewEvent); tab.addEventListener('click', handlePreviewEvent); @@ -79,42 +79,41 @@ } } } +async function updatePreview(content) { + try { + spinner.style.display = ''; // Show spinner. + processing = true; - function updatePreview(content) { - // Don't update preview if nothing changed - if (text === content) { - spinner.style.display = 'none'; // Hide spinner - return; - } - - spinner.style.display = ''; // Show spinner - text = content; - processing = true; - - fetch(wporg_note_preview.ajaxurl, { + const params = new URLSearchParams(); + params.append('action', 'preview_comment'); + params.append('preview_nonce', wporg_note_preview.nonce); + params.append('preview_comment', content); + const response = await fetch(wporg_note_preview.ajaxurl, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `action=preview_comment&preview_nonce=${wporg_note_preview.nonce}&preview_comment=${encodeURIComponent(content)}` - }) - .then(response => response.json()) - .then(response => { - updatePreview_HTML(response.data.comment); - }) - .catch(error => { - console.error('Error:', error); - }) - .finally(() => { - spinner.style.display = 'none'; // Hide spinner - processing = false; - - // Make first child of the preview focusable - if (preview.firstChild) { - preview.firstChild.setAttribute('tabindex', '0'); - } + body: params }); - } + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + updatePreview_HTML(data.data.comment); + } catch (error) { + console.error('Error:', error); + } finally { + spinner.style.display = 'none'; // Hide spinner. + processing = false; + + // Make first child of the preview focusable. + if (preview.firstChild) { + preview.firstChild.setAttribute('tabindex', '0'); + } + } +} function updatePreview_HTML(content) { // Update preview content From be4d3bbd415eba01ac9b19e8c49bb22df7a83771 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:44:24 +0200 Subject: [PATCH 3/5] Apply linter --- .../js/user-notes-preview.js | 157 +++++++++--------- 1 file changed, 77 insertions(+), 80 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js index d677b20bd..32c173085 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js @@ -3,75 +3,73 @@ * */ -( function( ) { - - let textarea, text, preview, previewContent, tabs, processing, spinner; +( function () { + let textarea, preview, previewContent, tabs, processing, spinner; function init() { - if (typeof wporg_note_preview === 'undefined') { + if ( typeof wporg_note_preview === 'undefined' ) { return; } - - textarea = document.querySelector('.comment-form textarea'); - preview = document.querySelector('#comment-preview'); - tabs = document.querySelectorAll('#commentform .tablist a'); - spinner = document.createElement('span'); + + textarea = document.querySelector( '.comment-form textarea' ); + preview = document.querySelector( '#comment-preview' ); + tabs = document.querySelectorAll( '#commentform .tablist a' ); + spinner = document.createElement( 'span' ); spinner.className = 'spinner'; spinner.style.display = 'none'; - text = ''; processing = false; - + // Show tabs with JavaScript. - document.querySelector('#commentform .tablist').style.display = 'flex'; - - if (textarea && preview && tabs.length > 0) { + document.querySelector( '#commentform .tablist' ).style.display = 'flex'; + + if ( textarea && preview && tabs.length > 0 ) { // Append spinner to preview tab. - tabs[tabs.length - 1].parentNode.appendChild(spinner); - - previewContent = preview.querySelector('.preview-content'); - - if (previewContent) { - if (!textarea.value.length) { + tabs[ tabs.length - 1 ].parentNode.appendChild( spinner ); + + previewContent = preview.querySelector( '.preview-content' ); + + if ( previewContent ) { + if ( ! textarea.value.length ) { previewContent.textContent = wporg_note_preview.preview_empty; } - + previewEvents(); } } } function previewEvents() { - const commentFormComment = document.getElementById('comment-form-comment'); + const commentFormComment = document.getElementById( 'comment-form-comment' ); const tabContentHeight = commentFormComment.offsetHeight; - tabs.forEach(tab => { - tab.addEventListener('keydown', handlePreviewEvent); - tab.addEventListener('click', handlePreviewEvent); - }); - - function handlePreviewEvent(e) { + tabs.forEach( ( tab ) => { + tab.addEventListener( 'keydown', handlePreviewEvent ); + tab.addEventListener( 'click', handlePreviewEvent ); + } ); + + function handlePreviewEvent( e ) { // Preview tab should be at least as tall input tab to prevent resizing wonkiness. - - if (tabContentHeight > 0) { - preview.style.minHeight = `${tabContentHeight}px`; + + if ( tabContentHeight > 0 ) { + preview.style.minHeight = `${ tabContentHeight }px`; } - - if (this.getAttribute('aria-controls') === 'comment-preview') { - if (!processing) { - let current_text = textarea.value.trim(); - if (current_text.length && current_text !== wporg_note_preview.preview_empty) { - if (wporg_note_preview.preview_empty === previewContent.textContent) { + + if ( this.getAttribute( 'aria-controls' ) === 'comment-preview' ) { + if ( ! processing ) { + const current_text = textarea.value.trim(); + if ( current_text.length && current_text !== wporg_note_preview.preview_empty ) { + if ( wporg_note_preview.preview_empty === previewContent.textContent ) { // Remove "Nothing to preview" if there's new current text. previewContent.textContent = ''; } // Update the preview. - updatePreview(current_text); + updatePreview( current_text ); } else { previewContent.textContent = wporg_note_preview.preview_empty; } } - + // Remove outline from tab if clicked. - if (e.type === "click") { + if ( e.type === 'click' ) { this.blur(); } } else { @@ -79,50 +77,49 @@ } } } -async function updatePreview(content) { - try { - spinner.style.display = ''; // Show spinner. - processing = true; - - const params = new URLSearchParams(); - params.append('action', 'preview_comment'); - params.append('preview_nonce', wporg_note_preview.nonce); - params.append('preview_comment', content); - const response = await fetch(wporg_note_preview.ajaxurl, { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - }, - body: params - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - updatePreview_HTML(data.data.comment); - } catch (error) { - console.error('Error:', error); - } finally { - spinner.style.display = 'none'; // Hide spinner. - processing = false; - - // Make first child of the preview focusable. - if (preview.firstChild) { - preview.firstChild.setAttribute('tabindex', '0'); - } - } -} - - function updatePreview_HTML(content) { + async function updatePreview( content ) { + try { + spinner.style.display = ''; // Show spinner. + processing = true; + + const params = new URLSearchParams(); + params.append( 'action', 'preview_comment' ); + params.append( 'preview_nonce', wporg_note_preview.nonce ); + params.append( 'preview_comment', content ); + const response = await fetch( wporg_note_preview.ajaxurl, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: params, + } ); + + if ( ! response.ok ) { + throw new Error( `HTTP error! status: ${ response.status }` ); + } + + const data = await response.json(); + updatePreview_HTML( data.data.comment ); + } catch ( error ) { + console.error( 'Error:', error ); + } finally { + spinner.style.display = 'none'; // Hide spinner. + processing = false; + + // Make first child of the preview focusable. + if ( preview.firstChild ) { + preview.firstChild.setAttribute( 'tabindex', '0' ); + } + } + } + + function updatePreview_HTML( content ) { // Update preview content previewContent.innerHTML = content; - + // Hide spinner spinner.style.display = 'none'; } init(); - -} )( ); +} )(); From 6762ec8d27a674f05e4517b910b0f2a2aa77515e Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Fri, 26 Jul 2024 15:45:39 +0200 Subject: [PATCH 4/5] Fix element not being a function --- .../themes/wporg-developer-2023/js/user-notes-preview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js index 32c173085..9f6cb5187 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js @@ -107,8 +107,8 @@ processing = false; // Make first child of the preview focusable. - if ( preview.firstChild ) { - preview.firstChild.setAttribute( 'tabindex', '0' ); + if ( preview.firstElementChild ) { + preview.firstElementChild.setAttribute( 'tabindex', '0' ); } } } From f6d223142aa86fd653b322cbe79278e91bdd336f Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Mon, 29 Jul 2024 16:48:14 +0200 Subject: [PATCH 5/5] Add spinner --- .../js/user-notes-preview.js | 2 +- .../wporg-developer-2023/src/style/style.scss | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js index 9f6cb5187..90e6f434a 100644 --- a/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js +++ b/source/wp-content/themes/wporg-developer-2023/js/user-notes-preview.js @@ -79,7 +79,7 @@ } async function updatePreview( content ) { try { - spinner.style.display = ''; // Show spinner. + spinner.style.display = 'inline-block'; // Show spinner. processing = true; const params = new URLSearchParams(); diff --git a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss index d91b7d310..3b1d1672a 100644 --- a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss +++ b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss @@ -636,3 +636,21 @@ pre { left: 0; } } + +/* Spinner */ +.spinner { + &::after { + content: ""; + display: inline-block; + box-sizing: border-box; + height: 16px; + width: 16px; + border: 1.5px solid; + border-color: + var(--wp--preset--color--light-grey-2) + var(--wp--preset--color--light-grey-2) + var(--wp--custom--link--color--text); + border-radius: 50%; + animation: rotate-360 1.4s linear infinite; + } +}