WordPress.org

Make WordPress Core

Ticket #30619: 30619.2.patch

File 30619.2.patch, 25.5 KB (added by iseulde, 7 years ago)

  • src/wp-includes/css/editor.css

     
    170170        box-sizing: border-box;
    171171        margin-bottom: 8px;
    172172        position: absolute;
    173         visibility: hidden;
    174173        -moz-user-select: none;
    175174        -webkit-user-select: none;
    176175        -ms-user-select: none;
    … …  
    178177        z-index: 100100; /* Same as the other TinyMCE "panels" */
    179178}
    180179
    181 div.mce-wp-image-toolbar > div.mce-stack-layout {
     180div.mce-inline-toolbar-grp > div.mce-stack-layout {
    182181        padding: 1px;
    183182}
    184183
    … …  
    262261        overflow-x: auto;
    263262}
    264263
    265 div.mce-inline-toolbar-grp-active {
    266         visibility: visible;
    267 }
    268 
    269264div.mce-toolbar-grp > div {
    270265        padding: 3px;
    271266}

  • src/wp-includes/js/mce-view.js

     
    400400                                                '<div class="wpview-wrap" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '">' +
    401401                                                        '<p class="wpview-selection-before">\u00a0</p>' +
    402402                                                        '<div class="wpview-body" contenteditable="false">' +
    403                                                                 '<div class="toolbar mce-arrow-down">' +
    404                                                                         ( this.edit ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) +
    405                                                                         '<div class="dashicons dashicons-no remove"></div>' +
    406                                                                 '</div>' +
    407403                                                                '<div class="wpview-content wpview-type-' + this.type + '"></div>' +
    408404                                                        '</div>' +
    409405                                                        '<p class="wpview-selection-after">\u00a0</p>' +

  • src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

     
    44tinymce.ui.FloatPanel.zIndex = 100100;
    55
    66tinymce.PluginManager.add( 'wordpress', function( editor ) {
    7         var DOM = tinymce.DOM, wpAdvButton, modKey, style,
     7        var DOM = tinymce.DOM,
     8                each = tinymce.each,
     9                Factory = tinymce.ui.Factory,
     10                settings = editor.settings,
     11                wpAdvButton, modKey, style,
     12                currentToolbar, currentSelection,
    813                last = 0;
    914
    1015        if ( typeof window.jQuery !== 'undefined' ) {
    … …  
    507512                DOM.hide( DOM.select( '#wp_editbtns, #wp_gallerybtns' ) );
    508513        }
    509514
     515        function _createToolbar( buttons ) {
     516                var toolbar,
     517                        toolbarItems = [],
     518                        buttonGroup;
     519
     520                each( buttons, function( item ) {
     521                        var itemName;
     522
     523                        function bindSelectorChanged() {
     524                                var selection = editor.selection;
     525
     526                                if ( itemName === 'bullist' ) {
     527                                        selection.selectorChanged( 'ul > li', function( state, args ) {
     528                                                var i = args.parents.length,
     529                                                        nodeName;
     530
     531                                                while ( i-- ) {
     532                                                        nodeName = args.parents[ i ].nodeName;
     533
     534                                                        if ( nodeName === 'OL' || nodeName == 'UL' ) {
     535                                                                break;
     536                                                        }
     537                                                }
     538
     539                                                item.active( state && nodeName === 'UL' );
     540                                        } );
     541                                }
     542
     543                                if ( itemName === 'numlist' ) {
     544                                        selection.selectorChanged( 'ol > li', function( state, args ) {
     545                                                var i = args.parents.length,
     546                                                        nodeName;
     547
     548                                                while ( i-- ) {
     549                                                        nodeName = args.parents[ i ].nodeName;
     550
     551                                                        if ( nodeName === 'OL' || nodeName === 'UL' ) {
     552                                                                break;
     553                                                        }
     554                                                }
     555
     556                                                item.active( state && nodeName === 'OL' );
     557                                        } );
     558                                }
     559
     560                                if ( item.settings.stateSelector ) {
     561                                        selection.selectorChanged( item.settings.stateSelector, function( state ) {
     562                                                item.active( state );
     563                                        }, true );
     564                                }
     565
     566                                if ( item.settings.disabledStateSelector ) {
     567                                        selection.selectorChanged( item.settings.disabledStateSelector, function( state ) {
     568                                                item.disabled( state );
     569                                        } );
     570                                }
     571                        }
     572
     573                        if ( item === '|' ) {
     574                                buttonGroup = null;
     575                        } else {
     576                                if ( Factory.has( item ) ) {
     577                                        item = {
     578                                                type: item
     579                                        };
     580
     581                                        if ( settings.toolbar_items_size ) {
     582                                                item.size = settings.toolbar_items_size;
     583                                        }
     584
     585                                        toolbarItems.push( item );
     586
     587                                        buttonGroup = null;
     588                                } else {
     589                                        if ( ! buttonGroup ) {
     590                                                buttonGroup = {
     591                                                        type: 'buttongroup',
     592                                                        items: []
     593                                                };
     594
     595                                                toolbarItems.push( buttonGroup );
     596                                        }
     597
     598                                        if ( editor.buttons[ item ] ) {
     599                                                itemName = item;
     600                                                item = editor.buttons[ itemName ];
     601
     602                                                if ( typeof item === 'function' ) {
     603                                                        item = item();
     604                                                }
     605
     606                                                item.type = item.type || 'button';
     607
     608                                                if ( settings.toolbar_items_size ) {
     609                                                        item.size = settings.toolbar_items_size;
     610                                                }
     611
     612                                                item = Factory.create( item );
     613
     614                                                buttonGroup.items.push( item );
     615
     616                                                if ( editor.initialized ) {
     617                                                        bindSelectorChanged();
     618                                                } else {
     619                                                        editor.on( 'init', bindSelectorChanged );
     620                                                }
     621                                        }
     622                                }
     623                        }
     624                } );
     625
     626                toolbar = Factory.create( {
     627                        type: 'panel',
     628                        layout: 'stack',
     629                        classes: 'toolbar-grp inline-toolbar-grp',
     630                        ariaRoot: true,
     631                        ariaRemember: true,
     632                        items: [ {
     633                                type: 'toolbar',
     634                                layout: 'flow',
     635                                items: toolbarItems
     636                        } ]
     637                } );
     638
     639                function hide() {
     640                        toolbar.hide();
     641                }
     642
     643                function reposition() {
     644                        var top, left, minTop, className,
     645                                windowPos, adminbar, mceToolbar, boundary,
     646                                boundaryMiddle, boundaryVerticalMiddle, spaceTop,
     647                                spaceBottom, windowWidth, toolbarWidth, toolbarHalf,
     648                                iframe, iframePos, iframeWidth, iframeHeigth,
     649                                toolbarNodeHeight, verticalSpaceNeeded,
     650                                toolbarNode = this.getEl(),
     651                                buffer = 5,
     652                                margin = 8,
     653                                adminbarHeight = 0;
     654
     655                        windowPos = window.pageYOffset || document.documentElement.scrollTop;
     656                        adminbar = tinymce.$( '#wpadminbar' )[0];
     657                        mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0];
     658                        boundary = currentSelection.getBoundingClientRect();
     659                        boundaryMiddle = ( boundary.left + boundary.right ) / 2;
     660                        boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2;
     661                        spaceTop = boundary.top;
     662                        spaceBottom = iframeHeigth - boundary.bottom;
     663                        windowWidth = window.innerWidth;
     664                        toolbarWidth = toolbarNode.offsetWidth;
     665                        toolbarHalf = toolbarWidth / 2;
     666                        iframe = document.getElementById( editor.id + '_ifr' );
     667                        iframePos = DOM.getPos( iframe );
     668                        iframeWidth = iframe.offsetWidth;
     669                        iframeHeigth = iframe.offsetHeight;
     670                        toolbarNodeHeight = toolbarNode.offsetHeight;
     671                        verticalSpaceNeeded = toolbarNodeHeight + margin + buffer;
     672
     673                        if ( spaceTop >= verticalSpaceNeeded ) {
     674                                className = ' mce-arrow-down';
     675                                top = boundary.top + iframePos.y - toolbarNodeHeight - margin;
     676                        } else if ( spaceBottom >= verticalSpaceNeeded ) {
     677                                className = ' mce-arrow-up';
     678                                top = boundary.bottom + iframePos.y;
     679                        } else {
     680                                top = buffer;
     681
     682                                if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) {
     683                                        className = ' mce-arrow-down';
     684                                } else {
     685                                        className = ' mce-arrow-up';
     686                                }
     687                        }
     688
     689                        // Make sure the image toolbar is below the main toolbar.
     690                        if ( mceToolbar ) {
     691                                minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight;
     692                        } else {
     693                                minTop = iframePos.y;
     694                        }
     695
     696                        // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window.
     697                        if ( windowPos ) {
     698                                if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) {
     699                                        adminbarHeight = adminbar.clientHeight;
     700                                }
     701
     702                                if ( windowPos + adminbarHeight > minTop ) {
     703                                        minTop = windowPos + adminbarHeight;
     704                                }
     705                        }
     706
     707                        if ( top && minTop && ( minTop + buffer > top ) ) {
     708                                top = minTop + buffer;
     709                                className = '';
     710                        }
     711
     712                        left = boundaryMiddle - toolbarHalf;
     713                        left += iframePos.x;
     714
     715                        if ( boundary.left < 0 || boundary.right > iframeWidth ) {
     716                                left = iframePos.x + ( iframeWidth - toolbarWidth ) / 2;
     717                        } else if ( toolbarWidth >= windowWidth ) {
     718                                className += ' mce-arrow-full';
     719                                left = 0;
     720                        } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) ||
     721                                ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) {
     722
     723                                left = ( windowWidth - toolbarWidth ) / 2;
     724                        } else if ( left < iframePos.x ) {
     725                                className += ' mce-arrow-left';
     726                                left = boundary.left + iframePos.x;
     727                        } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) {
     728                                className += ' mce-arrow-right';
     729                                left = boundary.right - toolbarWidth + iframePos.x;
     730                        }
     731
     732                        toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' );
     733                        toolbarNode.className += className;
     734
     735                        DOM.setStyles( toolbarNode, { 'left': left, 'top': top } );
     736
     737                        return this;
     738                }
     739
     740                toolbar.on( 'show', function() {
     741                        currentToolbar = this;
     742                        this.reposition();
     743                } );
     744
     745                toolbar.on( 'hide', function() {
     746                        currentToolbar = false;
     747                } );
     748
     749                toolbar.on( 'keydown', function( event ) {
     750                        if ( event.keyCode === 27 ) {
     751                                this.hide();
     752                                editor.focus();
     753                        }
     754                } );
     755
     756                toolbar.on( 'remove', function() {
     757                        DOM.unbind( window, 'resize scroll', hide );
     758                        editor.dom.unbind( editor.getWin(), 'resize scroll', hide );
     759                        editor.off( 'blur hide', hide );
     760                } );
     761
     762                editor.once( 'init', function() {
     763                        DOM.bind( window, 'resize scroll', hide );
     764                        editor.dom.bind( editor.getWin(), 'resize scroll', hide );
     765                        editor.on( 'blur hide', hide );
     766                } );
     767
     768                toolbar.reposition = reposition;
     769                toolbar.hide().renderTo( document.body );
     770
     771                return toolbar;
     772        }
     773
     774        editor.shortcuts.add( 'alt+119', '', function() {
     775                var node;
     776
     777                if ( currentToolbar ) {
     778                        node = currentToolbar.find( 'toolbar' )[0];
     779                        node && node.focus( true );
     780                }
     781        } );
     782
     783        editor.on( 'nodechange', function( event ) {
     784                var collapsed = editor.selection.isCollapsed();
     785
     786                var args = {
     787                        element: event.element,
     788                        parents: event.parents,
     789                        collapsed: collapsed
     790                };
     791
     792                editor.fire( 'wptoolbar', args );
     793
     794                currentSelection = args.selection || args.element;
     795
     796                currentToolbar && currentToolbar.hide();
     797                args.toolbar && args.toolbar.show();
     798        } );
     799
    510800        // Expose some functions (back-compat)
    511801        return {
    512802                _showButtons: _showButtons,
    513803                _hideButtons: _hideButtons,
    514804                _setEmbed: _setEmbed,
    515                 _getEmbed: _getEmbed
     805                _getEmbed: _getEmbed,
     806                _createToolbar: _createToolbar
    516807        };
    517808});

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

     
    11/* global tinymce */
    22tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
    33        var floatingToolbar, serializer,
    4                 DOM = tinymce.DOM,
    5                 settings = editor.settings,
    6                 Factory = tinymce.ui.Factory,
    74                each = tinymce.each,
    8                 iOS = tinymce.Env.iOS,
    9                 toolbarIsHidden = true,
    10                 editorWrapParent = tinymce.$( '#postdivrich' );
     5                iOS = tinymce.Env.iOS;
    116
    127        function isPlaceholder( node ) {
    138                return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) );
    … …  
    6459                } );
    6560        } );
    6661
    67         function toolbarConfig() {
    68                 var toolbarItems = [],
    69                         buttonGroup;
    70 
    71                 each( [ 'wp_img_alignleft', 'wp_img_aligncenter', 'wp_img_alignright', 'wp_img_alignnone', 'wp_img_edit', 'wp_img_remove' ], function( item ) {
    72                         var itemName;
    73 
    74                         function bindSelectorChanged() {
    75                                 var selection = editor.selection;
    76 
    77                                 if ( item.settings.stateSelector ) {
    78                                         selection.selectorChanged( item.settings.stateSelector, function( state ) {
    79                                                 item.active( state );
    80                                         }, true );
    81                                 }
    82 
    83                                 if ( item.settings.disabledStateSelector ) {
    84                                         selection.selectorChanged( item.settings.disabledStateSelector, function( state ) {
    85                                                 item.disabled( state );
    86                                         } );
    87                                 }
    88                         }
    89 
    90                         if ( item === '|' ) {
    91                                 buttonGroup = null;
    92                         } else {
    93                                 if ( Factory.has( item ) ) {
    94                                         item = {
    95                                                 type: item
    96                                         };
    97 
    98                                         if ( settings.toolbar_items_size ) {
    99                                                 item.size = settings.toolbar_items_size;
    100                                         }
    101 
    102                                         toolbarItems.push( item );
    103 
    104                                         buttonGroup = null;
    105                                 } else {
    106                                         if ( ! buttonGroup ) {
    107                                                 buttonGroup = {
    108                                                         type: 'buttongroup',
    109                                                         items: []
    110                                                 };
    111 
    112                                                 toolbarItems.push( buttonGroup );
    113                                         }
    114 
    115                                         if ( editor.buttons[ item ] ) {
    116                                                 itemName = item;
    117                                                 item = editor.buttons[ itemName ];
    118 
    119                                                 if ( typeof item === 'function' ) {
    120                                                         item = item();
    121                                                 }
    122 
    123                                                 item.type = item.type || 'button';
    124 
    125                                                 if ( settings.toolbar_items_size ) {
    126                                                         item.size = settings.toolbar_items_size;
    127                                                 }
    128 
    129                                                 item = Factory.create( item );
    130                                                 buttonGroup.items.push( item );
    131 
    132                                                 if ( editor.initialized ) {
    133                                                         bindSelectorChanged();
    134                                                 } else {
    135                                                         editor.on( 'init', bindSelectorChanged );
    136                                                 }
    137                                         }
    138                                 }
    139                         }
    140                 } );
    141 
    142                 return {
    143                         type: 'panel',
    144                         layout: 'stack',
    145                         classes: 'toolbar-grp inline-toolbar-grp wp-image-toolbar',
    146                         ariaRoot: true,
    147                         ariaRemember: true,
    148                         items: [
    149                                 {
    150                                         type: 'toolbar',
    151                                         layout: 'flow',
    152                                         items: toolbarItems
    153                                 }
    154                         ]
    155                 };
    156         }
    157 
    158         floatingToolbar = Factory.create( toolbarConfig() ).renderTo( document.body ).hide();
    159 
    160         floatingToolbar.reposition = function() {
    161                 var top, left, minTop, className,
    162                         windowPos, adminbar, mceToolbar, boundary,
    163                         boundaryMiddle, boundaryVerticalMiddle, spaceTop,
    164                         spaceBottom, windowWidth, toolbarWidth, toolbarHalf,
    165                         iframe, iframePos, iframeWidth, iframeHeigth,
    166                         toolbarNodeHeight, verticalSpaceNeeded,
    167                         toolbarNode = this.getEl(),
    168                         buffer = 5,
    169                         margin = 8,
    170                         adminbarHeight = 0,
    171                         imageNode = editor.selection.getNode();
    172 
    173                 if ( ! imageNode || imageNode.nodeName !== 'IMG' ) {
    174                         return this;
    175                 }
    176 
    177                 windowPos = window.pageYOffset || document.documentElement.scrollTop;
    178                 adminbar = tinymce.$( '#wpadminbar' )[0];
    179                 mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0];
    180                 boundary = imageNode.getBoundingClientRect();
    181                 boundaryMiddle = ( boundary.left + boundary.right ) / 2;
    182                 boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2;
    183                 spaceTop = boundary.top;
    184                 spaceBottom = iframeHeigth - boundary.bottom;
    185                 windowWidth = window.innerWidth;
    186                 toolbarWidth = toolbarNode.offsetWidth;
    187                 toolbarHalf = toolbarWidth / 2;
    188                 iframe = document.getElementById( editor.id + '_ifr' );
    189                 iframePos = DOM.getPos( iframe );
    190                 iframeWidth = iframe.offsetWidth;
    191                 iframeHeigth = iframe.offsetHeight;
    192                 toolbarNodeHeight = toolbarNode.offsetHeight;
    193                 verticalSpaceNeeded = toolbarNodeHeight + margin + buffer;
    194 
    195                 if ( iOS ) {
    196                         top = boundary.top + iframePos.y + margin;
    197                 } else {
    198                         if ( spaceTop >= verticalSpaceNeeded ) {
    199                                 className = ' mce-arrow-down';
    200                                 top = boundary.top + iframePos.y - toolbarNodeHeight - margin;
    201                         } else if ( spaceBottom >= verticalSpaceNeeded ) {
    202                                 className = ' mce-arrow-up';
    203                                 top = boundary.bottom + iframePos.y;
    204                         } else {
    205                                 top = buffer;
    206 
    207                                 if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) {
    208                                         className = ' mce-arrow-down';
    209                                 } else {
    210                                         className = ' mce-arrow-up';
    211                                 }
    212                         }
    213                 }
    214 
    215                 // Make sure the image toolbar is below the main toolbar.
    216                 if ( mceToolbar ) {
    217                         minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight;
    218                 } else {
    219                         minTop = iframePos.y;
    220                 }
    221 
    222                 // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window.
    223                 if ( windowPos ) {
    224                         if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) {
    225                                 adminbarHeight = adminbar.clientHeight;
    226                         }
    227 
    228                         if ( windowPos + adminbarHeight > minTop ) {
    229                                 minTop = windowPos + adminbarHeight;
    230                         }
    231                 }
    232 
    233                 if ( top && minTop && ( minTop + buffer > top ) ) {
    234                         top = minTop + buffer;
    235                         className = '';
    236                 }
    237 
    238                 left = boundaryMiddle - toolbarHalf;
    239                 left += iframePos.x;
    240 
    241                 if ( boundary.left < 0 || boundary.right > iframeWidth ) {
    242                         left = iframePos.x + ( iframeWidth - toolbarWidth ) / 2;
    243                 } else if ( toolbarWidth >= windowWidth ) {
    244                         className += ' mce-arrow-full';
    245                         left = 0;
    246                 } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) ||
    247                         ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) {
    248 
    249                         left = ( windowWidth - toolbarWidth ) / 2;
    250                 } else if ( left < iframePos.x ) {
    251                         className += ' mce-arrow-left';
    252                         left = boundary.left + iframePos.x;
    253                 } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) {
    254                         className += ' mce-arrow-right';
    255                         left = boundary.right - toolbarWidth + iframePos.x;
    256                 }
    257 
    258                 if ( ! iOS ) {
    259                         toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' );
    260                         toolbarNode.className += className;
     62        floatingToolbar = editor.plugins.wordpress._createToolbar( [
     63                'wp_img_alignleft',
     64                'wp_img_aligncenter',
     65                'wp_img_alignright',
     66                'wp_img_alignnone',
     67                'wp_img_edit',
     68                'wp_img_remove'
     69        ] );
     70
     71        editor.on( 'wptoolbar', function( event ) {
     72                if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) {
     73                        event.toolbar = floatingToolbar;
    26174                }
     75        } );
    26276
    263                 DOM.setStyles( toolbarNode, { 'left': left, 'top': top } );
    264 
    265                 return this;
    266         };
    267 
     77        // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
     78        // Select them again.
    26879        if ( iOS ) {
    269                 // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
    270                 // Select them again.
    27180                editor.on( 'click', function( event ) {
    27281                        if ( event.target.nodeName === 'IMG' ) {
    27382                                var node = event.target;
    27483
    27584                                window.setTimeout( function() {
    27685                                        editor.selection.select( node );
     86                                        editor.nodeChanged();
    27787                                }, 200 );
    27888                        } else {
    27989                                floatingToolbar.hide();
    28090                        }
    281                 });
    282         }
    283 
    284         editor.on( 'nodechange', function( event ) {
    285                 var delay = iOS ? 350 : 100;
    286 
    287                 if ( event.element.nodeName !== 'IMG' || isPlaceholder( event.element ) ) {
    288                         floatingToolbar.hide();
    289                         return;
    290                 }
    291 
    292                 setTimeout( function() {
    293                         var element = editor.selection.getNode();
    294 
    295                         if ( element.nodeName === 'IMG' && ! isPlaceholder( element ) ) {
    296                                 if ( floatingToolbar._visible ) {
    297                                         floatingToolbar.reposition();
    298                                 } else {
    299                                         floatingToolbar.show();
    300                                 }
    301                         } else {
    302                                 floatingToolbar.hide();
    303                         }
    304                 }, delay );
    305         } );
    306 
    307         function hide() {
    308                 if ( ! toolbarIsHidden ) {
    309                         floatingToolbar.hide();
    310                 }
     91                } );
    31192        }
    31293
    313         floatingToolbar.on( 'show', function() {
    314                 toolbarIsHidden = false;
    315 
    316                 if ( this._visible ) {
    317                         this.reposition();
    318                         DOM.addClass( this.getEl(), 'mce-inline-toolbar-grp-active' );
    319                 }
    320         } );
    321 
    322         floatingToolbar.on( 'hide', function() {
    323                 toolbarIsHidden = true;
    324                 DOM.removeClass( this.getEl(), 'mce-inline-toolbar-grp-active' );
    325         } );
    326 
    327         floatingToolbar.on( 'keydown', function( event ) {
    328                 if ( event.keyCode === 27 ) {
    329                         hide();
    330                         editor.focus();
    331                 }
    332         } );
    333 
    334         DOM.bind( window, 'resize scroll', function() {
    335                 if ( ! toolbarIsHidden && editorWrapParent.hasClass( 'wp-editor-expand' ) ) {
    336                         hide();
    337                 }
    338         });
    339 
    340         editor.on( 'init', function() {
    341                 editor.dom.bind( editor.getWin(), 'scroll', hide );
    342         });
    343 
    344         editor.on( 'blur hide', hide );
    345 
    346         // 119 = F8
    347         editor.shortcuts.add( 'Alt+119', '', function() {
    348                 var node = floatingToolbar.find( 'toolbar' )[0];
    349 
    350                 if ( node ) {
    351                         node.focus( true );
    352                 }
    353         });
    354 
    35594        function parseShortcode( content ) {
    35695                return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
    35796                        var id, align, classes, caption, img, width,

  • src/wp-includes/js/tinymce/plugins/wpview/plugin.js

     
    1212                firstFocus = true,
    1313                _noop = function() { return false; },
    1414                isios = /iPad|iPod|iPhone/.test( navigator.userAgent ),
    15                 cursorInterval, lastKeyDownNode, setViewCursorTries, focus, execCommandView, execCommandBefore;
     15                cursorInterval,
     16                lastKeyDownNode,
     17                setViewCursorTries,
     18                focus,
     19                execCommandView,
     20                execCommandBefore,
     21                toolbar;
    1622
    1723        function getView( node ) {
    1824                return getParent( node, 'wpview-wrap' );
    … …  
    8894
    8995                // Adjust the toolbar position and bail if node is already selected.
    9096                if ( viewNode === selected ) {
    91                         adjustToolbarPosition( viewNode );
    9297                        return;
    9398                }
    9499
    … …  
    100105                deselect();
    101106                selected = viewNode;
    102107                dom.setAttrib( viewNode, 'data-mce-selected', 1 );
    103                 adjustToolbarPosition( viewNode );
    104108
    105109                clipboard = dom.create( 'div', {
    106110                        'class': 'wpview-clipboard',
    … …  
    124128                editor.fire( 'wpview-selected', viewNode );
    125129        }
    126130
    127         function adjustToolbarPosition( viewNode ) {
    128                 var delta = 0,
    129                         toolbar = editor.$( viewNode ).find( '.toolbar' ),
    130                         editorToolbar = tinymce.$( editor.editorContainer ).find( '.mce-toolbar-grp' )[0],
    131                         editorToolbarBottom = ( editorToolbar && editorToolbar.getBoundingClientRect().bottom ) || 0;
    132 
    133                 if ( toolbar.length && editor.iframeElement ) {
    134                         // 48 = 43 for the toolbar + 5 buffer
    135                         delta = viewNode.getBoundingClientRect().top + editor.iframeElement.getBoundingClientRect().top - editorToolbarBottom - 48;
    136                 }
    137 
    138                 if ( delta < 0 ) {
    139                         toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -43 + delta * -1 ) });
    140                 } else if ( delta > 0 && ! toolbar.hasClass( 'mce-arrow-down' ) ) {
    141                         toolbar.addClass( 'mce-arrow-down' ).css({ top: '' });
    142                 }
    143         }
    144 
    145131        /**
    146132         * Deselect a selected view and remove clipboard
    147133         */
    … …  
    298284                                event.stopImmediatePropagation();
    299285                                event.preventDefault();
    300286
    301                                 if ( ( event.type === 'touchend' || event.type === 'mousedown' ) && ! event.metaKey && ! event.ctrlKey ) {
    302                                         if ( editor.dom.hasClass( event.target, 'edit' ) ) {
    303 
    304                                                 // In IE need to transfer focus from the non-editable view back to the editor.
    305                                                 if ( Env.ie ) {
    306                                                         editor.focus();
    307                                                 }
    308 
    309                                                 wp.mce.views.edit( editor, view );
    310                                                 return false;
    311                                         } else if ( editor.dom.hasClass( event.target, 'remove' ) ) {
    312                                                 removeView( view );
    313                                                 return false;
    314                                         }
    315                                 }
    316 
    317287                                if ( event.type === 'touchend' && scrolled ) {
    318288                                        scrolled = false;
    319289                                } else {
    … …  
    685655                }
    686656        });
    687657
     658        editor.addButton( 'wp_view_edit', {
     659                tooltip: 'Edit ', // trailing space is needed, used for context
     660                icon: 'dashicon dashicons-edit',
     661                onclick: function() {
     662                        wp.mce.views.edit( editor, getView( editor.selection.getNode() ) );
     663                }
     664        } );
     665
     666        editor.addButton( 'wp_view_remove', {
     667                tooltip: 'Remove',
     668                icon: 'dashicon dashicons-no',
     669                onclick: function() {
     670                        removeView( getView( editor.selection.getNode() ) );
     671                }
     672        } );
     673
     674        toolbar = editor.plugins.wordpress._createToolbar( [
     675                'wp_view_edit',
     676                'wp_view_remove'
     677        ] );
     678
     679        editor.on( 'wptoolbar', function( event ) {
     680                if ( editor.dom.hasClass( event.element, 'wpview-clipboard' ) ) {
     681                        event.element = getView( event.element );
     682                        event.toolbar = toolbar;
     683                }
     684        } );
     685
    688686        return {
    689687                getView: getView
    690688        };

  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    319319        display: none;
    320320}
    321321
    322 .wpview-wrap .toolbar {
    323         position: absolute;
    324         top: -43px;
    325         left: 45%;
    326         left: calc(50% - 32px);
    327         display: none;
    328         z-index: 100;
    329         background-color: #f5f5f5;
    330         border: 1px solid #aaa;
    331         padding: 1px;
    332         cursor: default;
    333         -webkit-border-radius: 2px;
    334         border-radius: 2px;
    335         -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
    336         box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
    337         -webkit-box-sizing: border-box;
    338         -moz-box-sizing: border-box;
    339         box-sizing: border-box;
    340         margin-bottom: 8px;
    341 }
    342 
    343 .wpview-wrap[data-mce-selected] .toolbar {
    344         display: block;
    345 }
    346 
    347 .wpview-wrap .toolbar:before,
    348 .wpview-wrap .toolbar:after {
    349         position: absolute;
    350         left: 50%;
    351         display: block;
    352         width: 0;
    353         height: 0;
    354         border-style: solid;
    355         border-color: transparent;
    356         border-width: 9px;
    357         margin-left: -9px;
    358         content: '';
    359 }
    360 
    361 .wpview-wrap .toolbar:after {
    362         border-width: 8px;
    363         margin-left: -8px;
    364 }
    365 
    366 .wpview-wrap .toolbar.mce-arrow-down:before {
    367         bottom: -18px;
    368         border-top-color: #aaa;
    369 }
    370 
    371 .wpview-wrap .toolbar.mce-arrow-down:after {
    372         bottom: -16px;
    373         border-top-color: #f5f5f5;
    374 }
    375 
    376 .wpview-wrap .toolbar.mce-arrow-up:before {
    377         top: -18px;
    378         border-bottom-color: #aaa;
    379 }
    380 
    381 .wpview-wrap .toolbar.mce-arrow-up:after {
    382         top: -16px;
    383         border-bottom-color: #f5f5f5;
    384 }
    385 
    386 .wpview-wrap .toolbar div {
    387         margin: 2px;
    388         padding: 2px 3px;
    389         width: 20px;
    390         height: 20px;
    391         color: #777;
    392         cursor: pointer;
    393         font-size: 20px;
    394         border: 1px solid transparent;
    395         border-radius: 2px;
    396 }
    397 
    398 .wpview-wrap .toolbar div:hover {
    399         background-color: #fafafa;
    400         border-color: #999;
    401         color: #222;
    402         -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    403         box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    404         outline: none;
    405 }
    406 
    407322.wpview-wrap .loading-placeholder {
    408323        border: 1px dashed #ccc;
    409324        padding: 10px;
    … …  
    455370        background: transparent;
    456371}
    457372
    458 .ie8 .wpview-wrap .toolbar div,
    459 .ie7 .wpview-wrap .toolbar div {
    460         display: inline;
    461         padding: 4px;
    462 }
    463 
    464 .ie8 .dashicons-edit,
    465 .ie7 .dashicons-edit {
    466         background-image: url(images/dashicon-edit.png);
    467 }
    468 
    469 .ie8 .dashicons-no,
    470 .ie7 .dashicons-no {
    471         background-image: url(images/dashicon-no.png);
    472 }
    473 
    474373.wpview-error {
    475374        border: 1px solid #dedede;
    476375        padding: 1em 0;
    … …  
    497396        font-family: 'Open Sans', sans-serif;
    498397}
    499398
    500 .wont-play {
    501         padding: 4px 0;
    502 }
    503 
    504 .wont-play p {
    505         font-size: 13px;
    506         line-height: 1.3;
    507         display: block;
    508         width: 70%;
    509         margin: 0 15%;
    510         text-align: center;
    511 }
    512 
    513399.wpview-type-gallery:after {
    514400    content: '';
    515401        display: table;
    … …  
    536422        margin: auto;
    537423}
    538424
    539 
    540425.gallery .gallery-item {
    541426        float: left;
    542427        margin: 0;