WordPress.org

Make WordPress Core

Changeset 35607


Ignore:
Timestamp:
11/11/2015 03:26:59 AM (6 years ago)
Author:
azaozz
Message:

TinyMCE:

  • Fix the inline toolbar on images in iOS, move it out of the way so the default inline toolbar is not over it.
  • Fix selecting images on touch in the editor (iOS Safari fails to select them most of the time).

Fixes #34557.

Location:
trunk/src/wp-includes/js/tinymce/plugins
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

    r35597 r35607  
    740740                    editorHeight = windowHeight - blockedTop - blockedBottom,
    741741                    className = '',
     742                    iosOffsetTop = 0,
     743                    iosOffsetBottom = 0,
    742744                    top, left;
    743745
    744746                if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
    745747                    return this.hide();
     748                }
     749
     750                // Add offset in iOS to move the menu over the image, out of the way of the default iOS menu.
     751                if ( tinymce.Env.iOS && currentSelection.nodeName === 'IMG' ) {
     752                    iosOffsetTop = 54;
     753                    iosOffsetBottom = 46;
    746754                }
    747755
     
    749757                    if ( spaceBottom >= spaceNeeded ) {
    750758                        className = ' mce-arrow-up';
    751                         top = selection.bottom + iframeRect.top + scrollY;
     759                        top = selection.bottom + iframeRect.top + scrollY - iosOffsetBottom;
    752760                    } else if ( spaceTop >= spaceNeeded ) {
    753761                        className = ' mce-arrow-down';
    754                         top = selection.top + iframeRect.top + scrollY - toolbarHeight - margin;
     762                        top = selection.top + iframeRect.top + scrollY - toolbarHeight - margin + iosOffsetTop;
    755763                    }
    756764                } else {
    757765                    if ( spaceTop >= spaceNeeded ) {
    758766                        className = ' mce-arrow-down';
    759                         top = selection.top + iframeRect.top + scrollY - toolbarHeight - margin;
     767                        top = selection.top + iframeRect.top + scrollY - toolbarHeight - margin + iosOffsetTop;
    760768                    } else if ( spaceBottom >= spaceNeeded && editorHeight / 2 > selection.bottom + iframeRect.top - blockedTop ) {
    761769                        className = ' mce-arrow-up';
    762                         top = selection.bottom + iframeRect.top + scrollY;
     770                        top = selection.bottom + iframeRect.top + scrollY - iosOffsetBottom;
    763771                    }
    764772                }
    765773
    766774                if ( typeof top === 'undefined' ) {
    767                     top = scrollY + blockedTop + buffer;
     775                    top = scrollY + blockedTop + buffer + iosOffsetBottom;
    768776                }
    769777
     
    785793                }
    786794
     795                // No up/down arrows on the menu over images in iOS.
     796                if ( tinymce.Env.iOS && currentSelection.nodeName === 'IMG' ) {
     797                    className = className.replace( / ?mce-arrow-(up|down)/g, '' );
     798                }
     799
    787800                toolbar.className = toolbar.className.replace( / ?mce-arrow-[\w]+/g, '' ) + className;
    788801
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r35261 r35607  
    11/* global tinymce */
    22tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
    3     var toolbar, serializer,
     3    var toolbar, serializer, touchOnImage,
    44        each = tinymce.each,
    55        trim = tinymce.trim,
     
    8080    } );
    8181
    82     // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
     82    // Safari on iOS fails to select images in contentEditoble mode on touch.
    8383    // Select them again.
    8484    if ( iOS ) {
    85         editor.on( 'click', function( event ) {
    86             if ( event.target.nodeName === 'IMG' ) {
    87                 var node = event.target;
    88 
    89                 window.setTimeout( function() {
    90                     editor.selection.select( node );
    91                     editor.nodeChanged();
    92                 }, 200 );
    93             } else if ( toolbar ) {
    94                 toolbar.hide();
    95             }
    96         } );
     85        editor.on( 'init', function() {
     86            editor.on( 'touchstart', function( event ) {
     87                if ( event.target.nodeName === 'IMG' ) {
     88                    touchOnImage = true;
     89                }
     90            });
     91
     92            editor.dom.bind( editor.getDoc(), 'touchmove', function( event ) {
     93                if ( event.target.nodeName === 'IMG' ) {
     94                    touchOnImage = false;
     95                }
     96            });
     97
     98            editor.on( 'touchend', function( event ) {
     99                if ( touchOnImage && event.target.nodeName === 'IMG' ) {
     100                    var node = event.target;
     101
     102                    touchOnImage = false;
     103
     104                    window.setTimeout( function() {
     105                        editor.selection.select( node );
     106                        editor.nodeChanged();
     107                    }, 200 );
     108                } else if ( toolbar ) {
     109                    toolbar.hide();
     110                }
     111            });
     112        });
    97113    }
    98114
Note: See TracChangeset for help on using the changeset viewer.