WordPress.org

Make WordPress Core

Changeset 29471


Ignore:
Timestamp:
08/12/14 04:26:13 (3 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.