r2859 - labs: panel
r2859 - labs: panel
Author: idlesign
Date: Wed Jul 1 23:52:14 2009
New Revision: 2859
Modified:
branches/labs/panel/ui.panel.css
branches/labs/panel/ui.panel.js
Log:
labs: panel
* fix: vertical svg text now themeroller compliant
* fix: panel content top border removed
* add: 'draggable' method
Modified: branches/labs/panel/ui.panel.css
==============================================================================
--- branches/labs/panel/ui.panel.css (original)
+++ branches/labs/panel/ui.panel.css Wed Jul 1 23:52:14 2009
@@ -1,7 +1,7 @@
/* Panel
----------------------------------*/
-.ui-panel {text-align:left;}
-.ui-panel-header {margin:0;padding:0.1em;width:100%;}
+.ui-panel {text-align:left;z-index:1;}
+.ui-panel-header {margin:0;padding:0;width:100%;}
.ui-panel-header .ui-icon {border:0;float:left;margin-top:0.2em;}
.ui-panel-title {margin:0.3em 0;}
.ui-panel-title-text {margin-left:0.3em;}
@@ -9,7 +9,7 @@
.ui-panel-rightbox {float:right;}
.ui-panel-rightbox .ui-icon {margin-right:0.1em;}
.ui-panel-controls {float:left;margin:0.2em 0.7em 0 0;}
-.ui-panel-content {padding:0.1em;width:100%;}
+.ui-panel-content {padding:0;width:100%;border-top:0;}
.ui-panel-content-text {padding:0.7em 0.4em;}
.ui-panel-clps-pnl {float:left;padding:0.1em 0.25em
0.3em;position:relative;top:-0.1em;}
.ui-panel-vtitle {overflow:hidden;position:relative;white-space:nowrap;}
Modified: branches/labs/panel/ui.panel.js
==============================================================================
--- branches/labs/panel/ui.panel.js (original)
+++ branches/labs/panel/ui.panel.js Wed Jul 1 23:52:14 2009
@@ -1,299 +1,311 @@
/*
- * Panel Draft 0.3.1
- * for jQuery UI
- *
- * Copyright (c) 2009 Igor 'idle sign' Starikov
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://code.google.com/p/ist-ui-panel/
- *
- * Depends:
- * ui.core.js
- */
+* Panel Draft 0.3.2
+* for jQuery UI
+*
+* Copyright (c) 2009 Igor 'idle sign' Starikov
+* Dual licensed under the MIT (MIT-LICENSE.txt)
+* and GPL (GPL-LICENSE.txt) licenses.
+*
+* http://code.google.com/p/ist-ui-panel/
+*
+* Depends:
+* ui.core.js
+* ui.draggable.js
+*/
(function($) {
- $.widget('ui.panel', {
+ $.widget('ui.panel', {
- // create panel
- _init: function() {
-
- if (this.element.is('div')) {
- var self = this,
- o = this.options;
-
- this.panelBox = this.element;
- o.width = this.panelBox.css('width');
- this.panelBox.attr('role', 'panel');
- o.id = this.panelBox.attr('id');
- this.headerBox = this.element.children().eq(0);
- this.contentBox = this.element.children().eq(1);
- o.content = this.contentBox.html();
- // wrap content to prevent padding issue
- this.contentBox.wrapInner('<div></div>');
- this.contentTextBox =
this.contentBox.children().eq(0).addClass(o.contentTextClass);
- this.headerBox.wrapInner('<div><span></span></div>');
- // need separate titleBox and titleTextBox to avoid possible
collapse/draggable issues
- this.titleBox = this.headerBox.children().eq(0);
- this.titleTextBox = this.titleBox.children().eq(0);
- this.titleText = this.titleTextBox.html();
- this.headerBox.prepend('<span></span>')
- this.rightBox =
this.headerBox.children().eq(0).addClass(o.rightboxClass);
-
- // setting up controls
- if (o.controls!=false){
- // suppose 'o.controls' should be a ui.toolbar control
- this.rightBox.append('<span></span>');
- this.controlsBox =
this.rightBox.children().eq(0).addClass(o.controlsClass).html(o.controls);
- }
-
- // styling
- this.panelBox.addClass(o.widgetClass);
- this.headerBox.addClass(o.headerClass);
- this.titleBox.addClass(o.titleClass);
- this.titleTextBox.addClass(o.titleTextClass);
- this.contentBox.addClass(o.contentClass);
-
- // collapsibility
- if (o.collapsible){
-
- switch (o.collapseType) {
- case 'slide-right':
- var childIndex = 0;
- // there is a shift of child element index if controls are enabled
- if (o.controls) childIndex = 1;
- this.rightBox.append('<span><span/></span>');
- this.collapsePanel =
this.rightBox.children().eq(childIndex).addClass(o.collapsePnlClass);
- this.collapseButton =
this.collapsePanel.children().eq(0).addClass(o.slideRIcon);
- this.iconBtnClpsd = o.slideRIconClpsd;
- this.iconBtn = o.slideRIcon;
- this.ctrlBox = this.controlsBox;
- break;
- case 'slide-left':
- this.headerBox.prepend('<span><span/></span>');
- this.collapsePanel =
this.headerBox.children().eq(0).addClass(o.collapsePnlClass);
- this.collapseButton =
this.collapsePanel.children().eq(0).addClass(o.slideLIcon);
- this.iconBtnClpsd = o.slideLIconClpsd;
- this.iconBtn = o.slideLIcon;
- this.ctrlBox = this.rightBox;
- break;
- default:
- this.headerBox.prepend('<span><span/></span>');
- this.collapseButton =
this.headerBox.children().eq(0).addClass(o.headerIcon);
- this.iconBtnClpsd = o.headerIconClpsd;
- this.iconBtn = o.headerIcon;
- this.ctrlBox = this.controlsBox;
- break;
- }
-
- this._buttonHover(this.collapseButton);
- this.collapseButton.addClass(o.iconClass);
- if (o.event) {
- this.collapseButton.bind((o.event) + ".panel", function(event) {
return self._clickHandler.call(self, event, this); });
- this.titleTextBox.bind((o.event) + ".panel", function(event) {
return self._clickHandler.call(self, event, this); });
- }
- // collapse panel if 'accordion' option is set
- if (o.accordion) {
- o.collapsed = true;
- }
- // restore state from cookie
- if (o.cookie) {
- if (self._cookie()==0) {
- o.collapsed = false;
- } else {
- o.collapsed = true;
- }
- }
- // store state as attribute
- this.panelBox.attr('collapsed', o.collapsed);
-
- // panel collapsed - trigger action
- if (o.collapsed) {
- self.toggle(0, true);
- }
- }
- this.panelBox.show();
- }
-
- },
+ // create panel
+ _init: function() {
+ if (this.element.is('div')) {
+ var self = this,
+ o = this.options;
+
+ this.panelBox = this.element;
+ o.width = this.panelBox.css('width');
+ this.panelBox.attr('role', 'panel');
+ o.id = this.panelBox.attr('id');
+ this.headerBox = this.element.children().eq(0);
+ this.contentBox = this.element.children().eq(1);
+ o.content = this.contentBox.html();
+ // wrap content to prevent padding issue
+ this.contentBox.wrapInner('<div></div>');
+ this.contentTextBox =
this.contentBox.children().eq(0).addClass(o.contentTextClass);
+ this.headerBox.wrapInner('<div><span></span></div>');
+ // need separate titleBox and titleTextBox to avoid possible
collapse/draggable issues
+ this.titleBox = this.headerBox.children().eq(0);
+ this.titleTextBox = this.titleBox.children().eq(0);
+ this.titleText = this.titleTextBox.html();
+ this.headerBox.prepend('<span></span>')
+ this.rightBox =
this.headerBox.children().eq(0).addClass(o.rightboxClass);
+ // setting up controls
+ if (o.controls!=false){
+ // suppose 'o.controls' should be a ui.toolbar control
+ this.rightBox.append('<span></span>');
+ this.controlsBox =
this.rightBox.children().eq(0).addClass(o.controlsClass).html(o.controls);
+ }
- _cookie: function() {
- var cookie = this.cookie || (this.cookie = this.options.cookie.name |
| 'ui-panel-' + $.data(this.options.id));
- return $.cookie.apply(null, [cookie].concat($.makeArray(arguments)));
- },
-
- _clickHandler: function(event, target){
- var o = this.options;
-
- if (o.disabled) return false;
- this.toggle(o.collapseSpeed);
- return false;
- },
-
- toggle: function (collapseSpeed, innerCall){
- var self = this,
- o = this.options,
- btn = this.collapseButton,
- ibc = this.iconBtnClpsd,
- ib = this.iconBtn,
- panelBox = this.panelBox,
- contentBox = this.contentBox,
- headerBox = this.headerBox,
- titleTextBox = this.titleTextBox,
- titleText = this.titleText,
- ctrlBox = this.ctrlBox,
- ie = '';
-
- // that's IE 6-8 for sure, use appropriate style for vertical text
- if (!jQuery.support.leadingWhitespace) ie="-ie";
-
- // split toggle into 'fold' and 'unfold' actions and handle callbacks
- if (contentBox.css('display')=='none') this._trigger("unfold");
- else this._trigger("fold");
-
- if (ctrlBox) ctrlBox.toggle(0);
-
- // vaious content sliding animations
- if (o.collapseType=='default'){
- if (collapseSpeed==0) {
- if (ctrlBox) ctrlBox.hide();
- contentBox.hide();
- } else contentBox.slideToggle(collapseSpeed);
+ // styling
+ this.panelBox.addClass(o.widgetClass);
+ this.headerBox.addClass(o.headerClass);
+ this.titleBox.addClass(o.titleClass);
+ this.titleTextBox.addClass(o.titleTextClass);
+ this.contentBox.addClass(o.contentClass);
+
+ // collapsibility
+ if (o.collapsible){
+ switch (o.collapseType) {
+ case 'slide-right':
+ var childIndex = 0;
+ // there is a shift of child element index if controls are enabled
+ if (o.controls) { childIndex = 1; }
+ this.rightBox.append('<span><span/></span>');
+ this.collapsePanel =
this.rightBox.children().eq(childIndex).addClass(o.collapsePnlClass);
+ this.collapseButton =
this.collapsePanel.children().eq(0).addClass(o.slideRIcon);
+ this.iconBtnClpsd = o.slideRIconClpsd;
+ this.iconBtn = o.slideRIcon;
+ this.ctrlBox = this.controlsBox;
+ break;
+ case 'slide-left':
+ this.headerBox.prepend('<span><span/></span>');
+ this.collapsePanel =
this.headerBox.children().eq(0).addClass(o.collapsePnlClass);
+ this.collapseButton =
this.collapsePanel.children().eq(0).addClass(o.slideLIcon);
+ this.iconBtnClpsd = o.slideLIconClpsd;
+ this.iconBtn = o.slideLIcon;
+ this.ctrlBox = this.rightBox;
+ break;
+ default:
+ this.headerBox.prepend('<span><span/></span>');
+ this.collapseButton =
this.headerBox.children().eq(0).addClass(o.headerIcon);
+ this.iconBtnClpsd = o.headerIconClpsd;
+ this.iconBtn = o.headerIcon;
+ this.ctrlBox = this.controlsBox;
+ break;
+ }
+
+ this._buttonHover(this.collapseButton);
+ this.collapseButton.addClass(o.iconClass);
+ if (o.event) {
+ this.collapseButton.bind((o.event) + ".panel", function(event) { return
self._clickHandler.call(self, event, this); });
+ this.titleTextBox.bind((o.event) + ".panel", function(event) { return
self._clickHandler.call(self, event, this); });
+ }
+ // collapse panel if 'accordion' option is set
+ if (o.accordion) { o.collapsed = true; }
+ // restore state from cookie
+ if (o.cookie) {
+ if (self._cookie()==0) {
+ o.collapsed = false;
} else {
- if (collapseSpeed==0) {
- // reverse collapsed option for immediate folding
- o.collapsed=false;
- if (ctrlBox) ctrlBox.hide();
- contentBox.hide();
- } else contentBox.toggle();
-
- if (o.collapsed==false){
- if (o.trueVerticalText){
- // true vertical text - svg or filter
- headerBox.toggleClass('ui-panel-vtitle').css('height', o.vHeight);
- if (ie==''){
- titleTextBox.
- empty().
- // put transparent div over svg object for object onClick
simulation
- append('<div
style="height:90%;width:100%;position:absolute;bottom:0;"></div><object
type="image/svg+xml" data="data:image/svg+xml;charset=utf-8,<svg
xmlns=\'http://www.w3.org/2000/svg\'><text x=\'-190\' y=\'13\'
style=\'font-weight:bold;font-family:verdana;font-size:0.7em;\'
transform=\'rotate(-90)\'
text-rendering=\'optimizeSpeed\'>'+titleText+'</text></svg>"></object>').
- css('height', o.vHeight);
- }
-
- titleTextBox.toggleClass('ui-panel-vtext'+ie);
- } else {
- // vertical text workaround
- headerBox.attr('align','center');
- titleTextBox.html(titleTextBox.text().replace(/(.)/g, '$1<BR>'));
- }
- panelBox.animate( {width: '2.4em'}, collapseSpeed );
- } else {
- if (o.trueVerticalText){
- headerBox.toggleClass('ui-panel-vtitle').css('height', 'auto');
- titleTextBox.empty().append(titleText);
-
- titleTextBox.toggleClass('ui-panel-vtext'+ie);
- } else {
- headerBox.attr('align','left');
- titleTextBox.html(titleTextBox.text().replace(/<BR>/g, ' '));
- }
- panelBox.animate( {width: o.width}, collapseSpeed );
- }
- }
-
- // only if not initially folded
- if (collapseSpeed!=0 || o.trueVerticalText) {
- o.collapsed = !o.collapsed;
- }
-
- panelBox.attr('collapsed', o.collapsed);
-
- // save state in cookie if allowed
- if (o.cookie) {
- self._cookie(Number(o.collapsed), o.cookie);
- }
-
- // inner toggle call to show only one unfolded panel if 'accordion'
option is set
- if (o.accordion && !innerCall){
-
$("."+o.accordion+"[role='panel'][collapsed='false'][id!='"+(o.id)+"']").panel('toggle',
collapseSpeed, true);
- }
-
- // css animation for header and button
- btn.toggleClass(ibc).toggleClass(ib);
- &nbs