WordPress.org

Make WordPress Core

Ticket #47069: admin-bar-no-jquery-wip.diff

File admin-bar-no-jquery-wip.diff, 13.6 KB (added by afercia, 18 months ago)
  • src/js/_enqueues/lib/admin-bar.js

     
    1212                /* jshint ignore:end */
    1313        }
    1414        jQuery(document).ready(function($){
    15                 var adminbar = $('#wpadminbar'), refresh, touchOpen, touchClose, disableHoverIntent = false;
     15                var adminbar = $('#wpadminbar'), touchOpen, touchClose, disableHoverIntent = false;
    1616
    1717                /**
    18                  * Forces the browser to refresh the tabbing index.
    19                  *
    20                  * @since 3.3.0
    21                  *
    22                  * @param {number}      i  The index of the HTML element to remove the tab index
    23                  *                         from. This parameter is necessary because we use this
    24                  *                         function in .each calls.
    25                  * @param {HTMLElement} el The HTML element to remove the tab index from.
    26                  *
    27                  * @return {void}
    28                  */
    29                 refresh = function(i, el){
    30                         var node = $(el), tab = node.attr('tabindex');
    31                         if ( tab )
    32                                 node.attr('tabindex', '0').attr('tabindex', tab);
    33                 };
    34 
    35                 /**
    3618                 * Adds or removes the hover class on touch.
    3719                 *
    3820                 * @since 3.5.0
     
    118100                        interval: 100
    119101                });
    120102
    121                 // Prevents the toolbar from covering up content when a hash is present in the
    122                 // URL.
    123                 if ( window.location.hash )
    124                         window.scrollBy( 0, -32 );
    125 
    126103                /**
    127104                 * Handles the selected state of the Shortlink link.
    128105                 *
     
    143120                /**
    144121                 * Removes the hoverclass if the enter key is pressed.
    145122                 *
    146                  * Makes sure the tab index is refreshed by refreshing each ab-item
    147                  * and its children.
    148                  *
    149123                 * @param {Object} e The keydown event.
    150124                 *
    151125                 * @return {void}
     
    170144                        if ( ! parentHasHover ) {
    171145                                target.parent().toggleClass('hover');
    172146                        }
     147                });
    173148
    174                         target.siblings('.ab-sub-wrapper').find('.ab-item').each(refresh);
    175                 }).each(refresh);
    176 
    177149                /**
    178150                 * Removes the hover class when the escape key is pressed.
    179151                 *
    180                  * Makes sure the tab index is refreshed by refreshing each ab-item
    181                  * and its children.
    182                  *
    183152                 * @param {Object} e The keydown event.
    184153                 *
    185154                 * @return {void}
    186155                 */
    187                 $('#wpadminbar .ab-item').bind('keydown.adminbar', function(e){
     156                $('#wpadminbar .ab-item, .shortlink-input').bind('keydown.adminbar', function(e){
    188157                        // Key code 27 is the escape key.
    189158                        if ( e.which != 27 )
    190159                                return;
     
    195164                        e.preventDefault();
    196165
    197166                        target.closest('.hover').removeClass('hover').children('.ab-item').focus();
    198                         target.siblings('.ab-sub-wrapper').find('.ab-item').each(refresh);
    199167                });
    200168
    201169                /**
     
    214182                        $( 'html, body' ).animate( { scrollTop: 0 }, 'fast' );
    215183                        e.preventDefault();
    216184                });
    217 
    218                 /**
    219                  * Sets the focus on an element with a href attribute.
    220                  *
    221                  * The timeout is used to fix a focus bug in WebKit.
    222                  *
    223                  * @param {Object} e The keydown event.
    224                  *
    225                  * @return {void}
    226                  */
    227                 $('.screen-reader-shortcut').keydown( function(e) {
    228                         var id, ua;
    229 
    230                         if ( 13 != e.which )
    231                                 return;
    232 
    233                         id = $( this ).attr( 'href' );
    234 
    235                         ua = navigator.userAgent.toLowerCase();
    236 
    237                         if ( ua.indexOf('applewebkit') != -1 && id && id.charAt(0) == '#' ) {
    238                                 setTimeout(function () {
    239                                         $(id).focus();
    240                                 }, 100);
    241                         }
    242                 });
    243 
    244                 $( '#adminbar-search' ).on({
    245                         /**
    246                          * Adds the adminbar-focused class on focus.
    247                          *
    248                          * @return {void}
    249                          */
    250                         focus: function() {
    251                                 $( '#adminbarsearch' ).addClass( 'adminbar-focused' );
    252                         /**
    253                          * Removes the adminbar-focused class on blur.
    254                          *
    255                          * @return {void}
    256                          */
    257                         }, blur: function() {
    258                                 $( '#adminbarsearch' ).removeClass( 'adminbar-focused' );
    259                         }
    260                 } );
    261 
    262                 if ( 'sessionStorage' in window ) {
    263                         /**
    264                          * Empties sessionStorage on logging out.
    265                          *
    266                          * @return {void}
    267                          */
    268                         $('#wp-admin-bar-logout a').click( function() {
    269                                 try {
    270                                         for ( var key in sessionStorage ) {
    271                                                 if ( key.indexOf('wp-autosave-') != -1 )
    272                                                         sessionStorage.removeItem(key);
    273                                         }
    274                                 } catch(e) {}
    275                         });
    276                 }
    277 
    278                 if ( navigator.userAgent && document.body.className.indexOf( 'no-font-face' ) === -1 &&
    279                         /Android (1.0|1.1|1.5|1.6|2.0|2.1)|Nokia|Opera Mini|w(eb)?OSBrowser|webOS|UCWEB|Windows Phone OS 7|XBLWP7|ZuneWP7|MSIE 7/.test( navigator.userAgent ) ) {
    280 
    281                         document.body.className += ' no-font-face';
    282                 }
    283185        });
    284186} else {
    285187        /**
     
    312214                        }
    313215                },
    314216
    315                 aB, hc = new RegExp('\\bhover\\b', 'g'), q = [],
    316                 rselected = new RegExp('\\bselected\\b', 'g'),
     217                aB, q = [],
    317218
    318219                /**
    319220                 * Gets the timeout ID of the given element.
     
    352253                                if ( 'LI' == t.nodeName.toUpperCase() ) {
    353254                                        ancestors[ ancestors.length ] = t;
    354255                                        id = getTOID(t);
    355                                         if ( id )
     256                                        if ( id ) {
    356257                                                clearTimeout( id );
    357                                         t.className = t.className ? ( t.className.replace(hc, '') + ' hover' ) : 'hover';
     258                                        }
     259                                        t.classList.add( 'hover' );
    358260                                        hovering = t;
    359261                                }
    360262                                t = t.parentNode;
     
    367269                                        i = ul.childNodes.length;
    368270                                        while ( i-- ) {
    369271                                                li = ul.childNodes[i];
    370                                                 if ( li != hovering )
    371                                                         li.className = li.className ? li.className.replace( rselected, '' ) : '';
     272                                                if ( li != hovering ) {
     273                                                        li.classList.remove( 'selected' );
     274                                                }
     275
    372276                                        }
    373277                                }
    374278                        }
     
    383287                                                inA = true;
    384288                                }
    385289
    386                                 if ( ! inA )
    387                                         q[i][1].className = q[i][1].className ? q[i][1].className.replace(hc, '') : '';
     290                                if ( ! inA ) {
     291                                        q[i][1].classList.remove( 'hover' );
     292                                }
    388293                        }
    389294                },
    390295
     
    402307                                if ( 'LI' == t.nodeName.toUpperCase() ) {
    403308                                        (function(t) {
    404309                                                var to = setTimeout(function() {
    405                                                         t.className = t.className ? t.className.replace(hc, '') : '';
     310                                                        t.classList.remove( 'hover' );
    406311                                                }, 500);
    407312                                                q[q.length] = [to, t];
    408313                                        })(t);
     
    441346                                e.preventDefault();
    442347                        e.returnValue = false;
    443348
    444                         if ( -1 == t.className.indexOf('selected') )
    445                                 t.className += ' selected';
     349                        if ( -1 == t.className.indexOf( 'selected' ) ) {
     350                                t.classList.add( 'selected' );
     351                        }
    446352
    447353                        for ( i = 0, l = t.childNodes.length; i < l; i++ ) {
    448354                                node = t.childNodes[i];
     
    450356                                        node.focus();
    451357                                        node.select();
    452358                                        node.onblur = function() {
    453                                                 t.className = t.className ? t.className.replace( rselected, '' ) : '';
     359                                                t.classList.remove( 'selected' );
    454360                                        };
    455361                                        break;
    456362                                }
     
    480386                                return;
    481387
    482388                        speed_step = distance > 800 ? 130 : 100;
    483                         speed     = Math.min( 12, Math.round( distance / speed_step ) );
    484                         step      = distance > 800 ? Math.round( distance / 30  ) : Math.round( distance / 20  );
    485                         steps     = [];
    486                         timer     = 0;
     389                        speed      = Math.min( 12, Math.round( distance / speed_step ) );
     390                        step       = distance > 800 ? Math.round( distance / 30  ) : Math.round( distance / 20  );
     391                        steps      = [];
     392                        timer      = 0;
    487393
    488394                        // Animate scrolling to the top of the page by generating steps to
    489395                        // the top of the page and shifting to each step at a set interval.
     
    504410                addEvent(w, 'load', function() {
    505411                        aB = d.getElementById('wpadminbar');
    506412
    507                         if ( d.body && aB ) {
    508                                 d.body.appendChild( aB );
    509 
     413                        if ( aB ) {
    510414                                if ( aB.className )
    511415                                        aB.className = aB.className.replace(/nojs/, '');
    512416
     
    523427                                addEvent(aB, 'click', function(e) {
    524428                                        scrollToTop( e.target || e.srcElement );
    525429                                });
     430                        }
     431                });
     432        })( document, window );
     433}
    526434
    527                                 addEvent( document.getElementById('wp-admin-bar-logout'), 'click', function() {
    528                                         if ( 'sessionStorage' in window ) {
    529                                                 try {
    530                                                         for ( var key in sessionStorage ) {
    531                                                                 if ( key.indexOf('wp-autosave-') != -1 )
    532                                                                         sessionStorage.removeItem(key);
    533                                                         }
    534                                                 } catch(e) {}
     435// Common functions.
     436(function() {
     437        /**
     438         * Specify a function to execute when the DOM is fully loaded.
     439         *
     440         * Can be replaced by `@wordpress/dom-ready`.
     441         *
     442         * @param {Function} callback A function to execute after the DOM is ready.
     443         *
     444         * @returns {void}
     445         */
     446        var domReady = function( callback ) {
     447                if ( document.readyState === 'complete' ) {
     448                        return callback();
     449                }
     450
     451                document.addEventListener( 'DOMContentLoaded', callback );
     452        };
     453
     454        /*
     455         * Clear any autosave in the session storage.
     456         * Note: `sessionStorage` is cleared out also in `wp-login.php`.
     457         */
     458        var clearAutoSave = function() {
     459                if ( 'sessionStorage' in window ) {
     460                        document.querySelector( '#wp-admin-bar-logout .ab-item' ).addEventListener( 'click', function() {
     461                                try {
     462                                        for ( var key in sessionStorage ) {
     463                                                if ( key.indexOf( 'wp-autosave-' ) !== -1 )
     464                                                        sessionStorage.removeItem( key );
    535465                                        }
    536                                 });
    537                         }
     466                                } catch( e ) {}
     467                        } );
     468                }
     469        };
    538470
    539                         if ( w.location.hash )
    540                                 w.scrollBy(0,-32);
     471        domReady( clearAutoSave );
    541472
    542                         if ( navigator.userAgent && document.body.className.indexOf( 'no-font-face' ) === -1 &&
    543                                 /Android (1.0|1.1|1.5|1.6|2.0|2.1)|Nokia|Opera Mini|w(eb)?OSBrowser|webOS|UCWEB|Windows Phone OS 7|XBLWP7|ZuneWP7|MSIE 7/.test( navigator.userAgent ) ) {
     473        // Adds a `no-font-face` CSS class to the body for browsers that don't support font-face.
     474        if ( navigator.userAgent && document.body.className.indexOf( 'no-font-face' ) === -1 &&
     475                /Android (1.0|1.1|1.5|1.6|2.0|2.1)|Nokia|Opera Mini|w(eb)?OSBrowser|webOS|UCWEB|Windows Phone OS 7|XBLWP7|ZuneWP7|MSIE 7/.test( navigator.userAgent ) ) {
    544476
    545                                 document.body.className += ' no-font-face';
    546                         }
    547                 });
    548         })(document, window);
     477                document.body.className += ' no-font-face';
     478        }
    549479
    550 }
     480        /*
     481         * Prevents the toolbar from covering up content when a hash is present in the URL.
     482         * Note: this works only when following a link with a hash from another page.
     483         */
     484        if ( window.location.hash ) {
     485                // Looks like WebKit browsers need a setTimeout.
     486                setTimeout( function() {
     487                        window.scrollBy( 0, -32 );
     488                }, 0 );
     489        }
     490})();
  • src/wp-admin/css/colors/_admin.scss

     
    316316#wpadminbar li .ab-item:focus:before,
    317317#wpadminbar li .ab-item:focus .ab-icon:before,
    318318#wpadminbar li.hover .ab-icon:before,
    319 #wpadminbar li.hover .ab-item:before,
    320 #wpadminbar li:hover #adminbarsearch:before,
    321 #wpadminbar li #adminbarsearch.adminbar-focused:before {
     319#wpadminbar li.hover .ab-item:before {
    322320        color: $menu-submenu-focus-text;
    323321}
    324322
  • src/wp-includes/admin-bar.php

     
    10291029        }
    10301030
    10311031        $form  = '<form action="' . esc_url( home_url( '/' ) ) . '" method="get" id="adminbarsearch">';
     1032        $form .= '<label for="adminbar-search" class="screen-reader-text">' . __( 'Search' ) . '</label>';
    10321033        $form .= '<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />';
    1033         $form .= '<label for="adminbar-search" class="screen-reader-text">' . __( 'Search' ) . '</label>';
     1034        $form .= '<span class="adminbar-search-icon" aria-hidden="true"></span>';
    10341035        $form .= '<input type="submit" class="adminbar-button" value="' . __( 'Search' ) . '"/>';
    10351036        $form .= '</form>';
    10361037
  • src/wp-includes/css/admin-bar.css

     
    151151        float: none;
    152152}
    153153
    154 #wpadminbar.ie7 .menupop .ab-sub-wrapper,
    155 #wpadminbar.ie7 .shortlink-input {
    156         top: 32px;
    157         left: 0;
    158 }
    159 
    160154#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
    161155        min-width: 100%;
    162156}
     
    294288#wpadminbar li .ab-item:focus .ab-icon:before,
    295289#wpadminbar li.hover .ab-icon:before,
    296290#wpadminbar li.hover .ab-item:before,
    297 #wpadminbar li:hover #adminbarsearch:before,
    298 #wpadminbar li #adminbarsearch.adminbar-focused:before {
     291#adminbar-search:focus + .adminbar-search-icon::before {
    299292        color: #00b9eb;
    300293}
    301294
     
    424417        min-width: 270px;
    425418}
    426419
    427 #wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar .ab-item {
    428         white-space: nowrap;
    429 }
    430 
    431420#wpadminbar #wp-admin-bar-user-actions > li {
    432421        margin-left: 16px;
    433422        margin-right: 16px;
     
    491480        display: inline;
    492481}
    493482
    494 #wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
    495 #wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > a img {
    496         width: auto;
    497 }
    498 
    499483/**
    500484 * WP Logo
    501485 */
     
    607591/**
    608592 * Search
    609593 */
    610 #wpadminbar.ie8 #wp-admin-bar-search {
    611         display: block;
    612         min-width: 32px;
    613 }
    614594#wpadminbar #wp-admin-bar-search .ab-item {
    615595        padding: 0;
    616596        background: transparent;
     
    623603        z-index: 1;
    624604}
    625605
    626 #wpadminbar #adminbarsearch:before {
     606#wpadminbar #adminbar-search + .adminbar-search-icon::before {
    627607        position: absolute;
    628608        top: 6px;
    629609        left: 5px;
     
    671651        border: 0;
    672652}
    673653
    674 #wpadminbar.ie7 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
    675         margin-top: 3px;
    676         width: 120px;
    677 }
    678 
    679 #wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
    680         /* IE8 z-index bug with transparent / empty elements - fill in with an encoded transparent GIF */
    681         background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    682 }
    683 
    684 /* IE8 doesn't redraw the pseudo elements unless you make a change to the content */
    685 #wpadminbar.ie8 #adminbarsearch.adminbar-focused:before {
    686         content: "\f179 "; /* extra space */
    687 }
    688 
    689 #wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
    690         background: #fff;
    691         z-index: -1;
    692 }
    693 
    694654#wpadminbar #adminbarsearch .adminbar-button {
    695655        display: none;
    696656}