WordPress.org

Make WordPress Core

Ticket #13215: 13215.js.1.patch

File 13215.js.1.patch, 7.2 KB (added by koopersmith, 8 years ago)
  • wp-admin/js/nav-menu.dev.js

     
    164164                                this.initSortables(); 
    165165 
    166166                        this.initToggles(); 
     167                         
     168                        this.initTabManager(); 
    167169                }, 
    168170                 
    169171                initToggles : function() { 
     
    388390                                } 
    389391                        }); 
    390392                }, 
     393                 
     394                initTabManager : function() { 
     395                        var fixed = $('.nav-tabs-wrapper'), 
     396                                fluid = fixed.children('.nav-tabs'), 
     397                                active = fluid.children('.nav-tab-active'), 
     398                                tabs = fluid.children('.nav-tab'), 
     399                                tabsWidth = 0, 
     400                                fixedRight, fixedLeft, 
     401                                arrowLeft, arrowRight 
     402                                resizing = false; 
     403                         
     404                        function resetMenuTabs() { 
     405                                fixedLeft = fixed.offset().left; 
     406                                fixedRight = fixedLeft + fixed.width(); 
     407                                active.makeTabVisible(); 
     408                        } 
     409                         
     410                        $.fn.extend({ 
     411                                makeTabVisible : function() { 
     412                                        var t = this.eq(0), 
     413                                                left = t.offset().left, 
     414                                                right = left + t.outerWidth(); 
     415                                        if( right > fixedRight ) 
     416                                                fluid.animate({ 'margin-left' :  "+=" + (fixedRight - right) + 'px', }, 'fast'); 
     417                                        else if ( left < fixedLeft ) 
     418                                                fluid.animate({ 'margin-left' :  "-=" + (left - fixedLeft) + 'px', }, 'fast'); 
     419                                        return t; 
     420                                }, 
     421                                isTabVisible : function() { 
     422                                        var t = this.eq(0), 
     423                                                left = t.offset().left, 
     424                                                right = left + t.outerWidth(); 
     425                                        return ( right <= fixedRight && left >= fixedLeft ) ? true : false; 
     426                                } 
     427                        }); 
     428                         
     429                        // Build tab navigation 
     430                        arrowLeft = $('<div class="nav-tabs-arrow nav-tabs-arrow-left"><a>&laquo;</a></div>'); 
     431                        arrowRight = $('<div class="nav-tabs-arrow nav-tabs-arrow-right"><a>&raquo;</a></div>'); 
     432                        // Attach to the document 
     433                        fixed.wrap('<div class="nav-tabs-nav"/>').parent().prepend( arrowLeft ).append( arrowRight ); 
     434                         
     435                        // Set up right margin 
     436                        tabs.each(function(){ 
     437                                tabsWidth += $(this).outerWidth(true); 
     438                        }); 
     439                        fluid.css('margin-right', (-1 * tabsWidth) + 'px'); 
     440                         
     441                        // Set the menu tabs 
     442                        resetMenuTabs(); 
     443                        // Make sure the tabs reset on resize 
     444                        $(window).resize(function() { 
     445                                if( resizing ) return; 
     446                                resizing = true; 
     447                                setTimeout(function(){  
     448                                        resetMenuTabs(); 
     449                                        resizing = false; 
     450                                }, 1000); 
     451                        }); 
     452                         
     453                        // Build arrow functions                         
     454                        $.each([{ 
     455                                        arrow : arrowLeft, 
     456                                        next : "next", 
     457                                        last : "first", 
     458                                        operator : "+=", 
     459                                },{ 
     460                                        arrow : arrowRight, 
     461                                        next : "prev", 
     462                                        last : "last", 
     463                                        operator : "-=", 
     464                                }], function(){ 
     465                                var that = this; 
     466                                this.arrow.mousedown(function(){ 
     467                                        var last = tabs[that.last](), 
     468                                                fn = function() { 
     469                                                        if( ! last.isTabVisible() ) 
     470                                                                fluid.animate({ 'margin-left' :  that.operator + '90px', }, 300, "linear", fn); 
     471                                                }; 
     472                                                fn(); 
     473                                }).mouseup(function(){ 
     474                                        var tab, next; 
     475                                        fluid.stop(true); 
     476                                        tab = tabs[that.last](); 
     477                                        while( (next = tab[that.next]()) && next.length && ! next.isTabVisible() ) { 
     478                                                tab = next; 
     479                                        } 
     480                                        tab.makeTabVisible(); 
     481                                }); 
     482                        }); 
     483                }, 
    391484 
    392485                /** 
    393486                 * Set up quick-search input fields' events. 
  • wp-admin/nav-menus.php

     
    362362                                        <input class="button-secondary" name="select_menu" type="submit" value="<?php esc_attr_e('Select'); ?>" /> 
    363363                                </form> 
    364364                        </div> 
     365                        <div class="nav-tabs-wrapper"> 
    365366                        <div class="nav-tabs"> 
    366367                                <?php  
    367368                                foreach( (array) $nav_menus as $_nav_menu ) : 
     
    394395                                                echo ' nav-tab-active'; 
    395396                                ?>"><?php printf( '<abbr title="%s">+</abbr>', esc_html__( 'Add menu' ) ); ?></a> 
    396397                        </div> 
     398                        </div> 
    397399                        <div class="menu-edit"> 
    398400                                <form id="update-nav-menu" action="<?php echo admin_url( 'nav-menus.php' ); ?>" method="post" enctype="multipart/form-data"> 
    399401                                        <div id="nav-menu-header"> 
  • wp-admin/css/nav-menu.dev.css

     
    88 * @subpackage Administration 
    99 */ 
    1010 
     11/*html, 
     12body { 
     13        min-width: 950px; 
     14}*/ 
     15 
    1116#nav-menus-frame { 
    1217        margin-left: 300px; 
    1318} 
     
    95100                font-weight:bold; 
    96101        } 
    97102         
    98         #menu-management .nav-tabs { 
    99                 padding-left: 30px; 
    100                 clear: both; 
    101         } 
     103/* Menu Tabs */ 
     104         
     105#menu-management .nav-tabs-nav { 
     106        margin: 0 20px; 
     107} 
    102108 
    103         #menu-management .nav-tab { 
    104                 background: #f4f4f4; 
    105                 font-weight: bold; 
    106                 border-color: #dfdfdf; 
     109#menu-management .nav-tabs-arrow { 
     110        width: 10px; 
     111        padding: 0 5px 4px; 
     112        cursor: pointer; 
     113        position: absolute; 
     114        top: 0; 
     115        line-height: 22px; 
     116        font-size: 18px; 
     117        text-shadow: 0 1px 0 #fff; 
     118} 
     119        #menu-management .nav-tabs-arrow a { color: #C1C1C1; } 
     120        #menu-management .nav-tabs-arrow a:hover { color: #D54E21; } 
     121        #menu-management .nav-tabs-arrow a:active { color: #464646; } 
     122        #menu-management .nav-tabs-arrow-left { 
     123                left: 0; 
    107124        } 
    108          
    109         #menu-management .nav-tab-active { 
    110                 background: #ececec; 
    111                 border-color:#ccc; 
    112                 border-bottom-color: #ececec; 
    113         } 
    114          
    115         #select-nav-menu-container { 
     125        #menu-management .nav-tabs-arrow-right { 
     126                right: 0; 
    116127                text-align: right; 
    117                 padding: 0 10px 3px 10px; 
    118                 margin-bottom: 5px; 
    119         }        
    120                 #select-nav-menu { 
    121                         width: 100px; 
    122                         display: inline; 
    123                 } 
    124          
    125         #menu-management #major-publishing-actions #delete-action { 
    126                 float: right; 
    127                 margin-right: 10px; 
    128128        } 
    129          
    130         #menu-name-label { 
    131                 margin-top: -2px; 
     129 
     130 
     131#menu-management .nav-tabs-wrapper { 
     132        width: 100%; 
     133        height: 28px; 
     134        margin-bottom: -1px; 
     135        overflow: hidden; 
     136} 
     137 
     138.no-js #menu-management .nav-tabs { 
     139        padding-left: 30px; 
     140        clear: both; 
     141} 
     142.js #menu-management .nav-tabs { 
     143        float: left; 
     144        margin-left: 0px; 
     145        margin-right: -400px; 
     146} 
     147 
     148#menu-management .nav-tab { 
     149        margin-bottom: 0; 
     150        background: #f4f4f4; 
     151        font-weight: bold; 
     152        border-color: #dfdfdf; 
     153} 
     154 
     155#menu-management .nav-tab-active { 
     156        background: #ececec; 
     157        border-color:#ccc; 
     158        border-bottom-color: #ececec; 
     159} 
     160 
     161#select-nav-menu-container { 
     162        text-align: right; 
     163        padding: 0 10px 3px 10px; 
     164        margin-bottom: 5px; 
     165}        
     166        #select-nav-menu { 
     167                width: 100px; 
     168                display: inline; 
    132169        } 
    133170         
    134         #wpbody .open-label { 
    135                 display: inline-block; 
    136         } 
    137         #wpbody .open-label span { 
    138                 padding-right: 10px; 
    139         } 
     171/* Menu Toolbar */ 
     172#menu-management #major-publishing-actions #delete-action { 
     173        float: right; 
     174        margin-right: 10px; 
     175} 
     176 
     177#menu-name-label { 
     178        margin-top: -2px; 
     179} 
     180 
     181#wpbody .open-label { 
     182        display: inline-block; 
     183} 
     184#wpbody .open-label span { 
     185        padding-right: 10px; 
     186} 
    140187         
    141188        .js .input-with-default-title { 
    142189                color: #aaa; 
     
    455502 
    456503 
    457504/* Clearfix */ 
    458 .menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
    459 .menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; } 
     505#nav-menus-frame:after, .menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
     506#nav-menus-frame, .menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; }