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 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 new file mode 100644 index 00000000000..11267d24b83 --- /dev/null +++ b/tests/unit/panel/panel.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

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..575f8ec48c3 --- /dev/null +++ b/tests/unit/panel/panel_core.js @@ -0,0 +1,12 @@ +(function($) { + + module("panel: core"); + + test("accessibility", function () { + expect(1); + var ac = $('#panel1').panel(); + + equals( ac.attr("role"), "panel", "main role"); + }); + +})(jQuery); \ No newline at end of file diff --git a/tests/unit/panel/panel_defaults.js b/tests/unit/panel/panel_defaults.js new file mode 100644 index 00000000000..0865d296cf8 --- /dev/null +++ b/tests/unit/panel/panel_defaults.js @@ -0,0 +1,25 @@ +var panel_defaults = { + disabled: false, + event: "click", + collapsible: true, + expanded: true, + expandType: 'down', + expandSpeed: 'fast', + draggable: false, + resizable: false, + stackable: true, + controls: false, + accordionGroupName: 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 }); \ No newline at end of file diff --git a/tests/unit/panel/panel_events.js b/tests/unit/panel/panel_events.js new file mode 100644 index 00000000000..1dbda835583 --- /dev/null +++ b/tests/unit/panel/panel_events.js @@ -0,0 +1,12 @@ +(function($) { + + module("panel: events"); + + test("open closed and close again", function() { + expect(0); + $("#panel1").panel({ + collapsible: true + }); + }); + +})(jQuery); \ No newline at end of file diff --git a/tests/unit/panel/panel_methods.js b/tests/unit/panel/panel_methods.js new file mode 100644 index 00000000000..cb528904a87 --- /dev/null +++ b/tests/unit/panel/panel_methods.js @@ -0,0 +1,45 @@ +(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() { + 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 new file mode 100644 index 00000000000..4bff354cd80 --- /dev/null +++ b/tests/unit/panel/panel_options.js @@ -0,0 +1,77 @@ +(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, expanded: false }).panel("toggle"); + equals( p.children(":first").hasClass('ui-panel-header-active'), false); + }); + + 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); \ No newline at end of file diff --git a/tests/unit/panel/panel_tickets.js b/tests/unit/panel/panel_tickets.js new file mode 100644 index 00000000000..f850cda9f7f --- /dev/null +++ b/tests/unit/panel/panel_tickets.js @@ -0,0 +1,5 @@ +(function($) { + + module("panel: tickets"); + +})(jQuery); \ No newline at end of file diff --git a/tests/visual/index.html b/tests/visual/index.html index 4138e21bae0..3b817ced944 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -38,6 +38,7 @@

Interactions

Widgets

• Accordion
+
• Panel
• Autocomplete
• Button
• Datepicker
diff --git a/tests/visual/panel/panel.html b/tests/visual/panel/panel.html new file mode 100644 index 00000000000..4b7a08fe269 --- /dev/null +++ b/tests/visual/panel/panel.html @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + +
+
Resizible Panel Header
+
+ Resizible Panel Content +
+
+

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

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

+ +
+
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/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 9a18856c16a..1a3451cf6fb 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..fb1cbea0f93 --- /dev/null +++ b/ui/jquery.ui.panel.js @@ -0,0 +1,351 @@ +/* + * jQuery UI Panel @VERSION + * + * 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/Panel + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + */ +(function($, undefined) { + + $.widget( + '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'; + + 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; + } + } + + if (!options.expanded) { + options.expanded = true; + self.toggle(0, true); + } + + } else { + // force options change if not collapsible + options.expanded = true; + options.icons = false; + } + + 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); + } + + // 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.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'); + } + } + + }, + + _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 'left': + 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.expandSpeed); + + return; + }, + + _destroy : function() { + var self = this; + + 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 + .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 ); + } + }, + + _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(expandSpeed, innerCall) { + var self = this, + options = self.options; + + 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.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); + } + + 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' + }); + +})(jQuery);