r2639 - panel widget added to labs
Author: idlesign
Date: Tue Jun 2 03:37:35 2009
New Revision: 2639
Added:
branches/labs/panel/
branches/labs/panel/ui-icon-arrowunfold-l.png (contents, props changed)
branches/labs/panel/ui-icon-arrowunfold-r.png (contents, props changed)
branches/labs/panel/ui.panel.css
branches/labs/panel/ui.panel.js
Log:
panel widget added to labs
Added: branches/labs/panel/ui-icon-arrowunfold-l.png
==============================================================================
Binary file. No diff available.
Added: branches/labs/panel/ui-icon-arrowunfold-r.png
==============================================================================
Binary file. No diff available.
Added: branches/labs/panel/ui.panel.css
==============================================================================
--- (empty file)
+++ branches/labs/panel/ui.panel.css Tue Jun 2 03:37:35 2009
@@ -0,0 +1,16 @@
+/* Panel
+----------------------------------*/
+.ui-panel { text-align:left; }
+.ui-panel-header { margin:0; padding:0; }
+.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; }
+.ui-panel-title-text, .ui-panel .ui-icon { cursor:pointer; }
+.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.7em 0.4em 0.7em 0.4em; }
+.ui-panel-clps-pnl { position:relative; top:-0.1em; float:left;
padding:0.1em 0.25em 0.3em 0.25em; }
+.ui-panel-vtitle { overflow:hidden; position:relative; white-space:nowrap;
}
+.ui-panel-vtext { display:block; }
+.ui-panel-vtext-ie { filter:flipv() fliph(); writing-mode:tb-rl;
position:absolute; left:0.2em; bottom:1.5em; }
\ No newline at end of file
Added: branches/labs/panel/ui.panel.js
==============================================================================
--- (empty file)
+++ branches/labs/panel/ui.panel.js Tue Jun 2 03:37:35 2009
@@ -0,0 +1,298 @@
+/*
+ * Panel Draft 0.3
+ * 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
+ */
+(function($) {
+
+ $.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')
+ // prevent blinking
+ this.panelBox.hide();
+ this.headerBox = this.element.children().eq(0);
+ this.contentBox = this.element.children().eq(1);
+ o.content = this.contentBox.html();
+ 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;
+ }
+ }
+
+ this.panelBox.attr('collapsed', o.collapsed);
+
+ // panel collapsed - trigger action
+ if (o.collapsed) {
+ self.toggle(0, true);
+ }
+
+ }
+ this.panelBox.show();
+ }
+
+ },
+
+ _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);
+
+ // different content sliding animation
+ if (o.collapseType=='default'){
+ if (collapseSpeed==0) {
+ if (ctrlBox) ctrlBox.hide();
+ contentBox.hide();
+ } else contentBox.slideToggle(collapseSpeed);
+ } 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().
+ append('<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);
+ headerBox.toggleClass('ui-corner-all');
+ },
+
+ content: function(content){
+ this.contentBox.html(content);
+ },
+
+ destroy: function(){
+ var o = this.options;
+
+ this.headerBox
+ .html(this.titleText)
+ .removeClass(o.headerClass);
+ this.contentBox
+ .removeClass(o.contentClass)
+ .html(o.content);
+ this.panelBox
+ .removeAttr('role')
+ .removeAttr('collapsed')
+ .unbind('.panel')
+ .removeClass(o.widgetClass);
+
+ if (o.cookie) {
+ this._cookie(null, o.cookie);
+ }
+ },
+
+ _buttonHover: function(el){
+ var o = this.options;
+
+ el
+ .bind('mouseover', function(){ $(this).addClass(o.hoverClass); })
+ .bind('mouseout', function(){ $(this).removeClass(o.hoverClass); })
+ }
+
+ });
+
+ $.extend($.ui.panel, {
+ version: '0.3',
+ defaults: {
+ event: 'click',
+ collapsible: true,
+ collapseType: 'default',
+ collapsed: false,
+ accordion: false,
+ collapseSpeed: 'fast',
+ // true vertical text with svg or filter rendering
+ trueVerticalText: false,
+ // neccessary for true vertical text
+ vHeight: '220px',
+ // suppose that we need ui.toolbar with controls here
+ controls: false,
+ // store panel state in cookie (jQuery cookie Plugin needed -
http://plugins.jquery.com/project/cookie)
+ cookie: null, // accepts cookie plugin options, e.g. { name: 'myPanel',
expires: 7, path: '/', domain: 'jquery.com', secure: true }
+ // styling
+ widgetClass: 'ui-helper-reset ui-widget ui-panel',
+ headerClass: 'ui-helper-reset ui-widget-header ui-panel-header
ui-corner-top',
+ contentClass: 'ui-helper-reset ui-widget-content ui-panel-content
ui-corner-bottom',
+ rightboxClass: 'ui-panel-rightbox',
+ controlsClass: 'ui-panel-controls',
+ titleClass: 'ui-panel-title',
+ titleTextClass: 'ui-panel-title-text',
+ iconClass: 'ui-icon',
+ hoverClass: 'ui-state-hover',
+ collapsePnlClass: 'ui-panel-clps-pnl',
+ //icons
+ headerIconClpsd: 'ui-icon-triangle-1-e',
+ headerIcon: 'ui-icon-triangle-1-s',
+ slideRIconClpsd: 'ui-icon-arrowthickstop-1-w',
+ slideRIcon: 'ui-icon-arrowthickstop-1-e',
+ slideLIconClpsd: 'ui-icon-arrowthickstop-1-e',
+ slideLIcon: 'ui-icon-arrowthickstop-1-w'
+ }
+ });
+
+
+})(jQuery);
\ No newline at end of file