diff options
author | nikrou <nikrou@piwigo.org> | 2010-02-20 19:56:36 +0000 |
---|---|---|
committer | nikrou <nikrou@piwigo.org> | 2010-02-20 19:56:36 +0000 |
commit | 6acc3ff7909dd7f070973c112ebd9291862982f8 (patch) | |
tree | 20a0875d668206917f88b73983d7021038b43170 /template-common/lib/ui/ui.tabs.js | |
parent | 0c4bdbe01325869a62380c1d2804c34e8a31c1dd (diff) |
Feature 1442 : update jquery
* update jquery to 1.4.1
* update jquery ui to 1.7.2
git-svn-id: http://piwigo.org/svn/trunk@4918 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'template-common/lib/ui/ui.tabs.js')
-rw-r--r-- | template-common/lib/ui/ui.tabs.js | 864 |
1 files changed, 475 insertions, 389 deletions
diff --git a/template-common/lib/ui/ui.tabs.js b/template-common/lib/ui/ui.tabs.js index a7099d0be..d914b3e4f 100644 --- a/template-common/lib/ui/ui.tabs.js +++ b/template-common/lib/ui/ui.tabs.js @@ -1,7 +1,7 @@ /* - * jQuery UI Tabs + * jQuery UI Tabs 1.7.2 * - * Copyright (c) 2007, 2008 Klaus Hartl (stilbuero.de) + * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * @@ -13,74 +13,125 @@ (function($) { $.widget("ui.tabs", { - init: function() { - this.options.event += '.tabs'; // namespace event - - // create tabs - this.tabify(true); + + _init: function() { + if (this.options.deselectable !== undefined) { + this.options.collapsible = this.options.deselectable; + } + this._tabify(true); }, - setData: function(key, value) { - if ((/^selected/).test(key)) + + _setData: function(key, value) { + if (key == 'selected') { + if (this.options.collapsible && value == this.options.selected) { + return; + } this.select(value); + } else { this.options[key] = value; - this.tabify(); + if (key == 'deselectable') { + this.options.collapsible = value; + } + this._tabify(); } }, - length: function() { - return this.$tabs.length; + + _tabId: function(a) { + return a.title && a.title.replace(/\s/g, '_').replace(/[^A-Za-z0-9\-_:\.]/g, '') || + this.options.idPrefix + $.data(a); }, - tabId: function(a) { - return a.title && a.title.replace(/\s/g, '_').replace(/[^A-Za-z0-9\-_:\.]/g, '') - || this.options.idPrefix + $.data(a); + + _sanitizeSelector: function(hash) { + return hash.replace(/:/g, '\\:'); // we need this because an id may contain a ":" + }, + + _cookie: function() { + var cookie = this.cookie || (this.cookie = this.options.cookie.name || 'ui-tabs-' + $.data(this.list[0])); + return $.cookie.apply(null, [cookie].concat($.makeArray(arguments))); }, - ui: function(tab, panel) { + + _ui: function(tab, panel) { return { - options: this.options, tab: tab, panel: panel, - index: this.$tabs.index(tab) + index: this.anchors.index(tab) }; }, - tabify: function(init) { - this.$lis = $('li:has(a[href])', this.element); - this.$tabs = this.$lis.map(function() { return $('a', this)[0]; }); - this.$panels = $([]); + _cleanup: function() { + // restore all former loading tabs labels + this.lis.filter('.ui-state-processing').removeClass('ui-state-processing') + .find('span:data(label.tabs)') + .each(function() { + var el = $(this); + el.html(el.data('label.tabs')).removeData('label.tabs'); + }); + }, + + _tabify: function(init) { + + this.list = this.element.children('ul:first'); + this.lis = $('li:has(a[href])', this.list); + this.anchors = this.lis.map(function() { return $('a', this)[0]; }); + this.panels = $([]); var self = this, o = this.options; - this.$tabs.each(function(i, a) { + var fragmentId = /^#.+/; // Safari 2 reports '#' for an empty hash + this.anchors.each(function(i, a) { + var href = $(a).attr('href'); + + // For dynamically created HTML that contains a hash as href IE < 8 expands + // such href to the full page url with hash and then misinterprets tab as ajax. + // Same consideration applies for an added tab with a fragment identifier + // since a[href=#fragment-identifier] does unexpectedly not match. + // Thus normalize href attribute... + var hrefBase = href.split('#')[0], baseEl; + if (hrefBase && (hrefBase === location.toString().split('#')[0] || + (baseEl = $('base')[0]) && hrefBase === baseEl.href)) { + href = a.hash; + a.href = href; + } + // inline tab - if (a.hash && a.hash.replace('#', '')) // Safari 2 reports '#' for an empty hash - self.$panels = self.$panels.add(a.hash); + if (fragmentId.test(href)) { + self.panels = self.panels.add(self._sanitizeSelector(href)); + } + // remote tab - else if ($(a).attr('href') != '#') { // prevent loading the page itself if href is just "#" - $.data(a, 'href.tabs', a.href); // required for restore on destroy - $.data(a, 'load.tabs', a.href); // mutable - var id = self.tabId(a); + else if (href != '#') { // prevent loading the page itself if href is just "#" + $.data(a, 'href.tabs', href); // required for restore on destroy + + // TODO until #3808 is fixed strip fragment identifier from url + // (IE fails to load from such url) + $.data(a, 'load.tabs', href.replace(/#.*$/, '')); // mutable data + + var id = self._tabId(a); a.href = '#' + id; var $panel = $('#' + id); if (!$panel.length) { - $panel = $(o.panelTemplate).attr('id', id).addClass(o.panelClass) - .insertAfter( self.$panels[i - 1] || self.element ); + $panel = $(o.panelTemplate).attr('id', id).addClass('ui-tabs-panel ui-widget-content ui-corner-bottom') + .insertAfter(self.panels[i - 1] || self.list); $panel.data('destroy.tabs', true); } - self.$panels = self.$panels.add( $panel ); + self.panels = self.panels.add($panel); } + // invalid tab href - else - o.disabled.push(i + 1); + else { + o.disabled.push(i); + } }); + // initialization from scratch if (init) { - // attach necessary classes for styling if not present - this.element.addClass(o.navClass); - this.$panels.each(function() { - var $this = $(this); - $this.addClass(o.panelClass); - }); + // attach necessary classes for styling + this.element.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all'); + this.list.addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'); + this.lis.addClass('ui-state-default ui-corner-top'); + this.panels.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom'); // Selected tab // use "selected" option or try to retrieve: @@ -89,464 +140,494 @@ $.widget("ui.tabs", { // 3. from selected class attribute on <li> if (o.selected === undefined) { if (location.hash) { - this.$tabs.each(function(i, a) { + this.anchors.each(function(i, a) { if (a.hash == location.hash) { o.selected = i; - // prevent page scroll to fragment - if ($.browser.msie || $.browser.opera) { // && !o.remote - var $toShow = $(location.hash), toShowId = $toShow.attr('id'); - $toShow.attr('id', ''); - setTimeout(function() { - $toShow.attr('id', toShowId); // restore id - }, 500); - } - scrollTo(0, 0); return false; // break } }); } - else if (o.cookie) { - var index = parseInt($.cookie('ui-tabs' + $.data(self.element)),10); - if (index && self.$tabs[index]) - o.selected = index; + if (typeof o.selected != 'number' && o.cookie) { + o.selected = parseInt(self._cookie(), 10); } - else if (self.$lis.filter('.' + o.selectedClass).length) - o.selected = self.$lis.index( self.$lis.filter('.' + o.selectedClass)[0] ); + if (typeof o.selected != 'number' && this.lis.filter('.ui-tabs-selected').length) { + o.selected = this.lis.index(this.lis.filter('.ui-tabs-selected')); + } + o.selected = o.selected || 0; + } + else if (o.selected === null) { // usage of null is deprecated, TODO remove in next release + o.selected = -1; } - o.selected = o.selected === null || o.selected !== undefined ? o.selected : 0; // first tab selected by default + + // sanity check - default to first tab... + o.selected = ((o.selected >= 0 && this.anchors[o.selected]) || o.selected < 0) ? o.selected : 0; // Take disabling tabs via class attribute from HTML // into account and update option properly. // A selected tab cannot become disabled. o.disabled = $.unique(o.disabled.concat( - $.map(this.$lis.filter('.' + o.disabledClass), - function(n, i) { return self.$lis.index(n); } ) + $.map(this.lis.filter('.ui-state-disabled'), + function(n, i) { return self.lis.index(n); } ) )).sort(); - if ($.inArray(o.selected, o.disabled) != -1) + + if ($.inArray(o.selected, o.disabled) != -1) { o.disabled.splice($.inArray(o.selected, o.disabled), 1); - + } + // highlight selected tab - this.$panels.addClass(o.hideClass); - this.$lis.removeClass(o.selectedClass); - if (o.selected !== null) { - this.$panels.eq(o.selected).show().removeClass(o.hideClass); // use show and remove class to show in any case no matter how it has been hidden before - this.$lis.eq(o.selected).addClass(o.selectedClass); - + this.panels.addClass('ui-tabs-hide'); + this.lis.removeClass('ui-tabs-selected ui-state-active'); + if (o.selected >= 0 && this.anchors.length) { // check for length avoids error when initializing empty list + this.panels.eq(o.selected).removeClass('ui-tabs-hide'); + this.lis.eq(o.selected).addClass('ui-tabs-selected ui-state-active'); + // seems to be expected behavior that the show callback is fired - var onShow = function() { - $(self.element).triggerHandler('tabsshow', - [self.fakeEvent('tabsshow'), self.ui(self.$tabs[o.selected], self.$panels[o.selected])], o.show); - }; - - // load if remote tab - if ($.data(this.$tabs[o.selected], 'load.tabs')) - this.load(o.selected, onShow); - // just trigger show event - else - onShow(); + self.element.queue("tabs", function() { + self._trigger('show', null, self._ui(self.anchors[o.selected], self.panels[o.selected])); + }); + this.load(o.selected); } - + // clean up to avoid memory leaks in certain versions of IE 6 $(window).bind('unload', function() { - self.$tabs.unbind('.tabs'); - self.$lis = self.$tabs = self.$panels = null; + self.lis.add(self.anchors).unbind('.tabs'); + self.lis = self.anchors = self.panels = null; }); } + // update selected after add/remove + else { + o.selected = this.lis.index(this.lis.filter('.ui-tabs-selected')); + } + + // update collapsible + this.element[o.collapsible ? 'addClass' : 'removeClass']('ui-tabs-collapsible'); + + // set or update cookie after init and add/remove respectively + if (o.cookie) { + this._cookie(o.selected, o.cookie); + } // disable tabs - for (var i = 0, li; li = this.$lis[i]; i++) - $(li)[$.inArray(i, o.disabled) != -1 && !$(li).hasClass(o.selectedClass) ? 'addClass' : 'removeClass'](o.disabledClass); + for (var i = 0, li; (li = this.lis[i]); i++) { + $(li)[$.inArray(i, o.disabled) != -1 && + !$(li).hasClass('ui-tabs-selected') ? 'addClass' : 'removeClass']('ui-state-disabled'); + } // reset cache if switching from cached to not cached - if (o.cache === false) - this.$tabs.removeData('cache.tabs'); - - // set up animations - var hideFx, showFx, baseFx = { 'min-width': 0, duration: 1 }, baseDuration = 'normal'; - if (o.fx && o.fx.constructor == Array) - hideFx = o.fx[0] || baseFx, showFx = o.fx[1] || baseFx; - else - hideFx = showFx = o.fx || baseFx; - - // reset some styles to maintain print style sheets etc. - var resetCSS = { display: '', overflow: '', height: '' }; - if (!$.browser.msie) // not in IE to prevent ClearType font issue - resetCSS.opacity = ''; - - // Hide a tab, animation prevents browser scrolling to fragment, - // $show is optional. - function hideTab(clicked, $hide, $show) { - $hide.animate(hideFx, hideFx.duration || baseDuration, function() { // - $hide.addClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc. - if ($.browser.msie && hideFx.opacity) - $hide[0].style.filter = ''; - if ($show) - showTab(clicked, $show, $hide); - }); + if (o.cache === false) { + this.anchors.removeData('cache.tabs'); } - // Show a tab, animation prevents browser scrolling to fragment, - // $hide is optional. - function showTab(clicked, $show, $hide) { - if (showFx === baseFx) - $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox cause by gap between showing and hiding the tab panels - $show.animate(showFx, showFx.duration || baseDuration, function() { - $show.removeClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc. - if ($.browser.msie && showFx.opacity) - $show[0].style.filter = ''; - - // callback - $(self.element).triggerHandler('tabsshow', - [self.fakeEvent('tabsshow'), self.ui(clicked, $show[0])], o.show); + // remove all handlers before, tabify may run on existing tabs after add or option change + this.lis.add(this.anchors).unbind('.tabs'); + if (o.event != 'mouseover') { + var addState = function(state, el) { + if (el.is(':not(.ui-state-disabled)')) { + el.addClass('ui-state-' + state); + } + }; + var removeState = function(state, el) { + el.removeClass('ui-state-' + state); + }; + this.lis.bind('mouseover.tabs', function() { + addState('hover', $(this)); + }); + this.lis.bind('mouseout.tabs', function() { + removeState('hover', $(this)); + }); + this.anchors.bind('focus.tabs', function() { + addState('focus', $(this).closest('li')); + }); + this.anchors.bind('blur.tabs', function() { + removeState('focus', $(this).closest('li')); }); } - // switch a tab - function switchTab(clicked, $li, $hide, $show) { - /*if (o.bookmarkable && trueClick) { // add to history only if true click occured, not a triggered click - $.ajaxHistory.update(clicked.hash); - }*/ - $li.addClass(o.selectedClass) - .siblings().removeClass(o.selectedClass); - hideTab(clicked, $hide, $show); + // set up animations + var hideFx, showFx; + if (o.fx) { + if ($.isArray(o.fx)) { + hideFx = o.fx[0]; + showFx = o.fx[1]; + } + else { + hideFx = showFx = o.fx; + } } - // attach tab event handler, unbind to avoid duplicates from former tabifying... - this.$tabs.unbind('.tabs').bind(o.event, function() { + // Reset certain styles left over from animation + // and prevent IE's ClearType bug... + function resetStyle($el, fx) { + $el.css({ display: '' }); + if ($.browser.msie && fx.opacity) { + $el[0].style.removeAttribute('filter'); + } + } - //var trueClick = e.clientX; // add to history only if true click occured, not a triggered click - var $li = $(this).parents('li:eq(0)'), - $hide = self.$panels.filter(':visible'), - $show = $(this.hash); + // Show a tab... + var showTab = showFx ? + function(clicked, $show) { + $(clicked).closest('li').removeClass('ui-state-default').addClass('ui-tabs-selected ui-state-active'); + $show.hide().removeClass('ui-tabs-hide') // avoid flicker that way + .animate(showFx, showFx.duration || 'normal', function() { + resetStyle($show, showFx); + self._trigger('show', null, self._ui(clicked, $show[0])); + }); + } : + function(clicked, $show) { + $(clicked).closest('li').removeClass('ui-state-default').addClass('ui-tabs-selected ui-state-active'); + $show.removeClass('ui-tabs-hide'); + self._trigger('show', null, self._ui(clicked, $show[0])); + }; + + // Hide a tab, $show is optional... + var hideTab = hideFx ? + function(clicked, $hide) { + $hide.animate(hideFx, hideFx.duration || 'normal', function() { + self.lis.removeClass('ui-tabs-selected ui-state-active').addClass('ui-state-default'); + $hide.addClass('ui-tabs-hide'); + resetStyle($hide, hideFx); + self.element.dequeue("tabs"); + }); + } : + function(clicked, $hide, $show) { + self.lis.removeClass('ui-tabs-selected ui-state-active').addClass('ui-state-default'); + $hide.addClass('ui-tabs-hide'); + self.element.dequeue("tabs"); + }; + + // attach tab event handler, unbind to avoid duplicates from former tabifying... + this.anchors.bind(o.event + '.tabs', function() { + var el = this, $li = $(this).closest('li'), $hide = self.panels.filter(':not(.ui-tabs-hide)'), + $show = $(self._sanitizeSelector(this.hash)); - // If tab is already selected and not unselectable or tab disabled or + // If tab is already selected and not collapsible or tab disabled or // or is already loading or click callback returns false stop here. // Check if click handler returns false last so that it is not executed // for a disabled or loading tab! - if (($li.hasClass(o.selectedClass) && !o.unselect) - || $li.hasClass(o.disabledClass) - || $(this).hasClass(o.loadingClass) - || $(self.element).triggerHandler('tabsselect', [self.fakeEvent('tabsselect'), self.ui(this, $show[0])], o.select) === false - ) { + if (($li.hasClass('ui-tabs-selected') && !o.collapsible) || + $li.hasClass('ui-state-disabled') || + $li.hasClass('ui-state-processing') || + self._trigger('select', null, self._ui(this, $show[0])) === false) { this.blur(); return false; } - self.options.selected = self.$tabs.index(this); + o.selected = self.anchors.index(this); + + self.abort(); // if tab may be closed - if (o.unselect) { - if ($li.hasClass(o.selectedClass)) { - self.options.selected = null; - $li.removeClass(o.selectedClass); - self.$panels.stop(); - hideTab(this, $hide); + if (o.collapsible) { + if ($li.hasClass('ui-tabs-selected')) { + o.selected = -1; + + if (o.cookie) { + self._cookie(o.selected, o.cookie); + } + + self.element.queue("tabs", function() { + hideTab(el, $hide); + }).dequeue("tabs"); + this.blur(); return false; - } else if (!$hide.length) { - self.$panels.stop(); - var a = this; - self.load(self.$tabs.index(this), function() { - $li.addClass(o.selectedClass).addClass(o.unselectClass); - showTab(a, $show); + } + else if (!$hide.length) { + if (o.cookie) { + self._cookie(o.selected, o.cookie); + } + + self.element.queue("tabs", function() { + showTab(el, $show); }); + + self.load(self.anchors.index(this)); // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171 + this.blur(); return false; } } - if (o.cookie) - $.cookie('ui-tabs' + $.data(self.element), self.options.selected, o.cookie); - - // stop possibly running animations - self.$panels.stop(); + if (o.cookie) { + self._cookie(o.selected, o.cookie); + } // show new tab if ($show.length) { - - // prevent scrollbar scrolling to 0 and than back in IE7, happens only if bookmarking/history is enabled - /*if ($.browser.msie && o.bookmarkable) { - var showId = this.hash.replace('#', ''); - $show.attr('id', ''); - setTimeout(function() { - $show.attr('id', showId); // restore id - }, 0); - }*/ - - var a = this; - self.load(self.$tabs.index(this), $hide.length ? - function() { - switchTab(a, $li, $hide, $show); - } : - function() { - $li.addClass(o.selectedClass); - showTab(a, $show); - } - ); - - // Set scrollbar to saved position - need to use timeout with 0 to prevent browser scroll to target of hash - /*var scrollX = window.pageXOffset || document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft || 0; - var scrollY = window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop || 0; - setTimeout(function() { - scrollTo(scrollX, scrollY); - }, 0);*/ - - } else + if ($hide.length) { + self.element.queue("tabs", function() { + hideTab(el, $hide); + }); + } + self.element.queue("tabs", function() { + showTab(el, $show); + }); + + self.load(self.anchors.index(this)); + } + else { throw 'jQuery UI Tabs: Mismatching fragment identifier.'; + } // Prevent IE from keeping other link focussed when using the back button - // and remove dotted border from clicked link. This is controlled in modern - // browsers via CSS, also blur removes focus from address bar in Firefox - // which can become a usability and annoying problem with tabsRotate. - if ($.browser.msie) + // and remove dotted border from clicked link. This is controlled via CSS + // in modern browsers; blur() removes focus from address bar in Firefox + // which can become a usability and annoying problem with tabs('rotate'). + if ($.browser.msie) { this.blur(); + } + + }); + + // disable click in any case + this.anchors.bind('click.tabs', function(){return false;}); + + }, - //return o.bookmarkable && !!trueClick; // convert trueClick == undefined to Boolean required in IE - return false; + destroy: function() { + var o = this.options; + + this.abort(); + + this.element.unbind('.tabs') + .removeClass('ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible') + .removeData('tabs'); + this.list.removeClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'); + + this.anchors.each(function() { + var href = $.data(this, 'href.tabs'); + if (href) { + this.href = href; + } + var $this = $(this).unbind('.tabs'); + $.each(['href', 'load', 'cache'], function(i, prefix) { + $this.removeData(prefix + '.tabs'); + }); }); - // disable click if event is configured to something else - if (!(/^click/).test(o.event)) - this.$tabs.bind('click.tabs', function() { return false; }); + this.lis.unbind('.tabs').add(this.panels).each(function() { + if ($.data(this, 'destroy.tabs')) { + $(this).remove(); + } + else { + $(this).removeClass([ + 'ui-state-default', + 'ui-corner-top', + 'ui-tabs-selected', + 'ui-state-active', + 'ui-state-hover', + 'ui-state-focus', + 'ui-state-disabled', + 'ui-tabs-panel', + 'ui-widget-content', + 'ui-corner-bottom', + 'ui-tabs-hide' + ].join(' ')); + } + }); + if (o.cookie) { + this._cookie(null, o.cookie); + } }, + add: function(url, label, index) { - if (index == undefined) - index = this.$tabs.length; // append by default + if (index === undefined) { + index = this.anchors.length; // append by default + } - var o = this.options; - var $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label)); - $li.data('destroy.tabs', true); + var self = this, o = this.options, + $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label)), + id = !url.indexOf('#') ? url.replace('#', '') : this._tabId($('a', $li)[0]); - var id = url.indexOf('#') == 0 ? url.replace('#', '') : this.tabId( $('a:first-child', $li)[0] ); + $li.addClass('ui-state-default ui-corner-top').data('destroy.tabs', true); // try to find an existing element before creating a new one var $panel = $('#' + id); if (!$panel.length) { - $panel = $(o.panelTemplate).attr('id', id) - .addClass(o.hideClass) - .data('destroy.tabs', true); + $panel = $(o.panelTemplate).attr('id', id).data('destroy.tabs', true); } - $panel.addClass(o.panelClass); - if (index >= this.$lis.length) { - $li.appendTo(this.element); - $panel.appendTo(this.element[0].parentNode); - } else { - $li.insertBefore(this.$lis[index]); - $panel.insertBefore(this.$panels[index]); + $panel.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide'); + + if (index >= this.lis.length) { + $li.appendTo(this.list); + $panel.appendTo(this.list[0].parentNode); } - + else { + $li.insertBefore(this.lis[index]); + $panel.insertBefore(this.panels[index]); + } + o.disabled = $.map(o.disabled, - function(n, i) { return n >= index ? ++n : n }); - - this.tabify(); - - if (this.$tabs.length == 1) { - $li.addClass(o.selectedClass); - $panel.removeClass(o.hideClass); - var href = $.data(this.$tabs[0], 'load.tabs'); - if (href) - this.load(index, href); + function(n, i) { return n >= index ? ++n : n; }); + + this._tabify(); + + if (this.anchors.length == 1) { // after tabify + $li.addClass('ui-tabs-selected ui-state-active'); + $panel.removeClass('ui-tabs-hide'); + this.element.queue("tabs", function() { + self._trigger('show', null, self._ui(self.anchors[0], self.panels[0])); + }); + + this.load(0); } // callback - this.element.triggerHandler('tabsadd', - [this.fakeEvent('tabsadd'), this.ui(this.$tabs[index], this.$panels[index])], o.add - ); + this._trigger('add', null, this._ui(this.anchors[index], this.panels[index])); }, + remove: function(index) { - var o = this.options, $li = this.$lis.eq(index).remove(), - $panel = this.$panels.eq(index).remove(); + var o = this.options, $li = this.lis.eq(index).remove(), + $panel = this.panels.eq(index).remove(); // If selected tab was removed focus tab to the right or // in case the last tab was removed the tab to the left. - if ($li.hasClass(o.selectedClass) && this.$tabs.length > 1) - this.select(index + (index + 1 < this.$tabs.length ? 1 : -1)); + if ($li.hasClass('ui-tabs-selected') && this.anchors.length > 1) { + this.select(index + (index + 1 < this.anchors.length ? 1 : -1)); + } o.disabled = $.map($.grep(o.disabled, function(n, i) { return n != index; }), - function(n, i) { return n >= index ? --n : n }); + function(n, i) { return n >= index ? --n : n; }); - this.tabify(); + this._tabify(); // callback - this.element.triggerHandler('tabsremove', - [this.fakeEvent('tabsremove'), this.ui($li.find('a')[0], $panel[0])], o.remove - ); + this._trigger('remove', null, this._ui($li.find('a')[0], $panel[0])); }, + enable: function(index) { var o = this.options; - if ($.inArray(index, o.disabled) == -1) + if ($.inArray(index, o.disabled) == -1) { return; - - var $li = this.$lis.eq(index).removeClass(o.disabledClass); - if ($.browser.safari) { // fix disappearing tab (that used opacity indicating disabling) after enabling in Safari 2... - $li.css('display', 'inline-block'); - setTimeout(function() { - $li.css('display', 'block'); - }, 0); } + this.lis.eq(index).removeClass('ui-state-disabled'); o.disabled = $.grep(o.disabled, function(n, i) { return n != index; }); // callback - this.element.triggerHandler('tabsenable', - [this.fakeEvent('tabsenable'), this.ui(this.$tabs[index], this.$panels[index])], o.enable - ); - + this._trigger('enable', null, this._ui(this.anchors[index], this.panels[index])); }, + disable: function(index) { var self = this, o = this.options; if (index != o.selected) { // cannot disable already selected tab - this.$lis.eq(index).addClass(o.disabledClass); + this.lis.eq(index).addClass('ui-state-disabled'); o.disabled.push(index); o.disabled.sort(); // callback - this.element.triggerHandler('tabsdisable', - [this.fakeEvent('tabsdisable'), this.ui(this.$tabs[index], this.$panels[index])], o.disable - ); + this._trigger('disable', null, this._ui(this.anchors[index], this.panels[index])); } }, + select: function(index) { - if (typeof index == 'string') - index = this.$tabs.index( this.$tabs.filter('[href$=' + index + ']')[0] ); - this.$tabs.eq(index).trigger(this.options.event); + if (typeof index == 'string') { + index = this.anchors.index(this.anchors.filter('[href$=' + index + ']')); + } + else if (index === null) { // usage of null is deprecated, TODO remove in next release + index = -1; + } + if (index == -1 && this.options.collapsible) { + index = this.options.selected; + } + + this.anchors.eq(index).trigger(this.options.event + '.tabs'); }, - load: function(index, callback) { // callback is for internal usage only - - var self = this, o = this.options, $a = this.$tabs.eq(index), a = $a[0], - bypassCache = callback == undefined || callback === false, url = $a.data('load.tabs'); - callback = callback || function() {}; - - // no remote or from cache - just finish with callback - if (!url || !bypassCache && $.data(a, 'cache.tabs')) { - callback(); + load: function(index) { + var self = this, o = this.options, a = this.anchors.eq(index)[0], url = $.data(a, 'load.tabs'); + + this.abort(); + + // not remote or from cache + if (!url || this.element.queue("tabs").length !== 0 && $.data(a, 'cache.tabs')) { + this.element.dequeue("tabs"); return; } // load remote from here on - - var inner = function(parent) { - var $parent = $(parent), $inner = $parent.find('*:last'); - return $inner.length && $inner.is(':not(img)') && $inner || $parent; - }; - var cleanup = function() { - self.$tabs.filter('.' + o.loadingClass).removeClass(o.loadingClass) - .each(function() { - if (o.spinner) - inner(this).parent().html(inner(this).data('label.tabs')); - }); - self.xhr = null; - }; - + this.lis.eq(index).addClass('ui-state-processing'); + if (o.spinner) { - var label = inner(a).html(); - inner(a).wrapInner('<em></em>') - .find('em').data('label.tabs', label).html(o.spinner); + var span = $('span', a); + span.data('label.tabs', span.html()).html(o.spinner); } - var ajaxOptions = $.extend({}, o.ajaxOptions, { + this.xhr = $.ajax($.extend({}, o.ajaxOptions, { url: url, success: function(r, s) { - $(a.hash).html(r); - cleanup(); - - if (o.cache) + $(self._sanitizeSelector(a.hash)).html(r); + + // take care of tab labels + self._cleanup(); + + if (o.cache) { $.data(a, 'cache.tabs', true); // if loaded once do not load them again + } // callbacks - $(self.element).triggerHandler('tabsload', - [self.fakeEvent('tabsload'), self.ui(self.$tabs[index], self.$panels[index])], o.load - ); - o.ajaxOptions.success && o.ajaxOptions.success(r, s); - - // This callback is required because the switch has to take - // place after loading has completed. Call last in order to - // fire load before show callback... - callback(); + self._trigger('load', null, self._ui(self.anchors[index], self.panels[index])); + try { + o.ajaxOptions.success(r, s); + } + catch (e) {} + + // last, so that load event is fired before show... + self.element.dequeue("tabs"); } - }); + })); + }, + + abort: function() { + // stop possibly running animations + this.element.queue([]); + this.panels.stop(false, true); + + // terminate pending requests from other tabs if (this.xhr) { - // terminate pending requests from other tabs and restore tab label this.xhr.abort(); - cleanup(); + delete this.xhr; } - $a.addClass(o.loadingClass); - setTimeout(function() { // timeout is again required in IE, "wait" for id being restored - self.xhr = $.ajax(ajaxOptions); - }, 0); + + // take care of tab labels + this._cleanup(); }, + url: function(index, url) { - this.$tabs.eq(index).removeData('cache.tabs').data('load.tabs', url); + this.anchors.eq(index).removeData('cache.tabs').data('load.tabs', url); }, - destroy: function() { - var o = this.options; - this.element.unbind('.tabs') - .removeClass(o.navClass).removeData('tabs'); - this.$tabs.each(function() { - var href = $.data(this, 'href.tabs'); - if (href) - this.href = href; - var $this = $(this).unbind('.tabs'); - $.each(['href', 'load', 'cache'], function(i, prefix) { - $this.removeData(prefix + '.tabs'); - }); - }); - this.$lis.add(this.$panels).each(function() { - if ($.data(this, 'destroy.tabs')) - $(this).remove(); - else - $(this).removeClass([o.selectedClass, o.unselectClass, - o.disabledClass, o.panelClass, o.hideClass].join(' ')); - }); - }, - fakeEvent: function(type) { - return $.event.fix({ - type: type, - target: this.element[0] - }); + + length: function() { + return this.anchors.length; } + }); -$.ui.tabs.defaults = { - // basic setup - unselect: false, - event: 'click', - disabled: [], - cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true } - // TODO history: false, - - // Ajax - spinner: 'Loading…', - cache: false, - idPrefix: 'ui-tabs-', - ajaxOptions: {}, - - // animations - fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 } - - // templates - tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>', - panelTemplate: '<div></div>', - - // CSS classes - navClass: 'ui-tabs-nav', - selectedClass: 'ui-tabs-selected', - unselectClass: 'ui-tabs-unselect', - disabledClass: 'ui-tabs-disabled', - panelClass: 'ui-tabs-panel', - hideClass: 'ui-tabs-hide', - loadingClass: 'ui-tabs-loading' -}; - -$.ui.tabs.getter = "length"; +$.extend($.ui.tabs, { + version: '1.7.2', + getter: 'length', + defaults: { + ajaxOptions: null, + cache: false, + cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true } + collapsible: false, + disabled: [], + event: 'click', + fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 } + idPrefix: 'ui-tabs-', + panelTemplate: '<div></div>', + spinner: '<em>Loading…</em>', + tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>' + } +}); /* * Tabs Extensions @@ -558,40 +639,45 @@ $.ui.tabs.getter = "length"; $.extend($.ui.tabs.prototype, { rotation: null, rotate: function(ms, continuing) { + + var self = this, o = this.options; - continuing = continuing || false; - - var self = this, t = this.options.selected; - - function start() { - self.rotation = setInterval(function() { - t = ++t < self.$tabs.length ? t : 0; - self.select(t); - }, ms); - } - - function stop(e) { - if (!e || e.clientX) { // only in case of a true click - clearInterval(self.rotation); + var rotate = self._rotate || (self._rotate = function(e) { + clearTimeout(self.rotation); + self.rotation = setTimeout(function() { + var t = o.selected; + self.select( ++t < self.anchors.length ? t : 0 ); + }, ms); + + if (e) { + e.stopPropagation(); } - } + }); - // start interval + var stop = self._unrotate || (self._unrotate = !continuing ? + function(e) { + if (e.clientX) { // in case of a true click + self.rotate(null); + } + } : + function(e) { + t = o.selected; + rotate(); + }); + + // start rotation if (ms) { - start(); - if (!continuing) - this.$tabs.bind(this.options.event, stop); - else - this.$tabs.bind(this.options.event, function() { - stop(); - t = self.options.selected; - start(); - }); + this.element.bind('tabsshow', rotate); + this.anchors.bind(o.event + '.tabs', stop); + rotate(); } - // stop interval + // stop rotation else { - stop(); - this.$tabs.unbind(this.options.event, stop); + clearTimeout(self.rotation); + this.element.unbind('tabsshow', rotate); + this.anchors.unbind(o.event + '.tabs', stop); + delete this._rotate; + delete this._unrotate; } } }); |