Merge pull request #246 from WordPress/update/tinymce-single/mock-ups

Try drag and drop on block outline
WordPress · Mar 11, 2017 · 7c9069f · 7c9069f
2 parents 1608a01 + 72444c7
commit 7c9069f
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 2 deletions.
diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js
@@ -55,6 +55,10 @@
  var rootNode = editor.getBody();
  var blocks = [];
 
+ if ( ! startNode || ! editor.getBody().contains( startNode ) ) {
+ return [ rootNode.firstChild ];
+ }
+
  while ( startNode.parentNode !== rootNode ) {
  startNode = startNode.parentNode;
  }

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -240,6 +240,14 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
  pointer-events: none;
 }
 
+.mce-drag-container {
+ opacity: 1 !important;
+ outline: 2px solid #e0e5e9;
+ outline-offset: 8px;
+ background: #fff;
+ box-shadow: 0 0 0 8px #fff;
+}
+
 .block-outline:before {
  content: '';
  position: absolute;
@@ -250,6 +258,38 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
  border: 2px solid #e0e5e9;
 }
 
+.block-outline-handle {
+ position: absolute;
+ width: 10px;
+ top: 0;
+ bottom: 0;
+ cursor: move; /* fallback if grab cursor is unsupported */
+ cursor: grab;
+ cursor: -moz-grab;
+ cursor: -webkit-grab;
+ pointer-events: all;
+}
+
+.block-outline-handle-left {
+ left: -10px;
+}
+
+.block-outline-handle-right {
+ right: -10px;
+}
+
+#editor *[data-wp-block-dragging] {
+ background: #f0f2f4;
+ color: #f0f2f4;
+ border-color: #f0f2f4;
+ text-shadow: none;
+ box-shadow: 0 0 0 10px #f0f2f4;
+}
+
+#editor *[data-wp-block-dragging] > * {
+ opacity: 0;
+}
+
 .insert-toolbar svg {
  background: #fff;
  border-radius: 12px;

diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -149,6 +149,7 @@
 
  editor.on( 'preinit', function() {
  var DOM = tinymce.DOM;
+ var hidden = true;
 
  editor.addButton( 'block', {
  icon: 'gridicons-posts',
@@ -283,10 +284,60 @@
 
  function createBlockOutline() {
  var outline = document.createElement( 'div' );
+ var handleLeft = document.createElement( 'div' );
+ var handleRight = document.createElement( 'div' );
 
  outline.className = 'block-outline';
+ handleLeft.className = 'block-outline-handle block-outline-handle-right';
+ handleRight.className = 'block-outline-handle block-outline-handle-left';
+ outline.appendChild( handleLeft );
+ outline.appendChild( handleRight );
  document.body.appendChild( outline );
 
+ var target;
+
+ DOM.bind( outline, 'mousedown', function( event ) {
+ var newEvent = Object.assign( {}, event );
+
+ target = getSelectedBlock();
+
+ if ( target.getAttribute( 'contenteditable' ) !== 'false' ) {
+ target.setAttribute( 'contenteditable', 'false' );
+ }
+
+ newEvent.target = target;
+
+ editor.fire( 'mousedown', newEvent );
+ } );
+
+ editor.on( 'dragstart', function( event ) {
+ if ( ! target ) {
+ event.preventDefault();
+ return;
+ }
+
+ hidden = true;
+
+ hideBlockUI();
+
+ target.setAttribute( 'data-wp-block-dragging', 'true' );
+
+ function end( event ) {
+ DOM.unbind( editor.getDoc(), 'mouseup', end );
+
+ target = null;
+
+ setTimeout( function() {
+ editor.$( '*[data-wp-block-dragging]' )
+ .attr( 'data-wp-block-dragging', null )
+ .attr( 'contenteditable', null );
+ editor.nodeChanged();
+ } );
+ }
+
+ DOM.bind( editor.getDoc(), 'mouseup', end );
+ } );
+
  return outline;
  }
 
@@ -653,8 +704,6 @@
  } );
  }
 
- var hidden = true;
-
  editor.on( 'keydown', function( event ) {
  if ( tinymce.util.VK.metaKeyPressed( event ) ) {
  return;