WordPress.org

Make WordPress Core

Ticket #13525: 13525.tabs.diff

File 13525.tabs.diff, 5.4 KB (added by koopersmith, 5 years ago)
  • wp-admin/js/nav-menu.dev.js

     
    2323                targetList : undefined, // Set in init. 
    2424                menusChanged : false, 
    2525                isRTL: !! ( 'undefined' != typeof isRtl && isRtl ), 
     26                negateIfRTL: ( 'undefined' != typeof isRtl && isRtl ) ? -1 : 1, 
    2627 
    2728                // Functions that run on init. 
    2829                init : function() { 
     
    331332                                }, 
    332333                                sort: function(e, ui) { 
    333334                                        var offset = ui.helper.offset(), 
    334                                                 depth = ( api.isRTL ? -1 : 1 ) * api.pxToDepth( offset.left - menuLeft ); 
     335                                                depth = api.negateIfRTL * api.pxToDepth( offset.left - menuLeft ); 
    335336                                        // Check and correct if depth is not within range. 
    336337                                        // Also, if the dragged element is dragged upwards over 
    337338                                        // an item, shift the placeholder to a child position. 
     
    658659                                tabs = fluid.children('.nav-tab'), 
    659660                                tabsWidth = 0, 
    660661                                fixedRight, fixedLeft, 
    661                                 arrowLeft, arrowRight, 
    662                                 resizing = false; 
     662                                arrowLeft, arrowRight, resizeTimer, css = {}, 
     663                                marginFluid = api.isRTL ? 'margin-right' : 'margin-left', 
     664                                marginFixed = api.isRTL ? 'margin-left' : 'margin-right', 
     665                                msPerPx = 2; 
    663666 
    664667                        function resetMenuTabs() { 
     668                                var fixedWidth = fixed.width(), 
     669                                        margin = 0, css = {}; 
    665670                                fixedLeft = fixed.offset().left; 
    666                                 fixedRight = fixedLeft + fixed.width(); 
     671                                fixedRight = fixedLeft + fixedWidth; 
    667672                                active.makeTabVisible(); 
     673                                 
     674                                // Prevent space from building up next to the last tab if there's more to show 
     675                                if( tabs.last().isTabVisible() ) { 
     676                                        margin = fixed.width() - tabsWidth; 
     677                                        margin = margin > 0 ? 0 : margin; 
     678                                        css[marginFluid] = margin + 'px'; 
     679                                        fluid.animate( css, 100, "linear" ); 
     680                                } 
     681 
     682                                // Show the arrows only when necessary 
     683                                if( fixedWidth > tabsWidth ) 
     684                                        arrowLeft.add( arrowRight ).hide(); 
     685                                else 
     686                                        arrowLeft.add( arrowRight ).show(); 
    668687                        } 
    669688 
    670689                        $.fn.extend({ 
    671690                                makeTabVisible : function() { 
    672                                         var t = this.eq(0), left, right; 
    673                                         if( ! t.length ) return; 
     691                                        var t = this.eq(0), left, right, css = {}, shift = 0; 
     692 
     693                                        if( ! t.length ) return this; 
     694 
    674695                                        left = t.offset().left; 
    675696                                        right = left + t.outerWidth(); 
     697 
    676698                                        if( right > fixedRight ) 
    677                                                 fluid.animate({ 'margin-left' :  "+=" + (fixedRight - right) + 'px' }, 'fast'); 
     699                                                shift = fixedRight - right; 
    678700                                        else if ( left < fixedLeft ) 
    679                                                 fluid.animate({ 'margin-left' :  "-=" + (left - fixedLeft) + 'px' }, 'fast'); 
    680                                         return t; 
     701                                                shift = fixedLeft - left; 
     702 
     703                                        if( ! shift ) return this; 
     704 
     705                                        css[marginFluid] = "+=" + api.negateIfRTL * shift + 'px'; 
     706                                        fluid.animate( css, Math.abs( shift ) * msPerPx, "linear" ); 
     707                                        return this; 
    681708                                }, 
    682709                                isTabVisible : function() { 
    683710                                        var t = this.eq(0), 
     
    692719                                tabsWidth += $(this).outerWidth(true); 
    693720                        }); 
    694721 
    695                         // Check if we need the tab manager 
    696                         if( tabsWidth <= fixed.width() 
    697                                 - fluid.css('padding-left').slice(0,-2) 
    698                                 - fluid.css('padding-right').slice(0,-2) ) 
    699                                 return; 
     722                        // Set up fixed margin for overflow, unset padding 
     723                        css['padding'] = 0; 
     724                        css[marginFixed] = (-1 * tabsWidth) + 'px'; 
     725                        fluid.css( css ); 
    700726 
    701                         // Set up right margin for overflow, unset padding 
    702                         fluid.css({ 
    703                                 'margin-right'  : (-1 * tabsWidth) + 'px', 
    704                                 'padding' : 0 
    705                         }); 
    706  
    707727                        // Build tab navigation 
    708728                        arrowLeft = $('<div class="nav-tabs-arrow nav-tabs-arrow-left"><a>&laquo;</a></div>'); 
    709729                        arrowRight = $('<div class="nav-tabs-arrow nav-tabs-arrow-right"><a>&raquo;</a></div>'); 
     
    714734                        resetMenuTabs(); 
    715735                        // Make sure the tabs reset on resize 
    716736                        $(window).resize(function() { 
    717                                 if( resizing ) return; 
    718                                 resizing = true; 
    719                                 setTimeout(function(){ 
    720                                         resetMenuTabs(); 
    721                                         resizing = false; 
    722                                 }, 1000); 
     737                                if( resizeTimer ) clearTimeout(resizeTimer); 
     738                                resizeTimer = setTimeout( resetMenuTabs, 200); 
    723739                        }); 
    724740 
    725741                        // Build arrow functions 
     
    736752                                }], function(){ 
    737753                                var that = this; 
    738754                                this.arrow.mousedown(function(){ 
    739                                         var last = tabs[that.last](), 
    740                                                 fn = function() { 
    741                                                         if( ! last.isTabVisible() ) 
    742                                                                 fluid.animate({ 'margin-left' :  that.operator + '90px' }, 300, "linear", fn); 
    743                                                 }; 
    744                                                 fn(); 
     755                                        var marginFluidVal = Math.abs( parseInt( fluid.css(marginFluid) ) ), 
     756                                                shift = marginFluidVal, 
     757                                                css = {}; 
     758 
     759                                        if( "-=" == that.operator ) 
     760                                                shift = Math.abs( tabsWidth - fixed.width() ) - marginFluidVal; 
     761 
     762                                        if( ! shift ) return; 
     763 
     764                                        css[marginFluid] = that.operator + shift + 'px'; 
     765                                        fluid.animate( css, shift * msPerPx, "linear" ); 
    745766                                }).mouseup(function(){ 
    746767                                        var tab, next; 
    747768                                        fluid.stop(true); 
  • wp-admin/css/nav-menu-rtl.dev.css

     
    4040        } 
    4141 
    4242#menu-management .nav-tabs { 
    43         padding-right: 30px; 
     43        padding-right: 20px; 
    4444        padding-left: 10px; 
    4545} 
    4646.js #menu-management .nav-tabs { 
  • wp-admin/css/nav-menu.dev.css

     
    140140} 
    141141 
    142142#menu-management .nav-tabs { 
    143         padding-left: 30px; 
     143        padding-left: 20px; 
    144144        padding-right: 10px; 
    145145} 
    146146.js #menu-management .nav-tabs {