Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block icons, centered inline controls, type icons #11

Merged
merged 4 commits into from
Feb 8, 2017
Merged

Block icons, centered inline controls, type icons #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e1ac25
Add icons for the block level controls.
jasmussen Feb 8, 2017
b528c0a
Add node type icon.
jasmussen Feb 8, 2017
8647138
Center inline controls popup.
jasmussen Feb 8, 2017
284fa09
Fix classes clashes.
mtias Feb 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 28 additions & 6 deletions blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand All @@ -89,15 +109,17 @@ 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';
}
}

function attachControlActions() {
Array.from( controls.childNodes ).forEach( function( node ) {
Array.from( switcher.childNodes ).forEach( function( node ) {
if ( 'svg' !== node.nodeName ) {
return;
}
Expand Down
19 changes: 17 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,25 @@
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="block-controls">
<div class="block-switcher">
<svg width="18" height="18" class="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2 11l7-7 7 7-1.4 1.4L9 6.8l-5.6 5.6"/></svg>
<svg width="18" height="18" class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16 6.414l-7 7-7-7 1.4-1.4 5.6 5.6 5.6-5.6"/></svg>
<svg width="24" height="24" class="type" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg>
<span class="type">
<svg width="24" height="24" class="type-icon-paragraph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg>
<svg width="24" height="24" class="type-icon-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Heading</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M18 20h-3v-6H9v6H6V5.01h3V11h6V5.01h3V20z"/></g></svg>
<svg width="24" height="24" class="type-icon-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Image</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M13 9.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5zM22 6v12c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2zm-2 0H4v7.444L8 9l5.895 6.55 1.587-1.85c.798-.932 2.24-.932 3.037 0L20 15.426V6z"/></g></svg>
</span>
</div>
<div class="block-controls">
<button class="is-active">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Left</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm10-6H4v2h10v-2zM4 9v2h16V9H4zm10-4H4v2h10V5z"/></g></svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Center</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm13-6H7v2h10v-2zM4 9v2h16V9H4zm13-4H7v2h10V5z"/></g></svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Right</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M20 17H4v2h16v-2zm-10-2h10v-2H10v2zM4 9v2h16V9H4zm6-2h10V5H10v2z"/></g></svg>
</button>
</div>
<div class="inline-controls">
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Bold</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 5.01h4.547c2.126 0 3.67.302 4.632.906.96.605 1.44 1.567 1.44 2.887 0 .896-.21 1.63-.63 2.205-.42.574-.98.92-1.678 1.036v.103c.95.212 1.637.608 2.057 1.19.42.58.63 1.35.63 2.315 0 1.367-.494 2.434-1.482 3.2-.99.765-2.332 1.148-4.027 1.148H7V5.01zm3 5.936h2.027c.862 0 1.486-.133 1.872-.4.386-.267.578-.708.578-1.323 0-.574-.21-.986-.63-1.236-.42-.25-1.087-.374-1.996-.374H10v3.333zm0 2.523v3.905h2.253c.876 0 1.52-.167 1.94-.502.416-.335.625-.848.625-1.54 0-1.243-.89-1.864-2.668-1.864H10z"/></g></svg></button>
Expand Down
92 changes: 50 additions & 42 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -135,10 +103,10 @@ p {


/**
* Block controls
* Block Switcher
*/

.block-controls {
.block-switcher {
opacity: 0;
margin-left: -54px;
height: 36px;
Expand All @@ -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
Expand Down Expand Up @@ -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
*/
Expand Down