WordPress.org

Make WordPress Core

Ticket #13525: 13525.horizontal.scrolling.and.friends.diff

File 13525.horizontal.scrolling.and.friends.diff, 8.8 KB (added by koopersmith, 8 years ago)
  • wp-admin/includes/nav-menu.php

     
    3838         * @param object $args
    3939         */
    4040        function start_el(&$output, $item, $depth, $args) {
     41                global $_wp_nav_menu_max_depth;
     42                $_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth;
     43
    4144                $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    4245
    4346                ob_start();
  • wp-admin/js/nav-menu.dev.js

     
    242242                initSortables : function() {
    243243                        var currentDepth = 0, originalDepth, minDepth, maxDepth,
    244244                                prev, next, prevBottom, nextThreshold, helperHeight, transport,
    245                                 menuLeft = api.menuList.offset().left;
     245                                menuEdge = api.menuList.offset().left,
     246                                body = $('body'), maxChildDepth,
     247                                menuMaxDepth = initialMenuMaxDepth();
    246248
     249                        // Use the right edge if RTL.
     250                        menuEdge += api.isRTL ? api.menuList.width() : 0;
     251
    247252                        api.menuList.sortable({
    248253                                handle: '.menu-item-handle',
    249254                                placeholder: 'sortable-placeholder',
    250255                                start: function(e, ui) {
    251                                         var height, width, parent, children, maxChildDepth, tempHolder;
     256                                        var height, width, parent, children, tempHolder;
    252257
    253258                                        // handle placement for rtl orientation
    254259                                        if ( api.isRTL )
     
    307312                                        if( depthChange != 0 ) {
    308313                                                ui.item.updateDepthClass( currentDepth );
    309314                                                children.shiftDepthClass( depthChange );
    310                                                 api.registerChange();
     315                                                updateMenuMaxDepth( depthChange );
    311316                                        }
     317                                        // Register a change
     318                                        api.registerChange();
    312319                                        // Update the item data.
    313320                                        ui.item.updateParentMenuItemDBId();
    314321
     
    321328                                                ui.item[0].style.right = 0;
    322329                                        }
    323330
     331                                        // The width of the tab bar might have changed. Just in case.
     332                                        api.refreshMenuTabs( true );
    324333                                },
    325334                                change: function(e, ui) {
    326335                                        // Make sure the placeholder is inside the menu.
     
    332341                                },
    333342                                sort: function(e, ui) {
    334343                                        var offset = ui.helper.offset(),
    335                                                 depth = api.negateIfRTL * api.pxToDepth( offset.left - menuLeft );
     344                                                edge = api.isRTL ? offset.left + ui.helper.width() : offset.left,
     345                                                depth = api.negateIfRTL * api.pxToDepth( edge - menuEdge );
    336346                                        // Check and correct if depth is not within range.
    337347                                        // Also, if the dragged element is dragged upwards over
    338348                                        // an item, shift the placeholder to a child position.
     
    348358                                                updateSharedVars( ui );
    349359                                                $(this).sortable( "refreshPositions" );
    350360                                        }
    351                                 },
    352                                 update: function(e, ui) {
    353                                         api.registerChange();
    354361                                }
    355362                        });
    356363
     
    378385                                ui.placeholder.updateDepthClass( depth, currentDepth );
    379386                                currentDepth = depth;
    380387                        }
     388
     389                        function initialMenuMaxDepth() {
     390                                if( ! body[0].className ) return 0;
     391                                var match = body[0].className.match(/menu-max-depth-(\d+)/);
     392                                return match && match[1] ? parseInt(match[1]) : 0;
     393                        }
     394
     395                        function updateMenuMaxDepth( depthChange ) {
     396                                var depth, newDepth = menuMaxDepth;
     397                                if ( depthChange === 0 ) {
     398                                        return;
     399                                } else if ( depthChange > 0 ) {
     400                                        depth = maxChildDepth + depthChange;
     401                                        if( depth > menuMaxDepth )
     402                                                newDepth = depth;
     403                                } else if ( depthChange < 0 && maxChildDepth == menuMaxDepth ) {
     404                                        while( ! $('.menu-item-depth-' + newDepth, api.menuList).length && newDepth > 0 )
     405                                                newDepth--;
     406                                }
     407                                // Update the depth class.
     408                                body.removeClass( 'menu-max-depth-' + menuMaxDepth ).addClass( 'menu-max-depth-' + newDepth );
     409                                menuMaxDepth = newDepth;
     410                        }
    381411                },
    382412
    383413                attachMenuEditListeners : function() {
     
    664694                                marginFixed = api.isRTL ? 'margin-left' : 'margin-right',
    665695                                msPerPx = 2;
    666696
    667                         function resetMenuTabs() {
     697                        /**
     698                         * Refreshes the menu tabs.
     699                         * Will show and hide arrows where necessary.
     700                         * Scrolls to the active tab by default.
     701                         *
     702                         * @param savePosition {boolean} Optional. Prevents scrolling so
     703                         *                that the current position is maintained. Default false.
     704                         **/
     705                        api.refreshMenuTabs = function( savePosition ) {
    668706                                var fixedWidth = fixed.width(),
    669707                                        margin = 0, css = {};
    670708                                fixedLeft = fixed.offset().left;
    671709                                fixedRight = fixedLeft + fixedWidth;
    672                                 active.makeTabVisible();
    673710
     711                                if( !savePosition )
     712                                        active.makeTabVisible();
     713
    674714                                // Prevent space from building up next to the last tab if there's more to show
    675715                                if( tabs.last().isTabVisible() ) {
    676716                                        margin = fixed.width() - tabsWidth;
     
    731771                        fixed.wrap('<div class="nav-tabs-nav"/>').parent().prepend( arrowLeft ).append( arrowRight );
    732772
    733773                        // Set the menu tabs
    734                         resetMenuTabs();
     774                        api.refreshMenuTabs();
    735775                        // Make sure the tabs reset on resize
    736776                        $(window).resize(function() {
    737777                                if( resizeTimer ) clearTimeout(resizeTimer);
    738                                 resizeTimer = setTimeout( resetMenuTabs, 200);
     778                                resizeTimer = setTimeout( api.refreshMenuTabs, 200);
    739779                        });
    740780
    741781                        // Build arrow functions
  • wp-admin/nav-menus.php

     
    430430        $nav_menus[$key]->truncated_name = $_nav_menu->truncated_name;
    431431}
    432432
     433// Ensure the user will be able to scroll horizontally
     434// by adding a class for the max menu depth.
     435global $_wp_nav_menu_max_depth;
     436$_wp_nav_menu_max_depth = 0;
     437
     438// Calling wp_get_nav_menu_to_edit generates $_wp_nav_menu_max_depth
     439if ( is_nav_menu( $nav_menu_selected_id ) )
     440        $edit_markup = wp_get_nav_menu_to_edit( $nav_menu_selected_id  );
     441
     442function wp_nav_menu_max_depth() {
     443        global $_wp_nav_menu_max_depth;
     444        return "menu-max-depth-$_wp_nav_menu_max_depth";
     445}
     446
     447add_action('admin_body_class','wp_nav_menu_max_depth');
     448
    433449wp_nav_menu_setup();
    434450wp_initial_nav_menu_meta_boxes();
    435451
     
    564580                                        <div id="post-body">
    565581                                                <div id="post-body-content">
    566582                                                        <?php
    567                                                         if ( is_nav_menu( $nav_menu_selected_id ) ) :
    568                                                                 $edit_markup = wp_get_nav_menu_to_edit( $nav_menu_selected_id  );
    569                                                                 if ( ! is_wp_error( $edit_markup ) ) :
     583                                                        if ( isset( $edit_markup ) ) {
     584                                                                if ( ! is_wp_error( $edit_markup ) )
    570585                                                                        echo $edit_markup;
    571                                                                 endif;
    572                                                         elseif ( empty( $nav_menu_selected_id ) ) :
     586                                                        } else if ( empty( $nav_menu_selected_id ) ) {
    573587                                                                echo '<div class="post-body-plain">';
    574588                                                                echo '<p>' . __('To create a custom menu, give it a name above and click Create Menu. Then choose items like pages, categories or custom links from the left column to add to this menu.') . '</p>';
    575589                                                                echo '<p>' . __('After you have added your items, drag and drop to put them in the order you want. You can also click each item to reveal additional configuration options.') . '</p>';
    576590                                                                echo '<p>' . __('When you have finished building your custom menu, make sure you click the Save Menu button.') . '</p>';
    577591                                                                echo '</div>';
    578                                                         endif;
     592                                                        }
    579593                                                        ?>
    580594                                                </div><!-- /#post-body-content -->
    581595                                        </div><!-- /#post-body -->
  • wp-admin/css/nav-menu-rtl.dev.css

     
    103103        padding-left: 0;
    104104}
    105105.menu-item-edit-active .menu-item-handle {
    106         -moz-border-radius: 6px 0 0 6px;
     106        -moz-border-radius: 6px 6px 0 0;
    107107        -webkit-border-bottom-left-radius: 0;
    108108        -webkit-border-bottom-right-radius: 0;
    109109        -khtml-border-bottom-left-radius: 0;
  • wp-admin/css/nav-menu.dev.css

     
    377377.menu-item-depth-10 .menu-item-transport { margin-left: -300px; }
    378378.menu-item-depth-11 .menu-item-transport { margin-left: -330px; }
    379379
     380body.menu-max-depth-0 { min-width: 950px !important; }
     381body.menu-max-depth-1 { min-width: 980px !important; }
     382body.menu-max-depth-2 { min-width: 1010px !important; }
     383body.menu-max-depth-3 { min-width: 1040px !important; }
     384body.menu-max-depth-4 { min-width: 1070px !important; }
     385body.menu-max-depth-5 { min-width: 1100px !important; }
     386body.menu-max-depth-6 { min-width: 1130px !important; }
     387body.menu-max-depth-7 { min-width: 1160px !important; }
     388body.menu-max-depth-8 { min-width: 1190px !important; }
     389body.menu-max-depth-9 { min-width: 1220px !important; }
     390body.menu-max-depth-10 { min-width: 1250px !important; }
     391body.menu-max-depth-11 { min-width: 1280px !important; }
     392
    380393/* Menu item controls */
    381394.item-type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right: 10px; }
    382395.item-controls { font-size: 11px; position: absolute; right: 20px; top: -1px; }