Changeset 30560

Timestamp:

11/25/2014 04:30:31 AM (11 years ago)

Author:

azaozz

Message:

TinyMCE: don't hide the image toolbar when the iframe window fires onresize. There is a bug in several browsers that triggers onresize when a tooltip is shown, only in RTL mode. Also use better variable name. Fixes #30147.

File:

• trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (modified) (9 diffs)

trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -1 +1 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
-    var tb, serializer,
+    var floatingToolbar, serializer,
         DOM = tinymce.DOM,
         settings = editor.settings,
@@ -156 +156 @@
     }
 
-    tb = Factory.create( toolbarConfig() ).renderTo( document.body ).hide();
-
-    tb.reposition = function() {
+    floatingToolbar = Factory.create( toolbarConfig() ).renderTo( document.body ).hide();
+
+    floatingToolbar.reposition = function() {
         var top, left, minTop, className,
+            windowPos, adminbar, mceToolbar, boundary,
+            boundaryMiddle, boundaryVerticalMiddle, spaceTop,
+            spaceBottom, windowWidth, toolbarWidth, toolbarHalf,
+            iframe, iframePos, iframeWidth, iframeHeigth,
+            toolbarNodeHeight, verticalSpaceNeeded,
             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.getNode().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;
+            imageNode = editor.selection.getNode();
+
+        if ( ! imageNode || imageNode.nodeName !== 'IMG' ) {
+            return this;
+        }
+
+        windowPos = window.pageYOffset || document.documentElement.scrollTop;
+        adminbar = tinymce.$( '#wpadminbar' )[0];
+        mceToolbar = tinymce.$( '.mce-tinymce .mce-toolbar-grp' )[0];
+        boundary = imageNode.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 ) {
@@ -264 +275 @@
                 }, 200 );
             } else {
-                tb.hide();
+                floatingToolbar.hide();
             }
         });
@@ -273 +284 @@
 
         if ( event.element.nodeName !== 'IMG' || isPlaceholder( event.element ) ) {
-            tb.hide();
+            floatingToolbar.hide();
             return;
         }
@@ -281 +292 @@
 
             if ( element.nodeName === 'IMG' && ! isPlaceholder( element ) ) {
-                if ( tb._visible ) {
-                    tb.reposition();
+                if ( floatingToolbar._visible ) {
+                    floatingToolbar.reposition();
                 } else {
-                    tb.show();
+                    floatingToolbar.show();
                 }
             } else {
-                tb.hide();
+                floatingToolbar.hide();
             }
         }, delay );
     } );
 
-    tb.on( 'show', function() {
+    floatingToolbar.on( 'show', function() {
         var self = this;
 
@@ -305 +316 @@
     } );
 
-    tb.on( 'hide', function() {
+    floatingToolbar.on( 'hide', function() {
         toolbarIsHidden = true;
         DOM.removeClass( this.getEl(), 'mce-inline-toolbar-grp-active' );
@@ -312 +323 @@
     function hide() {
         if ( ! toolbarIsHidden ) {
-            tb.hide();
+            floatingToolbar.hide();
         }
     }
@@ -323 +334 @@
 
     editor.on( 'init', function() {
-        DOM.bind( editor.getWin(), 'resize scroll', hide );
-    } );
-
+        editor.dom.bind( editor.getWin(), 'scroll', hide );
+    });
+    
     editor.on( 'blur hide', hide );
 
     // 119 = F8
     editor.shortcuts.add( 'Alt+119', '', function() {
-        var node = tb.find( 'toolbar' )[0];
+        var node = floatingToolbar.find( 'toolbar' )[0];
 
         if ( node ) {
             node.focus( true );
         }
-    } );
+    });
 
     function parseShortcode( content ) {
@@ -1111 +1122 @@
             event.preventDefault();
 
-            if ( tb ) {
-                tb.reposition();
+            if ( floatingToolbar ) {
+                floatingToolbar.reposition();
             }
         }