From d7ae47cb914e9113993fc8adfb18e221d94eda75 Mon Sep 17 00:00:00 2001 From: mitogh Date: Sat, 11 Feb 2017 23:55:50 -0600 Subject: [PATCH 1/6] Change append and remove by classList functions instead. The usage of apend strings was causing a bug where the same class was added N times as the element was selected so in order to prevent this we can just make a switch to the functions provided by classList with the same behavior: - add - remove --- blocks.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks.js b/blocks.js index bb9cdabc45dfe..52c37939d4af8 100644 --- a/blocks.js +++ b/blocks.js @@ -90,7 +90,7 @@ function getBlocks() { function selectBlock( event ) { clearBlocks(); event.stopPropagation(); - event.target.className += ' is-selected'; + event.target.classList.add( 'is-selected' ); selectedBlock = event.target; showControls( selectedBlock ); @@ -98,7 +98,7 @@ function selectBlock( event ) { function clearBlocks() { getBlocks().forEach( function( block ) { - block.className = block.className.replace( 'is-selected', '' ); + block.classList.remove( 'is-selected' ); } ); selectedBlock = null; @@ -125,7 +125,7 @@ function showControls( node ) { var kindClasses = kinds.map( function( kind ) { return 'is-' + kind; } ).join( ' ' ); - blockControls.className = 'block-controls ' + kindClasses; + blockControls.classList.add( 'block-controls' ); blockControls.style.display = 'block'; // reposition block-specific block controls @@ -312,7 +312,7 @@ function showSwitcherMenu( event ) { function setImageState( classes, event ) { event.stopPropagation(); - selectedBlock.className = 'is-selected ' + classes; + selectedBlock.classList.add( 'is-selected' ); } function l( data ) { From 47840ab35336c9738e375b962a47643d1e9f9bea Mon Sep 17 00:00:00 2001 From: mitogh Date: Sun, 12 Feb 2017 00:02:29 -0600 Subject: [PATCH 2/6] Add controls for the block --- blocks.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/blocks.js b/blocks.js index 52c37939d4af8..7da6d5c43a6fb 100644 --- a/blocks.js +++ b/blocks.js @@ -122,9 +122,12 @@ function showControls( node ) { // show/hide block-specific block controls var kinds = getTypeKinds( blockType ); - var kindClasses = kinds.map( function( kind ) { + kinds.map( function( kind ) { return 'is-' + kind; - } ).join( ' ' ); + } ) + .forEach( function( className ) { + blockControls.classList.add( className ); + } ); blockControls.classList.add( 'block-controls' ); blockControls.style.display = 'block'; From 12fdeb0366f20388b2d62eb00a5bab5e31080205 Mon Sep 17 00:00:00 2001 From: mitogh Date: Sun, 12 Feb 2017 00:04:51 -0600 Subject: [PATCH 3/6] Add class from the parameter into the selected block This change uses a new line instead of the second argument to add a new class, because the multiple paremeters is not supported on IE 10. --- blocks.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks.js b/blocks.js index 7da6d5c43a6fb..8746576f64a40 100644 --- a/blocks.js +++ b/blocks.js @@ -316,6 +316,7 @@ function showSwitcherMenu( event ) { function setImageState( classes, event ) { event.stopPropagation(); selectedBlock.classList.add( 'is-selected' ); + selectedBlock.classList.add( classes ); } function l( data ) { From ec197f2b66391805b81d0f9a8124b5cadd092b20 Mon Sep 17 00:00:00 2001 From: mitogh Date: Sun, 12 Feb 2017 00:05:50 -0600 Subject: [PATCH 4/6] Rename parameter name since it only allows a single className as value --- blocks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks.js b/blocks.js index 8746576f64a40..4a6b59e818692 100644 --- a/blocks.js +++ b/blocks.js @@ -313,10 +313,10 @@ function showSwitcherMenu( event ) { switcherMenu.style.display = 'block'; } -function setImageState( classes, event ) { +function setImageState( className, event ) { event.stopPropagation(); selectedBlock.classList.add( 'is-selected' ); - selectedBlock.classList.add( classes ); + selectedBlock.classList.add( className ); } function l( data ) { From 043d62daef1856c92e173be66987662ceea805d7 Mon Sep 17 00:00:00 2001 From: mitogh Date: Mon, 13 Feb 2017 08:28:02 -0600 Subject: [PATCH 5/6] Use a single function to add the class names --- blocks.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/blocks.js b/blocks.js index 4a6b59e818692..dbbb162fe2dc9 100644 --- a/blocks.js +++ b/blocks.js @@ -121,12 +121,8 @@ function showControls( node ) { switcher.style.top = ( position.top + 18 + window.scrollY ) + 'px'; // show/hide block-specific block controls - var kinds = getTypeKinds( blockType ); - kinds.map( function( kind ) { - return 'is-' + kind; - } ) - .forEach( function( className ) { - blockControls.classList.add( className ); + getTypeKinds( blockType ).forEach( function( kind ) { + blockControls.classList.add( 'is-' + kind ); } ); blockControls.classList.add( 'block-controls' ); blockControls.style.display = 'block'; From d45dfee3c2c833ffa9a1a5094ca06586aed2e8f7 Mon Sep 17 00:00:00 2001 From: mitogh Date: Mon, 13 Feb 2017 08:42:25 -0600 Subject: [PATCH 6/6] Reset classes when required otherwise multiple behavors are attached Previously add was not reseting to the original state of each block. --- blocks.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/blocks.js b/blocks.js index dbbb162fe2dc9..9d2cf17399ae7 100644 --- a/blocks.js +++ b/blocks.js @@ -121,10 +121,10 @@ function showControls( node ) { switcher.style.top = ( position.top + 18 + window.scrollY ) + 'px'; // show/hide block-specific block controls + blockControls.className = 'block-controls'; getTypeKinds( blockType ).forEach( function( kind ) { - blockControls.classList.add( 'is-' + kind ); + blockControls.classList.add( 'is-' + kind ); } ); - blockControls.classList.add( 'block-controls' ); blockControls.style.display = 'block'; // reposition block-specific block controls @@ -311,8 +311,10 @@ function showSwitcherMenu( event ) { function setImageState( className, event ) { event.stopPropagation(); - selectedBlock.classList.add( 'is-selected' ); - selectedBlock.classList.add( className ); + selectedBlock.className = 'is-selected'; + if ( className ) { + selectedBlock.classList.add( className ); + } } function l( data ) {