WordPress.org

Make WordPress Core

Changeset 34893


Ignore:
Timestamp:
10/07/2015 01:57:06 AM (5 years ago)
Author:
wonderboymusic
Message:

Meta Boxes: reboot some of the code in postbox.js to support aria-expanded attribute toggling and to properly reference static class properties.

Props afercia, wonderboymusic.
Fixes #33754.

Location:
trunk/src/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r34684 r34893  
    18321832
    18331833.postbox .handlediv {
     1834    display: none;
    18341835    float: right;
    1835     width: 33px;
     1836    width: 36px;
    18361837    height: 36px;
     1838    padding: 0;
    18371839}
    18381840
    18391841.js .postbox .handlediv {
    1840     cursor: pointer;
     1842    display: block;
    18411843}
    18421844
     
    27712773/* Metabox collapse arrow indicators */
    27722774.js .sidebar-name .sidebar-name-arrow:before,
    2773 .js .meta-box-sortables .postbox .handlediv:before {
    2774     right: 12px;
     2775.js .meta-box-sortables .postbox .toggle-indicator:before {
     2776    position: relative;
     2777    left: -1px; /* fix the dashicon horizontal alignment */
     2778    display: inline-block;
    27752779    font: normal 20px/1 dashicons;
    27762780    speak: none;
    2777     display: inline-block;
    2778     padding: 8px 10px;
    2779     top: 0;
    2780     position: relative;
     2781    padding: 8px;
    27812782    -webkit-font-smoothing: antialiased;
    27822783    -moz-osx-font-smoothing: grayscale;
     
    27842785}
    27852786
     2787.js .sidebar-name .sidebar-name-arrow:before {
     2788    padding: 10px;
     2789    left: 0;
     2790}
     2791
    27862792.js #widgets-left .sidebar-name .sidebar-name-arrow {
    27872793    display: none;
     
    27952801/* Show the arrow only on hover */
    27962802.js .sidebar-name .sidebar-name-arrow:before,
    2797 .js .meta-box-sortables .postbox .handlediv:before {
     2803.js .meta-box-sortables .postbox .toggle-indicator:before {
    27982804    content: "\f142";
    27992805}
    28002806
    28012807.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
    2802 .js .meta-box-sortables .postbox.closed .handlediv:before {
     2808.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
    28032809    content: "\f140";
    28042810}
     
    29262932.widget-action:hover,
    29272933.handlediv:hover,
     2934.handlediv:focus,
    29282935.item-edit:hover,
    29292936.sidebar-name:hover .sidebar-name-arrow,
  • trunk/src/wp-admin/css/widgets.css

    r34011 r34893  
    148148}
    149149
    150 div#widgets-left .sidebar-name .sidebar-name-arrow:before {
    151     right: 0;
    152     top: 4px;
    153     padding: 4px 6px 4px 4px;
     150#widgets-left .sidebar-name .sidebar-name-arrow:before {
     151    padding: 9px;
    154152}
    155153
     
    251249
    252250div#widgets-right .sidebar-name .sidebar-name-arrow:before {
    253     right: 0;
    254     top: 4px;
     251    top: 2px;
    255252}
    256253
  • trunk/src/wp-admin/includes/template-functions.php

    r34826 r34893  
    990990                    echo '<div id="' . $box['id'] . '" class="postbox ' . postbox_classes($box['id'], $page) . $hidden_class . '" ' . '>' . "\n";
    991991                    if ( 'dashboard_browser_nag' != $box['id'] ) {
    992                         echo '<button class="handlediv button-link" title="' . esc_attr__( 'Click to toggle' ) . '" aria-expanded="true">';
    993                         echo '<span class="screen-reader-text">' . sprintf( __( 'Click to toggle %s panel' ), $box['title'] ) . '</span><br />';
     992                        echo '<button type="button" class="handlediv button-link" aria-expanded="true">';
     993                        echo '<span class="screen-reader-text">' . sprintf( __( 'Toggle panel: %s' ), $box['title'] ) . '</span>';
     994                        echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    994995                        echo '</button>';
    995996                    }
  • trunk/src/wp-admin/js/postbox.js

    r33762 r34893  
    77
    88    postboxes = {
    9         add_postbox_toggles : function(page, args) {
    10             var self = this;
    11 
    12             self.init(page, args);
    13 
    14             $('.postbox .hndle, .postbox .handlediv').bind('click.postboxes', function( e ) {
    15                 var p = $(this).parent('.postbox'), id = p.attr('id');
    16 
    17                 if ( 'dashboard_browser_nag' == id )
    18                     return;
    19 
    20                 e.preventDefault();
    21 
    22                 p.toggleClass( 'closed' );
    23                 $(this).attr( 'aria-expanded', ! p.hasClass( 'closed' ) );
    24 
    25                 if ( page != 'press-this' )
    26                     self.save_state(page);
    27 
    28                 if ( id ) {
    29                     if ( !p.hasClass('closed') && $.isFunction(postboxes.pbshow) )
    30                         self.pbshow(id);
    31                     else if ( p.hasClass('closed') && $.isFunction(postboxes.pbhide) )
    32                         self.pbhide(id);
    33                 }
    34 
    35                 $document.trigger( 'postbox-toggled', p );
    36             });
     9        handle_click : function () {
     10            var $el = $( this ),
     11                p = $el.parent( '.postbox' ),
     12                id = p.attr( 'id' ),
     13                ariaExpandedValue;
     14
     15            if ( 'dashboard_browser_nag' === id ) {
     16                return;
     17            }
     18
     19            p.toggleClass( 'closed' );
     20
     21            ariaExpandedValue = ! p.hasClass( 'closed' );
     22
     23            if ( $el.hasClass( 'handlediv' ) ) {
     24                // The handle button was clicked.
     25                $el.attr( 'aria-expanded', ariaExpandedValue );
     26            } else {
     27                // The handle heading was clicked.
     28                $el.closest( '.postbox' ).find( 'button.handlediv' )
     29                    .attr( 'aria-expanded', ariaExpandedValue );
     30            }
     31
     32            if ( postboxes.page !== 'press-this' ) {
     33                postboxes.save_state( postboxes.page );
     34            }
     35
     36            if ( id ) {
     37                if ( !p.hasClass('closed') && $.isFunction( postboxes.pbshow ) ) {
     38                    postboxes.pbshow( id );
     39                } else if ( p.hasClass('closed') && $.isFunction( postboxes.pbhide ) ) {
     40                    postboxes.pbhide( id );
     41                }
     42            }
     43
     44            $document.trigger( 'postbox-toggled', p );
     45        },
     46
     47        add_postbox_toggles : function (page, args) {
     48            var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     49
     50            this.page = page;
     51            this.init( page, args );
     52
     53            $handles.on( 'click.postboxes',  this.handle_click );
    3754
    3855            $('.postbox .hndle a').click( function(e) {
     
    4764
    4865            $('.hide-postbox-tog').bind('click.postboxes', function() {
    49                 var boxId = $(this).val(),
     66                var $el = $(this),
     67                    boxId = $el.val(),
    5068                    $postbox = $( '#' + boxId );
    5169
    52                 if ( $(this).prop('checked') ) {
     70                if ( $el.prop( 'checked' ) ) {
    5371                    $postbox.show();
    54                     if ( $.isFunction( postboxes.pbshow ) )
    55                         self.pbshow( boxId );
     72                    if ( $.isFunction( postboxes.pbshow ) ) {
     73                        postboxes.pbshow( boxId );
     74                    }
    5675                } else {
    5776                    $postbox.hide();
    58                     if ( $.isFunction( postboxes.pbhide ) )
    59                         self.pbhide( boxId );
    60                 }
    61                 self.save_state(page);
    62                 self._mark_area();
     77                    if ( $.isFunction( postboxes.pbhide ) ) {
     78                        postboxes.pbhide( boxId );
     79                    }
     80                }
     81                postboxes.save_state( page );
     82                postboxes._mark_area();
    6383                $document.trigger( 'postbox-toggled', $postbox );
    6484            });
     
    6888
    6989                if ( n ) {
    70                     self._pb_edit(n);
    71                     self.save_order(page);
     90                    postboxes._pb_edit(n);
     91                    postboxes.save_order( page );
    7292                }
    7393            });
     
    7595
    7696        init : function(page, args) {
    77             var isMobile = $(document.body).hasClass('mobile');
     97            var isMobile = $( document.body ).hasClass( 'mobile' ),
     98                $handleButtons = $( '.postbox .handlediv' );
    7899
    79100            $.extend( this, args || {} );
     
    92113                opacity: 0.65,
    93114                stop: function() {
    94                     if ( $(this).find('#dashboard_browser_nag').is(':visible') && 'dashboard_browser_nag' != this.firstChild.id ) {
    95                         $(this).sortable('cancel');
     115                    var $el = $( this );
     116
     117                    if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
     118                        $el.sortable('cancel');
    96119                        return;
    97120                    }
     
    113136
    114137            this._mark_area();
     138
     139            // Set the handle buttons `aria-expanded` attribute initial value on page load.
     140            $handleButtons.each( function () {
     141                var $el = $( this );
     142                $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
     143            });
    115144        },
    116145
Note: See TracChangeset for help on using the changeset viewer.