WordPress.org

Make WordPress Core

Changeset 29471


Ignore:
Timestamp:
08/12/2014 04:26:13 AM (4 years ago)
Author:
azaozz
Message:

TinyMCE: fix the 'editimage' plugin for touch devices. Better attempt to hide the onscreen keyboard when the media modal opens and TinyMCE is in focus. See #28595, #29166

Location:
trunk/src/wp-includes/js
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r29272 r29471  
    484484                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
    485485                wp.mce.views.refreshView( self, shortcode );
     486            });
     487
     488            frame.on( 'close', function() {
    486489                frame.detach();
    487490            });
  • trunk/src/wp-includes/js/media-editor.js

    r29446 r29471  
    10491049         */
    10501050        open: function( id, options ) {
    1051             var workflow, focusTrap, scrollTop;
    1052 
    1053             if ( 'ontouchend' in document ) {
    1054                 // Close the onscreen keyboard
    1055                 if ( ! focusTrap ) {
    1056                     focusTrap = $( '<input type="text" style="width: 1px; height: 1px;" />' );
    1057                 }
    1058 
    1059                 // Keep the scroll position
    1060                 scrollTop = $( window ).scrollTop();
    1061 
    1062                 $( document.body ).append( focusTrap );
    1063                 focusTrap.focus().blur().remove();
    1064                 $( window ).scrollTop( scrollTop );
    1065             }
     1051            var workflow;
    10661052
    10671053            options = options || {};
  • trunk/src/wp-includes/js/media-views.js

    r29452 r29471  
    32233223        open: function() {
    32243224            var $el = this.$el,
    3225                 options = this.options;
     3225                options = this.options,
     3226                mceEditor;
    32263227
    32273228            if ( $el.is(':visible') ) {
     
    32443245
    32453246            $el.show().find( '.media-modal-close' ).focus();
     3247
     3248            // Try to close the onscreen keyboard
     3249            if ( 'ontouchend' in document ) {
     3250                if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
     3251                    mceEditor.iframeElement.focus();
     3252                    mceEditor.iframeElement.blur();
     3253
     3254                    setTimeout( function() {
     3255                        mceEditor.iframeElement.blur();
     3256                    }, 100 );
     3257                }
     3258            }
     3259
    32463260            return this.propagate('open');
    32473261        },
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r29463 r29471  
    11/* global tinymce */
    22tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
    3     var toolbarActive = false;
     3    var toolbarActive = false,
     4        editingImage = false;
    45
    56    function parseShortcode( content ) {
     
    412413            editor.focus();
    413414            frame.detach();
     415            editingImage = false;
    414416        });
    415417
     
    493495        editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
    494496
     497        editingImage = false;
    495498        toolbarActive = false;
    496499    }
     
    506509
    507510        return false;
     511    }
     512
     513    function isToolbarButton( node ) {
     514        return ( node && node.nodeName === 'I' && node.parentNode.id === 'wp-image-toolbar' );
     515    }
     516
     517    function edit( event ) {
     518        var image,
     519            node = event.target,
     520            dom = editor.dom;
     521
     522        // Don't trigger on right-click
     523        if ( event.button && event.button > 1 ) {
     524            return;
     525        }
     526
     527        if ( isToolbarButton( node ) ) {
     528            image = dom.select( 'img[data-wp-imgselect]' )[0];
     529
     530            if ( image ) {
     531                editor.selection.select( image );
     532
     533                if ( dom.hasClass( node, 'remove' ) ) {
     534                    removeImage( image );
     535                } else if ( dom.hasClass( node, 'edit' ) ) {
     536                    if ( ! editingImage ) {
     537                        editImage( image );
     538                        editingImage = true;
     539                    }
     540                }
     541            }
     542
     543            event.preventDefault();
     544        } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
     545            addToolbar( node );
     546        } else if ( node.nodeName !== 'IMG' ) {
     547            removeToolbar();
     548        }
     549    }
     550
     551    if ( 'ontouchend' in document ) {
     552        editor.on( 'touchend', edit );
     553
     554        editor.on( 'click', function( event ) {
     555            var target = event.target;
     556
     557            if ( editingImage && target.nodeName === 'IMG' ) {
     558                event.preventDefault();
     559            }
     560
     561            if ( isToolbarButton( target ) ) {
     562                event.preventDefault();
     563                event.stopPropagation();
     564            }
     565        });
     566    } else {
     567        editor.on( 'mouseup', edit );
    508568    }
    509569
     
    920980
    921981    editor.on( 'mousedown', function( event ) {
    922         if ( editor.dom.getParent( event.target, '#wp-image-toolbar' ) ) {
     982        if ( isToolbarButton( event.target ) ) {
    923983            if ( tinymce.Env.ie ) {
    924984                // Stop IE > 8 from making the wrapper resizable on mousedown
     
    926986            }
    927987        } else if ( event.target.nodeName !== 'IMG' ) {
    928             removeToolbar();
    929         }
    930     });
    931 
    932     editor.on( 'mouseup touchend', function( event ) {
    933         var image,
    934             node = event.target,
    935             dom = editor.dom;
    936 
    937         // Don't trigger on right-click
    938         if ( event.button && event.button > 1 ) {
    939             return;
    940         }
    941 
    942         if ( node.nodeName === 'I' && dom.getParent( node, '#wp-image-toolbar' ) ) {
    943             image = dom.select( 'img[data-wp-imgselect]' )[0];
    944 
    945             if ( image ) {
    946                 editor.selection.select( image );
    947 
    948                 if ( dom.hasClass( node, 'remove' ) ) {
    949                     removeImage( image );
    950                 } else if ( dom.hasClass( node, 'edit' ) ) {
    951                     editImage( image );
    952                 }
    953             }
    954         } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
    955             addToolbar( node );
    956         } else if ( node.nodeName !== 'IMG' ) {
    957988            removeToolbar();
    958989        }
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r29340 r29471  
    210210/* delegate the handling of the selection to the wpview tinymce plugin */
    211211.wpview-wrap,
    212 .wpview-wrap * {
     212.wpview-wrap *,
     213#wp-image-toolbar,
     214#wp-image-toolbar * {
    213215    -moz-user-select: none;
    214216    -webkit-user-select: none;
Note: See TracChangeset for help on using the changeset viewer.