WordPress.org
Get WordPress

Make WordPress Core

Ticket #13215: 13215.js.1.patch

File 13215.js.1.patch, 7.2 KB (added by koopersmith, 16 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; }