Skip to content

Commit

Permalink
Merge pull request #495 from biggiebangle/feature/select-all
Browse files Browse the repository at this point in the history 
Select all feature added.
  • Loading branch information
@jeffpaul
jeffpaul authored Feb 19, 2020
2 parents 69ed8aa + b337fd3 commit a5268e1
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 31 deletions.
18 changes: 14 additions & 4 deletions assets/css/push.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -82,7 +84,10 @@
display: none;
}
}

#wpadminbar #distributor-push-wrapper .selectall-connections.unavailable,
#wpadminbar #distributor-push-wrapper .selectno-connections.unavailable {
opacity: .5;
}
#wpadminbar #distributor-push-wrapper .connections-selected label {
color: inherit;
}
Expand Down Expand Up @@ -154,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;

Expand Down Expand Up @@ -197,6 +202,9 @@
outline: none;
}
}
#wpadminbar #distributor-push-wrapper .selectall-connections {
margin-bottom: 1em;
}

#wpadminbar #distributor-push-wrapper .new-connections-list > div:nth-child(odd) {
background-color: var(--backgroundColorDark);
Expand Down Expand Up @@ -270,7 +278,9 @@
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,
#wpadminbar #distributor-push-wrapper .action-wrapper.loading .selectno-connections:after {
content: ' ';
vertical-align: middle;
border-radius: 50%;
Expand Down
171 changes: 144 additions & 27 deletions assets/js/push.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { dt } from 'window';

let selectedConnections = {},
searchString = '';

const processTemplate = _.memoize( ( id ) => {
const element = document.getElementById( id );
if ( ! element ) {
Expand All @@ -29,28 +28,38 @@ 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 connectionsAvailableTotal = '';
let selectAllConnections = '';
let selectNoConnections = '';
let connectionsSearchInput = '';
let actionWrapper = '';
let postStatusInput = '';
let asDraftInput = '';

distributorMenuItem.appendChild( distributorPushWrapper );

/**
* 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' );
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' );
asDraftInput = document.getElementById( 'dt-as-draft' );

if ( null !== connectionsNewList ){
connectionsNewListChildren = connectionsNewList.querySelectorAll( '.add-connection' );
}

/**
* Listen for connection filtering
Expand All @@ -59,11 +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 ) );

/**
* 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 ++;
}
} );

}

/**
Expand Down Expand Up @@ -118,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 = '';

Expand All @@ -142,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.
*/
Expand Down Expand Up @@ -178,7 +222,6 @@ jQuery( window ).on( 'load', () => {

dtConnections = response.data;

// Allowing innerHTML because processTemplate escapes values
distributorPushWrapper.innerHTML = processTemplate( 'dt-show-connections' )( {
connections: dtConnections,
} );
Expand Down Expand Up @@ -261,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' );

Expand All @@ -271,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;

Expand All @@ -296,10 +339,80 @@ 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();
}
} );

/**
* 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];

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 );

}

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];

connectionsSelectedList.removeChild( connectionsSelectedList.firstChild );

}

if ( '' !== connectionsAvailableTotal ) {
classList ( 'addEmpty' );
classList ( 'noneUnavailable' );
classList ( 'all' );
}

showConnections();
} );

/**
* Remove a connection from selected connections and the UI list
*/
Expand All @@ -310,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();
Expand Down
3 changes: 3 additions & 0 deletions includes/push-ui.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,6 +455,8 @@ function menu_content() {

<div class="connections-selector">
<div>
<button class="selectall-connections unavailable"><?php esc_html_e( 'Select All', 'distributor' ); ?></button>
<button class="selectno-connections unavailable"><?php esc_html_e( 'None', 'distributor' ); ?></button>
<# if ( 5 < _.keys( connections ).length ) { #>
<input type="text" id="dt-connection-search" placeholder="<?php esc_attr_e( 'Search available connections', 'distributor' ); ?>">
<# } #>
Expand Down Expand Up @@ -506,6 +508,7 @@ function menu_content() {
?>
<button class="syndicate-button"><?php esc_html_e( 'Distribute', 'distributor' ); ?></button> <?php if ( $as_draft ) : ?><label class="as-draft" for="dt-as-draft"><input type="checkbox" id="dt-as-draft" checked> <?php esc_html_e( 'As draft', 'distributor' ); ?></label><?php endif; ?>
</div>

</div>

<div class="messages">
Expand Down

0 comments on commit a5268e1

Please sign in to comment.