Ticket #3691: tabs-class-options.patch

File tabs-class-options.patch, 12.7 KB (added by Scott González, 11 years ago)
  • Users/sgonzale/Documents/workspace/jQuery

     
    1111        cache: false,
    1212        cookie: null,
    1313        deselectable: false,
    14         deselectableClass: 'ui-tabs-deselectable',
    1514        disabled: [],
    16         disabledClass: 'ui-state-disabled',
    1715        event: 'click',
    1816        fx: null,
    19         hideClass: 'ui-tabs-hide',
    2017        idPrefix: 'ui-tabs-',
    21         loadingClass: 'ui-tabs-loading',
    22         navClass: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all',
    23         panelClass: 'ui-tabs-panel ui-widget-content ui-corner-bottom',
    2418        panelTemplate: '<div></div>',
    25         selectedClass: 'ui-tabs-selected ui-state-active',
    2619        spinner: 'Loading&#8230;',
    2720        tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'
    2821};
  • Users/sgonzale/Documents/workspace/jQuery

     
    2222        destroy: function() {
    2323                var o = this.options;
    2424                this.list.unbind('.tabs')
    25                         .removeClass(o.navClass).removeData('tabs');
     25                        .removeClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all').removeData('tabs');
    2626                this.$tabs.each(function() {
    2727                        var href = $.data(this, 'href.tabs');
    2828                        if (href)
     
    3636                        if ($.data(this, 'destroy.tabs'))
    3737                                $(this).remove();
    3838                        else
    39                                 $(this).removeClass([o.tabClass, o.selectedClass, o.deselectableClass,
    40                                         o.disabledClass, o.panelClass, o.hideClass].join(' '));
     39                                $(this).removeClass(
     40                                        'ui-state-default ' +
     41                                        'ui-corner-top ' +
     42                                        'ui-tabs-selected ' +
     43                                        'ui-state-active ' +
     44                                        'ui-tabs-deselectable ' +
     45                                        'ui-state-disabled ' +
     46                                        'ui-tabs-panel ' +
     47                                        'ui-widget-content ' +
     48                                        'ui-corner-bottom ' +
     49                                        'ui-tabs-hide');
    4150                });
    4251                if (o.cookie)
    4352                        this._cookie(null, o.cookie);
     
    91100                                a.href = '#' + id;
    92101                                var $panel = $('#' + id);
    93102                                if (!$panel.length) {
    94                                         $panel = $(o.panelTemplate).attr('id', id).addClass(o.panelClass)
     103                                        $panel = $(o.panelTemplate).attr('id', id).addClass('ui-tabs-panel ui-widget-content ui-corner-bottom')
    95104                                                .insertAfter(self.$panels[i - 1] || self.list);
    96105                                        $panel.data('destroy.tabs', true);
    97106                                }
     
    110119                            // TODO replace hardcoded class names
    111120                            this.element.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all');
    112121                        }
    113                         this.list.addClass(o.navClass);
    114                         this.$lis.addClass(o.tabClass);
    115                         this.$panels.addClass(o.panelClass);
     122                        this.list.addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
     123                        this.$lis.addClass('ui-state-default ui-corner-top');
     124                        this.$panels.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom');
    116125
    117126                        // Selected tab
    118127                        // use "selected" option or try to retrieve:
     
    132141                                        var index = parseInt(self._cookie(), 10);
    133142                                        if (index && self.$tabs[index]) o.selected = index;
    134143                                }
    135                                 else if (self.$lis.filter('.' + o.selectedClass).length)
    136                                         o.selected = self.$lis.index( self.$lis.filter('.' + o.selectedClass)[0] );
     144                                else if (self.$lis.filter('.ui-tabs-selected').length)
     145                                        o.selected = self.$lis.index( self.$lis.filter('.ui-tabs-selected')[0] );
    137146                        }
    138147                        o.selected = o.selected === null || o.selected !== undefined ? o.selected : 0; // first tab selected by default
    139148
     
    141150                        // into account and update option properly.
    142151                        // A selected tab cannot become disabled.
    143152                        o.disabled = $.unique(o.disabled.concat(
    144                                 $.map(this.$lis.filter('.' + o.disabledClass),
     153                                $.map(this.$lis.filter('.ui-state-disabled'),
    145154                                        function(n, i) { return self.$lis.index(n); } )
    146155                        )).sort();
    147156                        if ($.inArray(o.selected, o.disabled) != -1)
     
    148157                                o.disabled.splice($.inArray(o.selected, o.disabled), 1);
    149158
    150159                        // highlight selected tab
    151                         this.$panels.addClass(o.hideClass);
    152                         this.$lis.removeClass(o.selectedClass);
     160                        this.$panels.addClass('ui-tabs-hide');
     161                        this.$lis.removeClass('ui-tabs-selected ui-state-active');
    153162                        if (o.selected !== null && this.$tabs.length) { // check for length avoids error when initializing empty list
    154                                 this.$panels.eq(o.selected).removeClass(o.hideClass);
    155                                 var classes = [o.selectedClass];
    156                                 if (o.deselectable) classes.push(o.deselectableClass);
     163                                this.$panels.eq(o.selected).removeClass('ui-tabs-hide');
     164                                var classes = ['ui-tabs-selected ui-state-active'];
     165                                if (o.deselectable) classes.push('ui-tabs-deselectable');
    157166                                this.$lis.eq(o.selected).addClass(classes.join(' '));
    158167
    159168                                // seems to be expected behavior that the show callback is fired
     
    171180                       
    172181                        // states
    173182                        var handleState = function(state, el) {
    174                             if (el.is(':not(.' + o.disabledClass + ')')) el.toggleClass('ui-state-' + state);
     183                            if (el.is(':not(.ui-state-disabled)')) el.toggleClass('ui-state-' + state);
    175184                        };             
    176185                        this.$lis.bind('mouseover.tabs mouseout.tabs', function() {
    177186                            handleState('hover', $(this));
     
    189198                }
    190199                // update selected after add/remove
    191200                else
    192                         o.selected = this.$lis.index( this.$lis.filter('.' + o.selectedClass)[0] );
     201                        o.selected = this.$lis.index( this.$lis.filter('.ui-tabs-selected')[0] );
    193202
    194203                // set or update cookie after init and add/remove respectively
    195204                if (o.cookie) this._cookie(o.selected, o.cookie);
     
    196205
    197206                // disable tabs
    198207                for (var i = 0, li; li = this.$lis[i]; i++)
    199                         $(li)[$.inArray(i, o.disabled) != -1 && !$(li).hasClass(o.selectedClass) ? 'addClass' : 'removeClass'](o.disabledClass);
     208                        $(li)[$.inArray(i, o.disabled) != -1 && !$(li).hasClass('ui-tabs-selected') ? 'addClass' : 'removeClass']('ui-state-disabled');
    200209
    201210                // reset cache if switching from cached to not cached
    202211                if (o.cache === false) this.$tabs.removeData('cache.tabs');
     
    222231                var showTab = showFx ?
    223232                        function(clicked, $show) {
    224233                                $show.animate(showFx, showFx.duration || 'normal', function() {
    225                                         $show.removeClass(o.hideClass);
     234                                        $show.removeClass('ui-tabs-hide');
    226235                                        resetStyle($show, showFx);
    227236                                        self._trigger('show', null, self.ui(clicked, $show[0]));
    228237                                });
     
    228237                                });
    229238                        } :
    230239                        function(clicked, $show) {
    231                                 $show.removeClass(o.hideClass);
     240                                $show.removeClass('ui-tabs-hide');
    232241                                self._trigger('show', null, self.ui(clicked, $show[0]));
    233242                        };
    234243
     
    236245                var hideTab = hideFx ?
    237246                        function(clicked, $hide, $show) {
    238247                                $hide.animate(hideFx, hideFx.duration || 'normal', function() {
    239                                         $hide.addClass(o.hideClass);
     248                                        $hide.addClass('ui-tabs-hide');
    240249                                        resetStyle($hide, hideFx);
    241250                                        if ($show) showTab(clicked, $show, $hide);
    242251                                });
     
    242251                                });
    243252                        } :
    244253                        function(clicked, $hide, $show) {
    245                                 $hide.addClass(o.hideClass);
     254                                $hide.addClass('ui-tabs-hide');
    246255                                if ($show) showTab(clicked, $show);
    247256                        };
    248257
     
    248257
    249258                // Switch a tab...
    250259                function switchTab(clicked, $li, $hide, $show) {
    251                         var classes = [o.selectedClass];
    252                         if (o.deselectable) classes.push(o.deselectableClass);
     260                        var classes = ['ui-tabs-selected ui-state-active'];
     261                        if (o.deselectable) classes.push('ui-tabs-deselectable');
    253262                        // TODO replace hardcoded class names
    254263                        $li.removeClass('ui-state-default').addClass(classes.join(' '))
    255264                            .siblings().removeClass(classes.join(' ')).addClass('ui-state-default');
     
    270279                        // for a disabled or loading tab!
    271280                        // TODO replace hardcoded class names
    272281                        if (($li.hasClass('ui-state-active') && !o.deselectable)
    273                                 || $li.hasClass(o.disabledClass)
    274                                 || $(this).hasClass(o.loadingClass)
     282                                || $li.hasClass('ui-state-disabled')
     283                                || $(this).hasClass('ui-tabs-loading')
    275284                                || self._trigger('select', null, self.ui(this, $show[0])) === false
    276285                                ) {
    277286                                this.blur();
     
    285294                        if (o.deselectable) {
    286295                                if ($li.hasClass('ui-state-active')) {
    287296                                        self.options.selected = null;
    288                                         $li.removeClass([o.selectedClass, o.deselectableClass].join(' ')).
    289                                             addClass('ui-state-default');
     297                                        $li.removeClass('ui-tabs-selected ui-state-active ui-tabs-deselectable')
     298                                            .addClass('ui-state-default');
    290299                                        self.$panels.stop();
    291300                                        hideTab(this, $hide);
    292301                                        this.blur();
     
    295304                                        self.$panels.stop();
    296305                                        var a = this;
    297306                                        self.load(self.$tabs.index(this), function() {
    298                                                 $li.addClass([o.selectedClass, o.deselectableClass].join(' '))
     307                                                $li.addClass('ui-tabs-selected ui-state-active ui-tabs-deselectable')
    299308                                                    .removeClass('ui-state-default');
    300309                                                showTab(a, $show);
    301310                                        });
     
    317326                                                switchTab(a, $li, $hide, $show);
    318327                                        } :
    319328                                        function() {
    320                                                 $li.addClass(o.selectedClass).removeClass('ui-state-default');
     329                                                $li.addClass('ui-tabs-selected ui-state-active').removeClass('ui-state-default');
    321330                                                showTab(a, $show);
    322331                                        }
    323332                                );
     
    345354
    346355                var self = this, o = this.options;
    347356                var $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label));
    348                 $li.addClass(o.tabClass).data('destroy.tabs', true);
     357                $li.addClass('ui-state-default ui-corner-top').data('destroy.tabs', true);
    349358
    350359                var id = url.indexOf('#') == 0 ? url.replace('#', '') : this._tabId( $('a:first-child', $li)[0] );
    351360
     
    353362                var $panel = $('#' + id);
    354363                if (!$panel.length) {
    355364                        $panel = $(o.panelTemplate).attr('id', id)
    356                                 .addClass(o.hideClass)
     365                                .addClass('ui-tabs-hide')
    357366                                .data('destroy.tabs', true);
    358367                }
    359                 $panel.addClass(o.panelClass);
     368                $panel.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom');
    360369                if (index >= this.$lis.length) {
    361370                        $li.appendTo(this.list);
    362371                        $panel.appendTo(this.list[0].parentNode);
     
    372381                this._tabify();
    373382
    374383                if (this.$tabs.length == 1) { // after tabify
    375                         $li.addClass(o.selectedClass);
    376                         $panel.removeClass(o.hideClass);
     384                        $li.addClass('ui-tabs-selected ui-state-active');
     385                        $panel.removeClass('ui-tabs-hide');
    377386                        var href = $.data(this.$tabs[0], 'load.tabs');
    378387                        if (href) this.load(0, function() {
    379388                            self._trigger('show', null,
     
    391400
    392401                // If selected tab was removed focus tab to the right or
    393402                // in case the last tab was removed the tab to the left.
    394                 if ($li.hasClass(o.selectedClass) && this.$tabs.length > 1)
     403                if ($li.hasClass('ui-tabs-selected') && this.$tabs.length > 1)
    395404                        this.select(index + (index + 1 < this.$tabs.length ? 1 : -1));
    396405
    397406                o.disabled = $.map($.grep(o.disabled, function(n, i) { return n != index; }),
     
    408417                if ($.inArray(index, o.disabled) == -1)
    409418                        return;
    410419
    411                 var $li = this.$lis.eq(index).removeClass(o.disabledClass);
     420                var $li = this.$lis.eq(index).removeClass('ui-state-disabled');
    412421                if ($.browser.safari) { // fix disappearing tab (that used opacity indicating disabling) after enabling in Safari 2...
    413422                        $li.css('display', 'inline-block');
    414423                        setTimeout(function() {
     
    425434        disable: function(index) {
    426435                var self = this, o = this.options;
    427436                if (index != o.selected) { // cannot disable already selected tab
    428                         this.$lis.eq(index).addClass(o.disabledClass);
     437                        this.$lis.eq(index).addClass('ui-state-disabled');
    429438
    430439                        o.disabled.push(index);
    431440                        o.disabled.sort();
     
    462471                        return $inner.length && $inner.is(':not(img)') && $inner || $parent;
    463472                };
    464473                var cleanup = function() {
    465                         self.$tabs.filter('.' + o.loadingClass).removeClass(o.loadingClass)
     474                        self.$tabs.filter('.ui-tabs-loading').removeClass('ui-tabs-loading')
    466475                                        .each(function() {
    467476                                                if (o.spinner)
    468477                                                        inner(this).parent().html(inner(this).data('label.tabs'));
     
    503512                        this.xhr.abort();
    504513                        cleanup();
    505514                }
    506                 $a.addClass(o.loadingClass);
     515                $a.addClass('ui-tabs-loading');
    507516                self.xhr = $.ajax(ajaxOptions);
    508517        },
    509518
     
    530539                cache: false,
    531540                cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
    532541                deselectable: false,
    533                 deselectableClass: 'ui-tabs-deselectable',
    534542                disabled: [],
    535                 disabledClass: 'ui-state-disabled',
    536543                event: 'click',
    537544                fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
    538                 hideClass: 'ui-tabs-hide',
    539545                idPrefix: 'ui-tabs-',
    540                 loadingClass: 'ui-tabs-loading',
    541                 navClass: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all',
    542                 tabClass: 'ui-state-default ui-corner-top',
    543                 panelClass: 'ui-tabs-panel ui-widget-content ui-corner-bottom',
    544546                panelTemplate: '<div></div>',
    545                 selectedClass: 'ui-tabs-selected ui-state-active',
    546547                spinner: 'Loading&#8230;',
    547548                tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>'
    548549        }