Skip to content

Commit

Permalink
Merge pull request #140 from WordPress/tinymce-single/mimic-ui-prototype
Browse files Browse the repository at this point in the history 
Show block UI on focus, hide on type.
  • Loading branch information
@ellatrix
ellatrix authored Feb 27, 2017
2 parents 88ce109 + 975dc97 commit 731a8b8
Show file tree
Hide file tree
Showing 11 changed files with 413 additions and 620 deletions.
4 changes: 2 additions & 2 deletions shared/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ body {

#editor figure {
float: none;
margin: 0;
margin: 1em 0;
width: 100%;
transition: margin 0.5s, width 0.5s;
/*transition: margin 0.5s, width 0.5s;*/
}

#editor figure.aligncenter {
Expand Down
4 changes: 2 additions & 2 deletions shared/tinymce/logger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ window.tinymce.PluginManager.add( 'logger', function( editor ) {
beforeExecCommand: 'fires before commands are executed.',
execCommand: 'fires after commands are executed.',
change: 'fires when a new undo level is added.',
dirty: 'fires when the editor is considered to be in a dirty (unsaved) state. '
dirty: 'fires when the editor is considered to be in a dirty (unsaved) state.'
};

window.tinymce.each( types, function( info, type ) {
editor.on( type, function( event ) {
console.log( type, info, event );
window.console.log( type, info, event );
} );
} );
} );
146 changes: 7 additions & 139 deletions shared/tinymce/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,83 +190,7 @@

toolbar.bottom = bottom;

function reposition() {
if ( ! currentSelection ) {
return this;
}

var scrollX = window.pageXOffset || document.documentElement.scrollLeft,
scrollY = window.pageYOffset || document.documentElement.scrollTop,
windowWidth = window.innerWidth,
windowHeight = window.innerHeight,
toolbar = this.getEl(),
toolbarWidth = toolbar.offsetWidth,
toolbarHeight = toolbar.clientHeight + 10,
selection = currentSelection.getBoundingClientRect(),
selectionMiddle = ( selection.left + selection.right ) / 2,
buffer = 5,
spaceNeeded = toolbarHeight + buffer,
spaceTop = selection.top,
spaceBottom = windowHeight - selection.bottom,
editorHeight = windowHeight,
className = '',
top, left;

if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
this.scrolling = true;
this.hide();
this.scrolling = false;
return this;
}

if ( this.bottom ) {
if ( spaceBottom >= spaceNeeded ) {
className = ' mce-arrow-up';
top = selection.bottom + scrollY;
} else if ( spaceTop >= spaceNeeded ) {
className = ' mce-arrow-down';
top = selection.top + scrollY - toolbarHeight;
}
} else {
if ( spaceTop >= spaceNeeded ) {
className = ' mce-arrow-down';
top = selection.top + scrollY - toolbarHeight;
} else if ( spaceBottom >= spaceNeeded && editorHeight / 2 > selection.bottom ) {
className = ' mce-arrow-up';
top = selection.bottom + scrollY;
}
}

if ( typeof top === 'undefined' ) {
top = scrollY + buffer;
}

left = selectionMiddle - toolbarWidth / 2 + scrollX;

if ( selection.left < 0 || selection.right > windowWidth ) {
left = scrollX + ( windowWidth - toolbarWidth ) / 2;
} else if ( toolbarWidth >= windowWidth ) {
className += ' mce-arrow-full';
left = 0;
} else if ( ( left < 0 && selection.left + toolbarWidth > windowWidth ) || ( left + toolbarWidth > windowWidth && selection.right - toolbarWidth < 0 ) ) {
left = ( windowWidth - toolbarWidth ) / 2;
} else if ( left < scrollX ) {
className += ' mce-arrow-left';
left = selection.left + scrollX;
} else if ( left + toolbarWidth > windowWidth + scrollX ) {
className += ' mce-arrow-right';
left = selection.right - toolbarWidth + scrollX;
}

toolbar.className = toolbar.className.replace( / ?mce-arrow-[\w]+/g, '' ) + className;

DOM.setStyles( toolbar, {
'left': left,
'top': top
} );

return this;
}
function reposition() {}

toolbar.on( 'show', function() {
this.reposition();
Expand All @@ -289,67 +213,11 @@
return toolbar;
}

editor.shortcuts.add( 'alt+119', '', function() {
var node;

if ( activeToolbar ) {
node = activeToolbar.find( 'toolbar' )[0];
node && node.focus( true );
}
} );

editor.on( 'nodechange', function( event ) {
// This can move the carect unexpectedly!
// event.element.normalize();

var range = editor.selection.getRng()

var empty = (
editor.dom.isEmpty( event.element ) &&
( event.element.nodeName === 'P' || (
event.element.nodeName === 'BR' &&
event.element.parentNode.nodeName === 'P'
) )
);

var args = {
element: event.element,
empty: empty,
parents: event.parents,
range: range,
};

editor.fire( 'wptoolbar', args );

currentSelection = args.selection || args.element;

if ( activeToolbar && activeToolbar !== args.toolbar ) {
activeToolbar.hide();
}

if ( args.toolbar ) {
if ( activeToolbar !== args.toolbar ) {
activeToolbar = args.toolbar;
activeToolbar.show();
} else {
activeToolbar.reposition();
}
} else {
activeToolbar = false;
}
} );

editor.on( 'focus', function() {
if ( activeToolbar ) {
activeToolbar.show();
}
} );

function hide( event ) {
if ( activeToolbar ) {
if ( activeToolbar.tempHide || event.type === 'hide' ) {
activeToolbar.hide();
activeToolbar = false;
// if ( activeToolbar ) {
// if ( activeToolbar.tempHide || event.type === 'hide' ) {
// activeToolbar.hide();
// activeToolbar = false;
// } else if ( (
// event.type === 'resizewindow' ||
// event.type === 'scrollwindow' ||
Expand All @@ -367,8 +235,8 @@

// activeToolbar.scrolling = true;
// activeToolbar.hide();
}
}
// }
// }
}

// For full height editor.
Expand Down
25 changes: 25 additions & 0 deletions tinymce-single/blocks/core/gallery/register.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
window.wp.blocks.register( {
name: 'gallery',
namespace: 'core',
type: 'image',
keywords: [],
icon: 'gridicons-image',
buttons: [
'block-align-left',
'block-align-center',
'block-align-right',
// {
// type: 'select',
// label: 'Columns'
// },
// {
// type: 'button',
// label: 'Columns',
// icon: 'gridicons-image',
// command: function( editor, node ) {
// // body...
// }
// },
'block-options'
]
} );
39 changes: 39 additions & 0 deletions tinymce-single/blocks/core/gallery/structure.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
#editor figure[data-wp-block-type="core:gallery"] {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: auto;
}

#editor figure[data-wp-block-type="core:gallery"].aligncenter {
margin-left: auto;
margin-right: auto;
}

#editor figure[data-wp-block-type="core:gallery"].alignleft {
float: left;
margin: 0.5em 1em 0.5em 0;
width: 50%;
}

#editor figure[data-wp-block-type="core:gallery"].alignright {
float: right;
margin: 0.5em 0 0.5em 1em;
width: 50%;
}

#editor figure[data-wp-block-type="core:gallery"] figure {
margin: 0;
}

#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="2"] figure {
width: 43%;
}

#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="3"] figure {
width: 32%;
}

#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="4"] figure {
width: 24%;
}
41 changes: 38 additions & 3 deletions tinymce-single/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,67 @@
<html>
<head>
<meta charset="utf-8">

<title>Editor Blocks Demo (Single TinyMCE Instance)</title>

<link rel="stylesheet" type="text/css" href="https://s1.wp.com/i/fonts/merriweather/merriweather.css?v=20160210">

<link rel="stylesheet" type="text/css" href="../shared/index.css">

<link rel="stylesheet" type="text/css" href="blocks/core/gallery/structure.css">
</head>
<body>
<div id="editor">

<h1>1.0 Is The Loneliest Number</h1>

<p>Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>

<figure>
<figure data-wp-block-type="core:image">
<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">
</figure>

<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>

<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3">
<figure>
<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/1_main_pia21423-png.png" alt="A star shines on a planet's surface.">
<figcaption>TRAPPIST-1f</figcaption>
</figure>
<figure>
<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/exovolcano1920x1080.00033-1041.jpg" alt="">
</figure>
<figure>
<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/proximasurface.jpg" alt="">
</figure>
</figure>

<!-- <figure data-wp-block-type="lost-in-space-plugin:nasa-poster">
</figure>
<figure data-wp-block-type="my-awesome-plugin:youtube">
<iframe src=""></iframe>
</figure>
<figure>
<video></video>
</figure> -->

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>

<script src="../shared/navigation.js"></script>
<script src="../shared/tinymce/clean-paste.js"></script>
<script src="../shared/tinymce/toolbar.js"></script>
<script src="../shared/tinymce/wplink.js"></script>
<script src="../shared/tinymce/wptextpattern.js"></script>

<link rel="stylesheet" type="text/css" href="tinymce/block.css">
<script src="tinymce/block.js"></script>
<script src="tinymce/formatting.js"></script>
<script src="tinymce/new.js"></script>
<script src="tinymce/config.js"></script>

<script src="blocks/core/gallery/register.js"></script>
</body>
</html>
42 changes: 0 additions & 42 deletions tinymce-single/tinymce/block.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,10 +187,6 @@ div.mce-inline-toolbar-grp {
max-width: 98%;
}

div.mce-inline-toolbar-grp:not(.block-toolbar) {
transition: all 0.5s;
}

div.wp-link-preview {
float: left;
max-width: 694px;
Expand Down Expand Up @@ -246,44 +242,6 @@ div.mce-inline-toolbar-grp.block-toolbar {
left: -30px;
}

/*.mce-btn.mce-move-up,
.mce-btn.mce-move-down {
float: left;
border: none;
}
.mce-btn.mce-move-up {
margin-bottom: 0;
}
.mce-btn.mce-move-down {
margin-top: 0;
position: absolute;
bottom: 2px;
left: 2px;
}
.mce-btn.mce-move-up:focus,
.mce-btn.mce-move-down:focus,
.mce-btn.mce-move-up:hover,
.mce-btn.mce-move-down:hover {
background: none;
box-shadow: none;
}
.mce-btn.mce-move-up button,
.mce-btn.mce-move-down button {
height: 12px;
padding: 1px;
}
.mce-move-up svg.gridicon,
.mce-move-down svg.gridicon {
position: relative;
top: -6px;
width: 20px;
}*/

.block-toolbar {
margin-top: -6px;
}
Expand Down
Loading

0 comments on commit 731a8b8

Please sign in to comment.