From ea9cb5c6683e8be4b4ab22319f635f929409cb28 Mon Sep 17 00:00:00 2001 From: Cavanagh Date: Tue, 3 Dec 2019 13:53:29 -0800 Subject: [PATCH 1/5] Select all feature added. --- assets/css/push.css | 11 ++++++- assets/js/push.js | 76 +++++++++++++++++++++++++++++++++++--------- includes/push-ui.php | 1 + 3 files changed, 72 insertions(+), 16 deletions(-) diff --git a/assets/css/push.css b/assets/css/push.css index 97236b54b..266cde7fc 100644 --- a/assets/css/push.css +++ b/assets/css/push.css @@ -83,6 +83,10 @@ } } +#wpadminbar #distributor-push-wrapper .selectall-connections.empty { + opacity: .5; +} + #wpadminbar #distributor-push-wrapper .connections-selected label { color: inherit; } @@ -198,6 +202,10 @@ } } +#wpadminbar #distributor-push-wrapper .selectall-connections { + margin-bottom: 1em; +} + #wpadminbar #distributor-push-wrapper .new-connections-list > div:nth-child(odd) { background-color: var(--backgroundColorDark); } @@ -270,7 +278,8 @@ box-sizing: border-box; } -#wpadminbar #distributor-push-wrapper .action-wrapper.loading .syndicate-button:after { +#wpadminbar #distributor-push-wrapper .action-wrapper.loading .syndicate-button:after, +#wpadminbar #distributor-push-wrapper .action-wrapper.loading .selectall-connections:after { content: ' '; vertical-align: middle; border-radius: 50%; diff --git a/assets/js/push.js b/assets/js/push.js index b8a2845fe..17c674424 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -29,14 +29,16 @@ jQuery( window ).on( 'load', () => { return; } - let dtConnections = ''; - let connectionsSelected = ''; - let connectionsSelectedList = ''; - let connectionsNewList = ''; - let connectionsSearchInput = ''; - let actionWrapper = ''; - let postStatusInput = ''; - let asDraftInput = ''; + let dtConnections = ''; + let connectionsSelected = ''; + let connectionsSelectedList = ''; + let connectionsNewList = ''; + let connectionsNewListChildren = ''; + let selectAllConnections = ''; + let connectionsSearchInput = ''; + let actionWrapper = ''; + let postStatusInput = ''; + let asDraftInput = ''; distributorMenuItem.appendChild( distributorPushWrapper ); @@ -44,13 +46,15 @@ jQuery( window ).on( 'load', () => { * 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' ); - connectionsSearchInput = document.getElementById( 'dt-connection-search' ); - actionWrapper = distributorPushWrapper.querySelector( '.action-wrapper' ); - postStatusInput = document.getElementById( 'dt-post-status' ); - asDraftInput = document.getElementById( 'dt-as-draft' ); + connectionsSelected = distributorPushWrapper.querySelector( '.connections-selected' ); + connectionsSelectedList = distributorPushWrapper.querySelector( '.selected-connections-list' ); + connectionsNewList = distributorPushWrapper.querySelector( '.new-connections-list' ); + connectionsNewListChildren = connectionsNewList.querySelectorAll( '.add-connection' ); + selectAllConnections = distributorPushWrapper.querySelector( '.selectall-connections' ); + connectionsSearchInput = document.getElementById( 'dt-connection-search' ); + actionWrapper = distributorPushWrapper.querySelector( '.action-wrapper' ); + postStatusInput = document.getElementById( 'dt-post-status' ); + asDraftInput = document.getElementById( 'dt-as-draft' ); /** * Listen for connection filtering @@ -64,6 +68,15 @@ jQuery( window ).on( 'load', () => { showConnections(); }, 300 ) ); + + /** + * Indicate select all button available, if connections are available for syndication + */ + _.each( connectionsNewListChildren, ( element ) => { + if ( !element.classList.contains ( 'syndicated' ) ) { + selectAllConnections.classList.remove( 'empty' ); + } + } ); } /** @@ -300,6 +313,39 @@ jQuery( window ).on( 'load', () => { } } ); + /** + * 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; + } else { + const type = childTarget.getAttribute( 'data-connection-type' ); + const id = childTarget.getAttribute( 'data-connection-id' ); + + selectedConnections[type + id] = dtConnections[type + id]; + + connectionsSelected.classList.remove( 'empty' ); + + 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'; + + connectionsSelectedList.appendChild( element ); + } + } ); + + showConnections(); + } ); + + /** * Remove a connection from selected connections and the UI list */ diff --git a/includes/push-ui.php b/includes/push-ui.php index 7d70c62c0..69fbd0873 100644 --- a/includes/push-ui.php +++ b/includes/push-ui.php @@ -455,6 +455,7 @@ function menu_content() {
+ <# if ( 5 < _.keys( connections ).length ) { #> <# } #> From ea231d877568177107e2bacdaac598c9cc882a27 Mon Sep 17 00:00:00 2001 From: Cavanagh Date: Fri, 6 Dec 2019 14:37:20 -0800 Subject: [PATCH 2/5] Add 'None' option to push admin interface --- assets/css/push.css | 6 ++++-- assets/js/push.js | 23 +++++++++++++++++++++++ includes/push-ui.php | 1 + 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/assets/css/push.css b/assets/css/push.css index 266cde7fc..c88c7c764 100644 --- a/assets/css/push.css +++ b/assets/css/push.css @@ -83,7 +83,8 @@ } } -#wpadminbar #distributor-push-wrapper .selectall-connections.empty { +#wpadminbar #distributor-push-wrapper .selectall-connections.empty, +#wpadminbar #distributor-push-wrapper .selectno-connections.empty { opacity: .5; } @@ -279,7 +280,8 @@ } #wpadminbar #distributor-push-wrapper .action-wrapper.loading .syndicate-button:after, -#wpadminbar #distributor-push-wrapper .action-wrapper.loading .selectall-connections:after { +#wpadminbar #distributor-push-wrapper .action-wrapper.loading .selectall-connections:after, +#wpadminbar #distributor-push-wrapper .action-wrapper.loading .selectno-connections:after { content: ' '; vertical-align: middle; border-radius: 50%; diff --git a/assets/js/push.js b/assets/js/push.js index 17c674424..796648ce2 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -35,6 +35,7 @@ jQuery( window ).on( 'load', () => { let connectionsNewList = ''; let connectionsNewListChildren = ''; let selectAllConnections = ''; + let selectNoConnections = ''; let connectionsSearchInput = ''; let actionWrapper = ''; let postStatusInput = ''; @@ -51,6 +52,7 @@ jQuery( window ).on( 'load', () => { connectionsNewList = distributorPushWrapper.querySelector( '.new-connections-list' ); connectionsNewListChildren = connectionsNewList.querySelectorAll( '.add-connection' ); selectAllConnections = distributorPushWrapper.querySelector( '.selectall-connections' ); + selectNoConnections = distributorPushWrapper.querySelector( '.selectno-connections' ); connectionsSearchInput = document.getElementById( 'dt-connection-search' ); actionWrapper = distributorPushWrapper.querySelector( '.action-wrapper' ); postStatusInput = document.getElementById( 'dt-post-status' ); @@ -75,6 +77,7 @@ jQuery( window ).on( 'load', () => { _.each( connectionsNewListChildren, ( element ) => { if ( !element.classList.contains ( 'syndicated' ) ) { selectAllConnections.classList.remove( 'empty' ); + selectNoConnections.classList.remove( 'empty' ); } } ); } @@ -345,6 +348,26 @@ jQuery( window ).on( 'load', () => { 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]; + + connectionsSelectedList.removeChild( connectionsSelectedList.firstChild ); + + if ( ! Object.keys( selectedConnections ).length ) { + connectionsSelected.classList.add( 'empty' ); + } + } + + showConnections(); + } ); /** * Remove a connection from selected connections and the UI list diff --git a/includes/push-ui.php b/includes/push-ui.php index 69fbd0873..17149715e 100644 --- a/includes/push-ui.php +++ b/includes/push-ui.php @@ -456,6 +456,7 @@ function menu_content() {
+ <# if ( 5 < _.keys( connections ).length ) { #> <# } #> From 35a5b7fb99d8cded865e605c6c1350aae6a23e9f Mon Sep 17 00:00:00 2001 From: Cavanagh Date: Thu, 19 Dec 2019 16:22:32 -0800 Subject: [PATCH 3/5] css overflow:auto --- assets/css/push.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/assets/css/push.css b/assets/css/push.css index c88c7c764..84851f417 100644 --- a/assets/css/push.css +++ b/assets/css/push.css @@ -60,6 +60,8 @@ #wpadminbar #distributor-push-wrapper .selected-connections-list { margin-bottom: 1em; + overflow: auto; + max-height: 145px; } #wpadminbar #distributor-push-wrapper .connections-selected { @@ -82,12 +84,10 @@ display: none; } } - #wpadminbar #distributor-push-wrapper .selectall-connections.empty, #wpadminbar #distributor-push-wrapper .selectno-connections.empty { opacity: .5; } - #wpadminbar #distributor-push-wrapper .connections-selected label { color: inherit; } @@ -159,9 +159,9 @@ #wpadminbar #distributor-push-wrapper input[type=text] { font-size: inherit; padding: 0.5278em; - width: 100%; + width: 96%; background-color: var(--backgroundColor); - border: 2px solid var(--borderColor); + border: 3px solid var(--borderColor); color: var(--fontColor); margin-bottom: .5em; @@ -202,7 +202,6 @@ outline: none; } } - #wpadminbar #distributor-push-wrapper .selectall-connections { margin-bottom: 1em; } From e674056cdfa0e748f06c084321143393c4739453 Mon Sep 17 00:00:00 2001 From: Cavanagh Date: Tue, 7 Jan 2020 14:32:30 -0800 Subject: [PATCH 4/5] Disable indication for select all and select none buttons through CSS. --- assets/js/push.js | 114 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 81 insertions(+), 33 deletions(-) diff --git a/assets/js/push.js b/assets/js/push.js index 796648ce2..b196e7a79 100755 --- a/assets/js/push.js +++ b/assets/js/push.js @@ -4,7 +4,6 @@ import { dt } from 'window'; let selectedConnections = {}, searchString = ''; - const processTemplate = _.memoize( ( id ) => { const element = document.getElementById( id ); if ( ! element ) { @@ -29,17 +28,18 @@ jQuery( window ).on( 'load', () => { return; } - let dtConnections = ''; - let connectionsSelected = ''; - let connectionsSelectedList = ''; - let connectionsNewList = ''; - let connectionsNewListChildren = ''; - let selectAllConnections = ''; - let selectNoConnections = ''; - let connectionsSearchInput = ''; - let actionWrapper = ''; - let postStatusInput = ''; - let asDraftInput = ''; + let dtConnections = ''; + let connectionsSelected = ''; + let connectionsSelectedList = ''; + let connectionsNewList = ''; + let connectionsNewListChildren = ''; + let connectionsAvailableTotal = ''; + let selectAllConnections = ''; + let selectNoConnections = ''; + let connectionsSearchInput = ''; + let actionWrapper = ''; + let postStatusInput = ''; + let asDraftInput = ''; distributorMenuItem.appendChild( distributorPushWrapper ); @@ -50,7 +50,6 @@ jQuery( window ).on( 'load', () => { connectionsSelected = distributorPushWrapper.querySelector( '.connections-selected' ); connectionsSelectedList = distributorPushWrapper.querySelector( '.selected-connections-list' ); connectionsNewList = distributorPushWrapper.querySelector( '.new-connections-list' ); - connectionsNewListChildren = connectionsNewList.querySelectorAll( '.add-connection' ); selectAllConnections = distributorPushWrapper.querySelector( '.selectall-connections' ); selectNoConnections = distributorPushWrapper.querySelector( '.selectno-connections' ); connectionsSearchInput = document.getElementById( 'dt-connection-search' ); @@ -58,6 +57,10 @@ jQuery( window ).on( 'load', () => { postStatusInput = document.getElementById( 'dt-post-status' ); asDraftInput = document.getElementById( 'dt-as-draft' ); + if ( null !== connectionsNewList ){ + connectionsNewListChildren = connectionsNewList.querySelectorAll( '.add-connection' ); + } + /** * Listen for connection filtering */ @@ -65,21 +68,20 @@ jQuery( window ).on( 'load', () => { if ( '' === event.currentTarget.value ) { showConnections( dtConnections ); } - searchString = event.currentTarget.value.replace( /https?:\/\//i, '' ).replace( /www/i, '' ).replace( /[^0-9a-zA-Z ]+/, '' ); - showConnections(); }, 300 ) ); /** - * Indicate select all button available, if connections are available for syndication + * 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( 'empty' ); - selectNoConnections.classList.remove( 'empty' ); + selectAllConnections.classList.remove( 'unavailable' ); + connectionsAvailableTotal ++; } } ); + } /** @@ -134,8 +136,8 @@ jQuery( window ).on( 'load', () => { } /** - * Show connections. If there is a search string, then filter by it - */ + * Show connections. If there is a search string, then filter by it + */ function showConnections() { connectionsNewList.innerText = ''; @@ -158,6 +160,32 @@ jQuery( window ).on( 'load', () => { } ); } + /** + * Add or remove CSS classes to indicate button functionality + */ + 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 hover using hoverIntent. */ @@ -194,7 +222,6 @@ jQuery( window ).on( 'load', () => { dtConnections = response.data; - // Allowing innerHTML because processTemplate escapes values distributorPushWrapper.innerHTML = processTemplate( 'dt-show-connections' )( { connections: dtConnections, } ); @@ -277,7 +304,6 @@ jQuery( window ).on( 'load', () => { } if ( event.currentTarget.classList.contains( 'added' ) ) { - const type = event.currentTarget.getAttribute( 'data-connection-type' ); const id = event.currentTarget.getAttribute( 'data-connection-id' ); @@ -287,20 +313,21 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[type + id]; + if ( selectAllConnections.classList.contains ( 'unavailable' ) ) { + classList ( 'all' ); + } if ( ! Object.keys( selectedConnections ).length ) { - connectionsSelected.classList.add( 'empty' ); + 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]; - connectionsSelected.classList.remove( 'empty' ); - const element = event.currentTarget.cloneNode(); element.innerText = event.currentTarget.innerText; @@ -312,6 +339,15 @@ jQuery( window ).on( 'load', () => { connectionsSelectedList.appendChild( element ); + if ( selectNoConnections.classList.contains ( 'unavailable' ) ) { + classList ( 'removeEmpty' ); + classList ( 'none' ); + } + + if ( Object.keys( selectedConnections ).length == connectionsAvailableTotal ){ + classList ( 'allUnavailable' ); + } + showConnections(); } } ); @@ -320,7 +356,6 @@ jQuery( window ).on( 'load', () => { * 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; @@ -330,8 +365,6 @@ jQuery( window ).on( 'load', () => { selectedConnections[type + id] = dtConnections[type + id]; - connectionsSelected.classList.remove( 'empty' ); - const element = childTarget.cloneNode(); element.innerText = childTarget.innerText; @@ -342,7 +375,15 @@ jQuery( window ).on( 'load', () => { element.classList = 'added-connection'; connectionsSelectedList.appendChild( element ); + + } + + if ( '' !== connectionsAvailableTotal ) { + classList ( 'removeEmpty' ); + classList ( 'allUnavailable' ); + classList ( 'none' ); } + } ); showConnections(); @@ -361,9 +402,12 @@ jQuery( window ).on( 'load', () => { connectionsSelectedList.removeChild( connectionsSelectedList.firstChild ); - if ( ! Object.keys( selectedConnections ).length ) { - connectionsSelected.classList.add( 'empty' ); - } + } + + if ( '' !== connectionsAvailableTotal ) { + classList ( 'addEmpty' ); + classList ( 'noneUnavailable' ); + classList ( 'all' ); } showConnections(); @@ -379,8 +423,12 @@ jQuery( window ).on( 'load', () => { delete selectedConnections[type + id]; + if ( selectAllConnections.classList.contains ( 'unavailable' ) ) { + classList ( 'all' ); + } if ( ! Object.keys( selectedConnections ).length ) { - connectionsSelected.classList.add( 'empty' ); + classList ( 'addEmpty' ); + classList ( 'noneUnavailable' ); } showConnections(); From c97b4ae0f9b77ca65a1ab5d79eece853c8f5d1cf Mon Sep 17 00:00:00 2001 From: Cavanagh Date: Tue, 7 Jan 2020 14:38:31 -0800 Subject: [PATCH 5/5] Disable indication for select all and select none buttons through CSS - UI and CSS files. --- assets/css/push.css | 4 ++-- includes/push-ui.php | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/assets/css/push.css b/assets/css/push.css index 84851f417..0a13d5275 100644 --- a/assets/css/push.css +++ b/assets/css/push.css @@ -84,8 +84,8 @@ display: none; } } -#wpadminbar #distributor-push-wrapper .selectall-connections.empty, -#wpadminbar #distributor-push-wrapper .selectno-connections.empty { +#wpadminbar #distributor-push-wrapper .selectall-connections.unavailable, +#wpadminbar #distributor-push-wrapper .selectno-connections.unavailable { opacity: .5; } #wpadminbar #distributor-push-wrapper .connections-selected label { diff --git a/includes/push-ui.php b/includes/push-ui.php index 17149715e..2c9fa51d2 100644 --- a/includes/push-ui.php +++ b/includes/push-ui.php @@ -455,8 +455,8 @@ function menu_content() {
- - + + <# if ( 5 < _.keys( connections ).length ) { #> <# } #> @@ -508,6 +508,7 @@ function menu_content() { ?>
+