From b65c4f91a9c1ef2f0ecf6380886d8551b2be1bbf Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Tue, 21 Feb 2023 15:29:58 +0530 Subject: [PATCH 01/30] Added selected connection count --- assets/js/push.js | 11 +++++++++++ templates/show-connections.php | 1 + 2 files changed, 12 insertions(+) diff --git a/assets/js/push.js b/assets/js/push.js index 3ac74476c..d648eff7b 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -567,6 +567,7 @@ jQuery( window ).on( 'load', () => { } if ( event.currentTarget.classList.contains( 'added' ) ) { + const type = event.currentTarget.getAttribute( 'data-connection-type' ); @@ -581,6 +582,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; + document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + if ( selectAllConnections.classList.contains( 'unavailable' ) ) { @@ -602,6 +605,8 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); + + document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -661,6 +666,8 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; + document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -692,6 +699,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; + document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + connectionsSelectedList.removeChild( connectionsSelectedList.firstChild ); @@ -722,6 +731,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; + document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); } diff --git a/templates/show-connections.php b/templates/show-connections.php index 97a2db556..c6c85126e 100644 --- a/templates/show-connections.php +++ b/templates/show-connections.php @@ -44,6 +44,7 @@ class="add-connection<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) ) {
+
From c5edbc7053ca119b12ffdd7bd4b2276e6cce7ce8 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Tue, 21 Feb 2023 17:21:11 +0530 Subject: [PATCH 02/30] fixed eslint errors --- assets/js/push.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index d648eff7b..eeed7e0d6 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -567,7 +567,6 @@ jQuery( window ).on( 'load', () => { } if ( event.currentTarget.classList.contains( 'added' ) ) { - const type = event.currentTarget.getAttribute( 'data-connection-type' ); @@ -582,7 +581,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -605,8 +604,7 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - - document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -666,8 +664,7 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; - + document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -699,7 +696,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -731,7 +728,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector('.selected-connections-count').textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 831989495355a17deb37eea8065f88d22971b00d Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Tue, 21 Feb 2023 23:43:44 +0530 Subject: [PATCH 03/30] fixed eslint errors --- assets/js/push.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index eeed7e0d6..57d6b0ccf 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,7 +581,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -604,7 +606,9 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -664,7 +668,9 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -696,7 +702,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -728,7 +736,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 4cf52a406fa30f3e075b077d0ba5127a0b151747 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 11:06:58 +0530 Subject: [PATCH 04/30] fixed eslint errors --- assets/js/push.js | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 57d6b0ccf..1ac5a8642 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,9 +581,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( - '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -606,9 +605,9 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - document.querySelector( - '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -668,9 +667,9 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector( - '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; + connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -702,9 +701,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( - '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -736,9 +734,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( - '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 9a28de4492b3c8319d57b4ad56348ed9188a31a8 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 11:24:04 +0530 Subject: [PATCH 05/30] Tried to fix eslint errors --- assets/js/push.js | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 1ac5a8642..183a63f38 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,8 +581,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -605,9 +606,9 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - - document.querySelector( '.selected-connections-count' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -667,9 +668,9 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector( '.selected-connections-count' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; - + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -701,8 +702,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -734,8 +736,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 13d07da48259322558392ca0bf3899fc3b2c7189 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 11:36:44 +0530 Subject: [PATCH 06/30] Tried to fix eslint errors --- assets/js/push.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 183a63f38..57d6b0ccf 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -737,8 +737,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; document.querySelector( - '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From d1169db5ecb61243f9b1817272f7fdf182fbab11 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 14:07:53 +0530 Subject: [PATCH 07/30] Fixed Eslint errors --- assets/js/push.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 57d6b0ccf..1fdab53f1 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -583,7 +583,8 @@ jQuery( window ).on( 'load', () => { document.querySelector( '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + ) + .textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -608,7 +609,8 @@ jQuery( window ).on( 'load', () => { const element = event.currentTarget.cloneNode( true ); document.querySelector( '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + ) + .textContent = '(' + Object.keys( selectedConnections ).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -670,7 +672,8 @@ jQuery( window ).on( 'load', () => { document.querySelector( '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + ) + .textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -704,7 +707,8 @@ jQuery( window ).on( 'load', () => { document.querySelector( '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + ) + .textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -738,7 +742,8 @@ jQuery( window ).on( 'load', () => { document.querySelector( '.selected-connections-count' - ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; + ) + .textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 6d01813c0b47f571d65deb034c18228a57245333 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 14:14:34 +0530 Subject: [PATCH 08/30] Fixed Eslint errors --- assets/js/push.js | 31 +++++++++++-------------------- 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 1fdab53f1..49ef9701f 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,10 +581,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( - '.selected-connections-count' - ) - .textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector('.selected-connections-count').textContent = + '(' + Object.keys(selectedConnections).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -607,10 +605,8 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - document.querySelector( - '.selected-connections-count' - ) - .textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector('.selected-connections-count').textContent = + '(' + Object.keys(selectedConnections).length + ')'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -670,10 +666,9 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector( - '.selected-connections-count' - ) - .textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector('.selected-connections-count').textContent = + '(' + Object.keys(selectedConnections).length + ')'; + connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -705,10 +700,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( - '.selected-connections-count' - ) - .textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector('.selected-connections-count').textContent = + '(' + Object.keys(selectedConnections).length + ')'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -740,10 +733,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( - '.selected-connections-count' - ) - .textContent = '(' + Object.keys( selectedConnections ).length + ')'; + document.querySelector('.selected-connections-count').textContent = + '(' + Object.keys(selectedConnections).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 2627446384819af625024406e8d684ea47b436ed Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 14:20:33 +0530 Subject: [PATCH 09/30] Fixed Eslint errors --- assets/js/push.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 49ef9701f..b4dc9a826 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,8 +581,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector('.selected-connections-count').textContent = - '(' + Object.keys(selectedConnections).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -605,8 +605,8 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - document.querySelector('.selected-connections-count').textContent = - '(' + Object.keys(selectedConnections).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -666,9 +666,8 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector('.selected-connections-count').textContent = - '(' + Object.keys(selectedConnections).length + ')'; - + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -700,8 +699,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector('.selected-connections-count').textContent = - '(' + Object.keys(selectedConnections).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -733,8 +732,8 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector('.selected-connections-count').textContent = - '(' + Object.keys(selectedConnections).length + ')'; + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 9d15f42a42d7a6d03357b3e501b1c6b50f5aeee6 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 14:45:21 +0530 Subject: [PATCH 10/30] Fixed Eslint errors --- assets/js/push.js | 681 ++++++++++++++++++++++------------------------ 1 file changed, 329 insertions(+), 352 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index b4dc9a826..b625d8891 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -1,22 +1,22 @@ -import '../css/push.scss'; +import "../css/push.scss"; -import jQuery from 'jquery'; -import _ from 'underscore'; -import Mustache from 'mustache'; +import jQuery from "jquery"; +import _ from "underscore"; +import Mustache from "mustache"; const { document, dt } = window; let selectedConnections = {}, - searchString = ''; -const processTemplate = _.memoize( ( id ) => { - const element = document.getElementById( id ); - if ( ! element ) { + searchString = ""; +const processTemplate = _.memoize((id) => { + const element = document.getElementById(id); + if (!element) { return false; } - if ( element.attributes.template ) { - Mustache.parse( element.innerHTML ); - return 'mustache'; + if (element.attributes.template) { + Mustache.parse(element.innerHTML); + return "mustache"; } // Use WordPress style Backbone template syntax const options = { @@ -25,42 +25,42 @@ const processTemplate = _.memoize( ( id ) => { escape: /{{([^}]+?)}}(?!})/g, }; - return _.template( element.innerHTML, null, options ); -} ); + return _.template(element.innerHTML, null, options); +}); -jQuery( window ).on( 'load', () => { +jQuery(window).on("load", () => { const distributorMenuItem = document.querySelector( - '#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder' + "#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder" ); const distributorPushWrapper = document.querySelector( - '#distributor-push-wrapper' + "#distributor-push-wrapper" ); - if ( ! distributorMenuItem || ! distributorPushWrapper ) { + if (!distributorMenuItem || !distributorPushWrapper) { return; } - let dtConnections = ''; - let connectionsSelected = ''; - let connectionsSelectedList = ''; - let connectionsNewList = ''; - let connectionsNewListChildren = ''; - let connectionsAvailableTotal = ''; - let selectAllConnections = ''; - let selectNoConnections = ''; - let connectionsSearchInput = ''; - let postStatusInput = ''; - let asDraftInput = ''; - let errorDetails = ''; - - distributorMenuItem.appendChild( distributorPushWrapper ); + let dtConnections = ""; + let connectionsSelected = ""; + let connectionsSelectedList = ""; + let connectionsNewList = ""; + let connectionsNewListChildren = ""; + let connectionsAvailableTotal = ""; + let selectAllConnections = ""; + let selectNoConnections = ""; + let connectionsSearchInput = ""; + let postStatusInput = ""; + let asDraftInput = ""; + let errorDetails = ""; + + distributorMenuItem.appendChild(distributorPushWrapper); // Add our overlay div - const overlayDiv = document.createElement( 'div' ); - overlayDiv.id = 'distributor-overlay'; + const overlayDiv = document.createElement("div"); + overlayDiv.id = "distributor-overlay"; const distributorTopMenu = document.querySelector( - '#wp-admin-bar-distributor' + "#wp-admin-bar-distributor" ); distributorTopMenu.parentNode.insertBefore( @@ -73,58 +73,58 @@ jQuery( window ).on( 'load', () => { */ function setVariables() { connectionsSelected = distributorPushWrapper.querySelector( - '.connections-selected' + ".connections-selected" ); connectionsSelectedList = distributorPushWrapper.querySelector( - '.selected-connections-list' + ".selected-connections-list" ); connectionsNewList = distributorPushWrapper.querySelector( - '.new-connections-list' + ".new-connections-list" ); selectAllConnections = distributorPushWrapper.querySelector( - '.selectall-connections' + ".selectall-connections" ); selectNoConnections = distributorPushWrapper.querySelector( - '.selectno-connections' + ".selectno-connections" ); connectionsSearchInput = document.getElementById( - 'dt-connection-search' + "dt-connection-search" ); - postStatusInput = document.getElementById( 'dt-post-status' ); - asDraftInput = document.getElementById( 'dt-as-draft' ); - errorDetails = document.querySelector( '.dt-error ul.details' ); + postStatusInput = document.getElementById("dt-post-status"); + asDraftInput = document.getElementById("dt-as-draft"); + errorDetails = document.querySelector(".dt-error ul.details"); - if ( null !== connectionsNewList ) { + if (null !== connectionsNewList) { connectionsNewListChildren = - connectionsNewList.querySelectorAll( '.add-connection' ); + connectionsNewList.querySelectorAll(".add-connection"); } /** * Listen for connection filtering */ - jQuery( connectionsSearchInput ).on( - 'keyup change', - _.debounce( ( event ) => { - if ( '' === event.currentTarget.value ) { - showConnections( dtConnections ); + jQuery(connectionsSearchInput).on( + "keyup change", + _.debounce((event) => { + if ("" === event.currentTarget.value) { + showConnections(dtConnections); } searchString = event.currentTarget.value - .replace( /https?:\/\//i, '' ) - .replace( /www/i, '' ) - .replace( /[^0-9a-zA-Z ]+/, '' ); + .replace(/https?:\/\//i, "") + .replace(/www/i, "") + .replace(/[^0-9a-zA-Z ]+/, ""); showConnections(); - }, 300 ) + }, 300) ); /** * Disable select all button if all connections are syndicated and set variable for total connections available */ - _.each( connectionsNewListChildren, ( element ) => { - if ( ! element.classList.contains( 'syndicated' ) ) { - selectAllConnections.classList.remove( 'unavailable' ); + _.each(connectionsNewListChildren, (element) => { + if (!element.classList.contains("syndicated")) { + selectAllConnections.classList.remove("unavailable"); connectionsAvailableTotal++; } - } ); + }); } /** @@ -137,18 +137,18 @@ jQuery( window ).on( 'load', () => { */ function setDisabledConnections() { connectionsNewList = distributorPushWrapper.querySelector( - '.new-connections-list' + ".new-connections-list" ); - if ( null !== connectionsNewList ) { + if (null !== connectionsNewList) { connectionsNewListChildren = - connectionsNewList.querySelectorAll( '.add-connection' ); + connectionsNewList.querySelectorAll(".add-connection"); - _.each( connectionsNewListChildren, ( element ) => { - if ( element.classList.contains( 'syndicated' ) ) { + _.each(connectionsNewListChildren, (element) => { + if (element.classList.contains("syndicated")) { element.disabled = true; } - } ); + }); } } @@ -157,15 +157,15 @@ jQuery( window ).on( 'load', () => { * * @param {string[]} messages Array of error messages. */ - function doError( messages ) { - distributorPushWrapper.classList.add( 'message-error' ); - errorDetails.innerText = ''; + function doError(messages) { + distributorPushWrapper.classList.add("message-error"); + errorDetails.innerText = ""; - _.each( prepareMessages( messages ), function ( message ) { - const errorItem = document.createElement( 'li' ); + _.each(prepareMessages(messages), function (message) { + const errorItem = document.createElement("li"); errorItem.innerText = message; - errorDetails.appendChild( errorItem ); - } ); + errorDetails.appendChild(errorItem); + }); } /** @@ -173,19 +173,19 @@ jQuery( window ).on( 'load', () => { * * @param {string | Array} messages Error messages. */ - function prepareMessages( messages ) { - if ( ! _.isArray( messages ) ) { - return [ messages ]; + function prepareMessages(messages) { + if (!_.isArray(messages)) { + return [messages]; } - return _.map( messages, function ( message ) { - if ( _.isString( message ) ) { + return _.map(messages, function (message) { + if (_.isString(message)) { return message; } - if ( _.has( message, 'message' ) ) { + if (_.has(message, "message")) { return message.message; } - } ); + }); } /** @@ -193,49 +193,49 @@ jQuery( window ).on( 'load', () => { * * @param {Object[]} results Array of results from distribution attempts. */ - function doSuccess( results ) { + function doSuccess(results) { let success = false; const errors = {}; - [ 'internal', 'external' ].forEach( ( type ) => { - _.each( results[ type ], ( result, connectionId ) => { - if ( 'success' === result.status ) { - dtConnections[ `${ type }${ connectionId }` ].syndicated = + ["internal", "external"].forEach((type) => { + _.each(results[type], (result, connectionId) => { + if ("success" === result.status) { + dtConnections[`${type}${connectionId}`].syndicated = result.url; success = true; } - if ( ! _.isEmpty( result.errors ) ) { - errors[ `${ type }${ connectionId }` ] = result.errors; + if (!_.isEmpty(result.errors)) { + errors[`${type}${connectionId}`] = result.errors; } - } ); - } ); + }); + }); - if ( ! _.isEmpty( errors ) ) { + if (!_.isEmpty(errors)) { const formattedErrors = _.map( errors, - function ( messages, connectionId ) { - return `${ dtConnections[ connectionId ].name }:\n${ _.map( + function (messages, connectionId) { + return `${dtConnections[connectionId].name}:\n${_.map( messages, - function ( message ) { - return `- ${ message }\n`; + function (message) { + return `- ${message}\n`; } - ) }`; + )}`; } ); - doError( formattedErrors ); + doError(formattedErrors); } - if ( success && _.isEmpty( errors ) ) { - distributorPushWrapper.classList.add( 'message-success' ); + if (success && _.isEmpty(errors)) { + distributorPushWrapper.classList.add("message-success"); - connectionsSelected.classList.add( 'empty' ); - connectionsSelectedList.innerText = ''; + connectionsSelected.classList.add("empty"); + connectionsSelectedList.innerText = ""; - setTimeout( () => { - distributorPushWrapper.classList.remove( 'message-success' ); - }, 6000 ); + setTimeout(() => { + distributorPushWrapper.classList.remove("message-success"); + }, 6000); } selectedConnections = {}; @@ -247,62 +247,62 @@ jQuery( window ).on( 'load', () => { * Show connections. If there is a search string, then filter by it */ function showConnections() { - connectionsNewList.innerText = ''; - const template = processTemplate( 'dt-add-connection' ); - let showConnection = ''; + connectionsNewList.innerText = ""; + const template = processTemplate("dt-add-connection"); + let showConnection = ""; - _.each( dtConnections, ( connection ) => { - if ( '' !== searchString ) { + _.each(dtConnections, (connection) => { + if ("" !== searchString) { const nameMatch = connection.name - .replace( /[^0-9a-zA-Z ]+/, '' ) + .replace(/[^0-9a-zA-Z ]+/, "") .toLowerCase() - .match( searchString.toLowerCase() ); + .match(searchString.toLowerCase()); const urlMatch = connection.url - .replace( /https?:\/\//i, '' ) - .replace( /www/i, '' ) - .replace( /[^0-9a-zA-Z ]+/, '' ) + .replace(/https?:\/\//i, "") + .replace(/www/i, "") + .replace(/[^0-9a-zA-Z ]+/, "") .toLowerCase() - .match( searchString.toLowerCase() ); + .match(searchString.toLowerCase()); - if ( ! nameMatch && ! urlMatch ) { + if (!nameMatch && !urlMatch) { return; } } - if ( 'mustache' === template ) { + if ("mustache" === template) { // Modify connection data to match what mustache wants - if ( selectedConnections[ connection.type + connection.id ] ) { + if (selectedConnections[connection.type + connection.id]) { connection.added = true; } else { connection.added = false; } - if ( 'internal' === connection.type ) { + if ("internal" === connection.type) { connection.internal = true; } showConnection = Mustache.render( - document.getElementById( 'dt-add-connection' ).innerHTML, + document.getElementById("dt-add-connection").innerHTML, { connection, } ); } else { - showConnection = template( { + showConnection = template({ connection, selectedConnections, - } ); + }); } connectionsNewList.innerHTML += showConnection; - } ); + }); - if ( '' === connectionsNewList.innerHTML ) { + if ("" === connectionsNewList.innerHTML) { connectionsNewList.innerHTML = '

No results

'; } - if ( 'mustache' === template ) { + if ("mustache" === template) { setDisabledConnections(); } } @@ -312,25 +312,25 @@ jQuery( window ).on( 'load', () => { * * @param {string} expr Functionality to indicate. */ - function classList( expr ) { - switch ( expr ) { - case 'addEmpty': - connectionsSelected.classList.add( 'empty' ); + function classList(expr) { + switch (expr) { + case "addEmpty": + connectionsSelected.classList.add("empty"); break; - case 'removeEmpty': - connectionsSelected.classList.remove( 'empty' ); + case "removeEmpty": + connectionsSelected.classList.remove("empty"); break; - case 'allUnavailable': - selectAllConnections.classList.add( 'unavailable' ); + case "allUnavailable": + selectAllConnections.classList.add("unavailable"); break; - case 'all': - selectAllConnections.classList.remove( 'unavailable' ); + case "all": + selectAllConnections.classList.remove("unavailable"); break; - case 'noneUnavailable': - selectNoConnections.classList.add( 'unavailable' ); + case "noneUnavailable": + selectNoConnections.classList.add("unavailable"); break; - case 'none': - selectNoConnections.classList.remove( 'unavailable' ); + case "none": + selectNoConnections.classList.remove("unavailable"); break; } } @@ -344,51 +344,51 @@ jQuery( window ).on( 'load', () => { // Determine if we need to hide the admin bar maybeHideAdminBar(); - if ( distributorPushWrapper.classList.contains( 'loaded' ) ) { + if (distributorPushWrapper.classList.contains("loaded")) { return; } - distributorPushWrapper.classList.remove( 'message-error' ); - distributorPushWrapper.classList.add( 'loaded' ); + distributorPushWrapper.classList.remove("message-error"); + distributorPushWrapper.classList.add("loaded"); const data = { - action: 'dt_load_connections', + action: "dt_load_connections", loadConnectionsNonce: dt.loadConnectionsNonce, postId: dt.postId, }; - const template = processTemplate( 'dt-show-connections' ); + const template = processTemplate("dt-show-connections"); const xhr = dt.usexhr ? { withCredentials: true } : false; jQuery - .ajax( { + .ajax({ url: dt.ajaxurl, xhrFields: xhr, - method: 'post', + method: "post", data, - } ) - .done( ( response ) => { - if ( ! response.success || ! response.data ) { - distributorPushWrapper.classList.remove( 'loaded' ); - distributorPushWrapper.classList.add( 'message-error' ); + }) + .done((response) => { + if (!response.success || !response.data) { + distributorPushWrapper.classList.remove("loaded"); + distributorPushWrapper.classList.add("message-error"); return; } dtConnections = response.data; - if ( 'mustache' === template ) { + if ("mustache" === template) { // Manipulate the data to match what mustache needs const mustacheData = { connections: [] }; - _.each( dtConnections, ( connection ) => { - if ( 'internal' === connection.type ) { + _.each(dtConnections, (connection) => { + if ("internal" === connection.type) { connection.internal = true; } - mustacheData.connections.push( connection ); - } ); + mustacheData.connections.push(connection); + }); distributorPushWrapper.innerHTML = Mustache.render( - document.getElementById( 'dt-show-connections' ) + document.getElementById("dt-show-connections") .innerHTML, { connections: mustacheData.connections, @@ -399,17 +399,17 @@ jQuery( window ).on( 'load', () => { setDisabledConnections(); } else { - distributorPushWrapper.innerHTML = template( { + distributorPushWrapper.innerHTML = template({ connections: dtConnections, - } ); + }); } setVariables(); - } ) - .error( () => { - distributorPushWrapper.classList.remove( 'loaded' ); - distributorPushWrapper.classList.add( 'message-error' ); - } ); + }) + .error(() => { + distributorPushWrapper.classList.remove("loaded"); + distributorPushWrapper.classList.add("message-error"); + }); } /** @@ -417,14 +417,14 @@ jQuery( window ).on( 'load', () => { */ function maybeCloseDistributorMenu() { // If a distribution is in progress, don't close things - if ( distributorTopMenu.classList.contains( 'syncing' ) ) { + if (distributorTopMenu.classList.contains("syncing")) { return; } // If the Distributor menu is showing, hide everything - if ( distributorTopMenu.classList.contains( 'hover' ) ) { - distributorTopMenu.classList.remove( 'hover' ); - document.body.classList.remove( 'is-showing-distributor' ); + if (distributorTopMenu.classList.contains("hover")) { + distributorTopMenu.classList.remove("hover"); + document.body.classList.remove("is-showing-distributor"); } // Determine if we need to hide the admin bar @@ -432,15 +432,15 @@ jQuery( window ).on( 'load', () => { } const distributorAdminItem = document.querySelector( - '#wp-admin-bar-distributor > a' + "#wp-admin-bar-distributor > a" ); // Event listeners when to fetch distributor data. distributorAdminItem.addEventListener( - 'keydown', - function ( e ) { + "keydown", + function (e) { // Pressing Enter. - if ( 13 === e.keyCode ) { + if (13 === e.keyCode) { distributorMenuEntered(); } }, @@ -448,7 +448,7 @@ jQuery( window ).on( 'load', () => { ); // In full screen mode, add hoverintent to remove admin bar on hover out - if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) { + if (document.body.classList.contains("is-fullscreen-mode")) { window .hoverintent( distributorTopMenu, @@ -457,9 +457,9 @@ jQuery( window ).on( 'load', () => { }, maybeHideAdminBar ) - .options( { + .options({ timeout: 180, - } ); + }); } /** @@ -469,37 +469,37 @@ jQuery( window ).on( 'load', () => { */ function maybeHideAdminBar() { if ( - ! distributorTopMenu.classList.contains( 'hover' ) && - ! distributorTopMenu.classList.contains( 'syncing' ) + !distributorTopMenu.classList.contains("hover") && + !distributorTopMenu.classList.contains("syncing") ) { - document.body.classList.remove( 'is-showing-distributor' ); + document.body.classList.remove("is-showing-distributor"); } } distributorAdminItem.addEventListener( - 'touchstart', + "touchstart", distributorMenuEntered, false ); distributorAdminItem.addEventListener( - 'mouseenter', + "mouseenter", distributorMenuEntered, false ); - overlayDiv.addEventListener( 'click', maybeCloseDistributorMenu, true ); + overlayDiv.addEventListener("click", maybeCloseDistributorMenu, true); /** * Do syndication ajax */ - jQuery( distributorPushWrapper ).on( 'click', '.syndicate-button', () => { - if ( distributorTopMenu.classList.contains( 'syncing' ) ) { + jQuery(distributorPushWrapper).on("click", ".syndicate-button", () => { + if (distributorTopMenu.classList.contains("syncing")) { return; } - distributorTopMenu.classList.add( 'syncing' ); + distributorTopMenu.classList.add("syncing"); const data = { - action: 'dt_push', + action: "dt_push", nonce: dt.nonce, connections: selectedConnections, postId: dt.postId, @@ -507,243 +507,220 @@ jQuery( window ).on( 'load', () => { data.postStatus = null !== asDraftInput && asDraftInput.checked - ? 'draft' + ? "draft" : postStatusInput.value; const xhr = dt.usexhr ? { withCredentials: true } : false; jQuery - .ajax( { + .ajax({ url: dt.ajaxurl, xhrFields: xhr, - method: 'post', + method: "post", data, - } ) - .done( ( response ) => { - setTimeout( () => { - distributorTopMenu.classList.remove( 'syncing' ); + }) + .done((response) => { + setTimeout(() => { + distributorTopMenu.classList.remove("syncing"); // Maybe hide the admin bar maybeHideAdminBar(); - if ( ! response.success ) { - doError( response.data ); + if (!response.success) { + doError(response.data); return; } - if ( ! response.data || ! response.data.results ) { - doError( dt.messages.empty_result ); + if (!response.data || !response.data.results) { + doError(dt.messages.empty_result); return; } - doSuccess( response.data.results ); - }, 500 ); - } ) + doSuccess(response.data.results); + }, 500); + }) // eslint-disable-next-line no-shadow - .error( ( xhr, textStatus, errorThrown ) => { - setTimeout( () => { - distributorTopMenu.classList.remove( 'syncing' ); + .error((xhr, textStatus, errorThrown) => { + setTimeout(() => { + distributorTopMenu.classList.remove("syncing"); - doError( `${ dt.messages.ajax_error } ${ errorThrown }` ); - }, 500 ); - } ); - } ); + doError(`${dt.messages.ajax_error} ${errorThrown}`); + }, 500); + }); + }); /** * Add a connection to selected connections for ajax and to the UI list. */ - jQuery( distributorPushWrapper ).on( - 'click', - '.add-connection', - ( event ) => { - if ( 'A' === event.target.nodeName ) { - return; - } - - event.preventDefault(); + jQuery(distributorPushWrapper).on("click", ".add-connection", (event) => { + if ("A" === event.target.nodeName) { + return; + } - if ( event.currentTarget.classList.contains( 'syndicated' ) ) { - return; - } + event.preventDefault(); - if ( event.currentTarget.classList.contains( 'added' ) ) { - const type = event.currentTarget.getAttribute( - 'data-connection-type' - ); - const id = - event.currentTarget.getAttribute( 'data-connection-id' ); + if (event.currentTarget.classList.contains("syndicated")) { + return; + } - const deleteNode = connectionsSelectedList.querySelector( - `[data-connection-id="${ id }"][data-connection-type="${ type }"]` - ); + if (event.currentTarget.classList.contains("added")) { + const type = event.currentTarget.getAttribute( + "data-connection-type" + ); + const id = event.currentTarget.getAttribute("data-connection-id"); - deleteNode.parentNode.removeChild( deleteNode ); + const deleteNode = connectionsSelectedList.querySelector( + `[data-connection-id="${id}"][data-connection-type="${type}"]` + ); - delete selectedConnections[ type + id ]; + deleteNode.parentNode.removeChild(deleteNode); - document.querySelector( '.selected-connections-count' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + delete selectedConnections[type + id]; - if ( - selectAllConnections.classList.contains( 'unavailable' ) - ) { - classList( 'all' ); - } - if ( ! Object.keys( selectedConnections ).length ) { - classList( 'addEmpty' ); - classList( 'noneUnavailable' ); - } + document.querySelector(".selected-connections-count").textContent = + "( " + Object.keys(selectedConnections).length + " )"; - showConnections(); - } else { - const type = event.currentTarget.getAttribute( - 'data-connection-type' - ); - const id = - event.currentTarget.getAttribute( 'data-connection-id' ); + if (selectAllConnections.classList.contains("unavailable")) { + classList("all"); + } + if (!Object.keys(selectedConnections).length) { + classList("addEmpty"); + classList("noneUnavailable"); + } - selectedConnections[ type + id ] = dtConnections[ type + id ]; + showConnections(); + } else { + const type = event.currentTarget.getAttribute( + "data-connection-type" + ); + const id = event.currentTarget.getAttribute("data-connection-id"); - const element = event.currentTarget.cloneNode( true ); - document.querySelector( '.selected-connections-count' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + selectedConnections[type + id] = dtConnections[type + id]; - const removeLink = document.createElement( 'span' ); - removeLink.classList.add( 'remove-connection' ); + const element = event.currentTarget.cloneNode(true); + document.querySelector(".selected-connections-count").textContent = + "( " + Object.keys(selectedConnections).length + " )"; - element.appendChild( removeLink ); - element.classList = 'added-connection'; - connectionsSelectedList.appendChild( element ); + const removeLink = document.createElement("span"); + removeLink.classList.add("remove-connection"); - if ( selectNoConnections.classList.contains( 'unavailable' ) ) { - classList( 'removeEmpty' ); - classList( 'none' ); - } + element.appendChild(removeLink); + element.classList = "added-connection"; + connectionsSelectedList.appendChild(element); - if ( - // eslint-disable-next-line eqeqeq - Object.keys( selectedConnections ).length == - connectionsAvailableTotal - ) { - classList( 'allUnavailable' ); - } + if (selectNoConnections.classList.contains("unavailable")) { + classList("removeEmpty"); + classList("none"); + } - showConnections(); + if ( + // eslint-disable-next-line eqeqeq + Object.keys(selectedConnections).length == + connectionsAvailableTotal + ) { + classList("allUnavailable"); } + + showConnections(); } - ); + }); /** * Select all connections for distribution. */ - jQuery( distributorPushWrapper ).on( - 'click', - '.selectall-connections', - () => { - jQuery( connectionsNewList ) - .children( '.add-connection' ) - .each( ( index, childTarget ) => { - if ( - childTarget.classList.contains( 'syndicated' ) || - childTarget.classList.contains( 'added' ) - ) { - return; - } - const type = childTarget.getAttribute( - 'data-connection-type' - ); - const id = childTarget.getAttribute( 'data-connection-id' ); + jQuery(distributorPushWrapper).on("click", ".selectall-connections", () => { + jQuery(connectionsNewList) + .children(".add-connection") + .each((index, childTarget) => { + if ( + childTarget.classList.contains("syndicated") || + childTarget.classList.contains("added") + ) { + return; + } + const type = childTarget.getAttribute("data-connection-type"); + const id = childTarget.getAttribute("data-connection-id"); - selectedConnections[ type + id ] = - dtConnections[ type + id ]; + selectedConnections[type + id] = dtConnections[type + id]; - const element = childTarget.cloneNode(); - element.innerText = childTarget.innerText; + const element = childTarget.cloneNode(); + element.innerText = childTarget.innerText; - const removeLink = document.createElement( 'span' ); - removeLink.classList.add( 'remove-connection' ); + const removeLink = document.createElement("span"); + removeLink.classList.add("remove-connection"); - element.appendChild( removeLink ); - element.classList = 'added-connection'; + element.appendChild(removeLink); + element.classList = "added-connection"; - document.querySelector( '.selected-connections-count' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; - connectionsSelectedList.appendChild( element ); + document.querySelector( + ".selected-connections-count" + ).textContent = + "( " + Object.keys(selectedConnections).length + " )"; + connectionsSelectedList.appendChild(element); - if ( '' !== connectionsAvailableTotal ) { - classList( 'removeEmpty' ); - classList( 'allUnavailable' ); - classList( 'none' ); - } - } ); + if ("" !== connectionsAvailableTotal) { + classList("removeEmpty"); + classList("allUnavailable"); + classList("none"); + } + }); - showConnections(); - } - ); + showConnections(); + }); /** * Select no connections for distribution. */ - jQuery( distributorPushWrapper ).on( - 'click', - '.selectno-connections', - () => { - while ( connectionsSelectedList.firstChild ) { - const type = connectionsSelectedList.firstChild.getAttribute( - 'data-connection-type' + jQuery(distributorPushWrapper).on("click", ".selectno-connections", () => { + while (connectionsSelectedList.firstChild) { + const type = connectionsSelectedList.firstChild.getAttribute( + "data-connection-type" + ); + const id = + connectionsSelectedList.firstChild.getAttribute( + "data-connection-id" ); - const id = - connectionsSelectedList.firstChild.getAttribute( - 'data-connection-id' - ); - - delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + delete selectedConnections[type + id]; - connectionsSelectedList.removeChild( - connectionsSelectedList.firstChild - ); - } + document.querySelector(".selected-connections-count").textContent = + "( " + Object.keys(selectedConnections).length + " )"; - if ( '' !== connectionsAvailableTotal ) { - classList( 'addEmpty' ); - classList( 'noneUnavailable' ); - classList( 'all' ); - } + connectionsSelectedList.removeChild( + connectionsSelectedList.firstChild + ); + } - showConnections(); + if ("" !== connectionsAvailableTotal) { + classList("addEmpty"); + classList("noneUnavailable"); + classList("all"); } - ); + + showConnections(); + }); /** * Remove a connection from selected connections and the UI list */ - jQuery( distributorPushWrapper ).on( - 'click', - '.added-connection', - ( event ) => { - event.currentTarget.parentNode.removeChild( event.currentTarget ); - const type = event.currentTarget.getAttribute( - 'data-connection-type' - ); - const id = event.currentTarget.getAttribute( 'data-connection-id' ); + jQuery(distributorPushWrapper).on("click", ".added-connection", (event) => { + event.currentTarget.parentNode.removeChild(event.currentTarget); + const type = event.currentTarget.getAttribute("data-connection-type"); + const id = event.currentTarget.getAttribute("data-connection-id"); - delete selectedConnections[ type + id ]; + delete selectedConnections[type + id]; - document.querySelector( '.selected-connections-count' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + document.querySelector(".selected-connections-count").textContent = + "( " + Object.keys(selectedConnections).length + " )"; - if ( selectAllConnections.classList.contains( 'unavailable' ) ) { - classList( 'all' ); - } - if ( ! Object.keys( selectedConnections ).length ) { - classList( 'addEmpty' ); - classList( 'noneUnavailable' ); - } - - showConnections(); + if (selectAllConnections.classList.contains("unavailable")) { + classList("all"); } - ); -} ); + if (!Object.keys(selectedConnections).length) { + classList("addEmpty"); + classList("noneUnavailable"); + } + + showConnections(); + }); +}); From eaa8af02cac328a527f2eedd95cdb84aea4bdfe0 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 22 Feb 2023 14:49:35 +0530 Subject: [PATCH 11/30] revert back the changes --- assets/js/push.js | 682 ++++++++++++++++++++++++---------------------- 1 file changed, 353 insertions(+), 329 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index b625d8891..91358c0df 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -1,22 +1,22 @@ -import "../css/push.scss"; +import '../css/push.scss'; -import jQuery from "jquery"; -import _ from "underscore"; -import Mustache from "mustache"; +import jQuery from 'jquery'; +import _ from 'underscore'; +import Mustache from 'mustache'; const { document, dt } = window; let selectedConnections = {}, - searchString = ""; -const processTemplate = _.memoize((id) => { - const element = document.getElementById(id); - if (!element) { + searchString = ''; +const processTemplate = _.memoize( ( id ) => { + const element = document.getElementById( id ); + if ( ! element ) { return false; } - if (element.attributes.template) { - Mustache.parse(element.innerHTML); - return "mustache"; + if ( element.attributes.template ) { + Mustache.parse( element.innerHTML ); + return 'mustache'; } // Use WordPress style Backbone template syntax const options = { @@ -25,42 +25,42 @@ const processTemplate = _.memoize((id) => { escape: /{{([^}]+?)}}(?!})/g, }; - return _.template(element.innerHTML, null, options); -}); + return _.template( element.innerHTML, null, options ); +} ); -jQuery(window).on("load", () => { +jQuery( window ).on( 'load', () => { const distributorMenuItem = document.querySelector( - "#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder" + '#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder' ); const distributorPushWrapper = document.querySelector( - "#distributor-push-wrapper" + '#distributor-push-wrapper' ); - if (!distributorMenuItem || !distributorPushWrapper) { + if ( ! distributorMenuItem || ! distributorPushWrapper ) { return; } - let dtConnections = ""; - let connectionsSelected = ""; - let connectionsSelectedList = ""; - let connectionsNewList = ""; - let connectionsNewListChildren = ""; - let connectionsAvailableTotal = ""; - let selectAllConnections = ""; - let selectNoConnections = ""; - let connectionsSearchInput = ""; - let postStatusInput = ""; - let asDraftInput = ""; - let errorDetails = ""; - - distributorMenuItem.appendChild(distributorPushWrapper); + let dtConnections = ''; + let connectionsSelected = ''; + let connectionsSelectedList = ''; + let connectionsNewList = ''; + let connectionsNewListChildren = ''; + let connectionsAvailableTotal = ''; + let selectAllConnections = ''; + let selectNoConnections = ''; + let connectionsSearchInput = ''; + let postStatusInput = ''; + let asDraftInput = ''; + let errorDetails = ''; + + distributorMenuItem.appendChild( distributorPushWrapper ); // Add our overlay div - const overlayDiv = document.createElement("div"); - overlayDiv.id = "distributor-overlay"; + const overlayDiv = document.createElement( 'div' ); + overlayDiv.id = 'distributor-overlay'; const distributorTopMenu = document.querySelector( - "#wp-admin-bar-distributor" + '#wp-admin-bar-distributor' ); distributorTopMenu.parentNode.insertBefore( @@ -73,58 +73,58 @@ jQuery(window).on("load", () => { */ function setVariables() { connectionsSelected = distributorPushWrapper.querySelector( - ".connections-selected" + '.connections-selected' ); connectionsSelectedList = distributorPushWrapper.querySelector( - ".selected-connections-list" + '.selected-connections-list' ); connectionsNewList = distributorPushWrapper.querySelector( - ".new-connections-list" + '.new-connections-list' ); selectAllConnections = distributorPushWrapper.querySelector( - ".selectall-connections" + '.selectall-connections' ); selectNoConnections = distributorPushWrapper.querySelector( - ".selectno-connections" + '.selectno-connections' ); connectionsSearchInput = document.getElementById( - "dt-connection-search" + 'dt-connection-search' ); - postStatusInput = document.getElementById("dt-post-status"); - asDraftInput = document.getElementById("dt-as-draft"); - errorDetails = document.querySelector(".dt-error ul.details"); + postStatusInput = document.getElementById( 'dt-post-status' ); + asDraftInput = document.getElementById( 'dt-as-draft' ); + errorDetails = document.querySelector( '.dt-error ul.details' ); - if (null !== connectionsNewList) { + if ( null !== connectionsNewList ) { connectionsNewListChildren = - connectionsNewList.querySelectorAll(".add-connection"); + connectionsNewList.querySelectorAll( '.add-connection' ); } /** * Listen for connection filtering */ - jQuery(connectionsSearchInput).on( - "keyup change", - _.debounce((event) => { - if ("" === event.currentTarget.value) { - showConnections(dtConnections); + jQuery( connectionsSearchInput ).on( + 'keyup change', + _.debounce( ( event ) => { + if ( '' === event.currentTarget.value ) { + showConnections( dtConnections ); } searchString = event.currentTarget.value - .replace(/https?:\/\//i, "") - .replace(/www/i, "") - .replace(/[^0-9a-zA-Z ]+/, ""); + .replace( /https?:\/\//i, '' ) + .replace( /www/i, '' ) + .replace( /[^0-9a-zA-Z ]+/, '' ); showConnections(); - }, 300) + }, 300 ) ); /** * Disable select all button if all connections are syndicated and set variable for total connections available */ - _.each(connectionsNewListChildren, (element) => { - if (!element.classList.contains("syndicated")) { - selectAllConnections.classList.remove("unavailable"); + _.each( connectionsNewListChildren, ( element ) => { + if ( ! element.classList.contains( 'syndicated' ) ) { + selectAllConnections.classList.remove( 'unavailable' ); connectionsAvailableTotal++; } - }); + } ); } /** @@ -137,18 +137,18 @@ jQuery(window).on("load", () => { */ function setDisabledConnections() { connectionsNewList = distributorPushWrapper.querySelector( - ".new-connections-list" + '.new-connections-list' ); - if (null !== connectionsNewList) { + if ( null !== connectionsNewList ) { connectionsNewListChildren = - connectionsNewList.querySelectorAll(".add-connection"); + connectionsNewList.querySelectorAll( '.add-connection' ); - _.each(connectionsNewListChildren, (element) => { - if (element.classList.contains("syndicated")) { + _.each( connectionsNewListChildren, ( element ) => { + if ( element.classList.contains( 'syndicated' ) ) { element.disabled = true; } - }); + } ); } } @@ -157,15 +157,15 @@ jQuery(window).on("load", () => { * * @param {string[]} messages Array of error messages. */ - function doError(messages) { - distributorPushWrapper.classList.add("message-error"); - errorDetails.innerText = ""; + function doError( messages ) { + distributorPushWrapper.classList.add( 'message-error' ); + errorDetails.innerText = ''; - _.each(prepareMessages(messages), function (message) { - const errorItem = document.createElement("li"); + _.each( prepareMessages( messages ), function ( message ) { + const errorItem = document.createElement( 'li' ); errorItem.innerText = message; - errorDetails.appendChild(errorItem); - }); + errorDetails.appendChild( errorItem ); + } ); } /** @@ -173,19 +173,19 @@ jQuery(window).on("load", () => { * * @param {string | Array} messages Error messages. */ - function prepareMessages(messages) { - if (!_.isArray(messages)) { - return [messages]; + function prepareMessages( messages ) { + if ( ! _.isArray( messages ) ) { + return [ messages ]; } - return _.map(messages, function (message) { - if (_.isString(message)) { + return _.map( messages, function ( message ) { + if ( _.isString( message ) ) { return message; } - if (_.has(message, "message")) { + if ( _.has( message, 'message' ) ) { return message.message; } - }); + } ); } /** @@ -193,49 +193,49 @@ jQuery(window).on("load", () => { * * @param {Object[]} results Array of results from distribution attempts. */ - function doSuccess(results) { + function doSuccess( results ) { let success = false; const errors = {}; - ["internal", "external"].forEach((type) => { - _.each(results[type], (result, connectionId) => { - if ("success" === result.status) { - dtConnections[`${type}${connectionId}`].syndicated = + [ 'internal', 'external' ].forEach( ( type ) => { + _.each( results[ type ], ( result, connectionId ) => { + if ( 'success' === result.status ) { + dtConnections[ `${ type }${ connectionId }` ].syndicated = result.url; success = true; } - if (!_.isEmpty(result.errors)) { - errors[`${type}${connectionId}`] = result.errors; + if ( ! _.isEmpty( result.errors ) ) { + errors[ `${ type }${ connectionId }` ] = result.errors; } - }); - }); + } ); + } ); - if (!_.isEmpty(errors)) { + if ( ! _.isEmpty( errors ) ) { const formattedErrors = _.map( errors, - function (messages, connectionId) { - return `${dtConnections[connectionId].name}:\n${_.map( + function ( messages, connectionId ) { + return `${ dtConnections[ connectionId ].name }:\n${ _.map( messages, - function (message) { - return `- ${message}\n`; + function ( message ) { + return `- ${ message }\n`; } - )}`; + ) }`; } ); - doError(formattedErrors); + doError( formattedErrors ); } - if (success && _.isEmpty(errors)) { - distributorPushWrapper.classList.add("message-success"); + if ( success && _.isEmpty( errors ) ) { + distributorPushWrapper.classList.add( 'message-success' ); - connectionsSelected.classList.add("empty"); - connectionsSelectedList.innerText = ""; + connectionsSelected.classList.add( 'empty' ); + connectionsSelectedList.innerText = ''; - setTimeout(() => { - distributorPushWrapper.classList.remove("message-success"); - }, 6000); + setTimeout( () => { + distributorPushWrapper.classList.remove( 'message-success' ); + }, 6000 ); } selectedConnections = {}; @@ -247,62 +247,62 @@ jQuery(window).on("load", () => { * Show connections. If there is a search string, then filter by it */ function showConnections() { - connectionsNewList.innerText = ""; - const template = processTemplate("dt-add-connection"); - let showConnection = ""; + connectionsNewList.innerText = ''; + const template = processTemplate( 'dt-add-connection' ); + let showConnection = ''; - _.each(dtConnections, (connection) => { - if ("" !== searchString) { + _.each( dtConnections, ( connection ) => { + if ( '' !== searchString ) { const nameMatch = connection.name - .replace(/[^0-9a-zA-Z ]+/, "") + .replace( /[^0-9a-zA-Z ]+/, '' ) .toLowerCase() - .match(searchString.toLowerCase()); + .match( searchString.toLowerCase() ); const urlMatch = connection.url - .replace(/https?:\/\//i, "") - .replace(/www/i, "") - .replace(/[^0-9a-zA-Z ]+/, "") + .replace( /https?:\/\//i, '' ) + .replace( /www/i, '' ) + .replace( /[^0-9a-zA-Z ]+/, '' ) .toLowerCase() - .match(searchString.toLowerCase()); + .match( searchString.toLowerCase() ); - if (!nameMatch && !urlMatch) { + if ( ! nameMatch && ! urlMatch ) { return; } } - if ("mustache" === template) { + if ( 'mustache' === template ) { // Modify connection data to match what mustache wants - if (selectedConnections[connection.type + connection.id]) { + if ( selectedConnections[ connection.type + connection.id ] ) { connection.added = true; } else { connection.added = false; } - if ("internal" === connection.type) { + if ( 'internal' === connection.type ) { connection.internal = true; } showConnection = Mustache.render( - document.getElementById("dt-add-connection").innerHTML, + document.getElementById( 'dt-add-connection' ).innerHTML, { connection, } ); } else { - showConnection = template({ + showConnection = template( { connection, selectedConnections, - }); + } ); } connectionsNewList.innerHTML += showConnection; - }); + } ); - if ("" === connectionsNewList.innerHTML) { + if ( '' === connectionsNewList.innerHTML ) { connectionsNewList.innerHTML = '

No results

'; } - if ("mustache" === template) { + if ( 'mustache' === template ) { setDisabledConnections(); } } @@ -312,25 +312,25 @@ jQuery(window).on("load", () => { * * @param {string} expr Functionality to indicate. */ - function classList(expr) { - switch (expr) { - case "addEmpty": - connectionsSelected.classList.add("empty"); + function classList( expr ) { + switch ( expr ) { + case 'addEmpty': + connectionsSelected.classList.add( 'empty' ); break; - case "removeEmpty": - connectionsSelected.classList.remove("empty"); + case 'removeEmpty': + connectionsSelected.classList.remove( 'empty' ); break; - case "allUnavailable": - selectAllConnections.classList.add("unavailable"); + case 'allUnavailable': + selectAllConnections.classList.add( 'unavailable' ); break; - case "all": - selectAllConnections.classList.remove("unavailable"); + case 'all': + selectAllConnections.classList.remove( 'unavailable' ); break; - case "noneUnavailable": - selectNoConnections.classList.add("unavailable"); + case 'noneUnavailable': + selectNoConnections.classList.add( 'unavailable' ); break; - case "none": - selectNoConnections.classList.remove("unavailable"); + case 'none': + selectNoConnections.classList.remove( 'unavailable' ); break; } } @@ -344,51 +344,51 @@ jQuery(window).on("load", () => { // Determine if we need to hide the admin bar maybeHideAdminBar(); - if (distributorPushWrapper.classList.contains("loaded")) { + if ( distributorPushWrapper.classList.contains( 'loaded' ) ) { return; } - distributorPushWrapper.classList.remove("message-error"); - distributorPushWrapper.classList.add("loaded"); + distributorPushWrapper.classList.remove( 'message-error' ); + distributorPushWrapper.classList.add( 'loaded' ); const data = { - action: "dt_load_connections", + action: 'dt_load_connections', loadConnectionsNonce: dt.loadConnectionsNonce, postId: dt.postId, }; - const template = processTemplate("dt-show-connections"); + const template = processTemplate( 'dt-show-connections' ); const xhr = dt.usexhr ? { withCredentials: true } : false; jQuery - .ajax({ + .ajax( { url: dt.ajaxurl, xhrFields: xhr, - method: "post", + method: 'post', data, - }) - .done((response) => { - if (!response.success || !response.data) { - distributorPushWrapper.classList.remove("loaded"); - distributorPushWrapper.classList.add("message-error"); + } ) + .done( ( response ) => { + if ( ! response.success || ! response.data ) { + distributorPushWrapper.classList.remove( 'loaded' ); + distributorPushWrapper.classList.add( 'message-error' ); return; } dtConnections = response.data; - if ("mustache" === template) { + if ( 'mustache' === template ) { // Manipulate the data to match what mustache needs const mustacheData = { connections: [] }; - _.each(dtConnections, (connection) => { - if ("internal" === connection.type) { + _.each( dtConnections, ( connection ) => { + if ( 'internal' === connection.type ) { connection.internal = true; } - mustacheData.connections.push(connection); - }); + mustacheData.connections.push( connection ); + } ); distributorPushWrapper.innerHTML = Mustache.render( - document.getElementById("dt-show-connections") + document.getElementById( 'dt-show-connections' ) .innerHTML, { connections: mustacheData.connections, @@ -399,17 +399,17 @@ jQuery(window).on("load", () => { setDisabledConnections(); } else { - distributorPushWrapper.innerHTML = template({ + distributorPushWrapper.innerHTML = template( { connections: dtConnections, - }); + } ); } setVariables(); - }) - .error(() => { - distributorPushWrapper.classList.remove("loaded"); - distributorPushWrapper.classList.add("message-error"); - }); + } ) + .error( () => { + distributorPushWrapper.classList.remove( 'loaded' ); + distributorPushWrapper.classList.add( 'message-error' ); + } ); } /** @@ -417,14 +417,14 @@ jQuery(window).on("load", () => { */ function maybeCloseDistributorMenu() { // If a distribution is in progress, don't close things - if (distributorTopMenu.classList.contains("syncing")) { + if ( distributorTopMenu.classList.contains( 'syncing' ) ) { return; } // If the Distributor menu is showing, hide everything - if (distributorTopMenu.classList.contains("hover")) { - distributorTopMenu.classList.remove("hover"); - document.body.classList.remove("is-showing-distributor"); + if ( distributorTopMenu.classList.contains( 'hover' ) ) { + distributorTopMenu.classList.remove( 'hover' ); + document.body.classList.remove( 'is-showing-distributor' ); } // Determine if we need to hide the admin bar @@ -432,15 +432,15 @@ jQuery(window).on("load", () => { } const distributorAdminItem = document.querySelector( - "#wp-admin-bar-distributor > a" + '#wp-admin-bar-distributor > a' ); // Event listeners when to fetch distributor data. distributorAdminItem.addEventListener( - "keydown", - function (e) { + 'keydown', + function ( e ) { // Pressing Enter. - if (13 === e.keyCode) { + if ( 13 === e.keyCode ) { distributorMenuEntered(); } }, @@ -448,7 +448,7 @@ jQuery(window).on("load", () => { ); // In full screen mode, add hoverintent to remove admin bar on hover out - if (document.body.classList.contains("is-fullscreen-mode")) { + if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) { window .hoverintent( distributorTopMenu, @@ -457,9 +457,9 @@ jQuery(window).on("load", () => { }, maybeHideAdminBar ) - .options({ + .options( { timeout: 180, - }); + } ); } /** @@ -469,37 +469,37 @@ jQuery(window).on("load", () => { */ function maybeHideAdminBar() { if ( - !distributorTopMenu.classList.contains("hover") && - !distributorTopMenu.classList.contains("syncing") + ! distributorTopMenu.classList.contains( 'hover' ) && + ! distributorTopMenu.classList.contains( 'syncing' ) ) { - document.body.classList.remove("is-showing-distributor"); + document.body.classList.remove( 'is-showing-distributor' ); } } distributorAdminItem.addEventListener( - "touchstart", + 'touchstart', distributorMenuEntered, false ); distributorAdminItem.addEventListener( - "mouseenter", + 'mouseenter', distributorMenuEntered, false ); - overlayDiv.addEventListener("click", maybeCloseDistributorMenu, true); + overlayDiv.addEventListener( 'click', maybeCloseDistributorMenu, true ); /** * Do syndication ajax */ - jQuery(distributorPushWrapper).on("click", ".syndicate-button", () => { - if (distributorTopMenu.classList.contains("syncing")) { + jQuery( distributorPushWrapper ).on( 'click', '.syndicate-button', () => { + if ( distributorTopMenu.classList.contains( 'syncing' ) ) { return; } - distributorTopMenu.classList.add("syncing"); + distributorTopMenu.classList.add( 'syncing' ); const data = { - action: "dt_push", + action: 'dt_push', nonce: dt.nonce, connections: selectedConnections, postId: dt.postId, @@ -507,220 +507,244 @@ jQuery(window).on("load", () => { data.postStatus = null !== asDraftInput && asDraftInput.checked - ? "draft" + ? 'draft' : postStatusInput.value; const xhr = dt.usexhr ? { withCredentials: true } : false; jQuery - .ajax({ + .ajax( { url: dt.ajaxurl, xhrFields: xhr, - method: "post", + method: 'post', data, - }) - .done((response) => { - setTimeout(() => { - distributorTopMenu.classList.remove("syncing"); + } ) + .done( ( response ) => { + setTimeout( () => { + distributorTopMenu.classList.remove( 'syncing' ); // Maybe hide the admin bar maybeHideAdminBar(); - if (!response.success) { - doError(response.data); + if ( ! response.success ) { + doError( response.data ); return; } - if (!response.data || !response.data.results) { - doError(dt.messages.empty_result); + if ( ! response.data || ! response.data.results ) { + doError( dt.messages.empty_result ); return; } - doSuccess(response.data.results); - }, 500); - }) + doSuccess( response.data.results ); + }, 500 ); + } ) // eslint-disable-next-line no-shadow - .error((xhr, textStatus, errorThrown) => { - setTimeout(() => { - distributorTopMenu.classList.remove("syncing"); + .error( ( xhr, textStatus, errorThrown ) => { + setTimeout( () => { + distributorTopMenu.classList.remove( 'syncing' ); - doError(`${dt.messages.ajax_error} ${errorThrown}`); - }, 500); - }); - }); + doError( `${ dt.messages.ajax_error } ${ errorThrown }` ); + }, 500 ); + } ); + } ); /** * Add a connection to selected connections for ajax and to the UI list. */ - jQuery(distributorPushWrapper).on("click", ".add-connection", (event) => { - if ("A" === event.target.nodeName) { - return; - } + jQuery( distributorPushWrapper ).on( + 'click', + '.add-connection', + ( event ) => { + if ( 'A' === event.target.nodeName ) { + return; + } - event.preventDefault(); + event.preventDefault(); - if (event.currentTarget.classList.contains("syndicated")) { - return; - } + if ( event.currentTarget.classList.contains( 'syndicated' ) ) { + return; + } - if (event.currentTarget.classList.contains("added")) { - const type = event.currentTarget.getAttribute( - "data-connection-type" - ); - const id = event.currentTarget.getAttribute("data-connection-id"); + if ( event.currentTarget.classList.contains( 'added' ) ) { + const type = event.currentTarget.getAttribute( + 'data-connection-type' + ); + const id = + event.currentTarget.getAttribute( 'data-connection-id' ); - const deleteNode = connectionsSelectedList.querySelector( - `[data-connection-id="${id}"][data-connection-type="${type}"]` - ); + const deleteNode = connectionsSelectedList.querySelector( + `[data-connection-id="${ id }"][data-connection-type="${ type }"]` + ); - deleteNode.parentNode.removeChild(deleteNode); + deleteNode.parentNode.removeChild( deleteNode ); - delete selectedConnections[type + id]; + delete selectedConnections[ type + id ]; - document.querySelector(".selected-connections-count").textContent = - "( " + Object.keys(selectedConnections).length + " )"; + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; - if (selectAllConnections.classList.contains("unavailable")) { - classList("all"); - } - if (!Object.keys(selectedConnections).length) { - classList("addEmpty"); - classList("noneUnavailable"); - } + if ( + selectAllConnections.classList.contains( 'unavailable' ) + ) { + classList( 'all' ); + } + if ( ! Object.keys( selectedConnections ).length ) { + classList( 'addEmpty' ); + classList( 'noneUnavailable' ); + } - showConnections(); - } else { - const type = event.currentTarget.getAttribute( - "data-connection-type" - ); - const id = event.currentTarget.getAttribute("data-connection-id"); + showConnections(); + } else { + const type = event.currentTarget.getAttribute( + 'data-connection-type' + ); + const id = + event.currentTarget.getAttribute( 'data-connection-id' ); - selectedConnections[type + id] = dtConnections[type + id]; + selectedConnections[ type + id ] = dtConnections[ type + id ]; - const element = event.currentTarget.cloneNode(true); - document.querySelector(".selected-connections-count").textContent = - "( " + Object.keys(selectedConnections).length + " )"; + const element = event.currentTarget.cloneNode( true ); + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; - const removeLink = document.createElement("span"); - removeLink.classList.add("remove-connection"); + const removeLink = document.createElement( 'span' ); + removeLink.classList.add( 'remove-connection' ); - element.appendChild(removeLink); - element.classList = "added-connection"; - connectionsSelectedList.appendChild(element); + element.appendChild( removeLink ); + element.classList = 'added-connection'; + connectionsSelectedList.appendChild( element ); - if (selectNoConnections.classList.contains("unavailable")) { - classList("removeEmpty"); - classList("none"); - } + if ( selectNoConnections.classList.contains( 'unavailable' ) ) { + classList( 'removeEmpty' ); + classList( 'none' ); + } - if ( - // eslint-disable-next-line eqeqeq - Object.keys(selectedConnections).length == - connectionsAvailableTotal - ) { - classList("allUnavailable"); - } + if ( + // eslint-disable-next-line eqeqeq + Object.keys( selectedConnections ).length == + connectionsAvailableTotal + ) { + classList( 'allUnavailable' ); + } - showConnections(); + showConnections(); + } } - }); + ); /** * Select all connections for distribution. */ - jQuery(distributorPushWrapper).on("click", ".selectall-connections", () => { - jQuery(connectionsNewList) - .children(".add-connection") - .each((index, childTarget) => { - if ( - childTarget.classList.contains("syndicated") || - childTarget.classList.contains("added") - ) { - return; - } - const type = childTarget.getAttribute("data-connection-type"); - const id = childTarget.getAttribute("data-connection-id"); + jQuery( distributorPushWrapper ).on( + 'click', + '.selectall-connections', + () => { + jQuery( connectionsNewList ) + .children( '.add-connection' ) + .each( ( index, childTarget ) => { + if ( + childTarget.classList.contains( 'syndicated' ) || + childTarget.classList.contains( 'added' ) + ) { + return; + } + const type = childTarget.getAttribute( + 'data-connection-type' + ); + const id = childTarget.getAttribute( 'data-connection-id' ); - selectedConnections[type + id] = dtConnections[type + id]; + selectedConnections[ type + id ] = + dtConnections[ type + id ]; - const element = childTarget.cloneNode(); - element.innerText = childTarget.innerText; + const element = childTarget.cloneNode(); + element.innerText = childTarget.innerText; - const removeLink = document.createElement("span"); - removeLink.classList.add("remove-connection"); + const removeLink = document.createElement( 'span' ); + removeLink.classList.add( 'remove-connection' ); - element.appendChild(removeLink); - element.classList = "added-connection"; + element.appendChild( removeLink ); + element.classList = 'added-connection'; - document.querySelector( - ".selected-connections-count" - ).textContent = - "( " + Object.keys(selectedConnections).length + " )"; - connectionsSelectedList.appendChild(element); + document.querySelector( '.selected-connections-count' ).textContent = + '( ' + Object.keys( selectedConnections ).length + ' )'; + + connectionsSelectedList.appendChild( element ); - if ("" !== connectionsAvailableTotal) { - classList("removeEmpty"); - classList("allUnavailable"); - classList("none"); - } - }); + if ( '' !== connectionsAvailableTotal ) { + classList( 'removeEmpty' ); + classList( 'allUnavailable' ); + classList( 'none' ); + } + } ); - showConnections(); - }); + showConnections(); + } + ); /** * Select no connections for distribution. */ - jQuery(distributorPushWrapper).on("click", ".selectno-connections", () => { - while (connectionsSelectedList.firstChild) { - const type = connectionsSelectedList.firstChild.getAttribute( - "data-connection-type" - ); - const id = - connectionsSelectedList.firstChild.getAttribute( - "data-connection-id" + jQuery( distributorPushWrapper ).on( + 'click', + '.selectno-connections', + () => { + while ( connectionsSelectedList.firstChild ) { + const type = connectionsSelectedList.firstChild.getAttribute( + 'data-connection-type' ); + const id = + connectionsSelectedList.firstChild.getAttribute( + 'data-connection-id' + ); - delete selectedConnections[type + id]; + delete selectedConnections[ type + id ]; - document.querySelector(".selected-connections-count").textContent = - "( " + Object.keys(selectedConnections).length + " )"; + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; - connectionsSelectedList.removeChild( - connectionsSelectedList.firstChild - ); - } + connectionsSelectedList.removeChild( + connectionsSelectedList.firstChild + ); + } - if ("" !== connectionsAvailableTotal) { - classList("addEmpty"); - classList("noneUnavailable"); - classList("all"); - } + if ( '' !== connectionsAvailableTotal ) { + classList( 'addEmpty' ); + classList( 'noneUnavailable' ); + classList( 'all' ); + } - showConnections(); - }); + showConnections(); + } + ); /** * Remove a connection from selected connections and the UI list */ - jQuery(distributorPushWrapper).on("click", ".added-connection", (event) => { - event.currentTarget.parentNode.removeChild(event.currentTarget); - const type = event.currentTarget.getAttribute("data-connection-type"); - const id = event.currentTarget.getAttribute("data-connection-id"); + jQuery( distributorPushWrapper ).on( + 'click', + '.added-connection', + ( event ) => { + event.currentTarget.parentNode.removeChild( event.currentTarget ); + const type = event.currentTarget.getAttribute( + 'data-connection-type' + ); + const id = event.currentTarget.getAttribute( 'data-connection-id' ); - delete selectedConnections[type + id]; + delete selectedConnections[ type + id ]; - document.querySelector(".selected-connections-count").textContent = - "( " + Object.keys(selectedConnections).length + " )"; + document.querySelector( '.selected-connections-count' ).textContent = + '(' + Object.keys( selectedConnections ).length + ')'; - if (selectAllConnections.classList.contains("unavailable")) { - classList("all"); - } - if (!Object.keys(selectedConnections).length) { - classList("addEmpty"); - classList("noneUnavailable"); - } + if ( selectAllConnections.classList.contains( 'unavailable' ) ) { + classList( 'all' ); + } + if ( ! Object.keys( selectedConnections ).length ) { + classList( 'addEmpty' ); + classList( 'noneUnavailable' ); + } - showConnections(); - }); -}); + showConnections(); + } + ); +} ); From 22a5031fbfb08b1a8f2e91d5cc77ad624926c55f Mon Sep 17 00:00:00 2001 From: Peter Wilson <519727+peterwilsoncc@users.noreply.github.com> Date: Thu, 23 Feb 2023 13:01:29 +1100 Subject: [PATCH 12/30] CS: Fix prettier issues. --- assets/js/push.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 91358c0df..5f5d9ee62 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,7 +581,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = + document.querySelector( + '.selected-connections-count' + ).textContent = '( ' + Object.keys( selectedConnections ).length + ' )'; if ( @@ -605,7 +607,9 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - document.querySelector( '.selected-connections-count' ).textContent = + document.querySelector( + '.selected-connections-count' + ).textContent = '( ' + Object.keys( selectedConnections ).length + ' )'; const removeLink = document.createElement( 'span' ); @@ -666,9 +670,11 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - document.querySelector( '.selected-connections-count' ).textContent = + document.querySelector( + '.selected-connections-count' + ).textContent = '( ' + Object.keys( selectedConnections ).length + ' )'; - + connectionsSelectedList.appendChild( element ); if ( '' !== connectionsAvailableTotal ) { @@ -700,7 +706,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; connectionsSelectedList.removeChild( @@ -733,7 +741,9 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - document.querySelector( '.selected-connections-count' ).textContent = + document.querySelector( + '.selected-connections-count' + ).textContent = '(' + Object.keys( selectedConnections ).length + ')'; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { From 3f6b39eb4f49fb83e5b6a4391a8e4b22ddfd6a9c Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Tue, 28 Feb 2023 22:27:23 +0530 Subject: [PATCH 13/30] Added translatable string --- assets/js/push.js | 32 ++++++++++++++++++++++---------- templates/show-connections.php | 3 +-- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 5f5d9ee62..7d9ebe7a9 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -3,6 +3,7 @@ import '../css/push.scss'; import jQuery from 'jquery'; import _ from 'underscore'; import Mustache from 'mustache'; +import { sprintf, _n } from '@wordpress/i18n'; const { document, dt } = window; @@ -581,10 +582,12 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; + let message = ''; + message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-count' + '.selected-connections-text' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + message; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -607,10 +610,13 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); + + let message = ''; + message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-count' + '.selected-connections-text' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + message; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -670,10 +676,12 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; + let message = ''; + message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-count' + '.selected-connections-text' ).textContent = - '( ' + Object.keys( selectedConnections ).length + ' )'; + message; connectionsSelectedList.appendChild( element ); @@ -706,10 +714,12 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; + let message = ''; + message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-count' + '.selected-connections-text' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; + message; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -741,10 +751,12 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; + let message = ''; + message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-count' + '.selected-connections-text' ).textContent = - '(' + Object.keys( selectedConnections ).length + ')'; + message; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); diff --git a/templates/show-connections.php b/templates/show-connections.php index c6c85126e..abfaa8565 100644 --- a/templates/show-connections.php +++ b/templates/show-connections.php @@ -43,8 +43,7 @@ class="add-connection<# if ( ! _.isEmpty( connections[ key ]['syndicated'] ) ) {
- - +
From 5a494382959557bcb84cf424053056d780743467 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Tue, 28 Feb 2023 23:56:49 +0530 Subject: [PATCH 14/30] Changed variable name for translatable string --- assets/js/push.js | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 7d9ebe7a9..faa1d77d9 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -6,7 +6,7 @@ import Mustache from 'mustache'; import { sprintf, _n } from '@wordpress/i18n'; const { document, dt } = window; - +let selectedText = ''; let selectedConnections = {}, searchString = ''; const processTemplate = _.memoize( ( id ) => { @@ -582,12 +582,11 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - let message = ''; - message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' ).textContent = - message; + selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) @@ -611,12 +610,11 @@ jQuery( window ).on( 'load', () => { const element = event.currentTarget.cloneNode( true ); - let message = ''; - message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' ).textContent = - message; + selectedText; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -676,12 +674,11 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - let message = ''; - message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' ).textContent = - message; + selectedText; connectionsSelectedList.appendChild( element ); @@ -714,12 +711,11 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - let message = ''; - message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' ).textContent = - message; + selectedText; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -751,12 +747,11 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - let message = ''; - message = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' ).textContent = - message; + selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 2a807bc663dae90d1452c2ae02eabcc049c15735 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 13:11:10 +0530 Subject: [PATCH 15/30] Resolved Eslint errors --- assets/js/push.js | 30 +++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index faa1d77d9..9d69954a7 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,8 +581,12 @@ jQuery( window ).on( 'load', () => { deleteNode.parentNode.removeChild( deleteNode ); delete selectedConnections[ type + id ]; + + selectedText = sprintf( + _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + Object.keys( selectedConnections ).length + ); - selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' ).textContent = @@ -610,7 +614,11 @@ jQuery( window ).on( 'load', () => { const element = event.currentTarget.cloneNode( true ); - selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( + _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + Object.keys( selectedConnections ).length + ); + document.querySelector( '.selected-connections-text' ).textContent = @@ -674,7 +682,11 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( + _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + Object.keys( selectedConnections ).length + ); + document.querySelector( '.selected-connections-text' ).textContent = @@ -711,7 +723,11 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( + _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + Object.keys( selectedConnections ).length + ); + document.querySelector( '.selected-connections-text' ).textContent = @@ -747,7 +763,11 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; - selectedText = sprintf( _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'text-domain' ), Object.keys( selectedConnections ).length ); + selectedText = sprintf( + _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + Object.keys( selectedConnections ).length + ); + document.querySelector( '.selected-connections-text' ).textContent = From 94514d0ede3d4f0ec5ba09b14346ca032785d49e Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 14:45:48 +0530 Subject: [PATCH 16/30] Resolved Eslint errors --- assets/js/push.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 9d69954a7..1eb954370 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -581,12 +581,12 @@ jQuery( window ).on( 'load', () => { deleteNode.parentNode.removeChild( deleteNode ); delete selectedConnections[ type + id ]; - selectedText = sprintf( - _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + _n( + 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' + ), Object.keys( selectedConnections ).length ); - document.querySelector( '.selected-connections-text' ).textContent = @@ -613,12 +613,12 @@ jQuery( window ).on( 'load', () => { selectedConnections[ type + id ] = dtConnections[ type + id ]; const element = event.currentTarget.cloneNode( true ); - selectedText = sprintf( - _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + _n( + 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' + ), Object.keys( selectedConnections ).length ); - document.querySelector( '.selected-connections-text' ).textContent = @@ -681,12 +681,12 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; - selectedText = sprintf( - _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + _n( + 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' + ), Object.keys( selectedConnections ).length ); - document.querySelector( '.selected-connections-text' ).textContent = @@ -722,12 +722,12 @@ jQuery( window ).on( 'load', () => { ); delete selectedConnections[ type + id ]; - selectedText = sprintf( - _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + _n( + 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' + ), Object.keys( selectedConnections ).length ); - document.querySelector( '.selected-connections-text' ).textContent = @@ -762,12 +762,12 @@ jQuery( window ).on( 'load', () => { const id = event.currentTarget.getAttribute( 'data-connection-id' ); delete selectedConnections[ type + id ]; - selectedText = sprintf( - _n( 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' ), + _n( + 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' + ), Object.keys( selectedConnections ).length ); - document.querySelector( '.selected-connections-text' ).textContent = From 6eb5fd6507ea110b4868df5669e0b7a429c64d5a Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 15:01:17 +0530 Subject: [PATCH 17/30] Resolved Eslint errors --- assets/js/push.js | 1529 ++++++++++++++++++++++----------------------- 1 file changed, 746 insertions(+), 783 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 1eb954370..8b3e2b088 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -1,787 +1,750 @@ -import '../css/push.scss'; +import "../css/push.scss"; -import jQuery from 'jquery'; -import _ from 'underscore'; -import Mustache from 'mustache'; -import { sprintf, _n } from '@wordpress/i18n'; +import jQuery from "jquery"; +import _ from "underscore"; +import Mustache from "mustache"; +import { sprintf, _n } from "@wordpress/i18n"; const { document, dt } = window; -let selectedText = ''; +let selectedText = ""; let selectedConnections = {}, - searchString = ''; -const processTemplate = _.memoize( ( id ) => { - const element = document.getElementById( id ); - if ( ! element ) { - return false; - } - - if ( element.attributes.template ) { - Mustache.parse( element.innerHTML ); - return 'mustache'; - } - // Use WordPress style Backbone template syntax - const options = { - evaluate: /<#([\s\S]+?)#>/g, - interpolate: /{{{([\s\S]+?)}}}/g, - escape: /{{([^}]+?)}}(?!})/g, - }; - - return _.template( element.innerHTML, null, options ); -} ); - -jQuery( window ).on( 'load', () => { - const distributorMenuItem = document.querySelector( - '#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder' - ); - const distributorPushWrapper = document.querySelector( - '#distributor-push-wrapper' - ); - - if ( ! distributorMenuItem || ! distributorPushWrapper ) { - return; - } - - let dtConnections = ''; - let connectionsSelected = ''; - let connectionsSelectedList = ''; - let connectionsNewList = ''; - let connectionsNewListChildren = ''; - let connectionsAvailableTotal = ''; - let selectAllConnections = ''; - let selectNoConnections = ''; - let connectionsSearchInput = ''; - let postStatusInput = ''; - let asDraftInput = ''; - let errorDetails = ''; - - distributorMenuItem.appendChild( distributorPushWrapper ); - - // Add our overlay div - const overlayDiv = document.createElement( 'div' ); - overlayDiv.id = 'distributor-overlay'; - - const distributorTopMenu = document.querySelector( - '#wp-admin-bar-distributor' - ); - - distributorTopMenu.parentNode.insertBefore( - overlayDiv, - distributorTopMenu.nextSibling - ); - - /** - * Set variables after connections have been rendered - */ - function setVariables() { - connectionsSelected = distributorPushWrapper.querySelector( - '.connections-selected' - ); - connectionsSelectedList = distributorPushWrapper.querySelector( - '.selected-connections-list' - ); - connectionsNewList = distributorPushWrapper.querySelector( - '.new-connections-list' - ); - selectAllConnections = distributorPushWrapper.querySelector( - '.selectall-connections' - ); - selectNoConnections = distributorPushWrapper.querySelector( - '.selectno-connections' - ); - connectionsSearchInput = document.getElementById( - 'dt-connection-search' - ); - postStatusInput = document.getElementById( 'dt-post-status' ); - asDraftInput = document.getElementById( 'dt-as-draft' ); - errorDetails = document.querySelector( '.dt-error ul.details' ); - - if ( null !== connectionsNewList ) { - connectionsNewListChildren = - connectionsNewList.querySelectorAll( '.add-connection' ); - } - - /** - * Listen for connection filtering - */ - jQuery( connectionsSearchInput ).on( - 'keyup change', - _.debounce( ( event ) => { - if ( '' === event.currentTarget.value ) { - showConnections( dtConnections ); - } - searchString = event.currentTarget.value - .replace( /https?:\/\//i, '' ) - .replace( /www/i, '' ) - .replace( /[^0-9a-zA-Z ]+/, '' ); - showConnections(); - }, 300 ) - ); - - /** - * Disable select all button if all connections are syndicated and set variable for total connections available - */ - _.each( connectionsNewListChildren, ( element ) => { - if ( ! element.classList.contains( 'syndicated' ) ) { - selectAllConnections.classList.remove( 'unavailable' ); - connectionsAvailableTotal++; - } - } ); - } - - /** - * Set the disabled attribute on connections already syndicated - * - * This is currently only used for the mustache templates, which - * are only used in AMP contexts. Seems the AMP plugin will - * strip out any normal disabled attributes, so we handle that here - * instead of in the template. - */ - function setDisabledConnections() { - connectionsNewList = distributorPushWrapper.querySelector( - '.new-connections-list' - ); - - if ( null !== connectionsNewList ) { - connectionsNewListChildren = - connectionsNewList.querySelectorAll( '.add-connection' ); - - _.each( connectionsNewListChildren, ( element ) => { - if ( element.classList.contains( 'syndicated' ) ) { - element.disabled = true; - } - } ); - } - } - - /** - * Handle UI error changes - * - * @param {string[]} messages Array of error messages. - */ - function doError( messages ) { - distributorPushWrapper.classList.add( 'message-error' ); - errorDetails.innerText = ''; - - _.each( prepareMessages( messages ), function ( message ) { - const errorItem = document.createElement( 'li' ); - errorItem.innerText = message; - errorDetails.appendChild( errorItem ); - } ); - } - - /** - * Prepare error messages for printing. - * - * @param {string | Array} messages Error messages. - */ - function prepareMessages( messages ) { - if ( ! _.isArray( messages ) ) { - return [ messages ]; - } - - return _.map( messages, function ( message ) { - if ( _.isString( message ) ) { - return message; - } - if ( _.has( message, 'message' ) ) { - return message.message; - } - } ); - } - - /** - * Handle UI success changes. - * - * @param {Object[]} results Array of results from distribution attempts. - */ - function doSuccess( results ) { - let success = false; - const errors = {}; - - [ 'internal', 'external' ].forEach( ( type ) => { - _.each( results[ type ], ( result, connectionId ) => { - if ( 'success' === result.status ) { - dtConnections[ `${ type }${ connectionId }` ].syndicated = - result.url; - success = true; - } - - if ( ! _.isEmpty( result.errors ) ) { - errors[ `${ type }${ connectionId }` ] = result.errors; - } - } ); - } ); - - if ( ! _.isEmpty( errors ) ) { - const formattedErrors = _.map( - errors, - function ( messages, connectionId ) { - return `${ dtConnections[ connectionId ].name }:\n${ _.map( - messages, - function ( message ) { - return `- ${ message }\n`; - } - ) }`; - } - ); - - doError( formattedErrors ); - } - - if ( success && _.isEmpty( errors ) ) { - distributorPushWrapper.classList.add( 'message-success' ); - - connectionsSelected.classList.add( 'empty' ); - connectionsSelectedList.innerText = ''; - - setTimeout( () => { - distributorPushWrapper.classList.remove( 'message-success' ); - }, 6000 ); - } - - selectedConnections = {}; - - showConnections(); - } - - /** - * Show connections. If there is a search string, then filter by it - */ - function showConnections() { - connectionsNewList.innerText = ''; - const template = processTemplate( 'dt-add-connection' ); - let showConnection = ''; - - _.each( dtConnections, ( connection ) => { - if ( '' !== searchString ) { - const nameMatch = connection.name - .replace( /[^0-9a-zA-Z ]+/, '' ) - .toLowerCase() - .match( searchString.toLowerCase() ); - const urlMatch = connection.url - .replace( /https?:\/\//i, '' ) - .replace( /www/i, '' ) - .replace( /[^0-9a-zA-Z ]+/, '' ) - .toLowerCase() - .match( searchString.toLowerCase() ); - - if ( ! nameMatch && ! urlMatch ) { - return; - } - } - - if ( 'mustache' === template ) { - // Modify connection data to match what mustache wants - if ( selectedConnections[ connection.type + connection.id ] ) { - connection.added = true; - } else { - connection.added = false; - } - - if ( 'internal' === connection.type ) { - connection.internal = true; - } - - showConnection = Mustache.render( - document.getElementById( 'dt-add-connection' ).innerHTML, - { - connection, - } - ); - } else { - showConnection = template( { - connection, - selectedConnections, - } ); - } - - connectionsNewList.innerHTML += showConnection; - } ); - - if ( '' === connectionsNewList.innerHTML ) { - connectionsNewList.innerHTML = - '

No results

'; - } - - if ( 'mustache' === template ) { - setDisabledConnections(); - } - } - - /** - * Add or remove CSS classes to indicate button functionality. - * - * @param {string} expr Functionality to indicate. - */ - function classList( expr ) { - switch ( expr ) { - case 'addEmpty': - connectionsSelected.classList.add( 'empty' ); - break; - case 'removeEmpty': - connectionsSelected.classList.remove( 'empty' ); - break; - case 'allUnavailable': - selectAllConnections.classList.add( 'unavailable' ); - break; - case 'all': - selectAllConnections.classList.remove( 'unavailable' ); - break; - case 'noneUnavailable': - selectNoConnections.classList.add( 'unavailable' ); - break; - case 'none': - selectNoConnections.classList.remove( 'unavailable' ); - break; - } - } - - /** - * Handle distributor push dropdown menu. - */ - function distributorMenuEntered() { - distributorMenuItem.focus(); - - // Determine if we need to hide the admin bar - maybeHideAdminBar(); - - if ( distributorPushWrapper.classList.contains( 'loaded' ) ) { - return; - } - - distributorPushWrapper.classList.remove( 'message-error' ); - distributorPushWrapper.classList.add( 'loaded' ); - - const data = { - action: 'dt_load_connections', - loadConnectionsNonce: dt.loadConnectionsNonce, - postId: dt.postId, - }; - - const template = processTemplate( 'dt-show-connections' ); - const xhr = dt.usexhr ? { withCredentials: true } : false; - - jQuery - .ajax( { - url: dt.ajaxurl, - xhrFields: xhr, - method: 'post', - data, - } ) - .done( ( response ) => { - if ( ! response.success || ! response.data ) { - distributorPushWrapper.classList.remove( 'loaded' ); - distributorPushWrapper.classList.add( 'message-error' ); - return; - } - - dtConnections = response.data; - - if ( 'mustache' === template ) { - // Manipulate the data to match what mustache needs - const mustacheData = { connections: [] }; - _.each( dtConnections, ( connection ) => { - if ( 'internal' === connection.type ) { - connection.internal = true; - } - - mustacheData.connections.push( connection ); - } ); - - distributorPushWrapper.innerHTML = Mustache.render( - document.getElementById( 'dt-show-connections' ) - .innerHTML, - { - connections: mustacheData.connections, - foundConnections: mustacheData.connections.length, - showSearch: 5 < mustacheData.connections.length, - } - ); - - setDisabledConnections(); - } else { - distributorPushWrapper.innerHTML = template( { - connections: dtConnections, - } ); - } - - setVariables(); - } ) - .error( () => { - distributorPushWrapper.classList.remove( 'loaded' ); - distributorPushWrapper.classList.add( 'message-error' ); - } ); - } - - /** - * Close distributor menu when a click occurs outside of it - */ - function maybeCloseDistributorMenu() { - // If a distribution is in progress, don't close things - if ( distributorTopMenu.classList.contains( 'syncing' ) ) { - return; - } - - // If the Distributor menu is showing, hide everything - if ( distributorTopMenu.classList.contains( 'hover' ) ) { - distributorTopMenu.classList.remove( 'hover' ); - document.body.classList.remove( 'is-showing-distributor' ); - } - - // Determine if we need to hide the admin bar - maybeHideAdminBar(); - } - - const distributorAdminItem = document.querySelector( - '#wp-admin-bar-distributor > a' - ); - - // Event listeners when to fetch distributor data. - distributorAdminItem.addEventListener( - 'keydown', - function ( e ) { - // Pressing Enter. - if ( 13 === e.keyCode ) { - distributorMenuEntered(); - } - }, - false - ); - - // In full screen mode, add hoverintent to remove admin bar on hover out - if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) { - window - .hoverintent( - distributorTopMenu, - function () { - return null; - }, - maybeHideAdminBar - ) - .options( { - timeout: 180, - } ); - } - - /** - * Distributor menu hovered out - * - * Used to remove the admin bar from showing. - */ - function maybeHideAdminBar() { - if ( - ! distributorTopMenu.classList.contains( 'hover' ) && - ! distributorTopMenu.classList.contains( 'syncing' ) - ) { - document.body.classList.remove( 'is-showing-distributor' ); - } - } - - distributorAdminItem.addEventListener( - 'touchstart', - distributorMenuEntered, - false - ); - distributorAdminItem.addEventListener( - 'mouseenter', - distributorMenuEntered, - false - ); - overlayDiv.addEventListener( 'click', maybeCloseDistributorMenu, true ); - - /** - * Do syndication ajax - */ - jQuery( distributorPushWrapper ).on( 'click', '.syndicate-button', () => { - if ( distributorTopMenu.classList.contains( 'syncing' ) ) { - return; - } - - distributorTopMenu.classList.add( 'syncing' ); - - const data = { - action: 'dt_push', - nonce: dt.nonce, - connections: selectedConnections, - postId: dt.postId, - }; - - data.postStatus = - null !== asDraftInput && asDraftInput.checked - ? 'draft' - : postStatusInput.value; - - const xhr = dt.usexhr ? { withCredentials: true } : false; - - jQuery - .ajax( { - url: dt.ajaxurl, - xhrFields: xhr, - method: 'post', - data, - } ) - .done( ( response ) => { - setTimeout( () => { - distributorTopMenu.classList.remove( 'syncing' ); - - // Maybe hide the admin bar - maybeHideAdminBar(); - - if ( ! response.success ) { - doError( response.data ); - return; - } - - if ( ! response.data || ! response.data.results ) { - doError( dt.messages.empty_result ); - return; - } - - doSuccess( response.data.results ); - }, 500 ); - } ) - // eslint-disable-next-line no-shadow - .error( ( xhr, textStatus, errorThrown ) => { - setTimeout( () => { - distributorTopMenu.classList.remove( 'syncing' ); - - doError( `${ dt.messages.ajax_error } ${ errorThrown }` ); - }, 500 ); - } ); - } ); - - /** - * Add a connection to selected connections for ajax and to the UI list. - */ - jQuery( distributorPushWrapper ).on( - 'click', - '.add-connection', - ( event ) => { - if ( 'A' === event.target.nodeName ) { - return; - } - - event.preventDefault(); - - if ( event.currentTarget.classList.contains( 'syndicated' ) ) { - return; - } - - if ( event.currentTarget.classList.contains( 'added' ) ) { - const type = event.currentTarget.getAttribute( - 'data-connection-type' - ); - const id = - event.currentTarget.getAttribute( 'data-connection-id' ); - - const deleteNode = connectionsSelectedList.querySelector( - `[data-connection-id="${ id }"][data-connection-type="${ type }"]` - ); - - deleteNode.parentNode.removeChild( deleteNode ); - - delete selectedConnections[ type + id ]; - selectedText = sprintf( - _n( - 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' - ), - Object.keys( selectedConnections ).length - ); - document.querySelector( - '.selected-connections-text' - ).textContent = - selectedText; - - if ( - selectAllConnections.classList.contains( 'unavailable' ) - ) { - classList( 'all' ); - } - if ( ! Object.keys( selectedConnections ).length ) { - classList( 'addEmpty' ); - classList( 'noneUnavailable' ); - } - - showConnections(); - } else { - const type = event.currentTarget.getAttribute( - 'data-connection-type' - ); - const id = - event.currentTarget.getAttribute( 'data-connection-id' ); - - selectedConnections[ type + id ] = dtConnections[ type + id ]; - - const element = event.currentTarget.cloneNode( true ); - selectedText = sprintf( - _n( - 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' - ), - Object.keys( selectedConnections ).length - ); - document.querySelector( - '.selected-connections-text' - ).textContent = - selectedText; - - const removeLink = document.createElement( 'span' ); - removeLink.classList.add( 'remove-connection' ); - - element.appendChild( removeLink ); - element.classList = 'added-connection'; - connectionsSelectedList.appendChild( element ); - - if ( selectNoConnections.classList.contains( 'unavailable' ) ) { - classList( 'removeEmpty' ); - classList( 'none' ); - } - - if ( - // eslint-disable-next-line eqeqeq - Object.keys( selectedConnections ).length == - connectionsAvailableTotal - ) { - classList( 'allUnavailable' ); - } - - showConnections(); - } - } - ); - - /** - * Select all connections for distribution. - */ - jQuery( distributorPushWrapper ).on( - 'click', - '.selectall-connections', - () => { - jQuery( connectionsNewList ) - .children( '.add-connection' ) - .each( ( index, childTarget ) => { - if ( - childTarget.classList.contains( 'syndicated' ) || - childTarget.classList.contains( 'added' ) - ) { - return; - } - const type = childTarget.getAttribute( - 'data-connection-type' - ); - const id = childTarget.getAttribute( 'data-connection-id' ); - - selectedConnections[ type + id ] = - dtConnections[ type + id ]; - - const element = childTarget.cloneNode(); - element.innerText = childTarget.innerText; - - const removeLink = document.createElement( 'span' ); - removeLink.classList.add( 'remove-connection' ); - - element.appendChild( removeLink ); - element.classList = 'added-connection'; - selectedText = sprintf( - _n( - 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' - ), - Object.keys( selectedConnections ).length - ); - document.querySelector( - '.selected-connections-text' - ).textContent = - selectedText; - - connectionsSelectedList.appendChild( element ); - - if ( '' !== connectionsAvailableTotal ) { - classList( 'removeEmpty' ); - classList( 'allUnavailable' ); - classList( 'none' ); - } - } ); - - showConnections(); - } - ); - - /** - * Select no connections for distribution. - */ - jQuery( distributorPushWrapper ).on( - 'click', - '.selectno-connections', - () => { - while ( connectionsSelectedList.firstChild ) { - const type = connectionsSelectedList.firstChild.getAttribute( - 'data-connection-type' - ); - const id = - connectionsSelectedList.firstChild.getAttribute( - 'data-connection-id' - ); - - delete selectedConnections[ type + id ]; - selectedText = sprintf( - _n( - 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' - ), - Object.keys( selectedConnections ).length - ); - document.querySelector( - '.selected-connections-text' - ).textContent = - selectedText; - - connectionsSelectedList.removeChild( - connectionsSelectedList.firstChild - ); - } - - if ( '' !== connectionsAvailableTotal ) { - classList( 'addEmpty' ); - classList( 'noneUnavailable' ); - classList( 'all' ); - } - - showConnections(); - } - ); - - /** - * Remove a connection from selected connections and the UI list - */ - jQuery( distributorPushWrapper ).on( - 'click', - '.added-connection', - ( event ) => { - event.currentTarget.parentNode.removeChild( event.currentTarget ); - const type = event.currentTarget.getAttribute( - 'data-connection-type' - ); - const id = event.currentTarget.getAttribute( 'data-connection-id' ); - - delete selectedConnections[ type + id ]; - selectedText = sprintf( - _n( - 'Selected connection (%d)', 'Selected connections (%d)', Object.keys( selectedConnections ).length, 'distributor' - ), - Object.keys( selectedConnections ).length - ); - document.querySelector( - '.selected-connections-text' - ).textContent = - selectedText; - - if ( selectAllConnections.classList.contains( 'unavailable' ) ) { - classList( 'all' ); - } - if ( ! Object.keys( selectedConnections ).length ) { - classList( 'addEmpty' ); - classList( 'noneUnavailable' ); - } - - showConnections(); - } - ); -} ); + searchString = ""; +const processTemplate = _.memoize((id) => { + const element = document.getElementById(id); + if (!element) { + return false; + } + + if (element.attributes.template) { + Mustache.parse(element.innerHTML); + return "mustache"; + } + // Use WordPress style Backbone template syntax + const options = { + evaluate: /<#([\s\S]+?)#>/g, + interpolate: /{{{([\s\S]+?)}}}/g, + escape: /{{([^}]+?)}}(?!})/g, + }; + + return _.template(element.innerHTML, null, options); +}); + +jQuery(window).on("load", () => { + const distributorMenuItem = document.querySelector( + "#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder" + ); + const distributorPushWrapper = document.querySelector( + "#distributor-push-wrapper" + ); + + if (!distributorMenuItem || !distributorPushWrapper) { + return; + } + + let dtConnections = ""; + let connectionsSelected = ""; + let connectionsSelectedList = ""; + let connectionsNewList = ""; + let connectionsNewListChildren = ""; + let connectionsAvailableTotal = ""; + let selectAllConnections = ""; + let selectNoConnections = ""; + let connectionsSearchInput = ""; + let postStatusInput = ""; + let asDraftInput = ""; + let errorDetails = ""; + + distributorMenuItem.appendChild(distributorPushWrapper); + + // Add our overlay div + const overlayDiv = document.createElement("div"); + overlayDiv.id = "distributor-overlay"; + + const distributorTopMenu = document.querySelector( + "#wp-admin-bar-distributor" + ); + + distributorTopMenu.parentNode.insertBefore( + overlayDiv, + distributorTopMenu.nextSibling + ); + + /** + * Set variables after connections have been rendered + */ + function setVariables() { + connectionsSelected = distributorPushWrapper.querySelector( + ".connections-selected" + ); + connectionsSelectedList = distributorPushWrapper.querySelector( + ".selected-connections-list" + ); + connectionsNewList = distributorPushWrapper.querySelector( + ".new-connections-list" + ); + selectAllConnections = distributorPushWrapper.querySelector( + ".selectall-connections" + ); + selectNoConnections = distributorPushWrapper.querySelector( + ".selectno-connections" + ); + connectionsSearchInput = document.getElementById("dt-connection-search"); + postStatusInput = document.getElementById("dt-post-status"); + asDraftInput = document.getElementById("dt-as-draft"); + errorDetails = document.querySelector(".dt-error ul.details"); + + if (null !== connectionsNewList) { + connectionsNewListChildren = + connectionsNewList.querySelectorAll(".add-connection"); + } + + /** + * Listen for connection filtering + */ + jQuery(connectionsSearchInput).on( + "keyup change", + _.debounce((event) => { + if ("" === event.currentTarget.value) { + showConnections(dtConnections); + } + searchString = event.currentTarget.value + .replace(/https?:\/\//i, "") + .replace(/www/i, "") + .replace(/[^0-9a-zA-Z ]+/, ""); + showConnections(); + }, 300) + ); + + /** + * Disable select all button if all connections are syndicated and set variable for total connections available + */ + _.each(connectionsNewListChildren, (element) => { + if (!element.classList.contains("syndicated")) { + selectAllConnections.classList.remove("unavailable"); + connectionsAvailableTotal++; + } + }); + } + + /** + * Set the disabled attribute on connections already syndicated + * + * This is currently only used for the mustache templates, which + * are only used in AMP contexts. Seems the AMP plugin will + * strip out any normal disabled attributes, so we handle that here + * instead of in the template. + */ + function setDisabledConnections() { + connectionsNewList = distributorPushWrapper.querySelector( + ".new-connections-list" + ); + + if (null !== connectionsNewList) { + connectionsNewListChildren = + connectionsNewList.querySelectorAll(".add-connection"); + + _.each(connectionsNewListChildren, (element) => { + if (element.classList.contains("syndicated")) { + element.disabled = true; + } + }); + } + } + + /** + * Handle UI error changes + * + * @param {string[]} messages Array of error messages. + */ + function doError(messages) { + distributorPushWrapper.classList.add("message-error"); + errorDetails.innerText = ""; + + _.each(prepareMessages(messages), function (message) { + const errorItem = document.createElement("li"); + errorItem.innerText = message; + errorDetails.appendChild(errorItem); + }); + } + + /** + * Prepare error messages for printing. + * + * @param {string | Array} messages Error messages. + */ + function prepareMessages(messages) { + if (!_.isArray(messages)) { + return [messages]; + } + + return _.map(messages, function (message) { + if (_.isString(message)) { + return message; + } + if (_.has(message, "message")) { + return message.message; + } + }); + } + + /** + * Handle UI success changes. + * + * @param {Object[]} results Array of results from distribution attempts. + */ + function doSuccess(results) { + let success = false; + const errors = {}; + + ["internal", "external"].forEach((type) => { + _.each(results[type], (result, connectionId) => { + if ("success" === result.status) { + dtConnections[`${type}${connectionId}`].syndicated = result.url; + success = true; + } + + if (!_.isEmpty(result.errors)) { + errors[`${type}${connectionId}`] = result.errors; + } + }); + }); + + if (!_.isEmpty(errors)) { + const formattedErrors = _.map(errors, function (messages, connectionId) { + return `${dtConnections[connectionId].name}:\n${_.map( + messages, + function (message) { + return `- ${message}\n`; + } + )}`; + }); + + doError(formattedErrors); + } + + if (success && _.isEmpty(errors)) { + distributorPushWrapper.classList.add("message-success"); + + connectionsSelected.classList.add("empty"); + connectionsSelectedList.innerText = ""; + + setTimeout(() => { + distributorPushWrapper.classList.remove("message-success"); + }, 6000); + } + + selectedConnections = {}; + + showConnections(); + } + + /** + * Show connections. If there is a search string, then filter by it + */ + function showConnections() { + connectionsNewList.innerText = ""; + const template = processTemplate("dt-add-connection"); + let showConnection = ""; + + _.each(dtConnections, (connection) => { + if ("" !== searchString) { + const nameMatch = connection.name + .replace(/[^0-9a-zA-Z ]+/, "") + .toLowerCase() + .match(searchString.toLowerCase()); + const urlMatch = connection.url + .replace(/https?:\/\//i, "") + .replace(/www/i, "") + .replace(/[^0-9a-zA-Z ]+/, "") + .toLowerCase() + .match(searchString.toLowerCase()); + + if (!nameMatch && !urlMatch) { + return; + } + } + + if ("mustache" === template) { + // Modify connection data to match what mustache wants + if (selectedConnections[connection.type + connection.id]) { + connection.added = true; + } else { + connection.added = false; + } + + if ("internal" === connection.type) { + connection.internal = true; + } + + showConnection = Mustache.render( + document.getElementById("dt-add-connection").innerHTML, + { + connection, + } + ); + } else { + showConnection = template({ + connection, + selectedConnections, + }); + } + + connectionsNewList.innerHTML += showConnection; + }); + + if ("" === connectionsNewList.innerHTML) { + connectionsNewList.innerHTML = '

No results

'; + } + + if ("mustache" === template) { + setDisabledConnections(); + } + } + + /** + * Add or remove CSS classes to indicate button functionality. + * + * @param {string} expr Functionality to indicate. + */ + function classList(expr) { + switch (expr) { + case "addEmpty": + connectionsSelected.classList.add("empty"); + break; + case "removeEmpty": + connectionsSelected.classList.remove("empty"); + break; + case "allUnavailable": + selectAllConnections.classList.add("unavailable"); + break; + case "all": + selectAllConnections.classList.remove("unavailable"); + break; + case "noneUnavailable": + selectNoConnections.classList.add("unavailable"); + break; + case "none": + selectNoConnections.classList.remove("unavailable"); + break; + } + } + + /** + * Handle distributor push dropdown menu. + */ + function distributorMenuEntered() { + distributorMenuItem.focus(); + + // Determine if we need to hide the admin bar + maybeHideAdminBar(); + + if (distributorPushWrapper.classList.contains("loaded")) { + return; + } + + distributorPushWrapper.classList.remove("message-error"); + distributorPushWrapper.classList.add("loaded"); + + const data = { + action: "dt_load_connections", + loadConnectionsNonce: dt.loadConnectionsNonce, + postId: dt.postId, + }; + + const template = processTemplate("dt-show-connections"); + const xhr = dt.usexhr ? { withCredentials: true } : false; + + jQuery + .ajax({ + url: dt.ajaxurl, + xhrFields: xhr, + method: "post", + data, + }) + .done((response) => { + if (!response.success || !response.data) { + distributorPushWrapper.classList.remove("loaded"); + distributorPushWrapper.classList.add("message-error"); + return; + } + + dtConnections = response.data; + + if ("mustache" === template) { + // Manipulate the data to match what mustache needs + const mustacheData = { connections: [] }; + _.each(dtConnections, (connection) => { + if ("internal" === connection.type) { + connection.internal = true; + } + + mustacheData.connections.push(connection); + }); + + distributorPushWrapper.innerHTML = Mustache.render( + document.getElementById("dt-show-connections").innerHTML, + { + connections: mustacheData.connections, + foundConnections: mustacheData.connections.length, + showSearch: 5 < mustacheData.connections.length, + } + ); + + setDisabledConnections(); + } else { + distributorPushWrapper.innerHTML = template({ + connections: dtConnections, + }); + } + + setVariables(); + }) + .error(() => { + distributorPushWrapper.classList.remove("loaded"); + distributorPushWrapper.classList.add("message-error"); + }); + } + + /** + * Close distributor menu when a click occurs outside of it + */ + function maybeCloseDistributorMenu() { + // If a distribution is in progress, don't close things + if (distributorTopMenu.classList.contains("syncing")) { + return; + } + + // If the Distributor menu is showing, hide everything + if (distributorTopMenu.classList.contains("hover")) { + distributorTopMenu.classList.remove("hover"); + document.body.classList.remove("is-showing-distributor"); + } + + // Determine if we need to hide the admin bar + maybeHideAdminBar(); + } + + const distributorAdminItem = document.querySelector( + "#wp-admin-bar-distributor > a" + ); + + // Event listeners when to fetch distributor data. + distributorAdminItem.addEventListener( + "keydown", + function (e) { + // Pressing Enter. + if (13 === e.keyCode) { + distributorMenuEntered(); + } + }, + false + ); + + // In full screen mode, add hoverintent to remove admin bar on hover out + if (document.body.classList.contains("is-fullscreen-mode")) { + window + .hoverintent( + distributorTopMenu, + function () { + return null; + }, + maybeHideAdminBar + ) + .options({ + timeout: 180, + }); + } + + /** + * Distributor menu hovered out + * + * Used to remove the admin bar from showing. + */ + function maybeHideAdminBar() { + if ( + !distributorTopMenu.classList.contains("hover") && + !distributorTopMenu.classList.contains("syncing") + ) { + document.body.classList.remove("is-showing-distributor"); + } + } + + distributorAdminItem.addEventListener( + "touchstart", + distributorMenuEntered, + false + ); + distributorAdminItem.addEventListener( + "mouseenter", + distributorMenuEntered, + false + ); + overlayDiv.addEventListener("click", maybeCloseDistributorMenu, true); + + /** + * Do syndication ajax + */ + jQuery(distributorPushWrapper).on("click", ".syndicate-button", () => { + if (distributorTopMenu.classList.contains("syncing")) { + return; + } + + distributorTopMenu.classList.add("syncing"); + + const data = { + action: "dt_push", + nonce: dt.nonce, + connections: selectedConnections, + postId: dt.postId, + }; + + data.postStatus = + null !== asDraftInput && asDraftInput.checked + ? "draft" + : postStatusInput.value; + + const xhr = dt.usexhr ? { withCredentials: true } : false; + + jQuery + .ajax({ + url: dt.ajaxurl, + xhrFields: xhr, + method: "post", + data, + }) + .done((response) => { + setTimeout(() => { + distributorTopMenu.classList.remove("syncing"); + + // Maybe hide the admin bar + maybeHideAdminBar(); + + if (!response.success) { + doError(response.data); + return; + } + + if (!response.data || !response.data.results) { + doError(dt.messages.empty_result); + return; + } + + doSuccess(response.data.results); + }, 500); + }) + // eslint-disable-next-line no-shadow + .error((xhr, textStatus, errorThrown) => { + setTimeout(() => { + distributorTopMenu.classList.remove("syncing"); + + doError(`${dt.messages.ajax_error} ${errorThrown}`); + }, 500); + }); + }); + + /** + * Add a connection to selected connections for ajax and to the UI list. + */ + jQuery(distributorPushWrapper).on("click", ".add-connection", (event) => { + if ("A" === event.target.nodeName) { + return; + } + + event.preventDefault(); + + if (event.currentTarget.classList.contains("syndicated")) { + return; + } + + if (event.currentTarget.classList.contains("added")) { + const type = event.currentTarget.getAttribute("data-connection-type"); + const id = event.currentTarget.getAttribute("data-connection-id"); + + const deleteNode = connectionsSelectedList.querySelector( + `[data-connection-id="${id}"][data-connection-type="${type}"]` + ); + + deleteNode.parentNode.removeChild(deleteNode); + + delete selectedConnections[type + id]; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys(selectedConnections).length, + "distributor" + ), + Object.keys(selectedConnections).length + ); + document.querySelector(".selected-connections-text").textContent = + selectedText; + + if (selectAllConnections.classList.contains("unavailable")) { + classList("all"); + } + if (!Object.keys(selectedConnections).length) { + classList("addEmpty"); + classList("noneUnavailable"); + } + + showConnections(); + } else { + const type = event.currentTarget.getAttribute("data-connection-type"); + const id = event.currentTarget.getAttribute("data-connection-id"); + + selectedConnections[type + id] = dtConnections[type + id]; + + const element = event.currentTarget.cloneNode(true); + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys(selectedConnections).length, + "distributor" + ), + Object.keys(selectedConnections).length + ); + document.querySelector(".selected-connections-text").textContent = + selectedText; + + const removeLink = document.createElement("span"); + removeLink.classList.add("remove-connection"); + + element.appendChild(removeLink); + element.classList = "added-connection"; + connectionsSelectedList.appendChild(element); + + if (selectNoConnections.classList.contains("unavailable")) { + classList("removeEmpty"); + classList("none"); + } + + if ( + // eslint-disable-next-line eqeqeq + Object.keys(selectedConnections).length == connectionsAvailableTotal + ) { + classList("allUnavailable"); + } + + showConnections(); + } + }); + + /** + * Select all connections for distribution. + */ + jQuery(distributorPushWrapper).on("click", ".selectall-connections", () => { + jQuery(connectionsNewList) + .children(".add-connection") + .each((index, childTarget) => { + if ( + childTarget.classList.contains("syndicated") || + childTarget.classList.contains("added") + ) { + return; + } + const type = childTarget.getAttribute("data-connection-type"); + const id = childTarget.getAttribute("data-connection-id"); + + selectedConnections[type + id] = dtConnections[type + id]; + + const element = childTarget.cloneNode(); + element.innerText = childTarget.innerText; + + const removeLink = document.createElement("span"); + removeLink.classList.add("remove-connection"); + + element.appendChild(removeLink); + element.classList = "added-connection"; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys(selectedConnections).length, + "distributor" + ), + Object.keys(selectedConnections).length + ); + document.querySelector(".selected-connections-text").textContent = + selectedText; + + connectionsSelectedList.appendChild(element); + + if ("" !== connectionsAvailableTotal) { + classList("removeEmpty"); + classList("allUnavailable"); + classList("none"); + } + }); + + showConnections(); + }); + + /** + * Select no connections for distribution. + */ + jQuery(distributorPushWrapper).on("click", ".selectno-connections", () => { + while (connectionsSelectedList.firstChild) { + const type = connectionsSelectedList.firstChild.getAttribute( + "data-connection-type" + ); + const id = + connectionsSelectedList.firstChild.getAttribute("data-connection-id"); + + delete selectedConnections[type + id]; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys(selectedConnections).length, + "distributor" + ), + Object.keys(selectedConnections).length + ); + document.querySelector(".selected-connections-text").textContent = + selectedText; + + connectionsSelectedList.removeChild(connectionsSelectedList.firstChild); + } + + if ("" !== connectionsAvailableTotal) { + classList("addEmpty"); + classList("noneUnavailable"); + classList("all"); + } + + showConnections(); + }); + + /** + * Remove a connection from selected connections and the UI list + */ + jQuery(distributorPushWrapper).on("click", ".added-connection", (event) => { + event.currentTarget.parentNode.removeChild(event.currentTarget); + const type = event.currentTarget.getAttribute("data-connection-type"); + const id = event.currentTarget.getAttribute("data-connection-id"); + + delete selectedConnections[type + id]; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys(selectedConnections).length, + "distributor" + ), + Object.keys(selectedConnections).length + ); + document.querySelector(".selected-connections-text").textContent = + selectedText; + + if (selectAllConnections.classList.contains("unavailable")) { + classList("all"); + } + if (!Object.keys(selectedConnections).length) { + classList("addEmpty"); + classList("noneUnavailable"); + } + + showConnections(); + }); +}); From 9628526ea5e64a760a10103ee87ccb938aac5028 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 15:11:01 +0530 Subject: [PATCH 18/30] Revert back the changes for Eslint errors --- assets/js/push.js | 1545 +++++++++++++++++++++++---------------------- 1 file changed, 799 insertions(+), 746 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 8b3e2b088..6d1f1fa4f 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -1,750 +1,803 @@ -import "../css/push.scss"; +import '../css/push.scss'; -import jQuery from "jquery"; -import _ from "underscore"; -import Mustache from "mustache"; -import { sprintf, _n } from "@wordpress/i18n"; +import jQuery from 'jquery'; +import _ from 'underscore'; +import Mustache from 'mustache'; +import { sprintf, _n } from '@wordpress/i18n'; const { document, dt } = window; -let selectedText = ""; +let selectedText = ''; let selectedConnections = {}, - searchString = ""; -const processTemplate = _.memoize((id) => { - const element = document.getElementById(id); - if (!element) { - return false; - } - - if (element.attributes.template) { - Mustache.parse(element.innerHTML); - return "mustache"; - } - // Use WordPress style Backbone template syntax - const options = { - evaluate: /<#([\s\S]+?)#>/g, - interpolate: /{{{([\s\S]+?)}}}/g, - escape: /{{([^}]+?)}}(?!})/g, - }; - - return _.template(element.innerHTML, null, options); -}); - -jQuery(window).on("load", () => { - const distributorMenuItem = document.querySelector( - "#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder" - ); - const distributorPushWrapper = document.querySelector( - "#distributor-push-wrapper" - ); - - if (!distributorMenuItem || !distributorPushWrapper) { - return; - } - - let dtConnections = ""; - let connectionsSelected = ""; - let connectionsSelectedList = ""; - let connectionsNewList = ""; - let connectionsNewListChildren = ""; - let connectionsAvailableTotal = ""; - let selectAllConnections = ""; - let selectNoConnections = ""; - let connectionsSearchInput = ""; - let postStatusInput = ""; - let asDraftInput = ""; - let errorDetails = ""; - - distributorMenuItem.appendChild(distributorPushWrapper); - - // Add our overlay div - const overlayDiv = document.createElement("div"); - overlayDiv.id = "distributor-overlay"; - - const distributorTopMenu = document.querySelector( - "#wp-admin-bar-distributor" - ); - - distributorTopMenu.parentNode.insertBefore( - overlayDiv, - distributorTopMenu.nextSibling - ); - - /** - * Set variables after connections have been rendered - */ - function setVariables() { - connectionsSelected = distributorPushWrapper.querySelector( - ".connections-selected" - ); - connectionsSelectedList = distributorPushWrapper.querySelector( - ".selected-connections-list" - ); - connectionsNewList = distributorPushWrapper.querySelector( - ".new-connections-list" - ); - selectAllConnections = distributorPushWrapper.querySelector( - ".selectall-connections" - ); - selectNoConnections = distributorPushWrapper.querySelector( - ".selectno-connections" - ); - connectionsSearchInput = document.getElementById("dt-connection-search"); - postStatusInput = document.getElementById("dt-post-status"); - asDraftInput = document.getElementById("dt-as-draft"); - errorDetails = document.querySelector(".dt-error ul.details"); - - if (null !== connectionsNewList) { - connectionsNewListChildren = - connectionsNewList.querySelectorAll(".add-connection"); - } - - /** - * Listen for connection filtering - */ - jQuery(connectionsSearchInput).on( - "keyup change", - _.debounce((event) => { - if ("" === event.currentTarget.value) { - showConnections(dtConnections); - } - searchString = event.currentTarget.value - .replace(/https?:\/\//i, "") - .replace(/www/i, "") - .replace(/[^0-9a-zA-Z ]+/, ""); - showConnections(); - }, 300) - ); - - /** - * Disable select all button if all connections are syndicated and set variable for total connections available - */ - _.each(connectionsNewListChildren, (element) => { - if (!element.classList.contains("syndicated")) { - selectAllConnections.classList.remove("unavailable"); - connectionsAvailableTotal++; - } - }); - } - - /** - * Set the disabled attribute on connections already syndicated - * - * This is currently only used for the mustache templates, which - * are only used in AMP contexts. Seems the AMP plugin will - * strip out any normal disabled attributes, so we handle that here - * instead of in the template. - */ - function setDisabledConnections() { - connectionsNewList = distributorPushWrapper.querySelector( - ".new-connections-list" - ); - - if (null !== connectionsNewList) { - connectionsNewListChildren = - connectionsNewList.querySelectorAll(".add-connection"); - - _.each(connectionsNewListChildren, (element) => { - if (element.classList.contains("syndicated")) { - element.disabled = true; - } - }); - } - } - - /** - * Handle UI error changes - * - * @param {string[]} messages Array of error messages. - */ - function doError(messages) { - distributorPushWrapper.classList.add("message-error"); - errorDetails.innerText = ""; - - _.each(prepareMessages(messages), function (message) { - const errorItem = document.createElement("li"); - errorItem.innerText = message; - errorDetails.appendChild(errorItem); - }); - } - - /** - * Prepare error messages for printing. - * - * @param {string | Array} messages Error messages. - */ - function prepareMessages(messages) { - if (!_.isArray(messages)) { - return [messages]; - } - - return _.map(messages, function (message) { - if (_.isString(message)) { - return message; - } - if (_.has(message, "message")) { - return message.message; - } - }); - } - - /** - * Handle UI success changes. - * - * @param {Object[]} results Array of results from distribution attempts. - */ - function doSuccess(results) { - let success = false; - const errors = {}; - - ["internal", "external"].forEach((type) => { - _.each(results[type], (result, connectionId) => { - if ("success" === result.status) { - dtConnections[`${type}${connectionId}`].syndicated = result.url; - success = true; - } - - if (!_.isEmpty(result.errors)) { - errors[`${type}${connectionId}`] = result.errors; - } - }); - }); - - if (!_.isEmpty(errors)) { - const formattedErrors = _.map(errors, function (messages, connectionId) { - return `${dtConnections[connectionId].name}:\n${_.map( - messages, - function (message) { - return `- ${message}\n`; - } - )}`; - }); - - doError(formattedErrors); - } - - if (success && _.isEmpty(errors)) { - distributorPushWrapper.classList.add("message-success"); - - connectionsSelected.classList.add("empty"); - connectionsSelectedList.innerText = ""; - - setTimeout(() => { - distributorPushWrapper.classList.remove("message-success"); - }, 6000); - } - - selectedConnections = {}; - - showConnections(); - } - - /** - * Show connections. If there is a search string, then filter by it - */ - function showConnections() { - connectionsNewList.innerText = ""; - const template = processTemplate("dt-add-connection"); - let showConnection = ""; - - _.each(dtConnections, (connection) => { - if ("" !== searchString) { - const nameMatch = connection.name - .replace(/[^0-9a-zA-Z ]+/, "") - .toLowerCase() - .match(searchString.toLowerCase()); - const urlMatch = connection.url - .replace(/https?:\/\//i, "") - .replace(/www/i, "") - .replace(/[^0-9a-zA-Z ]+/, "") - .toLowerCase() - .match(searchString.toLowerCase()); - - if (!nameMatch && !urlMatch) { - return; - } - } - - if ("mustache" === template) { - // Modify connection data to match what mustache wants - if (selectedConnections[connection.type + connection.id]) { - connection.added = true; - } else { - connection.added = false; - } - - if ("internal" === connection.type) { - connection.internal = true; - } - - showConnection = Mustache.render( - document.getElementById("dt-add-connection").innerHTML, - { - connection, - } - ); - } else { - showConnection = template({ - connection, - selectedConnections, - }); - } - - connectionsNewList.innerHTML += showConnection; - }); - - if ("" === connectionsNewList.innerHTML) { - connectionsNewList.innerHTML = '

No results

'; - } - - if ("mustache" === template) { - setDisabledConnections(); - } - } - - /** - * Add or remove CSS classes to indicate button functionality. - * - * @param {string} expr Functionality to indicate. - */ - function classList(expr) { - switch (expr) { - case "addEmpty": - connectionsSelected.classList.add("empty"); - break; - case "removeEmpty": - connectionsSelected.classList.remove("empty"); - break; - case "allUnavailable": - selectAllConnections.classList.add("unavailable"); - break; - case "all": - selectAllConnections.classList.remove("unavailable"); - break; - case "noneUnavailable": - selectNoConnections.classList.add("unavailable"); - break; - case "none": - selectNoConnections.classList.remove("unavailable"); - break; - } - } - - /** - * Handle distributor push dropdown menu. - */ - function distributorMenuEntered() { - distributorMenuItem.focus(); - - // Determine if we need to hide the admin bar - maybeHideAdminBar(); - - if (distributorPushWrapper.classList.contains("loaded")) { - return; - } - - distributorPushWrapper.classList.remove("message-error"); - distributorPushWrapper.classList.add("loaded"); - - const data = { - action: "dt_load_connections", - loadConnectionsNonce: dt.loadConnectionsNonce, - postId: dt.postId, - }; - - const template = processTemplate("dt-show-connections"); - const xhr = dt.usexhr ? { withCredentials: true } : false; - - jQuery - .ajax({ - url: dt.ajaxurl, - xhrFields: xhr, - method: "post", - data, - }) - .done((response) => { - if (!response.success || !response.data) { - distributorPushWrapper.classList.remove("loaded"); - distributorPushWrapper.classList.add("message-error"); - return; - } - - dtConnections = response.data; - - if ("mustache" === template) { - // Manipulate the data to match what mustache needs - const mustacheData = { connections: [] }; - _.each(dtConnections, (connection) => { - if ("internal" === connection.type) { - connection.internal = true; - } - - mustacheData.connections.push(connection); - }); - - distributorPushWrapper.innerHTML = Mustache.render( - document.getElementById("dt-show-connections").innerHTML, - { - connections: mustacheData.connections, - foundConnections: mustacheData.connections.length, - showSearch: 5 < mustacheData.connections.length, - } - ); - - setDisabledConnections(); - } else { - distributorPushWrapper.innerHTML = template({ - connections: dtConnections, - }); - } - - setVariables(); - }) - .error(() => { - distributorPushWrapper.classList.remove("loaded"); - distributorPushWrapper.classList.add("message-error"); - }); - } - - /** - * Close distributor menu when a click occurs outside of it - */ - function maybeCloseDistributorMenu() { - // If a distribution is in progress, don't close things - if (distributorTopMenu.classList.contains("syncing")) { - return; - } - - // If the Distributor menu is showing, hide everything - if (distributorTopMenu.classList.contains("hover")) { - distributorTopMenu.classList.remove("hover"); - document.body.classList.remove("is-showing-distributor"); - } - - // Determine if we need to hide the admin bar - maybeHideAdminBar(); - } - - const distributorAdminItem = document.querySelector( - "#wp-admin-bar-distributor > a" - ); - - // Event listeners when to fetch distributor data. - distributorAdminItem.addEventListener( - "keydown", - function (e) { - // Pressing Enter. - if (13 === e.keyCode) { - distributorMenuEntered(); - } - }, - false - ); - - // In full screen mode, add hoverintent to remove admin bar on hover out - if (document.body.classList.contains("is-fullscreen-mode")) { - window - .hoverintent( - distributorTopMenu, - function () { - return null; - }, - maybeHideAdminBar - ) - .options({ - timeout: 180, - }); - } - - /** - * Distributor menu hovered out - * - * Used to remove the admin bar from showing. - */ - function maybeHideAdminBar() { - if ( - !distributorTopMenu.classList.contains("hover") && - !distributorTopMenu.classList.contains("syncing") - ) { - document.body.classList.remove("is-showing-distributor"); - } - } - - distributorAdminItem.addEventListener( - "touchstart", - distributorMenuEntered, - false - ); - distributorAdminItem.addEventListener( - "mouseenter", - distributorMenuEntered, - false - ); - overlayDiv.addEventListener("click", maybeCloseDistributorMenu, true); - - /** - * Do syndication ajax - */ - jQuery(distributorPushWrapper).on("click", ".syndicate-button", () => { - if (distributorTopMenu.classList.contains("syncing")) { - return; - } - - distributorTopMenu.classList.add("syncing"); - - const data = { - action: "dt_push", - nonce: dt.nonce, - connections: selectedConnections, - postId: dt.postId, - }; - - data.postStatus = - null !== asDraftInput && asDraftInput.checked - ? "draft" - : postStatusInput.value; - - const xhr = dt.usexhr ? { withCredentials: true } : false; - - jQuery - .ajax({ - url: dt.ajaxurl, - xhrFields: xhr, - method: "post", - data, - }) - .done((response) => { - setTimeout(() => { - distributorTopMenu.classList.remove("syncing"); - - // Maybe hide the admin bar - maybeHideAdminBar(); - - if (!response.success) { - doError(response.data); - return; - } - - if (!response.data || !response.data.results) { - doError(dt.messages.empty_result); - return; - } - - doSuccess(response.data.results); - }, 500); - }) - // eslint-disable-next-line no-shadow - .error((xhr, textStatus, errorThrown) => { - setTimeout(() => { - distributorTopMenu.classList.remove("syncing"); - - doError(`${dt.messages.ajax_error} ${errorThrown}`); - }, 500); - }); - }); - - /** - * Add a connection to selected connections for ajax and to the UI list. - */ - jQuery(distributorPushWrapper).on("click", ".add-connection", (event) => { - if ("A" === event.target.nodeName) { - return; - } - - event.preventDefault(); - - if (event.currentTarget.classList.contains("syndicated")) { - return; - } - - if (event.currentTarget.classList.contains("added")) { - const type = event.currentTarget.getAttribute("data-connection-type"); - const id = event.currentTarget.getAttribute("data-connection-id"); - - const deleteNode = connectionsSelectedList.querySelector( - `[data-connection-id="${id}"][data-connection-type="${type}"]` - ); - - deleteNode.parentNode.removeChild(deleteNode); - - delete selectedConnections[type + id]; - selectedText = sprintf( - _n( - "Selected connection (%d)", - "Selected connections (%d)", - Object.keys(selectedConnections).length, - "distributor" - ), - Object.keys(selectedConnections).length - ); - document.querySelector(".selected-connections-text").textContent = - selectedText; - - if (selectAllConnections.classList.contains("unavailable")) { - classList("all"); - } - if (!Object.keys(selectedConnections).length) { - classList("addEmpty"); - classList("noneUnavailable"); - } - - showConnections(); - } else { - const type = event.currentTarget.getAttribute("data-connection-type"); - const id = event.currentTarget.getAttribute("data-connection-id"); - - selectedConnections[type + id] = dtConnections[type + id]; - - const element = event.currentTarget.cloneNode(true); - selectedText = sprintf( - _n( - "Selected connection (%d)", - "Selected connections (%d)", - Object.keys(selectedConnections).length, - "distributor" - ), - Object.keys(selectedConnections).length - ); - document.querySelector(".selected-connections-text").textContent = - selectedText; - - const removeLink = document.createElement("span"); - removeLink.classList.add("remove-connection"); - - element.appendChild(removeLink); - element.classList = "added-connection"; - connectionsSelectedList.appendChild(element); - - if (selectNoConnections.classList.contains("unavailable")) { - classList("removeEmpty"); - classList("none"); - } - - if ( - // eslint-disable-next-line eqeqeq - Object.keys(selectedConnections).length == connectionsAvailableTotal - ) { - classList("allUnavailable"); - } - - showConnections(); - } - }); - - /** - * Select all connections for distribution. - */ - jQuery(distributorPushWrapper).on("click", ".selectall-connections", () => { - jQuery(connectionsNewList) - .children(".add-connection") - .each((index, childTarget) => { - if ( - childTarget.classList.contains("syndicated") || - childTarget.classList.contains("added") - ) { - return; - } - const type = childTarget.getAttribute("data-connection-type"); - const id = childTarget.getAttribute("data-connection-id"); - - selectedConnections[type + id] = dtConnections[type + id]; - - const element = childTarget.cloneNode(); - element.innerText = childTarget.innerText; - - const removeLink = document.createElement("span"); - removeLink.classList.add("remove-connection"); - - element.appendChild(removeLink); - element.classList = "added-connection"; - selectedText = sprintf( - _n( - "Selected connection (%d)", - "Selected connections (%d)", - Object.keys(selectedConnections).length, - "distributor" - ), - Object.keys(selectedConnections).length - ); - document.querySelector(".selected-connections-text").textContent = - selectedText; - - connectionsSelectedList.appendChild(element); - - if ("" !== connectionsAvailableTotal) { - classList("removeEmpty"); - classList("allUnavailable"); - classList("none"); - } - }); - - showConnections(); - }); - - /** - * Select no connections for distribution. - */ - jQuery(distributorPushWrapper).on("click", ".selectno-connections", () => { - while (connectionsSelectedList.firstChild) { - const type = connectionsSelectedList.firstChild.getAttribute( - "data-connection-type" - ); - const id = - connectionsSelectedList.firstChild.getAttribute("data-connection-id"); - - delete selectedConnections[type + id]; - selectedText = sprintf( - _n( - "Selected connection (%d)", - "Selected connections (%d)", - Object.keys(selectedConnections).length, - "distributor" - ), - Object.keys(selectedConnections).length - ); - document.querySelector(".selected-connections-text").textContent = - selectedText; - - connectionsSelectedList.removeChild(connectionsSelectedList.firstChild); - } - - if ("" !== connectionsAvailableTotal) { - classList("addEmpty"); - classList("noneUnavailable"); - classList("all"); - } - - showConnections(); - }); - - /** - * Remove a connection from selected connections and the UI list - */ - jQuery(distributorPushWrapper).on("click", ".added-connection", (event) => { - event.currentTarget.parentNode.removeChild(event.currentTarget); - const type = event.currentTarget.getAttribute("data-connection-type"); - const id = event.currentTarget.getAttribute("data-connection-id"); - - delete selectedConnections[type + id]; - selectedText = sprintf( - _n( - "Selected connection (%d)", - "Selected connections (%d)", - Object.keys(selectedConnections).length, - "distributor" - ), - Object.keys(selectedConnections).length - ); - document.querySelector(".selected-connections-text").textContent = - selectedText; - - if (selectAllConnections.classList.contains("unavailable")) { - classList("all"); - } - if (!Object.keys(selectedConnections).length) { - classList("addEmpty"); - classList("noneUnavailable"); - } - - showConnections(); - }); -}); + searchString = ''; +const processTemplate = _.memoize( ( id ) => { + const element = document.getElementById( id ); + if ( ! element ) { + return false; + } + + if ( element.attributes.template ) { + Mustache.parse( element.innerHTML ); + return 'mustache'; + } + // Use WordPress style Backbone template syntax + const options = { + evaluate: /<#([\s\S]+?)#>/g, + interpolate: /{{{([\s\S]+?)}}}/g, + escape: /{{([^}]+?)}}(?!})/g, + }; + + return _.template( element.innerHTML, null, options ); +} ); + +jQuery( window ).on( 'load', () => { + const distributorMenuItem = document.querySelector( + '#wp-admin-bar-distributor #wp-admin-bar-distributor-placeholder' + ); + const distributorPushWrapper = document.querySelector( + '#distributor-push-wrapper' + ); + + if ( ! distributorMenuItem || ! distributorPushWrapper ) { + return; + } + + let dtConnections = ''; + let connectionsSelected = ''; + let connectionsSelectedList = ''; + let connectionsNewList = ''; + let connectionsNewListChildren = ''; + let connectionsAvailableTotal = ''; + let selectAllConnections = ''; + let selectNoConnections = ''; + let connectionsSearchInput = ''; + let postStatusInput = ''; + let asDraftInput = ''; + let errorDetails = ''; + + distributorMenuItem.appendChild( distributorPushWrapper ); + + // Add our overlay div + const overlayDiv = document.createElement( 'div' ); + overlayDiv.id = 'distributor-overlay'; + + const distributorTopMenu = document.querySelector( + '#wp-admin-bar-distributor' + ); + + distributorTopMenu.parentNode.insertBefore( + overlayDiv, + distributorTopMenu.nextSibling + ); + + /** + * Set variables after connections have been rendered + */ + function setVariables() { + connectionsSelected = distributorPushWrapper.querySelector( + '.connections-selected' + ); + connectionsSelectedList = distributorPushWrapper.querySelector( + '.selected-connections-list' + ); + connectionsNewList = distributorPushWrapper.querySelector( + '.new-connections-list' + ); + selectAllConnections = distributorPushWrapper.querySelector( + '.selectall-connections' + ); + selectNoConnections = distributorPushWrapper.querySelector( + '.selectno-connections' + ); + connectionsSearchInput = document.getElementById( + 'dt-connection-search' + ); + postStatusInput = document.getElementById( 'dt-post-status' ); + asDraftInput = document.getElementById( 'dt-as-draft' ); + errorDetails = document.querySelector( '.dt-error ul.details' ); + + if ( null !== connectionsNewList ) { + connectionsNewListChildren = + connectionsNewList.querySelectorAll( '.add-connection' ); + } + + /** + * Listen for connection filtering + */ + jQuery( connectionsSearchInput ).on( + 'keyup change', + _.debounce( ( event ) => { + if ( '' === event.currentTarget.value ) { + showConnections( dtConnections ); + } + searchString = event.currentTarget.value + .replace( /https?:\/\//i, '' ) + .replace( /www/i, '' ) + .replace( /[^0-9a-zA-Z ]+/, '' ); + showConnections(); + }, 300 ) + ); + + /** + * Disable select all button if all connections are syndicated and set variable for total connections available + */ + _.each( connectionsNewListChildren, ( element ) => { + if ( ! element.classList.contains( 'syndicated' ) ) { + selectAllConnections.classList.remove( 'unavailable' ); + connectionsAvailableTotal++; + } + } ); + } + + /** + * Set the disabled attribute on connections already syndicated + * + * This is currently only used for the mustache templates, which + * are only used in AMP contexts. Seems the AMP plugin will + * strip out any normal disabled attributes, so we handle that here + * instead of in the template. + */ + function setDisabledConnections() { + connectionsNewList = distributorPushWrapper.querySelector( + '.new-connections-list' + ); + + if ( null !== connectionsNewList ) { + connectionsNewListChildren = + connectionsNewList.querySelectorAll( '.add-connection' ); + + _.each( connectionsNewListChildren, ( element ) => { + if ( element.classList.contains( 'syndicated' ) ) { + element.disabled = true; + } + } ); + } + } + + /** + * Handle UI error changes + * + * @param {string[]} messages Array of error messages. + */ + function doError( messages ) { + distributorPushWrapper.classList.add( 'message-error' ); + errorDetails.innerText = ''; + + _.each( prepareMessages( messages ), function ( message ) { + const errorItem = document.createElement( 'li' ); + errorItem.innerText = message; + errorDetails.appendChild( errorItem ); + } ); + } + + /** + * Prepare error messages for printing. + * + * @param {string | Array} messages Error messages. + */ + function prepareMessages( messages ) { + if ( ! _.isArray( messages ) ) { + return [ messages ]; + } + + return _.map( messages, function ( message ) { + if ( _.isString( message ) ) { + return message; + } + if ( _.has( message, 'message' ) ) { + return message.message; + } + } ); + } + + /** + * Handle UI success changes. + * + * @param {Object[]} results Array of results from distribution attempts. + */ + function doSuccess( results ) { + let success = false; + const errors = {}; + + [ 'internal', 'external' ].forEach( ( type ) => { + _.each( results[ type ], ( result, connectionId ) => { + if ( 'success' === result.status ) { + dtConnections[ `${ type }${ connectionId }` ].syndicated = + result.url; + success = true; + } + + if ( ! _.isEmpty( result.errors ) ) { + errors[ `${ type }${ connectionId }` ] = result.errors; + } + } ); + } ); + + if ( ! _.isEmpty( errors ) ) { + const formattedErrors = _.map( + errors, + function ( messages, connectionId ) { + return `${ dtConnections[ connectionId ].name }:\n${ _.map( + messages, + function ( message ) { + return `- ${ message }\n`; + } + ) }`; + } + ); + + doError( formattedErrors ); + } + + if ( success && _.isEmpty( errors ) ) { + distributorPushWrapper.classList.add( 'message-success' ); + + connectionsSelected.classList.add( 'empty' ); + connectionsSelectedList.innerText = ''; + + setTimeout( () => { + distributorPushWrapper.classList.remove( 'message-success' ); + }, 6000 ); + } + + selectedConnections = {}; + + showConnections(); + } + + /** + * Show connections. If there is a search string, then filter by it + */ + function showConnections() { + connectionsNewList.innerText = ''; + const template = processTemplate( 'dt-add-connection' ); + let showConnection = ''; + + _.each( dtConnections, ( connection ) => { + if ( '' !== searchString ) { + const nameMatch = connection.name + .replace( /[^0-9a-zA-Z ]+/, '' ) + .toLowerCase() + .match( searchString.toLowerCase() ); + const urlMatch = connection.url + .replace( /https?:\/\//i, '' ) + .replace( /www/i, '' ) + .replace( /[^0-9a-zA-Z ]+/, '' ) + .toLowerCase() + .match( searchString.toLowerCase() ); + + if ( ! nameMatch && ! urlMatch ) { + return; + } + } + + if ( 'mustache' === template ) { + // Modify connection data to match what mustache wants + if ( selectedConnections[ connection.type + connection.id ] ) { + connection.added = true; + } else { + connection.added = false; + } + + if ( 'internal' === connection.type ) { + connection.internal = true; + } + + showConnection = Mustache.render( + document.getElementById( 'dt-add-connection' ).innerHTML, + { + connection, + } + ); + } else { + showConnection = template( { + connection, + selectedConnections, + } ); + } + + connectionsNewList.innerHTML += showConnection; + } ); + + if ( '' === connectionsNewList.innerHTML ) { + connectionsNewList.innerHTML = + '

No results

'; + } + + if ( 'mustache' === template ) { + setDisabledConnections(); + } + } + + /** + * Add or remove CSS classes to indicate button functionality. + * + * @param {string} expr Functionality to indicate. + */ + function classList( expr ) { + switch ( expr ) { + case 'addEmpty': + connectionsSelected.classList.add( 'empty' ); + break; + case 'removeEmpty': + connectionsSelected.classList.remove( 'empty' ); + break; + case 'allUnavailable': + selectAllConnections.classList.add( 'unavailable' ); + break; + case 'all': + selectAllConnections.classList.remove( 'unavailable' ); + break; + case 'noneUnavailable': + selectNoConnections.classList.add( 'unavailable' ); + break; + case 'none': + selectNoConnections.classList.remove( 'unavailable' ); + break; + } + } + + /** + * Handle distributor push dropdown menu. + */ + function distributorMenuEntered() { + distributorMenuItem.focus(); + + // Determine if we need to hide the admin bar + maybeHideAdminBar(); + + if ( distributorPushWrapper.classList.contains( 'loaded' ) ) { + return; + } + + distributorPushWrapper.classList.remove( 'message-error' ); + distributorPushWrapper.classList.add( 'loaded' ); + + const data = { + action: 'dt_load_connections', + loadConnectionsNonce: dt.loadConnectionsNonce, + postId: dt.postId, + }; + + const template = processTemplate( 'dt-show-connections' ); + const xhr = dt.usexhr ? { withCredentials: true } : false; + + jQuery + .ajax( { + url: dt.ajaxurl, + xhrFields: xhr, + method: 'post', + data, + } ) + .done( ( response ) => { + if ( ! response.success || ! response.data ) { + distributorPushWrapper.classList.remove( 'loaded' ); + distributorPushWrapper.classList.add( 'message-error' ); + return; + } + + dtConnections = response.data; + + if ( 'mustache' === template ) { + // Manipulate the data to match what mustache needs + const mustacheData = { connections: [] }; + _.each( dtConnections, ( connection ) => { + if ( 'internal' === connection.type ) { + connection.internal = true; + } + + mustacheData.connections.push( connection ); + } ); + + distributorPushWrapper.innerHTML = Mustache.render( + document.getElementById( 'dt-show-connections' ) + .innerHTML, + { + connections: mustacheData.connections, + foundConnections: mustacheData.connections.length, + showSearch: 5 < mustacheData.connections.length, + } + ); + + setDisabledConnections(); + } else { + distributorPushWrapper.innerHTML = template( { + connections: dtConnections, + } ); + } + + setVariables(); + } ) + .error( () => { + distributorPushWrapper.classList.remove( 'loaded' ); + distributorPushWrapper.classList.add( 'message-error' ); + } ); + } + + /** + * Close distributor menu when a click occurs outside of it + */ + function maybeCloseDistributorMenu() { + // If a distribution is in progress, don't close things + if ( distributorTopMenu.classList.contains( 'syncing' ) ) { + return; + } + + // If the Distributor menu is showing, hide everything + if ( distributorTopMenu.classList.contains( 'hover' ) ) { + distributorTopMenu.classList.remove( 'hover' ); + document.body.classList.remove( 'is-showing-distributor' ); + } + + // Determine if we need to hide the admin bar + maybeHideAdminBar(); + } + + const distributorAdminItem = document.querySelector( + '#wp-admin-bar-distributor > a' + ); + + // Event listeners when to fetch distributor data. + distributorAdminItem.addEventListener( + 'keydown', + function ( e ) { + // Pressing Enter. + if ( 13 === e.keyCode ) { + distributorMenuEntered(); + } + }, + false + ); + + // In full screen mode, add hoverintent to remove admin bar on hover out + if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) { + window + .hoverintent( + distributorTopMenu, + function () { + return null; + }, + maybeHideAdminBar + ) + .options( { + timeout: 180, + } ); + } + + /** + * Distributor menu hovered out + * + * Used to remove the admin bar from showing. + */ + function maybeHideAdminBar() { + if ( + ! distributorTopMenu.classList.contains( 'hover' ) && + ! distributorTopMenu.classList.contains( 'syncing' ) + ) { + document.body.classList.remove( 'is-showing-distributor' ); + } + } + + distributorAdminItem.addEventListener( + 'touchstart', + distributorMenuEntered, + false + ); + distributorAdminItem.addEventListener( + 'mouseenter', + distributorMenuEntered, + false + ); + overlayDiv.addEventListener( 'click', maybeCloseDistributorMenu, true ); + + /** + * Do syndication ajax + */ + jQuery( distributorPushWrapper ).on( 'click', '.syndicate-button', () => { + if ( distributorTopMenu.classList.contains( 'syncing' ) ) { + return; + } + + distributorTopMenu.classList.add( 'syncing' ); + + const data = { + action: 'dt_push', + nonce: dt.nonce, + connections: selectedConnections, + postId: dt.postId, + }; + + data.postStatus = + null !== asDraftInput && asDraftInput.checked + ? 'draft' + : postStatusInput.value; + + const xhr = dt.usexhr ? { withCredentials: true } : false; + + jQuery + .ajax( { + url: dt.ajaxurl, + xhrFields: xhr, + method: 'post', + data, + } ) + .done( ( response ) => { + setTimeout( () => { + distributorTopMenu.classList.remove( 'syncing' ); + + // Maybe hide the admin bar + maybeHideAdminBar(); + + if ( ! response.success ) { + doError( response.data ); + return; + } + + if ( ! response.data || ! response.data.results ) { + doError( dt.messages.empty_result ); + return; + } + + doSuccess( response.data.results ); + }, 500 ); + } ) + // eslint-disable-next-line no-shadow + .error( ( xhr, textStatus, errorThrown ) => { + setTimeout( () => { + distributorTopMenu.classList.remove( 'syncing' ); + + doError( `${ dt.messages.ajax_error } ${ errorThrown }` ); + }, 500 ); + } ); + } ); + + /** + * Add a connection to selected connections for ajax and to the UI list. + */ + jQuery( distributorPushWrapper ).on( + 'click', + '.add-connection', + ( event ) => { + if ( 'A' === event.target.nodeName ) { + return; + } + + event.preventDefault(); + + if ( event.currentTarget.classList.contains( 'syndicated' ) ) { + return; + } + + if ( event.currentTarget.classList.contains( 'added' ) ) { + const type = event.currentTarget.getAttribute( + 'data-connection-type' + ); + const id = + event.currentTarget.getAttribute( 'data-connection-id' ); + + const deleteNode = connectionsSelectedList.querySelector( + `[data-connection-id="${ id }"][data-connection-type="${ type }"]` + ); + + deleteNode.parentNode.removeChild( deleteNode ); + + delete selectedConnections[ type + id ]; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys( selectedConnections ).length, + "distributor" + ), + Object.keys( selectedConnections ).length + ); + document.querySelector( + '.selected-connections-text' + ).textContent = + selectedText; + + if ( + selectAllConnections.classList.contains( 'unavailable' ) + ) { + classList( 'all' ); + } + if ( ! Object.keys( selectedConnections ).length ) { + classList( 'addEmpty' ); + classList( 'noneUnavailable' ); + } + + showConnections(); + } else { + const type = event.currentTarget.getAttribute( + 'data-connection-type' + ); + const id = + event.currentTarget.getAttribute( 'data-connection-id' ); + + selectedConnections[ type + id ] = dtConnections[ type + id ]; + + const element = event.currentTarget.cloneNode( true ); + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys( selectedConnections ).length, + "distributor" + ), + Object.keys( selectedConnections ).length + ); + document.querySelector( + '.selected-connections-text' + ).textContent = + selectedText; + + + const removeLink = document.createElement( 'span' ); + removeLink.classList.add( 'remove-connection' ); + + element.appendChild( removeLink ); + element.classList = 'added-connection'; + connectionsSelectedList.appendChild( element ); + + if ( selectNoConnections.classList.contains( 'unavailable' ) ) { + classList( 'removeEmpty' ); + classList( 'none' ); + } + + if ( + // eslint-disable-next-line eqeqeq + Object.keys( selectedConnections ).length == + connectionsAvailableTotal + ) { + classList( 'allUnavailable' ); + } + + showConnections(); + } + } + ); + + /** + * Select all connections for distribution. + */ + jQuery( distributorPushWrapper ).on( + 'click', + '.selectall-connections', + () => { + jQuery( connectionsNewList ) + .children( '.add-connection' ) + .each( ( index, childTarget ) => { + if ( + childTarget.classList.contains( 'syndicated' ) || + childTarget.classList.contains( 'added' ) + ) { + return; + } + const type = childTarget.getAttribute( + 'data-connection-type' + ); + const id = childTarget.getAttribute( 'data-connection-id' ); + + selectedConnections[ type + id ] = + dtConnections[ type + id ]; + + const element = childTarget.cloneNode(); + element.innerText = childTarget.innerText; + + const removeLink = document.createElement( 'span' ); + removeLink.classList.add( 'remove-connection' ); + + element.appendChild( removeLink ); + element.classList = 'added-connection'; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys( selectedConnections ).length, + "distributor" + ), + Object.keys( selectedConnections ).length + ); + document.querySelector( + '.selected-connections-text' + ).textContent = + selectedText; + + connectionsSelectedList.appendChild( element ); + + if ( '' !== connectionsAvailableTotal ) { + classList( 'removeEmpty' ); + classList( 'allUnavailable' ); + classList( 'none' ); + } + } ); + + showConnections(); + } + ); + + /** + * Select no connections for distribution. + */ + jQuery( distributorPushWrapper ).on( + 'click', + '.selectno-connections', + () => { + while ( connectionsSelectedList.firstChild ) { + const type = connectionsSelectedList.firstChild.getAttribute( + 'data-connection-type' + ); + const id = + connectionsSelectedList.firstChild.getAttribute( + 'data-connection-id' + ); + + delete selectedConnections[ type + id ]; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys( selectedConnections ).length, + "distributor" + ), + Object.keys( selectedConnections ).length + ); + document.querySelector( + '.selected-connections-text' + ).textContent = + selectedText; + + connectionsSelectedList.removeChild( + connectionsSelectedList.firstChild + ); + } + + if ( '' !== connectionsAvailableTotal ) { + classList( 'addEmpty' ); + classList( 'noneUnavailable' ); + classList( 'all' ); + } + + showConnections(); + } + ); + + /** + * Remove a connection from selected connections and the UI list + */ + jQuery( distributorPushWrapper ).on( + 'click', + '.added-connection', + ( event ) => { + event.currentTarget.parentNode.removeChild( event.currentTarget ); + const type = event.currentTarget.getAttribute( + 'data-connection-type' + ); + const id = event.currentTarget.getAttribute( 'data-connection-id' ); + + delete selectedConnections[ type + id ]; + selectedText = sprintf( + _n( + "Selected connection (%d)", + "Selected connections (%d)", + Object.keys( selectedConnections ).length, + "distributor" + ), + Object.keys( selectedConnections ).length + ); + document.querySelector( + '.selected-connections-text' + ).textContent = + selectedText; + + if ( selectAllConnections.classList.contains( 'unavailable' ) ) { + classList( 'all' ); + } + if ( ! Object.keys( selectedConnections ).length ) { + classList( 'addEmpty' ); + classList( 'noneUnavailable' ); + } + + showConnections(); + } + ); +} ); From 7e895e37ce27f7d2163b9e1ac717414ca2d83bca Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 15:20:22 +0530 Subject: [PATCH 19/30] Resolved Eslint errors --- assets/js/push.js | 47 ++++++++++++++++++++--------------------------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 6d1f1fa4f..3ea59ebdf 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -583,18 +583,16 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( _n( - "Selected connection (%d)", - "Selected connections (%d)", + 'Selected connection (%d)', + 'Selected connections (%d)', Object.keys( selectedConnections ).length, - "distributor" + 'distributor' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' - ).textContent = - selectedText; - + ).textContent = selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { @@ -618,18 +616,16 @@ jQuery( window ).on( 'load', () => { const element = event.currentTarget.cloneNode( true ); selectedText = sprintf( _n( - "Selected connection (%d)", - "Selected connections (%d)", + 'Selected connection (%d)', + 'Selected connections (%d)', Object.keys( selectedConnections ).length, - "distributor" + 'distributor' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' - ).textContent = - selectedText; - + ).textContent = selectedText; const removeLink = document.createElement( 'span' ); removeLink.classList.add( 'remove-connection' ); @@ -690,17 +686,16 @@ jQuery( window ).on( 'load', () => { element.classList = 'added-connection'; selectedText = sprintf( _n( - "Selected connection (%d)", - "Selected connections (%d)", + 'Selected connection (%d)', + 'Selected connections (%d)', Object.keys( selectedConnections ).length, - "distributor" + 'distributor' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' - ).textContent = - selectedText; + ).textContent = selectedText; connectionsSelectedList.appendChild( element ); @@ -734,17 +729,16 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( _n( - "Selected connection (%d)", - "Selected connections (%d)", + 'Selected connection (%d)', + 'Selected connections (%d)', Object.keys( selectedConnections ).length, - "distributor" + 'distributor' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' - ).textContent = - selectedText; + ).textContent = selectedText; connectionsSelectedList.removeChild( connectionsSelectedList.firstChild @@ -777,17 +771,16 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( _n( - "Selected connection (%d)", - "Selected connections (%d)", + 'Selected connection (%d)', + 'Selected connections (%d)', Object.keys( selectedConnections ).length, - "distributor" + 'distributor' ), Object.keys( selectedConnections ).length ); document.querySelector( '.selected-connections-text' - ).textContent = - selectedText; + ).textContent = selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 1f3af81cc6a76623610f26f472a8522f7072c6d2 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 15:54:42 +0530 Subject: [PATCH 20/30] Resolved Eslint errors --- assets/js/push.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/js/push.js b/assets/js/push.js index 3ea59ebdf..7d77ed59f 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -582,6 +582,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( + /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -592,7 +593,7 @@ jQuery( window ).on( 'load', () => { ); document.querySelector( '.selected-connections-text' - ).textContent = selectedText; + ).textContent = selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { @@ -615,6 +616,7 @@ jQuery( window ).on( 'load', () => { const element = event.currentTarget.cloneNode( true ); selectedText = sprintf( + /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -685,6 +687,7 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; selectedText = sprintf( + /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -728,6 +731,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( + /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -770,6 +774,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( + /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', From ee43fb92289a974b0396b4d7e0d2cb2797c55651 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:01:04 +0530 Subject: [PATCH 21/30] Resolved Eslint errors --- assets/js/push.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/push.js b/assets/js/push.js index 7d77ed59f..f0fb13b1d 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -785,7 +785,8 @@ jQuery( window ).on( 'load', () => { ); document.querySelector( '.selected-connections-text' - ).textContent = selectedText; + ).textContent = + selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From a508e765c72dff309de7f2df400a0c464f12f3a8 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:19:19 +0530 Subject: [PATCH 22/30] Resolved Eslint errors --- assets/js/push.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index f0fb13b1d..a1fac3468 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -784,9 +784,8 @@ jQuery( window ).on( 'load', () => { Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-text' - ).textContent = - selectedText; + '.selected-connections-text' ).textContent = + selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 7dcb4a01a4b7b06c473ec36a36e3c5f0926ef4b5 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:22:43 +0530 Subject: [PATCH 23/30] Resolved Eslint errors --- assets/js/push.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/push.js b/assets/js/push.js index a1fac3468..85a5be4c4 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -784,7 +784,7 @@ jQuery( window ).on( 'load', () => { Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-text' ).textContent = + '.selected-connections-text' ).textContent = selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { From 393b8b3dca06dd36172dde8d4c1dd3d226c11ccf Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:30:41 +0530 Subject: [PATCH 24/30] CS: Fix prettier issues. --- assets/js/push.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 85a5be4c4..6dc7f9fb3 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -784,9 +784,9 @@ jQuery( window ).on( 'load', () => { Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-text' ).textContent = + '.selected-connections-count' + ).textContent = selectedText; - if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); } From f160de59aada49f0397ae1d9d10c7e01737a5257 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:33:17 +0530 Subject: [PATCH 25/30] CS: Fix prettier issues. --- assets/js/push.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/push.js b/assets/js/push.js index 6dc7f9fb3..fe31b2daa 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -785,7 +785,7 @@ jQuery( window ).on( 'load', () => { ); document.querySelector( '.selected-connections-count' - ).textContent = + ).textContent = selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From dd3d8e883e9461d3045f6304dc267570cecfe5ac Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:36:10 +0530 Subject: [PATCH 26/30] CS: Fix prettier issues. --- assets/js/push.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/push.js b/assets/js/push.js index fe31b2daa..6dc7f9fb3 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -785,7 +785,7 @@ jQuery( window ).on( 'load', () => { ); document.querySelector( '.selected-connections-count' - ).textContent = + ).textContent = selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); From 97a6e76c03fef1e2892472c257ced6c5b69cf6f8 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:51:35 +0530 Subject: [PATCH 27/30] CS: Fix prettier issues. --- assets/js/push.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 6dc7f9fb3..1aece29e2 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -784,9 +784,9 @@ jQuery( window ).on( 'load', () => { Object.keys( selectedConnections ).length ); document.querySelector( - '.selected-connections-count' - ).textContent = - selectedText; + '.selected-connections-text' + ).textContent = selectedText; + if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); } From 484e883099acd13614c2ac57862d23a1428a87cc Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Wed, 1 Mar 2023 16:54:28 +0530 Subject: [PATCH 28/30] CS: Fix prettier issues.Removed extra space --- assets/js/push.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/push.js b/assets/js/push.js index 1aece29e2..30dca67f2 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -786,7 +786,6 @@ jQuery( window ).on( 'load', () => { document.querySelector( '.selected-connections-text' ).textContent = selectedText; - if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); } From fa3e6b2160a997ef56a494ca43159a115f2810a0 Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Thu, 2 Mar 2023 14:08:50 +0530 Subject: [PATCH 29/30] CS: Fix prettier issues --- assets/js/push.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 30dca67f2..0195d72ba 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -783,9 +783,8 @@ jQuery( window ).on( 'load', () => { ), Object.keys( selectedConnections ).length ); - document.querySelector( - '.selected-connections-text' - ).textContent = selectedText; + document.querySelector( '.selected-connections-text' ).textContent = + selectedText; if ( selectAllConnections.classList.contains( 'unavailable' ) ) { classList( 'all' ); } From e9ae0493659618e648cd7b06f86513f3b6ec890e Mon Sep 17 00:00:00 2001 From: roshniahuja Date: Mon, 6 Mar 2023 21:52:30 +0530 Subject: [PATCH 30/30] changed comment for translator --- assets/js/push.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 0195d72ba..c7f59a988 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -582,7 +582,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( - /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ + /* translators: %d: Number of selected connections. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -616,7 +616,7 @@ jQuery( window ).on( 'load', () => { const element = event.currentTarget.cloneNode( true ); selectedText = sprintf( - /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ + /* translators: %d: Number of selected connections. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -687,7 +687,7 @@ jQuery( window ).on( 'load', () => { element.appendChild( removeLink ); element.classList = 'added-connection'; selectedText = sprintf( - /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ + /* translators: %d: Number of selected connections. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -731,7 +731,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( - /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ + /* translators: %d: Number of selected connections. */ _n( 'Selected connection (%d)', 'Selected connections (%d)', @@ -774,7 +774,7 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[ type + id ]; selectedText = sprintf( - /* translators: 1) Selected connection content singular name. 2) Selected connection content plural name. */ + /* translators: %d: Number of selected connections. */ _n( 'Selected connection (%d)', 'Selected connections (%d)',