<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[30318] trunk/src/wp-includes: TinyMCE: enhance the inline toolbar for images:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/30318">30318</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/30318","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>azaozz</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2014-11-13 00:55:22 +0000 (Thu, 13 Nov 2014)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>TinyMCE: enhance the inline toolbar for images:
- Add alignment (left, center, right, none) buttons.
- Position the menu above the image when possible, except on iOS.
- Fix selecting images on iOS.
First run, part props avryl. See <a href="https://core.trac.wordpress.org/ticket/30147">#30147</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpeditorphp">trunk/src/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunksrcwpincludescsseditorcss">trunk/src/wp-includes/css/editor.css</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpeditimagepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-editor.php 2014-11-12 23:38:02 UTC (rev 30317)
+++ trunk/src/wp-includes/class-wp-editor.php 2014-11-13 00:55:22 UTC (rev 30318)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -957,6 +957,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'Insert Read More tag' => __( 'Insert Read More tag' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
</span><span class="cx" style="display: block; padding: 0 10px"> 'Distraction Free Writing' => __( 'Distraction Free Writing' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'Remove Alignment' => __( 'Remove alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span></span></pre></div>
<a id="trunksrcwpincludescsseditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/editor.css 2014-11-12 23:38:02 UTC (rev 30317)
+++ trunk/src/wp-includes/css/editor.css 2014-11-13 00:55:22 UTC (rev 30318)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -154,6 +154,106 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+div.mce-inline-toolbar-grp {
+ border: 1px solid #aaa;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
+ box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-bottom: 8px;
+ position: absolute;
+ opacity: 0;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+div.mce-wp-image-toolbar > div.mce-stack-layout {
+ padding: 1px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-up {
+ margin-bottom: 0;
+ margin-top: 8px;
+}
+
+div.mce-inline-toolbar-grp.mce-inline-toolbar-grp-active {
+ -webkit-transition:
+ top 0.1s ease-out,
+ left 0.1s ease-out,
+ opacity 0.1s ease-in-out;
+ transition:
+ top 0.1s ease-out,
+ left 0.1s ease-out,
+ opacity 0.1s ease-in-out;
+ opacity: 1;
+}
+
+div.mce-inline-toolbar-grp:before,
+div.mce-inline-toolbar-grp:after {
+ position: absolute;
+ left: 50%;
+ display: block;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-color: transparent;
+ content: '';
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-up:before {
+ top: -18px;
+ border-bottom-color: #aaa;
+ border-width: 9px;
+ margin-left: -9px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-down:before {
+ bottom: -18px;
+ border-top-color: #aaa;
+ border-width: 9px;
+ margin-left: -9px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-up:after {
+ top: -16px;
+ border-bottom-color: #f5f5f5;
+ border-width: 8px;
+ margin-left: -8px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-down:after {
+ bottom: -16px;
+ border-top-color: #f5f5f5;
+ border-width: 8px;
+ margin-left: -8px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-left:before,
+div.mce-inline-toolbar-grp.mce-arrow-left:after {
+ left: 20px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-right:before,
+div.mce-inline-toolbar-grp.mce-arrow-right:after {
+ right: 11px;
+ left: auto;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-full {
+ right: 0;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-full > div {
+ width: 100%;
+ overflow-x: auto;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> div.mce-toolbar-grp > div {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 3px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -621,6 +721,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-ltr,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-wp_page,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-hr,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+i.mce-i-dashicon,
</ins><span class="cx" style="display: block; padding: 0 10px"> .mce-close {
</span><span class="cx" style="display: block; padding: 0 10px"> font: normal 20px/1 'dashicons';
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpeditimagepluginjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-11-12 23:38:02 UTC (rev 30317)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-11-13 00:55:22 UTC (rev 30318)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,8 +1,337 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* global tinymce */
</span><span class="cx" style="display: block; padding: 0 10px"> tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var toolbarActive = false,
- editingImage = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var DOM = tinymce.DOM,
+ settings = editor.settings,
+ Factory = tinymce.ui.Factory,
+ each = tinymce.each,
+ iOS = tinymce.Env.iOS,
+ toolbarIsHidden = true,
+ editorWrapParent = tinymce.$( '#postdivrich' ),
+ tb;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ editor.addButton( 'wp_img_remove', {
+ tooltip: 'Remove',
+ icon: 'dashicon dashicons-no',
+ onclick: function() {
+ removeImage( editor.selection.getNode() );
+ }
+ } );
+
+ editor.addButton( 'wp_img_edit', {
+ tooltip: 'Edit',
+ icon: 'dashicon dashicons-edit',
+ onclick: function() {
+ editImage( editor.selection.getNode() );
+ }
+ } );
+
+ each( {
+ alignleft: 'Align left',
+ aligncenter: 'Align center',
+ alignright: 'Align right',
+ alignnone: 'Remove alignment'
+ }, function( tooltip, name ) {
+ var direction = name.slice( 5 );
+
+ editor.addButton( 'wp_img_' + name, {
+ tooltip: tooltip,
+ icon: 'dashicon dashicons-align-' + direction,
+ cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),
+ onPostRender: function() {
+ var self = this;
+
+ editor.on( 'NodeChange', function( event ) {
+ var node;
+
+ // Don't bother.
+ if ( event.element.nodeName !== 'IMG' ) {
+ return;
+ }
+
+ node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element;
+
+ if ( 'alignnone' === name ) {
+ self.active( ! /\balign(left|center|right)\b/.test( node.className ) );
+ } else {
+ self.active( editor.dom.hasClass( node, name ) );
+ }
+ } );
+ }
+ } );
+ } );
+
+ function toolbarConfig() {
+ var toolbarItems = [],
+ buttonGroup;
+
+ each( [ 'wp_img_alignleft', 'wp_img_aligncenter', 'wp_img_alignright', 'wp_img_alignnone', 'wp_img_edit', 'wp_img_remove' ], function( item ) {
+ var itemName;
+
+ function bindSelectorChanged() {
+ var selection = editor.selection;
+
+ if ( item.settings.stateSelector ) {
+ selection.selectorChanged( item.settings.stateSelector, function( state ) {
+ item.active( state );
+ }, true );
+ }
+
+ if ( item.settings.disabledStateSelector ) {
+ selection.selectorChanged( item.settings.disabledStateSelector, function( state ) {
+ item.disabled( state );
+ } );
+ }
+ }
+
+ if ( item === '|' ) {
+ buttonGroup = null;
+ } else {
+ if ( Factory.has( item ) ) {
+ item = {
+ type: item
+ };
+
+ if ( settings.toolbar_items_size ) {
+ item.size = settings.toolbar_items_size;
+ }
+
+ toolbarItems.push( item );
+
+ buttonGroup = null;
+ } else {
+ if ( ! buttonGroup ) {
+ buttonGroup = {
+ type: 'buttongroup',
+ items: []
+ };
+
+ toolbarItems.push( buttonGroup );
+ }
+
+ if ( editor.buttons[ item ] ) {
+ itemName = item;
+ item = editor.buttons[ itemName ];
+
+ if ( typeof item === 'function' ) {
+ item = item();
+ }
+
+ item.type = item.type || 'button';
+
+ if ( settings.toolbar_items_size ) {
+ item.size = settings.toolbar_items_size;
+ }
+
+ item = Factory.create( item );
+ buttonGroup.items.push( item );
+
+ if ( editor.initialized ) {
+ bindSelectorChanged();
+ } else {
+ editor.on( 'init', bindSelectorChanged );
+ }
+ }
+ }
+ }
+ } );
+
+ return {
+ type: 'panel',
+ layout: 'stack',
+ classes: 'toolbar-grp inline-toolbar-grp wp-image-toolbar',
+ ariaRoot: true,
+ ariaRemember: true,
+ items: [
+ {
+ type: 'toolbar',
+ layout: 'flow',
+ items: toolbarItems
+ }
+ ]
+ };
+ }
+
+ tb = Factory.create( toolbarConfig() ).renderTo( document.body ).hide();
+
+ tb.reposition = function() {
+ var top, left, minTop, className,
+ toolbarNode = this.getEl(),
+ buffer = 5,
+ margin = 8,
+ windowPos = window.pageYOffset || document.documentElement.scrollTop,
+ adminbar = tinymce.$( '#wpadminbar' )[0],
+ mceToolbar = tinymce.$( '.mce-tinymce .mce-toolbar-grp' )[0],
+ adminbarHeight = 0,
+ boundary = editor.selection.getRng().getBoundingClientRect(),
+ boundaryMiddle = ( boundary.left + boundary.right ) / 2,
+ boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2,
+ spaceTop = boundary.top,
+ spaceBottom = iframeHeigth - boundary.bottom,
+ windowWidth = window.innerWidth,
+ toolbarWidth = toolbarNode.offsetWidth,
+ toolbarHalf = toolbarWidth / 2,
+ iframe = editor.getContentAreaContainer().firstChild,
+ iframePos = DOM.getPos( iframe ),
+ iframeWidth = iframe.offsetWidth,
+ iframeHeigth = iframe.offsetHeight,
+ toolbarNodeHeight = toolbarNode.offsetHeight,
+ verticalSpaceNeeded = toolbarNodeHeight + margin + buffer;
+
+ if ( iOS ) {
+ top = boundary.top + iframePos.y + margin;
+ } else {
+ if ( spaceTop >= verticalSpaceNeeded ) {
+ className = ' mce-arrow-down';
+ top = boundary.top + iframePos.y - toolbarNodeHeight - margin;
+ } else if ( spaceBottom >= verticalSpaceNeeded ) {
+ className = ' mce-arrow-up';
+ top = boundary.bottom + iframePos.y;
+ } else {
+ top = buffer;
+
+ if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) {
+ className = ' mce-arrow-down';
+ } else {
+ className = ' mce-arrow-up';
+ }
+ }
+ }
+
+ // Make sure the image toolbar is below the main toolbar.
+ if ( mceToolbar ) {
+ minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight;
+ } else {
+ minTop = iframePos.y;
+ }
+
+ // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window.
+ if ( windowPos ) {
+ if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) {
+ adminbarHeight = adminbar.clientHeight;
+ }
+
+ if ( windowPos + adminbarHeight > minTop ) {
+ minTop = windowPos + adminbarHeight;
+ }
+ }
+
+ if ( top && minTop && ( minTop + buffer > top ) ) {
+ top = minTop + buffer;
+ className = '';
+ }
+
+ left = boundaryMiddle - toolbarHalf;
+ left += iframePos.x;
+
+ if ( toolbarWidth >= windowWidth ) {
+ className += ' mce-arrow-full';
+ left = 0;
+ } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) ||
+ ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) {
+
+ left = ( windowWidth - toolbarWidth ) / 2;
+ } else if ( left < iframePos.x ) {
+ className += ' mce-arrow-left';
+ left = boundary.left + iframePos.x;
+ } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) {
+ className += ' mce-arrow-right';
+ left = boundary.right - toolbarWidth + iframePos.x;
+ }
+
+ if ( ! iOS ) {
+ toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' );
+ toolbarNode.className += className;
+ }
+
+ DOM.setStyles( toolbarNode, { 'left': left, 'top': top } );
+
+ return this;
+ };
+
+ if ( iOS ) {
+ // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
+ // Select them again.
+ editor.on( 'click', function( event ) {
+ if ( event.target.nodeName === 'IMG' ) {
+ var node = event.target;
+
+ window.setTimeout( function() {
+ editor.selection.select( node );
+ }, 200 );
+ } else {
+ tb.hide();
+ }
+ });
+ }
+
+ editor.on( 'nodechange', function( event ) {
+ var delay = iOS ? 350 : 100;
+
+ if ( event.element.nodeName !== 'IMG' ) {
+ tb.hide();
+ return;
+ }
+
+ setTimeout( function() {
+ var element = editor.selection.getNode();
+
+ if ( element.nodeName === 'IMG' ) {
+ if ( tb._visible ) {
+ tb.reposition();
+ } else {
+ tb.show();
+ }
+ } else {
+ tb.hide();
+ }
+ }, delay );
+ } );
+
+ tb.on( 'show', function() {
+ var self = this;
+
+ toolbarIsHidden = false;
+
+ setTimeout( function() {
+ if ( self._visible ) {
+ DOM.addClass( self.getEl(), 'mce-inline-toolbar-grp-active' );
+ self.reposition();
+ }
+ }, 100 );
+ } );
+
+ tb.on( 'hide', function() {
+ toolbarIsHidden = true;
+ DOM.removeClass( this.getEl(), 'mce-inline-toolbar-grp-active' );
+ } );
+
+ function hide() {
+ if ( ! toolbarIsHidden ) {
+ tb.hide();
+ }
+ }
+
+ DOM.bind( window, 'resize scroll', function() {
+ if ( ! toolbarIsHidden && editorWrapParent.hasClass( 'wp-editor-expand' ) ) {
+ hide();
+ }
+ });
+
+ editor.on( 'init', function() {
+ DOM.bind( editor.getWin(), 'resize scroll', hide );
+ } );
+
+ editor.on( 'blur hide', hide );
+
+ // 119 = F8
+ editor.shortcuts.add( 'Alt+119', '', function() {
+ var node = tb.find( 'toolbar' )[0];
+
+ if ( node ) {
+ node.focus( true );
+ }
+ } );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> function parseShortcode( content ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var id, align, classes, caption, img, width,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -372,8 +701,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> editor.nodeChanged();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Refresh the toolbar
- addToolbar( imageNode );
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> function editImage( img ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -414,7 +741,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> frame.on( 'close', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> editor.focus();
</span><span class="cx" style="display: block; padding: 0 10px"> frame.detach();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- editingImage = false;
</del><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> frame.open();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -444,129 +770,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> editor.dom.remove( node );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- removeToolbar();
</del><span class="cx" style="display: block; padding: 0 10px"> editor.nodeChanged();
</span><span class="cx" style="display: block; padding: 0 10px"> editor.undoManager.add();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function addToolbar( node ) {
- var rectangle, toolbarHtml, toolbar, left,
- dom = editor.dom;
-
- removeToolbar();
-
- // Don't add to placeholders
- if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) {
- return;
- }
-
- dom.setAttrib( node, 'data-wp-imgselect', 1 );
- rectangle = dom.getRect( node );
-
- toolbarHtml = '<i class="dashicons dashicons-edit edit" data-mce-bogus="all"></i>' +
- '<i class="dashicons dashicons-no-alt remove" data-mce-bogus="all"></i>';
-
- toolbar = dom.create( 'p', {
- 'id': 'wp-image-toolbar',
- 'data-mce-bogus': 'all',
- 'contenteditable': false
- }, toolbarHtml );
-
- if ( editor.rtl ) {
- left = rectangle.x + rectangle.w - 82;
- } else {
- left = rectangle.x;
- }
-
- editor.getBody().appendChild( toolbar );
- dom.setStyles( toolbar, {
- top: rectangle.y,
- left: left
- });
-
- toolbarActive = true;
- }
-
- function removeToolbar() {
- var toolbar = editor.dom.get( 'wp-image-toolbar' );
-
- if ( toolbar ) {
- editor.dom.remove( toolbar );
- }
-
- editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
-
- editingImage = false;
- toolbarActive = false;
- }
-
- function isPlaceholder( node ) {
- var dom = editor.dom;
-
- if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) ||
- dom.getAttrib( node, 'data-mce-object' ) ) {
-
- return true;
- }
-
- return false;
- }
-
- function isToolbarButton( node ) {
- return ( node && node.nodeName === 'I' && node.parentNode.id === 'wp-image-toolbar' );
- }
-
- function edit( event ) {
- var image,
- node = event.target,
- dom = editor.dom;
-
- // Don't trigger on right-click
- if ( event.button && event.button > 1 ) {
- return;
- }
-
- if ( isToolbarButton( node ) ) {
- image = dom.select( 'img[data-wp-imgselect]' )[0];
-
- if ( image ) {
- editor.selection.select( image );
-
- if ( dom.hasClass( node, 'remove' ) ) {
- removeImage( image );
- } else if ( dom.hasClass( node, 'edit' ) ) {
- if ( ! editingImage ) {
- editImage( image );
- editingImage = true;
- }
- }
- }
-
- event.preventDefault();
- } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
- addToolbar( node );
- } else if ( node.nodeName !== 'IMG' ) {
- removeToolbar();
- }
- }
-
- if ( 'ontouchend' in document ) {
- editor.on( 'click', function( event ) {
- var target = event.target;
-
- if ( editingImage && target.nodeName === 'IMG' ) {
- event.preventDefault();
- }
-
- if ( isToolbarButton( target ) ) {
- event.preventDefault();
- event.stopPropagation();
- }
- });
- }
-
- editor.on( 'mouseup touchend', edit );
-
</del><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'init', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var dom = editor.dom,
</span><span class="cx" style="display: block; padding: 0 10px"> captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -803,9 +1010,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
- removeToolbar();
</del><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Prevent IE11 from making dl.wp-caption resizable
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -821,14 +1025,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> event.target.focus();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- editor.on( 'click', function( event ) {
- if ( event.target.nodeName === 'IMG' && dom.getAttrib( event.target, 'data-wp-imgselect' ) &&
- dom.getParent( event.target, 'dl.wp-caption' ) ) {
-
- editor.getBody().focus();
- }
- });
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -855,14 +1051,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> dom.setStyle( parent, 'width', width + 'px' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // refresh toolbar
- addToolbar( node );
</del><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'BeforeExecCommand', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var node, p, DL, align,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var node, p, DL, align, replacement,
</ins><span class="cx" style="display: block; padding: 0 10px"> cmd = event.command,
</span><span class="cx" style="display: block; padding: 0 10px"> dom = editor.dom;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -875,39 +1069,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> editor.selection.setCursorLocation( p, 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> editor.nodeChanged();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> node = editor.selection.getNode();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- align = cmd.substr(7).toLowerCase();
- align = 'align' + align;
- DL = dom.getParent( node, 'dl.wp-caption' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ align = 'align' + cmd.slice( 7 ).toLowerCase();
+ DL = editor.dom.getParent( node, '.wp-caption' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- removeToolbar();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( node.nodeName !== 'IMG' && ! DL ) {
+ return;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( DL ) {
- // When inside an image caption, set the align* class on dl.wp-caption
- if ( dom.hasClass( DL, align ) ) {
- dom.removeClass( DL, align );
- dom.addClass( DL, 'alignnone' );
- } else {
- DL.className = DL.className.replace( /align[^ ]+/g, '' );
- dom.addClass( DL, align );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ node = DL || node;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( node.nodeName === 'IMG' ) {
- // Re-select the image to update resize handles, etc.
- editor.nodeChanged();
- }
-
- event.preventDefault();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( editor.dom.hasClass( node, align ) ) {
+ replacement = ' alignnone';
+ } else {
+ replacement = ' ' + align;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( node.nodeName === 'IMG' ) {
- if ( dom.hasClass( node, align ) ) {
- // The align class is being removed
- dom.addClass( node, 'alignnone' );
- } else {
- dom.removeClass( node, 'alignnone' );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ node.className = node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement;
+
+ editor.nodeChanged();
+ event.preventDefault();
+
+ if ( tb ) {
+ tb.reposition();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -960,36 +1145,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> removeImage( node );
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- removeToolbar();
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Most key presses will replace the image so we need to remove the toolbar
- if ( toolbarActive ) {
- if ( event.ctrlKey || event.metaKey || event.altKey || ( keyCode < 48 && keyCode !== VK.SPACEBAR ) ) {
- return;
- }
-
- removeToolbar();
- }
</del><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- editor.on( 'mousedown', function( event ) {
- if ( isToolbarButton( event.target ) ) {
- if ( tinymce.Env.ie ) {
- // Stop IE > 8 from making the wrapper resizable on mousedown
- event.preventDefault();
- }
- } else if ( event.target.nodeName !== 'IMG' ) {
- removeToolbar();
- }
- });
-
- // Remove from undo levels
- editor.on( 'BeforeAddUndo', function( event ) {
- event.level.content = event.level.content.replace( / data-wp-imgselect="1"/g, '' );
- });
-
</del><span class="cx" style="display: block; padding: 0 10px"> // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
</span><span class="cx" style="display: block; padding: 0 10px"> // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
</span><span class="cx" style="display: block; padding: 0 10px"> // Collapse the selection to remove the resize handles.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1001,10 +1159,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- editor.on( 'cut wpview-selected', function() {
- removeToolbar();
- });
-
</del><span class="cx" style="display: block; padding: 0 10px"> editor.wpSetImgCaption = function( content ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return parseShortcode( content );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1022,7 +1176,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'PostProcess', function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( event.get ) {
</span><span class="cx" style="display: block; padding: 0 10px"> event.content = editor.wpGetImgCaption( event.content );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre>
</div>
</div>
</body>
</html>