WordPress.org
Get WordPress

Make WordPress Core

Ticket #33184: 33184.6.patch

File 33184.6.patch, 19.0 KB (added by afercia, 10 years ago)

Fixes itemSectionHeight()

  • src/wp-admin/css/customize-nav-menus.css

     
    1 #accordion-section-menu_locations {
     1        #accordion-section-menu_locations {
    22        position: relative;
    33        margin-bottom: 15px;
    44}
    … …  
    605605        overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
    606606}
    607607
    608 #available-menu-items #available-menu-items-search.open {
     608#available-menu-items-search {
     609        border-bottom: 1px solid #dfdfdf;
     610        padding: 0 15px;
     611        background: #eee;
     612}
     613
     614#available-menu-items-search.open {
    609615        height: 100%;
    610616        border-bottom: none;
    611617}
    … …  
    616622        background: #fff;
    617623}
    618624
    619 #available-menu-items .open .accordion-section-title,
    620 #available-menu-items #available-menu-items-search .accordion-section-title {
     625#available-menu-items .open .accordion-section-title {
    621626        background: #eee;
    622627}
    623628
    … …  
    690695        display: none;
    691696}
    692697
    693 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
    694         display: block;
    695 }
    696 
    697698#available-menu-items .cannot-expand .accordion-section-title .no-items {
    698699        display: block;
    699700        color: #777;
    … …  
    706707        padding: 1px 15px 15px 15px;
    707708        margin: 0;
    708709        min-height: 120px;
    709         max-height: 290px;
     710        max-height: 300px;
    710711}
    711712
    712 #available-menu-items #available-menu-items-search .accordion-section-content {
     713/* IE8 rounding: looks like the accordion container is 1px taller */
     714.ie8 #available-menu-items .accordion-container {
     715        line-height: 1.3846;
     716}
     717
     718/* IE 8 doesn't recognize border-box on elements with min/max-width or min/max-height */
     719.ie8 #available-menu-items .accordion-section-content {
     720        padding: 0 15px;
     721}
     722
     723/* needed for JS calculation just on the actual accordions */
     724#available-menu-items .accordion-container .accordion-section-content {
     725        -webkit-box-sizing: border-box;
     726        -moz-box-sizing: border-box;
     727        box-sizing: border-box;
     728}
     729
     730#available-menu-items-search .accordion-section-content {
    713731        position: absolute;
    714         left: 1px;
     732        left: 0;
    715733        top: 60px; /* below title div / search input */
    716734        bottom: 0px; /* 100% height that still triggers lazy load */
     735        width: 270px;
    717736        max-height: none;
    718         width: 270px;
     737        min-height: 120px;
     738        margin: 0;
     739        padding: 1px 15px 15px;
    719740}
    720741
    721742#available-menu-items .menu-item-tpl {
    … …  
    813834}
    814835
    815836#available-menu-items .accordion-section-title.loading .spinner,
    816 #available-menu-items-search.loading .accordion-section-title .spinner {
     837#available-menu-items-search.loading .spinner {
    817838        visibility: visible;
    818839        margin: 0 20px;
    819840}
    … …  
    863884}
    864885
    865886#available-menu-items-search input {
     887        width: 100%;
     888        margin: 13px 0;
    866889        padding: 6px 10px;
    867         width: 100%;
    868890}
    869891
    870 #available-menu-items-search .accordion-section-title {
    871         padding: 12px 15px;
    872         -webkit-box-sizing: border-box;
    873         -moz-box-sizing: border-box;
    874         box-sizing: border-box;
    875 }
    876 
    877 #available-menu-items-search .accordion-section-title:after {
    878         display: none;
    879 }
    880 
    881892#available-menu-items-search .accordion-section-content:empty {
    882893        min-height: 0;
    883894        padding: 0;
    884895}
    885896
    886 #available-menu-items-search.loading .accordion-section-content div {
    887         opacity: .5;
     897#available-menu-items-search.loading .accordion-section-content {
     898        opacity: .25;
    888899}
    889900
    890 #available-menu-items-search.loading.loading-more .accordion-section-content div {
     901#available-menu-items-search.loading.loading-more .accordion-section-content {
    891902        opacity: 1;
    892903}
    893904
    … …  
    10371048        margin-top: 12px;
    10381049}
    10391050
    1040 #available-menu-items .customize-section-title {
    1041         display: none;
    1042 }
    1043 
    10441051@media screen and ( max-width: 640px ) {
    10451052        body.adding-menu-items div#available-menu-items {
    10461053                top: 46px;

  • src/wp-admin/customize.php

     
    152152                                        <span class="preview-notice"><?php
    153153                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    154154                                        ?></span>
    155                                         <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     155                                        <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    156156                                </div>
    157157                                <div class="customize-panel-description"><?php
    158158                                        _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );

  • src/wp-admin/js/customize-controls.js

     
    11241124                        var meta, panel = this;
    11251125
    11261126                        // Expand/Collapse accordion sections on click.
    1127                         panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     1127                        panel.container.find( '.accordion-section-title' ).not( '.customize-info .accordion-section-title' ).on( 'click keydown', function( event ) {
    11281128                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    11291129                                        return;
    11301130                                }
    … …  
    11491149
    11501150                        meta = panel.container.find( '.panel-meta:first' );
    11511151
    1152                         meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    1153                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    1154                                         return;
    1155                                 }
    1156                                 event.preventDefault(); // Keep this AFTER the key filter above
     1152                        meta.find( '.customize-help-toggle' ).on( 'click', function() {
    11571153
    11581154                                meta = panel.container.find( '.panel-meta' );
    11591155                                if ( meta.hasClass( 'cannot-expand' ) ) {
    … …  
    12311227                                overlay = section.closest( '.wp-full-overlay' ),
    12321228                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    12331229                                siblings = container.find( '.open' ),
    1234                                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
     1230                                // Get the accordion sections but not the Active Theme section, we don't need to set tabindex there.
     1231                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section:not(.control-section-themes) > .accordion-section-title' ),
    12351232                                backBtn = section.find( '.customize-panel-back' ),
    12361233                                panelTitle = section.find( '.accordion-section-title' ).first(),
    12371234                                content = section.find( '.control-panel-content' );
    … …  
    30593056                });
    30603057
    30613058                // Expand/Collapse the main customizer customize info.
    3062                 $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    3063                         if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    3064                                 return;
    3065                         }
    3066                         event.preventDefault(); // Keep this AFTER the key filter above
     3059                $( '.customize-info' ).find( '.customize-help-toggle' ).on( 'click', function() {
    30673060
    30683061                        var section = $( this ).closest( '.accordion-section' ),
    30693062                                content = section.find( '.customize-panel-description:first' );

  • src/wp-admin/js/customize-nav-menus.js

     
    138138                        } );
    139139
    140140                        // Clear the search results.
    141                         $( '.clear-results' ).on( 'click keydown', function( event ) {
    142                                 if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only
    143                                         return;
    144                                 }
    145 
    146                                 event.preventDefault();
    147 
     141                        $( '.clear-results' ).on( 'click', function( event ) {
    148142                                $( '#menu-items-search' ).val( '' ).focus();
    149                                 event.target.value = '';
    150143                                self.search( event );
    151144                        } );
    152145
    … …  
    202195                                $otherSections.fadeOut( 100 );
    203196                                $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
    204197                                $searchSection.addClass( 'open' );
    205                                 $searchSection.find( '.clear-results' )
    206                                         .prop( 'tabIndex', 0 )
    207                                         .addClass( 'is-visible' );
     198                                $searchSection.find( '.clear-results' ).addClass( 'is-visible' );
    208199                        } else if ( '' === event.target.value ) {
    209200                                $searchSection.removeClass( 'open' );
    210201                                $otherSections.show();
    211                                 $searchSection.find( '.clear-results' )
    212                                         .prop( 'tabIndex', -1 )
    213                                         .removeClass( 'is-visible' );
     202                                $searchSection.find( '.clear-results' ).removeClass( 'is-visible' );
     203                                // Adjust other sections height after the search closes.
     204                                this.itemSectionHeight();
    214205                        }
    215                        
     206
    216207                        this.searchTerm = event.target.value;
    217208                        this.pages.search = 1;
    218209                        this.doSearch( 1 );
    … …  
    360351                        });
    361352                },
    362353
    363                 // Adjust the height of each section of items to fit the screen.
     354                /*
     355                Adjust the height of each accordion section to don't exceed the screen height.
     356                The accordion sections content have a max-height of 300px set with CSS, this calculation will set a
     357                smaller max-height value when there's not enough vertical space.
     358                Accordion sections must have `box-sizing: border-box` set with CSS for a correct calculation.
     359                @todo Consider to run this also when the window gets resized.
     360                */
    364361                itemSectionHeight: function() {
    365                         var sections, totalHeight, accordionHeight, diff;
    366                         totalHeight = window.innerHeight;
    367                         sections = this.$el.find( '.accordion-section-content' );
    368                         accordionHeight =  46 * ( 1 + sections.length ) - 16; // Magic numbers.
    369                         diff = totalHeight - accordionHeight;
    370                         if ( 120 < diff && 290 > diff ) {
     362                        var totalHeight = window.innerHeight || document.documentElement.clientHeight,
     363                                accordion = this.$el.find( '.accordion-container' ),
     364                                sections = accordion.find( '.accordion-section-content' ),
     365                                visibleSection = sections.filter( ':visible' ),
     366                                searchHeight = this.$el.find( '#available-menu-items-search' ).outerHeight(),
     367                                accordionHeight,
     368                                diff;
     369
     370                        /*
     371                        Get the accordion sections total height when closed.
     372                        If there is an open accordion section, subtract its content height from the accordion height.
     373                        */
     374                        accordionHeight = visibleSection.length ? accordion.outerHeight() - visibleSection.outerHeight() : accordion.outerHeight();
     375                        // Get the available vertical space.
     376                        diff = totalHeight - accordionHeight - searchHeight;
     377
     378                        // Don't set a max-height if the available vertical space is under 120px or over 300px.
     379                        if ( 120 < diff && 300 >= diff ) {
     380                                // Since the accordion sections content have vertical padding we're using `box-sizing: border-box` in the CSS.
    371381                                sections.css( 'max-height', diff );
     382                        } else {
     383                                sections.css( 'max-height', '' );
    372384                        }
    373385                },
    374386

  • src/wp-includes/class-wp-customize-nav-menus.php

     
    697697         */
    698698        public function available_items_template() {
    699699                ?>
    700                 <div id="available-menu-items" class="accordion-container">
    701                         <div class="customize-section-title">
    702                                 <button type="button" class="customize-section-back" tabindex="-1">
    703                                         <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
    704                                 </button>
    705                                 <h3>
    706                                         <span class="customize-action">
    707                                                 <?php
    708                                                         /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
    709                                                         printf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) );
    710                                                 ?>
    711                                         </span>
    712                                         <?php _e( 'Add Menu Items' ); ?>
    713                                 </h3>
    714                         </div>
     700                <div id="available-menu-items">
    715701                        <div id="available-menu-items-search" class="accordion-section cannot-expand">
    716                                 <div class="accordion-section-title">
    717                                         <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
    718                                         <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
    719                                         <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
    720                                         <span class="spinner"></span>
    721                                         <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
    722                                 </div>
     702                                <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
     703                                <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
     704                                <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
     705                                <span class="spinner"></span>
     706                                <button type="button" class="clear-results not-a-button"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
    723707                                <ul class="accordion-section-content" data-type="search"></ul>
    724708                        </div>
    725                         <div id="new-custom-menu-item" class="accordion-section">
    726                                 <h4 class="accordion-section-title" role="presentation">
    727                                         <?php _e( 'Custom Links' ); ?>
    728                                         <button type="button" class="not-a-button" aria-expanded="false">
    729                                                 <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
    730                                                 <span class="toggle-indicator" aria-hidden="true"></span>
    731                                         </button>
    732                                 </h4>
    733                                 <div class="accordion-section-content">
    734                                         <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
    735                                         <p id="menu-item-url-wrap">
    736                                                 <label class="howto" for="custom-menu-item-url">
    737                                                         <span><?php _e( 'URL' ); ?></span>
    738                                                         <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
    739                                                 </label>
    740                                         </p>
    741                                         <p id="menu-item-name-wrap">
    742                                                 <label class="howto" for="custom-menu-item-name">
    743                                                         <span><?php _e( 'Link Text' ); ?></span>
    744                                                         <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
    745                                                 </label>
    746                                         </p>
    747                                         <p class="button-controls">
    748                                                 <span class="add-to-menu">
    749                                                         <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit">
    750                                                         <span class="spinner"></span>
    751                                                 </span>
    752                                         </p>
    753                                 </div>
    754                         </div>
    755                         <?php
    756                         // Containers for per-post-type item browsing; items added with JS.
    757                         foreach ( $this->available_item_types() as $available_item_type ) {
    758                                 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
    759                                 ?>
    760                                 <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
     709                        <div class="accordion-container">
     710                                <div id="new-custom-menu-item" class="accordion-section">
    761711                                        <h4 class="accordion-section-title" role="presentation">
    762                                                 <?php echo esc_html( $available_item_type['title'] ); ?>
    763                                                 <span class="spinner"></span>
    764                                                 <span class="no-items"><?php _e( 'No items' ); ?></span>
     712                                                <?php _e( 'Custom Links' ); ?>
    765713                                                <button type="button" class="not-a-button" aria-expanded="false">
    766                                                         <span class="screen-reader-text"><?php
    767                                                         /* translators: %s: Title of a section with menu items */
    768                                                         printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span>
     714                                                        <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
    769715                                                        <span class="toggle-indicator" aria-hidden="true"></span>
    770716                                                </button>
    771717                                        </h4>
    772                                         <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
     718                                        <div class="accordion-section-content">
     719                                                <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
     720                                                <p id="menu-item-url-wrap">
     721                                                        <label class="howto" for="custom-menu-item-url">
     722                                                                <span><?php _e( 'URL' ); ?></span>
     723                                                                <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
     724                                                        </label>
     725                                                </p>
     726                                                <p id="menu-item-name-wrap">
     727                                                        <label class="howto" for="custom-menu-item-name">
     728                                                                <span><?php _e( 'Link Text' ); ?></span>
     729                                                                <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
     730                                                        </label>
     731                                                </p>
     732                                                <p class="button-controls">
     733                                                        <span class="add-to-menu">
     734                                                                <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit">
     735                                                                <span class="spinner"></span>
     736                                                        </span>
     737                                                </p>
     738                                        </div>
    773739                                </div>
    774740                                <?php
    775                         }
    776                         ?>
     741                                // Containers for per-post-type item browsing; items added with JS.
     742                                foreach ( $this->available_item_types() as $available_item_type ) {
     743                                        $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
     744                                        ?>
     745                                        <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
     746                                                <h4 class="accordion-section-title" role="presentation">
     747                                                        <?php echo esc_html( $available_item_type['title'] ); ?>
     748                                                        <span class="spinner"></span>
     749                                                        <span class="no-items"><?php _e( 'No items' ); ?></span>
     750                                                        <button type="button" class="not-a-button" aria-expanded="false">
     751                                                                <span class="screen-reader-text"><?php
     752                                                                /* translators: %s: Title of a section with menu items */
     753                                                                printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span>
     754                                                                <span class="toggle-indicator" aria-hidden="true"></span>
     755                                                        </button>
     756                                                </h4>
     757                                                <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
     758                                        </div>
     759                                        <?php
     760                                }
     761                                ?>
     762                        </div><!-- .accordion-container -->
    777763                </div><!-- #available-menu-items -->
    778764        <?php
    779765        }

  • src/wp-includes/class-wp-customize-panel.php

     
    372372                                        /* translators: %s is the site/panel title in the Customizer */
    373373                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
    374374                                ?></span>
    375                                 <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     375                                <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    376376                        </div>
    377377                        <# if ( data.description ) { #>
    378378                                <div class="description customize-panel-description">