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, 4 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; }