WordPress.org

Make WordPress Core

Ticket #13525: 13525.tabs.diff

File 13525.tabs.diff, 5.4 KB (added by koopersmith, 8 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 {