diff --git a/blocks.js b/blocks.js index de1842d202ef0..a69744ea2a1cc 100644 --- a/blocks.js +++ b/blocks.js @@ -10,7 +10,8 @@ var getPreviousSibling = siblingGetter( 'previous' ); * Globals */ var editor = document.getElementsByClassName( 'editor' )[0]; -var controls = document.getElementsByClassName( 'block-controls' )[0]; +var switcher = document.getElementsByClassName( 'block-switcher' )[0]; +var blockControls = document.getElementsByClassName( 'block-controls' )[0]; var inlineControls = document.getElementsByClassName( 'inline-controls' )[0]; var selectedBlock = null; @@ -62,13 +63,32 @@ function clearBlocks() { } function showControls( node ) { + // show element type + document.getElementsByClassName( 'type-icon-image' )[0].style.display = 'none'; + document.getElementsByClassName( 'type-icon-heading' )[0].style.display = 'none'; + document.getElementsByClassName( 'type-icon-paragraph' )[0].style.display = 'none'; + if ( node.nodeName == 'IMG' ) { + document.getElementsByClassName( 'type-icon-image' )[0].style.display = 'block'; + } else if ( node.nodeName == 'H1' || node.nodeName == 'H2' || node.nodeName == 'H3' || node.nodeName == 'H4' || node.nodeName == 'H5' || node.nodeName == 'H6' ) { + document.getElementsByClassName( 'type-icon-heading' )[0].style.display = 'block'; + } else { + document.getElementsByClassName( 'type-icon-paragraph' )[0].style.display = 'block'; + } + + // show controls var position = node.getBoundingClientRect(); - controls.style.opacity = 1; - controls.style.top = ( position.top + 18 ) + 'px'; + switcher.style.opacity = 1; + switcher.style.top = ( position.top + 18 ) + 'px'; + + blockControls.style.display = 'block'; + blockControls.style.top = ( position.top - 36 ) + 'px'; + blockControls.style.maxHeight = 'none'; } function hideControls() { - controls.style.opacity = 0; + switcher.style.opacity = 0; + blockControls.style.display = 'none'; + blockControls.style.maxHeight = 0; } // Show popup on text selection @@ -89,7 +109,9 @@ function onSelectText( event ) { inlineControls.style.display = 'block'; var range = txt.getRangeAt(0); var pos = range.getBoundingClientRect(); - inlineControls.style.left = pos.left + 'px'; + var selectCenter = pos.width / 2; + var controlsCenter = inlineControls.offsetWidth / 2; + inlineControls.style.left = ( pos.left + selectCenter - controlsCenter ) + 'px'; inlineControls.style.top = ( pos.top - 48 ) + 'px'; } else { inlineControls.style.display = 'none'; @@ -97,7 +119,7 @@ function onSelectText( event ) { } function attachControlActions() { - Array.from( controls.childNodes ).forEach( function( node ) { + Array.from( switcher.childNodes ).forEach( function( node ) { if ( 'svg' !== node.nodeName ) { return; } diff --git a/index.html b/index.html index 4c1ce1de7d703..cca4525ab43ca 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,25 @@ -
+
- + + + Heading + Image + +
+
+ + +
diff --git a/style.css b/style.css index c2c8971f6dcb1..1c6daef1e0b7b 100644 --- a/style.css +++ b/style.css @@ -94,39 +94,7 @@ h5.is-selected, h6.is-selected, p.is-selected, img.is-selected { - box-shadow: inset 0px 0px 0px 2px #191e23; -} - -h1:before, -h2:before, -h3:before, -h4:before, -h5:before, -h6:before, -p:before, -img:before { - content: ""; - position: absolute; - display: block; - top: 0; - left: 0; - height: 0; - width: 108px; - background: #191e23; - transition: all .075s ease; - transform: translateZ(0); -} - -h1.is-selected:before, -h2.is-selected:before, -h3.is-selected:before, -h4.is-selected:before, -h5.is-selected:before, -h6.is-selected:before, -p.is-selected:before, -img.is-selected:before { - height: 36px; - top: -36px; + box-shadow: inset 0px 0px 0px 2px #6d7882; } p { @@ -135,10 +103,10 @@ p { /** - * Block controls + * Block Switcher */ -.block-controls { +.block-switcher { opacity: 0; margin-left: -54px; height: 36px; @@ -148,37 +116,45 @@ p { transform: translateZ(0); } -.block-controls svg { +.block-switcher svg { fill: #86909c; position: absolute; cursor: pointer; } -.block-controls svg:hover { +.block-switcher svg:hover { fill: #191e23; } -.block-controls svg.up, -.block-controls svg.down { +.block-switcher svg.up, +.block-switcher svg.down { padding: 3px; width: 24px; height: 24px; left: -3px; } -.block-controls svg.up { +.block-switcher svg.up { top: -6px; } -.block-controls svg.down { +.block-switcher svg.down { bottom: -6px; } -.block-controls svg.type { +.block-switcher .type { + width: 24px; + height: 24px; + display: block; + position: absolute; right: 6px; top: 6px; } +.block-switcher .type svg { /* node type js picks icon here */ + display: none; +} + /** * Inline controls @@ -251,6 +227,38 @@ p { } +/** + * Block Controls + */ + + .block-controls { + background: #191e23; + display: inline-block; + max-height: 36px; + overflow: hidden; + position: absolute; + z-index: 10; + display: none; + transform: translateZ( 0 ); + } + + .block-controls button { + background: #191e23; + color: #fff; + border: none; + width: 36px; + height: 36px; + padding: 6px; + cursor: pointer; + display: block; + float: left; + } + +.block-controls button.is-active { + background: #6d7882; +} + + /** * Inserter */