WordPress.org

Make WordPress Core

Changeset 22602


Ignore:
Timestamp:
11/15/2012 11:49:19 PM (8 years ago)
Author:
azaozz
Message:

TinyMCE: fix and improve the popup buttons for editing images and galleries show/hide for touch devices, fix inconsistency in iOS when "touching" an image inside a link, see #21390

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

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js

    r22586 r22602  
    4646                    }
    4747                });
     48
     49                // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
     50                if ( 'ontouchstart' in window ) {
     51                    ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
     52                        t._showButtons(e);
     53                    });
     54                }
    4855            });
    4956
     
    7683
    7784            // show editimage buttons
    78             ed.onMouseDown.add(function(ed, e) {
    79                 var target = e.target;
    80 
    81                 if ( target.nodeName != 'IMG' ) {
    82                     if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 )
    83                         target = target.firstChild;
    84                     else
    85                         return;
    86                 }
    87 
    88                 if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
    89                     mouse = {
    90                         x: e.clientX,
    91                         y: e.clientY,
    92                         img_w: target.clientWidth,
    93                         img_h: target.clientHeight
    94                     };
    95 
    96                     ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
    97                 }
     85            ed.onMouseDown.add(function(ed, e){
     86                t._showButtons(e);
    9887            });
    9988
     
    200189
    201190        _createButtons : function() {
    202             var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
     191            var t = this, ed = t.editor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
    203192
    204193            isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
     
    222211            tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
    223212                t._editImage();
     213                ed.plugins.wordpress._hideButtons();
    224214            });
    225215
     
    233223
    234224            tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
    235                 var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p;
     225                var el = ed.selection.getNode(), p;
    236226
    237227                if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
     
    246236                    return false;
    247237                }
     238                ed.plugins.wordpress._hideButtons();
    248239            });
    249240        },
     
    265256                inline: true
    266257            });
     258        },
     259
     260        _showButtons : function(e) {
     261            var ed = this.editor, target = e.target;
     262
     263            if ( target.nodeName != 'IMG' ) {
     264                if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) {
     265                    target = target.firstChild;
     266                } else {
     267                    ed.plugins.wordpress._hideButtons();
     268                    return;
     269                }
     270            }
     271
     272            if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
     273                mouse = {
     274                    x: e.clientX,
     275                    y: e.clientY,
     276                    img_w: target.clientWidth,
     277                    img_h: target.clientHeight
     278                };
     279
     280                if ( e.type == 'touchstart' ) {
     281                    ed.selection.select(target);
     282                    ed.dom.events.cancel(e);
     283                }
     284
     285                ed.plugins.wordpress._hideButtons();
     286                ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
     287            }
    267288        },
    268289
  • trunk/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js

    r22586 r22602  
    77
    88            t.url = url;
     9            t.editor = ed;
    910            t._createButtons();
    1011
     
    3132            });
    3233
     34            ed.onInit.add(function(ed) {
     35                // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
     36                if ( 'ontouchstart' in window ) {
     37                    ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
     38                        var target = e.target;
     39
     40                        if ( target.nodeName == 'IMG' && ed.dom.hasClass(target, 'wpGallery') ) {
     41                            ed.selection.select(target);
     42                            ed.dom.events.cancel(e);
     43                            ed.plugins.wordpress._hideButtons();
     44                            ed.plugins.wordpress._showButtons(target, 'wp_gallerybtns');
     45                        }
     46                    });
     47                }
     48            });
     49           
    3350            ed.onMouseDown.add(function(ed, e) {
    34                 if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wpGallery') )
     51                if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wpGallery') ) {
    3552                    ed.plugins.wordpress._showButtons(e.target, 'wp_gallerybtns');
     53                }
    3654            });
    3755
     
    7088
    7189        _createButtons : function() {
    72             var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
     90            var t = this, ed = t.editor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
    7391
    7492            isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
     
    91109
    92110            tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
    93                 var ed = tinyMCE.activeEditor;
    94111                ed.windowManager.bookmark = ed.selection.getBookmark('simple');
    95112                ed.execCommand("WP_Gallery");
     113                ed.plugins.wordpress._hideButtons();
    96114            });
    97115
     
    105123
    106124            tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
    107                 var ed = tinyMCE.activeEditor, el = ed.selection.getNode();
     125                var el = ed.selection.getNode();
    108126
    109127                if ( el.nodeName == 'IMG' && ed.dom.hasClass(el, 'wpGallery') ) {
     
    111129
    112130                    ed.execCommand('mceRepaint');
    113                     return false;
     131                    ed.dom.events.cancel(e);
    114132                }
     133
     134                ed.plugins.wordpress._hideButtons();
    115135            });
    116136        },
Note: See TracChangeset for help on using the changeset viewer.