r761 - in trunk: tests tests/plugins ui
Author: klaus.hartl
Date: Thu Oct 2 07:20:35 2008
New Revision: 761
Added:
trunk/tests/plugins/ (props changed)
Modified:
trunk/tests/tabs.html
trunk/tests/tabs.js
trunk/ui/ui.tabs.js
Log:
UI Tabs: fixed "colon in id bug", wrote more unit tests and refactored
stuff afterwards
Modified: trunk/tests/tabs.html
==============================================================================
--- trunk/tests/tabs.html (original)
+++ trunk/tests/tabs.html Thu Oct 2 07:20:35 2008
@@ -11,13 +11,14 @@
<script type="text/javascript" src="qunit/testrunner.js"></script>
<script type="text/javascript" src="simulate/jquery.simulate.js"></script>
+ <script type="text/javascript"
src="plugins/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<style type="text/css">
-
-
-
+ .ui-tabs-hide {
+ display: none !important;
+ }
</style>
@@ -32,6 +33,7 @@
<ol id="tests"></ol>
<div id="main" style="position:absolute;top:-20000px">
+
<div id="tabs1">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
@@ -51,6 +53,20 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
</div>
</div>
+
+ <div id="tabs2">
+ <ul>
+ <li><a href="#colon:test"><span>One</span></a></li>
+ <li><a href="#inline-style"><span>Two</span></a></li>
+ </ul>
+ <div id="colon:test">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
+ </div>
+ <div style="height: 300px;" id="inline-style">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
+ </div>
+ </div>
+
</div>
</body>
Modified: trunk/tests/tabs.js
==============================================================================
--- trunk/tests/tabs.js (original)
+++ trunk/tests/tabs.js Thu Oct 2 07:20:35 2008
@@ -8,14 +8,145 @@
// Tabs Tests
-module("tabs");
+module('tabs');
-test("init", function() {
- expect(1);
+test('init', function() {
+ expect(4);
- el = $("#tabs1").tabs();
+ var el = $('#tabs1 > ul').tabs();
ok(true, '.tabs() called on element');
+
+ el.tabs('destroy').tabs({ selected: 1 });
+ equals( el.data('selected.tabs'), 1 );
+ equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 1, 'second tab
active');
+ equals( $('div', '#tabs1').index( $('div.ui-tabs-hide', '#tabs1') ),
0, 'first panel should be hidden' );
+
});
+test('destroy', function() {
+ expect(0);
+
+});
+
+test("defaults", function() {
+
+ var expected = {
+ unselect: false,
+ event: 'click',
+ disabled: [],
+ cookie: null,
+ spinner: 'Loading…',
+ cache: false,
+ idPrefix: 'ui-tabs-',
+ ajaxOptions: null,
+ fx: null,
+ tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
+ panelTemplate: '<div></div>',
+ 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'
+ };
+
+ var el = $("#tabs1").tabs();
+
+ for (var optionName in expected) {
+ var actual = el.data(optionName + '.tabs'), expects =
expected[optionName];
+
+ if (optionName == 'disabled')
+ ok(expects.constructor == Array && !expects.length, optionName);
+ else
+ equals(actual, expects, optionName);
+
+ }
+
+});
+
+test('add', function() {
+ expect(0);
+
+});
+
+test('remove', function() {
+ expect(0);
+
+});
+
+test('enable', function() {
+ expect(0);
+
+});
+
+test('disable', function() {
+ expect(0);
+
+});
+
+test('select', function() {
+ expect(0);
+
+});
+
+test('load', function() {
+ expect(0);
+
+});
+
+test('url', function() {
+ expect(0);
+
+});
+
+test('cookie', function() {
+ expect(5);
+
+ var el = $('#tabs1 > ul');
+ var cookieName = 'ui-tabs-' + $.data(el[0]);
+ $.cookie(cookieName, null); // blank state
+ var cookie = function() {
+ return parseInt($.cookie(cookieName), 10);
+ };
+
+ el.tabs({ cookie: {} });
+ equals(cookie(), 0, 'initial cookie value, no cookie given');
+
+ el.tabs('destroy');
+ el.tabs({ selected: 1, cookie: {} });
+ equals(cookie(), 1, 'initial cookie value, given selected');
+
+ el.tabs('select', 2);
+ equals(cookie(), 2, 'cookie value after tabs select');
+
+ el.tabs('destroy');
+ $.cookie(cookieName, 1);
+ el.tabs({ cookie: {} });
+ equals(cookie(), 1, 'initial cookie value, from existing cookie');
+
+ el.tabs('destroy');
+ ok($.cookie(cookieName) === null, 'erase cookie after destroy');
+
+});
+
+// #???
+test('id containing colon', function() {
+ expect(4);
+
+ var el = $('#tabs2 > ul').tabs();
+ ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel
should be visible' );
+ ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel
should be hidden' );
+
+ el.tabs('select', 1).tabs('select', 0);
+ ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel
should be visible' );
+ ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel
should be hidden' );
+
+});
+
+// test('', function() {
+// expect(0);
+//
+// });
})(jQuery);
Modified: trunk/ui/ui.tabs.js
==============================================================================
--- trunk/ui/ui.tabs.js (original)
+++ trunk/ui/ui.tabs.js Thu Oct 2 07:20:35 2008
@@ -14,8 +14,6 @@
$.widget("ui.tabs", {
_init: function() {
- this.options.event += '.tabs'; // namespace event
-
// create tabs
this._tabify(true);
},
@@ -42,6 +40,13 @@
index: this.$tabs.index(tab)
};
},
+ _sanitizeSelector: function(hash) {
+ return hash.replace(/:/g, '\\:'); // we need this because an id may
contain a ":"
+ },
+ _cookie: function() {
+ var cookie = this.cookie || (this.cookie = 'ui-tabs-' +
$.data(this.element[0]));
+ return $.cookie.apply(null, [cookie].concat($.makeArray(arguments)));
+ },
_tabify: function(init) {
this.$lis = $('li:has(a[href])', this.element);
@@ -53,7 +58,7 @@
this.$tabs.each(function(i, a) {
// inline tab
if (a.hash && a.hash.replace('#', '')) // Safari 2 reports '#' for an
empty hash
- self.$panels = self.$panels.add(a.hash);
+ self.$panels = self.$panels.add(self._sanitizeSelector(a.hash));
// 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
@@ -94,8 +99,8 @@
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');
+ if ($.browser.msie || $.browser.opera) {
+ var $toShow = $(this._sanitizeSelector(location.hash)), toShowId =
$toShow.attr('id');
$toShow.attr('id', '');
setTimeout(function() {
$toShow.attr('id', toShowId); // restore id
@@ -107,7 +112,7 @@
});
}
else if (o.cookie) {
- var index = parseInt($.cookie('ui-tabs-' + $.data(self.element[0])),
10);
+ var index = parseInt(self._cookie(), 10);
if (index && self.$tabs[index])
o.selected = index;
}
@@ -160,7 +165,7 @@
// set or update cookie after init and add/remove respectively
if (o.cookie)
- $.cookie('ui-tabs-' + $.data(self.element[0]), o.selected, o.cookie);
+ this._cookie(o.selected, o.cookie);
// disable tabs
for (var i = 0, li; li = this.$lis[i]; i++)
@@ -220,12 +225,12 @@
}
// attach tab event handler, unbind to avoid duplicates from former
tabifying...
- this.$tabs.unbind('.tabs').bind(o.event, function() {
+ this.$tabs.unbind('.tabs').bind(o.event + '.tabs', function() {
//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 = $(self._sanitizeSelector(this.hash));
// If tab is already selected and not unselectable or tab disabled or
// or is already loading or click callback returns false stop here.
@@ -240,7 +245,7 @@
return false;
}
- self.options.selected = self.$tabs.index(this);
+ o.selected = self.$tabs.index(this);
// if tab may be closed
if (o.unselect) {
@@ -264,7 +269,7 @@
}
if (o.cookie)
- $.cookie('ui-tabs-' + $.data(self.element[0]), self.options.selected,
o.cookie);
+ self._cookie(o.selected, o.cookie);
// stop possibly running animations
self.$panels.stop();
@@ -315,7 +320,7 @@
});
// disable click if event is configured to something else
- if (!(/^click/).test(o.event))
+ if (o.event != 'click')
this.$tabs.bind('click.tabs', function() { return false; });
},
@@ -409,9 +414,10 @@
}
},
select: function(index) {
+ // TODO make null as argument work
if (typeof index == 'string')
index = this.$tabs.index( this.$tabs.filter('[href$=' + index + ']')[0]
);
- this.$tabs.eq(index).trigger(this.options.event);
+ this.$tabs.eq(index).trigger(this.options.event + '.tabs');
},
load: function(index, callback) { // callback is for internal usage only
@@ -450,7 +456,7 @@
var ajaxOptions = $.extend({}, o.ajaxOptions, {
url: url,
success: function(r, s) {
- $(a.hash).html(r);
+ $(self._sanitizeSelector(a.hash)).html(r);
cleanup();
if (o.cache)
@@ -458,7 +464,10 @@
// callbacks
self._trigger('load', null, self.ui(self.$tabs[index],
self.$panels[index]));
- o.ajaxOptions.success && o.ajaxOptions.success(r, s);
+ try {
+ o.ajaxOptions.success(r, s);
+ }
+ catch (e) {}
// This callback is required because the switch has to take
// place after loading has completed. Call last in order to
@@ -500,6 +509,8 @@
$(this).removeClass([o.selectedClass, o.unselectClass,
o.disabledClass, o.panelClass, o.hideClass].join(' '));
});
+ if (o.cookie)
+ this._cookie(null, o.cookie);
}
});
@@ -515,7 +526,7 @@
spinner: 'Loading…',
cache: false,
idPrefix: 'ui-tabs-',
- ajaxOptions: {},
+ ajaxOptions: null,
// animations
fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
@@ -568,9 +579,9 @@
if (ms) {
start();
if (!continuing)
- this.$tabs.bind(this.options.event, stop);
+ this.$tabs.bind(this.options.event + '.tabs', stop);
else
- this.$tabs.bind(this.options.event, function() {
+ this.$tabs.bind(this.options.event + '.tabs', function() {
stop();
t = self.options.selected;
start();
@@ -579,7 +590,7 @@
// stop interval
else {
stop();
- this.$tabs.unbind(this.options.event, stop);
+ this.$tabs.unbind(this.options.event + '.tabs', stop);
}
}
});