Interactions

Widgets

• Accordion
+
• Panel
• Autocomplete
• Button
• Datepicker
diff --git a/tests/static/panel/default.html b/tests/static/panel/default.html new file mode 100644 index 00000000000..49b0c4a166f --- /dev/null +++ b/tests/static/panel/default.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + +
+
+ + Panel Header +
+
+ Panel Content +
+
+ + + diff --git a/tests/unit/index.html b/tests/unit/index.html index b17199363ea..a333390221b 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -24,6 +24,7 @@ + @@ -63,6 +64,7 @@

Interactions

Widgets

• Accordion
+
• Panel
• Autocomplete
• Button
• Datepicker
diff --git a/tests/unit/panel/panel.html b/tests/unit/panel/panel.html new file mode 100644 index 00000000000..a897506971b --- /dev/null +++ b/tests/unit/panel/panel.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

jQuery UI Panel Test Suite

+
+
+
+
+ +
+ +
+
+
Header first
+
+
+ All inside. +
+
+
+
+ +
+ + + diff --git a/tests/unit/panel/panel_core.js b/tests/unit/panel/panel_core.js new file mode 100644 index 00000000000..de5757ad89c --- /dev/null +++ b/tests/unit/panel/panel_core.js @@ -0,0 +1,17 @@ +/* + * panel_core.js + */ + + +(function($) { + +module("panel: core"); + +test("accessibility", function () { + expect(1); + var ac = $('#panel1').panel(); + + equals( ac.attr("role"), "panel", "main role"); +}); + +})(jQuery); diff --git a/tests/unit/panel/panel_defaults.js b/tests/unit/panel/panel_defaults.js new file mode 100644 index 00000000000..4dfb7344bd7 --- /dev/null +++ b/tests/unit/panel/panel_defaults.js @@ -0,0 +1,28 @@ +/* + * panel_defaults.js + */ + +var panel_defaults = { + disabled: false, + event: "click", + collapsible: true, + collapsed: false, + collapseType: 'up', + collapseSpeed: 'fast', + draggable: false, + stackable: true, + controls: false, + accordionGroupClass: false, + cookie: null, + icons: { + header : 'ui-icon-triangle-1-e', + headerSelected : 'ui-icon-triangle-1-s', + headerRight : 'ui-icon-arrowthickstop-1-n', + headerRightSelected : 'ui-icon-arrowthickstop-1-e', + headerLeft : 'ui-icon-arrowthickstop-1-s', + headerLeftSelected : 'ui-icon-arrowthickstop-1-w' + } + +}; + +commonWidgetTests('panel', { defaults: panel_defaults }); diff --git a/tests/unit/panel/panel_events.js b/tests/unit/panel/panel_events.js new file mode 100644 index 00000000000..c2d96dc1d2d --- /dev/null +++ b/tests/unit/panel/panel_events.js @@ -0,0 +1,15 @@ +/* + * panel_events.js + */ +(function($) { + +module("panel: events"); + +test("open closed and close again", function() { + expect(0); + $("#panel1").panel({ + collapsible: true + }); +}); + +})(jQuery); diff --git a/tests/unit/panel/panel_methods.js b/tests/unit/panel/panel_methods.js new file mode 100644 index 00000000000..66bb62515c5 --- /dev/null +++ b/tests/unit/panel/panel_methods.js @@ -0,0 +1,52 @@ +/* + * panel_methods.js + */ +(function($) { + +module("panel: methods"); + +test("init", function() { + $("
").appendTo('body').panel().remove(); + ok(true, '.panel() called on element'); + + $([]).panel().remove(); + ok(true, '.panel() called on empty collection'); + + $('
').panel().remove(); + ok(true, '.panel() called on disconnected DOMElement - never connected'); + + $('
').appendTo('body').remove().panel().remove(); + ok(true, '.panel() called on disconnected DOMElement - removed'); + + var el = $('
').panel(); + var foo = el.panel("option", "foo"); + el.remove(); + ok(true, 'arbitrary option getter after init'); + + $('
').panel().panel("option", "foo", "bar").remove(); + ok(true, 'arbitrary option setter after init'); +}); + +test("destroy", function() { + var beforeHtml = $("#panel1").find("div").css("font-style", "normal").end().parent().html(); + var afterHtml = $("#panel1").panel().panel("destroy").parent().html(); + // Opera 9 outputs role="" instead of removing the attribute like everyone else + if ($.browser.opera) { + afterHtml = afterHtml.replace(/ role=""/g, ""); + } + equal( afterHtml, beforeHtml ); +}); + +test("enable", function() { + var expected = $('#panel1').panel(), + actual = expected.panel('enable'); + equals(actual, expected, 'enable is chainable'); +}); + +test("disable", function() { + var expected = $('#panel1').panel(), + actual = expected.panel('disable'); + equals(actual, expected, 'disable is chainable'); +}); + +})(jQuery); diff --git a/tests/unit/panel/panel_options.js b/tests/unit/panel/panel_options.js new file mode 100644 index 00000000000..efc35b8ac7c --- /dev/null +++ b/tests/unit/panel/panel_options.js @@ -0,0 +1,80 @@ +/* + * panel_options.js + */ +(function($) { + +module("panel: options"); + +test("{ icons: false }", function() { + var p = $("#panel1"); + function icons(on) { + same($("span.ui-icon", p).length, on ? 1 : 0); + same( p.hasClass("ui-panel-icons"), on ); + } + p.panel(); + icons(true); + p.panel("destroy").panel({ + icons: false + }); + icons(false); + p.panel("option", "icons", $.ui.panel.prototype.options.icons); + icons(true); + p.panel("option", "icons", false); + icons(false); +}); + + +test("{ collapsible: false }", function() { + p = $("#panel1"); + p.panel({ collapsible: false, collapsed: true }).panel("toggle"); + equals( p.children(":first").hasClass('ui-panel-header-active'), false); +}); + +test("{ collapsed: true }", function() { + p = $("#panel1"); + p.panel({ collapsed: true }); + equals( p.children(":first").hasClass('ui-panel-header-active'), false); +}); + +test('cookie', function() { + expect(4); + + el = $('#panel1'); + var cookieName = 'panel_test', + cookieObj = { name: cookieName }; + + $.cookie(cookieName, null); // blank state + var cookie = function() { + return $.cookie(cookieName); + }; + + el.panel({ cookie: cookieObj }); + equals(cookie(), null, 'initial cookie value'); + el.panel('destroy'); + + el.panel({ cookie: cookieObj }).panel('toggle'); + equals(cookie(), 1, 'cookie value updated on toggle'); + el.panel('destroy'); + + $.cookie(cookieName, "1"); + el.panel({ cookie: cookieObj }); + equals(cookie(), "1", 'initial cookie value, from existing cookie'); + + el.panel('destroy'); + ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + +}); + +test("{ collapseType: 'left' }", function() { + p = $("#panel1"); + p.panel({ collapseType: 'left' }).panel("toggle"); + equals( p.hasClass("ui-widget-vertical"), true); +}); + +test("{ collapseType: 'right' }", function() { + p = $("#panel1"); + p.panel({ collapseType: 'right' }).panel("toggle"); + equals( p.hasClass("ui-widget-vertical"), true); +}); + +})(jQuery); diff --git a/tests/unit/panel/panel_tickets.js b/tests/unit/panel/panel_tickets.js new file mode 100644 index 00000000000..5e947fb77a4 --- /dev/null +++ b/tests/unit/panel/panel_tickets.js @@ -0,0 +1,8 @@ +/* + * panel_tickets.js + */ +(function($) { + +module("panel: tickets"); + +})(jQuery); diff --git a/tests/visual/index.html b/tests/visual/index.html index 05f6fd49a43..a047fb54066 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -37,6 +37,7 @@

Interactions

Widgets

• Accordion
+
• Panel
• Autocomplete
• Button
• Datepicker
diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 7634fb61e7c..a3ce25563de 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -10,6 +10,7 @@ @import url("jquery.ui.core.css"); @import url("jquery.ui.accordion.css"); +@import url("jquery.ui.panel.css"); @import url("jquery.ui.autocomplete.css"); @import url("jquery.ui.button.css"); @import url("jquery.ui.datepicker.css"); diff --git a/themes/base/jquery.ui.panel.css b/themes/base/jquery.ui.panel.css new file mode 100644 index 00000000000..22245cbec1d --- /dev/null +++ b/themes/base/jquery.ui.panel.css @@ -0,0 +1,30 @@ +/* + * jQuery UI Panel @VERSION + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Panel#theming + */ +.ui-panel { width: 100%; } + +.ui-panel .ui-panel-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } +.ui-panel .ui-panel-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } +.ui-panel .ui-panel-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-panel .ui-panel-header-active { border-bottom: 0 !important; } +.ui-panel-icons .ui-panel-header a { padding-left: 2.2em; } + +.ui-panel .ui-panel-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } +.ui-panel .ui-panel-content-active { display: block; } + +.ui-widget-vertical { + -moz-transform-origin: 0 0; + -moz-transform: rotate(-90deg); + -webkit-transform-origin: 0 0; + -webkit-transform: rotate(-90deg); + -o-transform-origin: 0 0; + -o-transform: rotate(-90deg); + transform-origin: 0 0; + transform: rotate(-90deg); +} \ No newline at end of file diff --git a/ui/jquery.ui.panel.js b/ui/jquery.ui.panel.js new file mode 100644 index 00000000000..eb432c8930f --- /dev/null +++ b/ui/jquery.ui.panel.js @@ -0,0 +1,287 @@ +/* + * jQuery UI Panel @VERSION + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Accordion + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + */ +(function($, undefined) { + + $.widget( + "ui.panel", + { + options : { + event : "click", + collapsible : true, + collapsed : false, + collapseType : 'up', // up, left, right + collapseSpeed : 'fast', + draggable : false, + stackable : true, // automatically create special + // stack area (navigation window + // emulation) + controls : false, + accordionGroupClass : false, + cookie : null, // accepts jQuery cookie Plugin + // options, e.g. { name: 'myPanel', + // expires: 7, path: '/', domain: + // 'jquery.com', secure: true } + icons : { + header : 'ui-icon-triangle-1-e', + headerSelected : 'ui-icon-triangle-1-s', + headerRight : 'ui-icon-arrowthickstop-1-n', + headerRightSelected : 'ui-icon-arrowthickstop-1-e', + headerLeft : 'ui-icon-arrowthickstop-1-s', + headerLeftSelected : 'ui-icon-arrowthickstop-1-w' + } + }, + + _create : function() { + var self = this, + options = self.options; + + // common classes + self.classWidget = "ui-panel ui-widget ui-helper-reset"; + self.classWidgetVertical = "ui-widget-vertical"; + + panelBox = self.element; + self.id = panelBox.attr('id'); + panelBox.addClass(self.classWidget); + + // header + self.header = panelBox + .children(':first') + .addClass("ui-panel-header ui-panel-header-active ui-helper-reset ui-state-default ui-state-active ui-corner-top") + .bind("mouseenter.panel", function() { + if (options.disabled) { + return; + } + $(this).addClass("ui-state-hover"); + }).bind("mouseleave.panel", function() { + if (options.disabled) { + return; + } + $(this).removeClass("ui-state-hover"); + }).bind("focus.panel", function() { + $(this).addClass("ui-state-focus"); + }).bind("blur.panel", function() { + $(this).removeClass("ui-state-focus"); + }); + + // content + self.header + .next() + .addClass("ui-panel-content ui-panel-content-active ui-helper-reset ui-widget-content ui-corner-bottom"); + + // ist-ui-panel backward compatibility + if (options.collapseType == "slide-left") { + options.collapseType = "left"; + } + if (options.collapseType == "slide-right") { + options.collapseType = "right"; + } + if (options.collapseType == "default") { + options.collapseType = "top"; + } + + panelBox.attr("role", "panel"); + + if (options.collapsible) { + if (options.event) { + self.header + .bind(options.event + ".panel", function(event) { + return self._clickHandler.call(self, event, this); + }); + } + + // restore state from cookie + if (options.cookie) { + if (self._cookie()==0) { + options.collapsed = false; + } else { + options.collapsed = true; + } + } + + + if (options.collapsed) { + self.toggle(0, true); + } + + } else { + // change options if not collapsible + options.collapsed = false; + options.icons = false; + } + + self._createIcons(); + // store original width to restore later + self.originalWidth = panelBox.css('width'); + + // swap title's display property to calculate title width + if (options.collapseType != "up") { + title = self.header.find("a:first"); + title.css('display', 'inline-block'); + self.titleWidth = parseInt(title.css('width').replace('px', '')) + 50; + title.css('display', 'block'); + } + + }, + + _cookie: function() { + var cookie = this.cookie || + (this.cookie = this.options.cookie.name || 'ui-panel-'+this.id); + return $.cookie.apply(null, [cookie].concat($.makeArray(arguments))); + }, + + _createIcons : function() { + var self = this, options = self.options; + + self.iconHeader = false; + self.iconHeaderSelected = false; + + if (options.icons) { + self.iconHeader = options.icons.header, + self.iconHeaderSelected = options.icons.headerSelected; + + // calculate icons for left and right sliding panels + switch (options.collapseType) { + case "left": + self.iconHeader = options.icons.headerLeft; + self.iconHeaderSelected = options.icons.headerLeftSelected; + break; + case "right": + self.iconHeader = options.icons.headerRight; + self.iconHeaderSelected = options.icons.headerRightSelected; + break; + }; + + $("") + .addClass("ui-icon " + self.iconHeader) + .prependTo(self.header); + + self.header + .filter(".ui-state-active") + .find(".ui-icon") + .removeClass(self.iconHeader) + .addClass(self.iconHeaderSelected); + + self.element.addClass("ui-panel-icons"); + } + }, + + _destroyIcons : function() { + var self = this; + self.header.children(".ui-icon").remove(); + self.element.removeClass("ui-panel-icons"); + self.iconHeader = false; + self.iconHeaderSelected = false; + }, + + _setOption : function(key, value) { + var self = this; + $.Widget.prototype._setOption.apply(this, arguments); + + switch (key) { + case "icons": + self._destroyIcons(); + if (value) { + self._createIcons(); + } + break; + } + + }, + + _keydown : function(event) { + if (this.options.disabled || event.altKey || event.ctrlKey) { + return; + } + return true; + }, + + _clickHandler : function(event, target) { + var options = this.options; + if (options.disabled) { + return; + } + + this.toggle(options.collapseSpeed); + + return; + }, + + destroy : function() { + var self = this; + + self.element + .removeClass(self.classWidget) + .removeAttr("role"); + + self.header + .unbind(".panel") + .removeClass("ui-panel-header ui-panel-header-active ui-panel-disabled ui-helper-reset ui-corner-top ui-corner-all ui-state-default ui-state-active ui-state-disabled"); + + self.header + .next() + .css("display", "") + .removeClass("ui-panel-content ui-panel-content-active ui-panel-disabled ui-helper-reset ui-corner-bottom ui-state-disabled ui-widget-content"); + + self._destroyIcons(); + + if (self.options.cookie ) { + this._cookie( null, self.options.cookie ); + } + + return $.Widget.prototype.destroy.call(this); + }, + + toggle : function(collapseSpeed, innerCall) { + var self = this, + options = self.options; + + self.header + .toggleClass("ui-state-active ui-corner-top ui-corner-all ui-panel-header-active") + .find(".ui-icon") + .toggleClass(self.iconHeader) + .toggleClass(self.iconHeaderSelected) + .end() + .next() + .toggleClass("ui-panel-content-active"); + + if (options.collapseType != "up") { + if (self.element.hasClass(self.classWidgetVertical)) { + css = { + 'width' : self.originalWidth, + 'margin-top' : 'auto' + }; + } else { + css = { + 'width' : self.titleWidth, + 'margin-top' : self.titleWidth + }; + } + self.element.css(css).toggleClass(self.classWidgetVertical); + } + + if (!innerCall) { + if (options.cookie) { + self._cookie(Number(options.collapsed), options.cookie); + } + } + + } + + }); + + $.extend($.ui.panel, { + version : "@VERSION" + }); + +})(jQuery); From 9c9192ec49fc0794a82585d04169f38009217d24 Mon Sep 17 00:00:00 2001 From: idle sign Date: Wed, 1 Sep 2010 10:45:29 +0700 Subject: [PATCH 2/3] * panel visual test html --- tests/visual/panel/panel.html | 50 +++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 tests/visual/panel/panel.html diff --git a/tests/visual/panel/panel.html b/tests/visual/panel/panel.html new file mode 100644 index 00000000000..df1b315c25b --- /dev/null +++ b/tests/visual/panel/panel.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + +
+
Panel Header
+
+ Panel Content +
+
+ +

+ +
+
Left Sliding Panel Header
+
+ Left Sliding Panel Content +
+
+ +

+ +
+
Right Sliding Panel Header
+
+ Right Sliding Panel Content +
+
+ +

+ + + From 9651707ddba58c3efb55d0b49bee2cb9d717e127 Mon Sep 17 00:00:00 2001 From: idle sign Date: Fri, 4 Mar 2011 21:33:39 +0600 Subject: [PATCH 3/3] Panel: Switched to new tests format. Panel: New visual tests. Panel: Options names changed (collapsed->expanded, collapseType->expandType, accordionGroupClass->accordionGroupName). Panel: New option 'resizable'. Panel: Added accordion functionality. --- tests/unit/index.html | 1 + tests/unit/panel/panel.html | 35 +- tests/unit/panel/panel_core.js | 23 +- tests/unit/panel/panel_defaults.js | 15 +- tests/unit/panel/panel_events.js | 19 +- tests/unit/panel/panel_methods.js | 93 +++--- tests/unit/panel/panel_options.js | 143 ++++---- tests/unit/panel/panel_tickets.js | 7 +- tests/visual/panel/panel.html | 64 +++- ui/jquery.ui.panel.js | 514 ++++++++++++++++------------- 10 files changed, 502 insertions(+), 412 deletions(-) diff --git a/tests/unit/index.html b/tests/unit/index.html index a677023dc20..b188c2cd5f2 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -42,6 +42,7 @@

Interactions

Widgets

• Accordion
+
• Panel
• Autocomplete
• Button
• Datepicker
diff --git a/tests/unit/panel/panel.html b/tests/unit/panel/panel.html index a897506971b..11267d24b83 100644 --- a/tests/unit/panel/panel.html +++ b/tests/unit/panel/panel.html @@ -1,45 +1,45 @@ - + - + - + - - - + + + - - - - + + + + - - + + - + +

jQuery UI Panel Test Suite

+
-
+
-
Header first
@@ -48,7 +48,6 @@
Header first
-
diff --git a/tests/unit/panel/panel_core.js b/tests/unit/panel/panel_core.js index de5757ad89c..575f8ec48c3 100644 --- a/tests/unit/panel/panel_core.js +++ b/tests/unit/panel/panel_core.js @@ -1,17 +1,12 @@ -/* - * panel_core.js - */ - - (function($) { -module("panel: core"); - -test("accessibility", function () { - expect(1); - var ac = $('#panel1').panel(); - - equals( ac.attr("role"), "panel", "main role"); -}); + module("panel: core"); + + test("accessibility", function () { + expect(1); + var ac = $('#panel1').panel(); + + equals( ac.attr("role"), "panel", "main role"); + }); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/tests/unit/panel/panel_defaults.js b/tests/unit/panel/panel_defaults.js index 4dfb7344bd7..0865d296cf8 100644 --- a/tests/unit/panel/panel_defaults.js +++ b/tests/unit/panel/panel_defaults.js @@ -1,18 +1,15 @@ -/* - * panel_defaults.js - */ - var panel_defaults = { disabled: false, event: "click", collapsible: true, - collapsed: false, - collapseType: 'up', - collapseSpeed: 'fast', + expanded: true, + expandType: 'down', + expandSpeed: 'fast', draggable: false, + resizable: false, stackable: true, controls: false, - accordionGroupClass: false, + accordionGroupName: false, cookie: null, icons: { header : 'ui-icon-triangle-1-e', @@ -25,4 +22,4 @@ var panel_defaults = { }; -commonWidgetTests('panel', { defaults: panel_defaults }); +commonWidgetTests('panel', { defaults: panel_defaults }); \ No newline at end of file diff --git a/tests/unit/panel/panel_events.js b/tests/unit/panel/panel_events.js index c2d96dc1d2d..1dbda835583 100644 --- a/tests/unit/panel/panel_events.js +++ b/tests/unit/panel/panel_events.js @@ -1,15 +1,12 @@ -/* - * panel_events.js - */ (function($) { -module("panel: events"); - -test("open closed and close again", function() { - expect(0); - $("#panel1").panel({ - collapsible: true + module("panel: events"); + + test("open closed and close again", function() { + expect(0); + $("#panel1").panel({ + collapsible: true + }); }); -}); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/tests/unit/panel/panel_methods.js b/tests/unit/panel/panel_methods.js index 66bb62515c5..cb528904a87 100644 --- a/tests/unit/panel/panel_methods.js +++ b/tests/unit/panel/panel_methods.js @@ -1,52 +1,45 @@ -/* - * panel_methods.js - */ (function($) { -module("panel: methods"); - -test("init", function() { - $("
").appendTo('body').panel().remove(); - ok(true, '.panel() called on element'); - - $([]).panel().remove(); - ok(true, '.panel() called on empty collection'); - - $('
').panel().remove(); - ok(true, '.panel() called on disconnected DOMElement - never connected'); - - $('
').appendTo('body').remove().panel().remove(); - ok(true, '.panel() called on disconnected DOMElement - removed'); - - var el = $('
').panel(); - var foo = el.panel("option", "foo"); - el.remove(); - ok(true, 'arbitrary option getter after init'); - - $('
').panel().panel("option", "foo", "bar").remove(); - ok(true, 'arbitrary option setter after init'); -}); - -test("destroy", function() { - var beforeHtml = $("#panel1").find("div").css("font-style", "normal").end().parent().html(); - var afterHtml = $("#panel1").panel().panel("destroy").parent().html(); - // Opera 9 outputs role="" instead of removing the attribute like everyone else - if ($.browser.opera) { - afterHtml = afterHtml.replace(/ role=""/g, ""); - } - equal( afterHtml, beforeHtml ); -}); - -test("enable", function() { - var expected = $('#panel1').panel(), - actual = expected.panel('enable'); - equals(actual, expected, 'enable is chainable'); -}); - -test("disable", function() { - var expected = $('#panel1').panel(), - actual = expected.panel('disable'); - equals(actual, expected, 'disable is chainable'); -}); - -})(jQuery); + module("panel: methods"); + + test("init", function() { + $("
").appendTo('body').panel().remove(); + ok(true, '.panel() called on element'); + + $([]).panel().remove(); + ok(true, '.panel() called on empty collection'); + + $('
').panel().remove(); + ok(true, '.panel() called on disconnected DOMElement - never connected'); + + $('
').appendTo('body').remove().panel().remove(); + ok(true, '.panel() called on disconnected DOMElement - removed'); + + var el = $('
').panel(); + var foo = el.panel("option", "foo"); + el.remove(); + ok(true, 'arbitrary option getter after init'); + + $('
').panel().panel("option", "foo", "bar").remove(); + ok(true, 'arbitrary option setter after init'); + }); + + test( "destroy", function() { + domEqual("#panel1", function() { + $("#panel1").panel().panel("destroy"); + }); + }); + + test("enable", function() { + var expected = $('#panel1').panel(), + actual = expected.panel('enable'); + equals(actual, expected, 'enable is chainable'); + }); + + test("disable", function() { + var expected = $('#panel1').panel(), + actual = expected.panel('disable'); + equals(actual, expected, 'disable is chainable'); + }); + +})(jQuery); \ No newline at end of file diff --git a/tests/unit/panel/panel_options.js b/tests/unit/panel/panel_options.js index efc35b8ac7c..4bff354cd80 100644 --- a/tests/unit/panel/panel_options.js +++ b/tests/unit/panel/panel_options.js @@ -1,80 +1,77 @@ -/* - * panel_options.js - */ (function($) { -module("panel: options"); - -test("{ icons: false }", function() { - var p = $("#panel1"); - function icons(on) { - same($("span.ui-icon", p).length, on ? 1 : 0); - same( p.hasClass("ui-panel-icons"), on ); - } - p.panel(); - icons(true); - p.panel("destroy").panel({ - icons: false + module("panel: options"); + + test("{ icons: false }", function() { + var p = $("#panel1"); + function icons(on) { + same($("span.ui-icon", p).length, on ? 1 : 0); + same( p.hasClass("ui-panel-icons"), on ); + } + p.panel(); + icons(true); + p.panel("destroy").panel({ + icons: false + }); + icons(false); + p.panel("option", "icons", $.ui.panel.prototype.options.icons); + icons(true); + p.panel("option", "icons", false); + icons(false); }); - icons(false); - p.panel("option", "icons", $.ui.panel.prototype.options.icons); - icons(true); - p.panel("option", "icons", false); - icons(false); -}); - - -test("{ collapsible: false }", function() { - p = $("#panel1"); - p.panel({ collapsible: false, collapsed: true }).panel("toggle"); - equals( p.children(":first").hasClass('ui-panel-header-active'), false); -}); - -test("{ collapsed: true }", function() { - p = $("#panel1"); - p.panel({ collapsed: true }); - equals( p.children(":first").hasClass('ui-panel-header-active'), false); -}); - -test('cookie', function() { - expect(4); - - el = $('#panel1'); - var cookieName = 'panel_test', - cookieObj = { name: cookieName }; - $.cookie(cookieName, null); // blank state - var cookie = function() { - return $.cookie(cookieName); - }; - - el.panel({ cookie: cookieObj }); - equals(cookie(), null, 'initial cookie value'); - el.panel('destroy'); - el.panel({ cookie: cookieObj }).panel('toggle'); - equals(cookie(), 1, 'cookie value updated on toggle'); - el.panel('destroy'); + test("{ collapsible: false }", function() { + p = $("#panel1"); + p.panel({ collapsible: false, expanded: false }).panel("toggle"); + equals( p.children(":first").hasClass('ui-panel-header-active'), false); + }); - $.cookie(cookieName, "1"); - el.panel({ cookie: cookieObj }); - equals(cookie(), "1", 'initial cookie value, from existing cookie'); - - el.panel('destroy'); - ok($.cookie(cookieName) === null, 'erase cookie after destroy'); - -}); - -test("{ collapseType: 'left' }", function() { - p = $("#panel1"); - p.panel({ collapseType: 'left' }).panel("toggle"); - equals( p.hasClass("ui-widget-vertical"), true); -}); - -test("{ collapseType: 'right' }", function() { - p = $("#panel1"); - p.panel({ collapseType: 'right' }).panel("toggle"); - equals( p.hasClass("ui-widget-vertical"), true); -}); + test("{ expanded: false }", function() { + p = $("#panel1"); + p.panel({ expanded: false }); + equals( p.children(":first").hasClass('ui-panel-header-active'), false); + }); + + test('cookie', function() { + expect(4); + + el = $('#panel1'); + var cookieName = 'panel_test', + cookieObj = { name: cookieName }; + + $.cookie(cookieName, null); // blank state + var cookie = function() { + return $.cookie(cookieName); + }; + + el.panel({ cookie: cookieObj }); + equals(cookie(), null, 'initial cookie value'); + el.panel('destroy'); + + el.panel({ cookie: cookieObj }).panel('toggle'); + equals(cookie(), 0, 'cookie value updated on toggle'); + el.panel('destroy'); + + $.cookie(cookieName, "1"); + el.panel({ cookie: cookieObj }); + equals(cookie(), "1", 'initial cookie value, from existing cookie'); + + el.panel('destroy'); + ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + + }); + + test("{ expandType: 'right' }", function() { + p = $("#panel1"); + p.panel({ expandType: 'right' }).panel("toggle"); + equals( p.hasClass("ui-widget-vertical"), true); + }); + + test("{ expandType: 'left' }", function() { + p = $("#panel1"); + p.panel({ expandType: 'left' }).panel("toggle"); + equals( p.hasClass("ui-widget-vertical"), true); + }); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/tests/unit/panel/panel_tickets.js b/tests/unit/panel/panel_tickets.js index 5e947fb77a4..f850cda9f7f 100644 --- a/tests/unit/panel/panel_tickets.js +++ b/tests/unit/panel/panel_tickets.js @@ -1,8 +1,5 @@ -/* - * panel_tickets.js - */ (function($) { -module("panel: tickets"); + module("panel: tickets"); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/tests/visual/panel/panel.html b/tests/visual/panel/panel.html index df1b315c25b..4b7a08fe269 100644 --- a/tests/visual/panel/panel.html +++ b/tests/visual/panel/panel.html @@ -5,27 +5,43 @@ - + + + +
-
Panel Header
+
Resizible Panel Header
- Panel Content + Resizible Panel Content
+

+
+
Draggable Panel Header
+
+ Draggable Panel Content +
+



@@ -34,7 +50,6 @@
Left Sliding Panel Header
Left Sliding Panel Content
-


@@ -43,7 +58,42 @@
Right Sliding Panel Header
Right Sliding Panel Content
+

+
+
Uncollapsible Panel Header
+
+ Uncollapsible Panel Content +
+
+

+ +
+
Initially Collapsed Panel Header
+
+ Initially Collapsed Panel Content +
+
+

+ +
+
Accordion-like Panel #1 Header
+
+ Accordion-like Panel #1 Content +
+
+
+
Accordion-like Panel #2 Header
+
+ Accordion-like Panel #2 Content +
+
+
+
Accordion-like Panel #3 Header
+
+ Accordion-like Panel #3 Content +
+


diff --git a/ui/jquery.ui.panel.js b/ui/jquery.ui.panel.js index eb432c8930f..fb1cbea0f93 100644 --- a/ui/jquery.ui.panel.js +++ b/ui/jquery.ui.panel.js @@ -1,11 +1,11 @@ /* * jQuery UI Panel @VERSION * - * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * - * http://docs.jquery.com/UI/Accordion + * http://docs.jquery.com/UI/Panel * * Depends: * jquery.ui.core.js @@ -14,274 +14,338 @@ (function($, undefined) { $.widget( - "ui.panel", - { - options : { - event : "click", - collapsible : true, - collapsed : false, - collapseType : 'up', // up, left, right - collapseSpeed : 'fast', - draggable : false, - stackable : true, // automatically create special - // stack area (navigation window - // emulation) - controls : false, - accordionGroupClass : false, - cookie : null, // accepts jQuery cookie Plugin - // options, e.g. { name: 'myPanel', - // expires: 7, path: '/', domain: - // 'jquery.com', secure: true } - icons : { - header : 'ui-icon-triangle-1-e', - headerSelected : 'ui-icon-triangle-1-s', - headerRight : 'ui-icon-arrowthickstop-1-n', - headerRightSelected : 'ui-icon-arrowthickstop-1-e', - headerLeft : 'ui-icon-arrowthickstop-1-s', - headerLeftSelected : 'ui-icon-arrowthickstop-1-w' - } - }, - - _create : function() { - var self = this, + 'ui.panel', + { + options : { + event : 'click', + collapsible : true, + expanded : true, + expandType : 'down', // down, left, right + expandSpeed : 'fast', + draggable : false, + resizable : false, + stackable : true, // automatically create special + // stack area (navigation window + // emulation) + controls : false, + accordionGroupName : false, + cookie : null, // accepts jQuery cookie Plugin + // options, e.g. { name: 'myPanel', + // expires: 7, path: '/', domain: + // 'jquery.com', secure: true } + icons : { + header : 'ui-icon-triangle-1-e', + headerSelected : 'ui-icon-triangle-1-s', + headerRight : 'ui-icon-arrowthickstop-1-n', + headerRightSelected : 'ui-icon-arrowthickstop-1-e', + headerLeft : 'ui-icon-arrowthickstop-1-s', + headerLeftSelected : 'ui-icon-arrowthickstop-1-w' + } + }, + + _create : function() { + var self = this, options = self.options; - - // common classes - self.classWidget = "ui-panel ui-widget ui-helper-reset"; - self.classWidgetVertical = "ui-widget-vertical"; - - panelBox = self.element; - self.id = panelBox.attr('id'); - panelBox.addClass(self.classWidget); - - // header - self.header = panelBox - .children(':first') - .addClass("ui-panel-header ui-panel-header-active ui-helper-reset ui-state-default ui-state-active ui-corner-top") - .bind("mouseenter.panel", function() { - if (options.disabled) { - return; + + // common classes + self.classWidget = 'ui-panel ui-widget ui-helper-reset'; + self.classWidgetVertical = 'ui-widget-vertical'; + + self.container = self.element; + self.id = self.container.attr('id'); + self.container.addClass(self.classWidget); + + // header + self.header = self.container + .children(':first') + .addClass('ui-panel-header ui-panel-header-active ui-helper-reset ui-state-default ui-state-active ui-corner-top') + .bind('mouseenter.panel', function() { + if (options.disabled) { + return; + } + $(this).addClass('ui-state-hover'); + }).bind('mouseleave.panel', function() { + if (options.disabled) { + return; + } + $(this).removeClass('ui-state-hover'); + }).bind('focus.panel', function() { + $(this).addClass('ui-state-focus'); + }).bind('blur.panel', function() { + $(this).removeClass('ui-state-focus'); + }); + + // content + self.contents = self.header.next(); + self.contents.addClass('ui-panel-content ui-panel-content-active ui-helper-reset ui-widget-content ui-corner-bottom'); + + // ist-ui-panel backward compatibility + if (options.collapseType == 'default') { + options.expandType = 'down'; + } else if (options.collapseType == 'slide-left') { + options.expandType = 'right'; + } else if (options.collapseType == 'slide-right') { + options.expandType = 'left'; + } + + self.container.attr('role', 'panel'); + + if (options.collapsible) { + self._eventHandler(true); + + // collapse panel if 'accordion' option is set, switch off vertical text + if (options.accordionGroupName){ + options.expanded = false; + self.container.addClass(options.accordionGroupName) + } + + // restore state from cookie + if (options.cookie) { + if (self._cookie()==0) { + options.expanded = true; + } else { + options.expanded = false; + } } - $(this).addClass("ui-state-hover"); - }).bind("mouseleave.panel", function() { - if (options.disabled) { - return; + + if (!options.expanded) { + options.expanded = true; + self.toggle(0, true); } - $(this).removeClass("ui-state-hover"); - }).bind("focus.panel", function() { - $(this).addClass("ui-state-focus"); - }).bind("blur.panel", function() { - $(this).removeClass("ui-state-focus"); - }); - - // content - self.header - .next() - .addClass("ui-panel-content ui-panel-content-active ui-helper-reset ui-widget-content ui-corner-bottom"); - - // ist-ui-panel backward compatibility - if (options.collapseType == "slide-left") { - options.collapseType = "left"; - } - if (options.collapseType == "slide-right") { - options.collapseType = "right"; - } - if (options.collapseType == "default") { - options.collapseType = "top"; - } - panelBox.attr("role", "panel"); + } else { + // force options change if not collapsible + options.expanded = true; + options.icons = false; + } - if (options.collapsible) { - if (options.event) { - self.header - .bind(options.event + ".panel", function(event) { - return self._clickHandler.call(self, event, this); - }); + self._createIcons(); + // store original width to restore later + self.originalWidth = self.container.css('width'); + + // swap title's display property to calculate title width + self.titleWidth = 0; + title = self.header.find('a:first'); + if (title.css('width')) { + display_orig = title.css('display'); + title.css('display', 'inline-block'); + self.titleWidth = parseInt(title.css('width').replace('px', '')) + 50; + title.css('display', display_orig); } - // restore state from cookie - if (options.cookie) { - if (self._cookie()==0) { - options.collapsed = false; - } else { - options.collapsed = true; - } + // making panel draggable if not accordion-like + if ($.fn.draggable && options.draggable && !options.accordionGroupName) { + self.container.draggable({ + containment: 'parent', + handle: '.ui-panel-header', + cancel: '.ui-panel-content', + cursor: 'move', + zIndex: 100 + }); } + self._syncState(); + }, + + _eventHandler: function(bind_event) { + var self = this, + options = self.options; - - if (options.collapsed) { - self.toggle(0, true); + if (options.event) { + if (bind_event) { + self.header + .bind(options.event + '.panel', function(event) { + return self._clickHandler.call(self, event, this); + }); + } else { + self.header.unbind(options.event + '.panel'); + } } - } else { - // change options if not collapsible - options.collapsed = false; - options.icons = false; - } - - self._createIcons(); - // store original width to restore later - self.originalWidth = panelBox.css('width'); - - // swap title's display property to calculate title width - if (options.collapseType != "up") { - title = self.header.find("a:first"); - title.css('display', 'inline-block'); - self.titleWidth = parseInt(title.css('width').replace('px', '')) + 50; - title.css('display', 'block'); - } - - }, - - _cookie: function() { - var cookie = this.cookie || - (this.cookie = this.options.cookie.name || 'ui-panel-'+this.id); - return $.cookie.apply(null, [cookie].concat($.makeArray(arguments))); - }, - - _createIcons : function() { - var self = this, options = self.options; - - self.iconHeader = false; - self.iconHeaderSelected = false; - - if (options.icons) { - self.iconHeader = options.icons.header, - self.iconHeaderSelected = options.icons.headerSelected; - - // calculate icons for left and right sliding panels - switch (options.collapseType) { - case "left": + }, + + _cookie: function() { + var cookie = this.cookie || + (this.cookie = this.options.cookie.name || 'ui-panel-'+this.id); + return $.cookie.apply(null, [cookie].concat($.makeArray(arguments))); + }, + + _createIcons : function() { + var self = this, + options = self.options; + + self.iconHeader = false; + self.iconHeaderSelected = false; + + if (options.icons) { + self.iconHeader = options.icons.header, + self.iconHeaderSelected = options.icons.headerSelected; + + // calculate icons for left and right sliding panels + switch (options.expandType) { + case 'right': self.iconHeader = options.icons.headerLeft; self.iconHeaderSelected = options.icons.headerLeftSelected; break; - case "right": + case 'left': self.iconHeader = options.icons.headerRight; self.iconHeaderSelected = options.icons.headerRightSelected; break; - }; + }; - $("") - .addClass("ui-icon " + self.iconHeader) - .prependTo(self.header); + $('') + .addClass('ui-icon ' + self.iconHeader) + .prependTo(self.header); - self.header - .filter(".ui-state-active") - .find(".ui-icon") - .removeClass(self.iconHeader) - .addClass(self.iconHeaderSelected); + self.header + .filter('.ui-state-active') + .find('.ui-icon') + .removeClass(self.iconHeader) + .addClass(self.iconHeaderSelected); - self.element.addClass("ui-panel-icons"); - } - }, - - _destroyIcons : function() { - var self = this; - self.header.children(".ui-icon").remove(); - self.element.removeClass("ui-panel-icons"); - self.iconHeader = false; - self.iconHeaderSelected = false; - }, - - _setOption : function(key, value) { - var self = this; - $.Widget.prototype._setOption.apply(this, arguments); - - switch (key) { - case "icons": + self.element.addClass('ui-panel-icons'); + } + }, + + _destroyIcons : function() { + var self = this; + self.header.children('.ui-icon').remove(); + self.element.removeClass('ui-panel-icons'); + self.iconHeader = false; + self.iconHeaderSelected = false; + }, + + _setOption : function(key, value) { + var self = this; + $.Widget.prototype._setOption.apply(this, arguments); + + switch (key) { + case 'icons': self._destroyIcons(); if (value) { self._createIcons(); } break; - } + } - }, + }, - _keydown : function(event) { - if (this.options.disabled || event.altKey || event.ctrlKey) { - return; - } - return true; - }, + _keydown : function(event) { + if (this.options.disabled || event.altKey || event.ctrlKey) { + return; + } + return true; + }, - _clickHandler : function(event, target) { - var options = this.options; - if (options.disabled) { - return; - } + _clickHandler : function(event, target) { + var options = this.options; + if (options.disabled) { + return; + } - this.toggle(options.collapseSpeed); + this.toggle(options.expandSpeed); - return; - }, + return; + }, - destroy : function() { - var self = this; + _destroy : function() { + var self = this; - self.element - .removeClass(self.classWidget) - .removeAttr("role"); + self.element + .removeClass(self.classWidget) + .removeAttr('role') + .removeAttr('aria-expanded'); + + self.header + .unbind('.panel') + .removeClass('ui-panel-header ui-panel-header-active ui-panel-disabled ui-helper-reset ui-corner-top ui-corner-all ui-state-default ui-state-active ui-state-disabled'); - self.header - .unbind(".panel") - .removeClass("ui-panel-header ui-panel-header-active ui-panel-disabled ui-helper-reset ui-corner-top ui-corner-all ui-state-default ui-state-active ui-state-disabled"); + self.header + .next() + .css('display', '') + .removeClass('ui-panel-content ui-panel-content-active ui-panel-disabled ui-helper-reset ui-corner-bottom ui-state-disabled ui-widget-content'); - self.header - .next() - .css("display", "") - .removeClass("ui-panel-content ui-panel-content-active ui-panel-disabled ui-helper-reset ui-corner-bottom ui-state-disabled ui-widget-content"); + self._destroyIcons(); - self._destroyIcons(); - - if (self.options.cookie ) { - this._cookie( null, self.options.cookie ); - } + if (self.options.cookie ) { + this._cookie( null, self.options.cookie ); + } + }, - return $.Widget.prototype.destroy.call(this); - }, + _syncState: function() { + var self = this, + options = self.options; + + // aria state + if (options.expanded) { + self.container.attr('aria-expanded', 'true'); + } else { + self.container.attr('aria-expanded', 'false'); + } + + // resizible state + if ($.fn.resizable && options.resizable && !options.accordionGroupName) { + if (options.expanded) { + self.container.resizable({ + alsoResize: self.contents, + minHeight: '85', + minWidth: self.titleWidth, + containment: 'parent', + cancel: '.ui-panel-header' + }); + } else { + self.container.resizable('destroy'); + } + } + + }, - toggle : function(collapseSpeed, innerCall) { - var self = this, + toggle : function(expandSpeed, innerCall) { + var self = this, options = self.options; - - self.header - .toggleClass("ui-state-active ui-corner-top ui-corner-all ui-panel-header-active") - .find(".ui-icon") + + options.expanded = !options.expanded + this._syncState(); + + self.header + .toggleClass('ui-state-active ui-corner-top ui-corner-all ui-panel-header-active') + .find('.ui-icon') .toggleClass(self.iconHeader) .toggleClass(self.iconHeaderSelected) - .end() - .next() - .toggleClass("ui-panel-content-active"); - - if (options.collapseType != "up") { - if (self.element.hasClass(self.classWidgetVertical)) { - css = { - 'width' : self.originalWidth, - 'margin-top' : 'auto' - }; - } else { - css = { - 'width' : self.titleWidth, - 'margin-top' : self.titleWidth - }; + .end() + .next() + .toggleClass('ui-panel-content-active'); + + if (options.expandType != 'down') { + if (self.element.hasClass(self.classWidgetVertical)) { + css = { + 'width' : self.originalWidth, + 'margin-top' : 'auto' + }; + } else { + css = { + 'width' : self.titleWidth, + 'margin-top' : self.titleWidth + }; + } + self.element.css(css).toggleClass(self.classWidgetVertical); } - self.element.css(css).toggleClass(self.classWidgetVertical); - } - - if (!innerCall) { - if (options.cookie) { - self._cookie(Number(options.collapsed), options.cookie); - } - } - } + if (!innerCall) { + if (options.cookie) { + self._cookie(Number(!options.expanded), options.cookie); + } + // inner toggle call to show only one unfolded panel if 'accordion' option is set + if (options.accordionGroupName) { + $("."+options.accordionGroupName+"[role='panel'][aria-expanded='true'][id!='"+self.id+"']").panel('toggle', expandSpeed, true); + } + } - }); + } + + }); $.extend($.ui.panel, { - version : "@VERSION" + version : '@VERSION' }); })(jQuery);