diff options
Diffstat (limited to 'js/dojo/dojox/layout/RadioGroup.js')
| -rw-r--r-- | js/dojo/dojox/layout/RadioGroup.js | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/js/dojo/dojox/layout/RadioGroup.js b/js/dojo/dojox/layout/RadioGroup.js new file mode 100644 index 0000000..a83add0 --- /dev/null +++ b/js/dojo/dojox/layout/RadioGroup.js @@ -0,0 +1,297 @@ +//>>built +define("dojox/layout/RadioGroup", ["dojo/_base/kernel","dojo/_base/declare","dojo/_base/html","dojo/_base/lang","dojo/_base/query", + "dijit/_Widget","dijit/_Templated","dijit/_Contained","dijit/layout/StackContainer", + "dojo/fx/easing","dojo/_base/fx","dojo/dom-construct","dojo/dom-class"],function( + kernel,declare,html,lang,query,Widget,Templated,Contained,StackContainer,easing,baseFx,domConstruct,domClass){ + +kernel.experimental("dojox.layout.RadioGroup"); + +// +// dojox.layout.RadioGroup - an experimental (probably poorly named) Layout widget extending StackContainer +// that accepts ContentPanes as children, and applies aesthetically pleasing responsive transition animations +// attached to :hover of the Buttons created. +// +// FIXME: take the Buttons out of the root template, and allow layoutAlign or similar attrib to use a different +// template, or build the template dynamically? +// +/*===== + var StackContainer = dijit.layout.StackContainer, + Templated = dijit._Templated, + Contained = dijit._Contained, + Widget = dijit._Widget; +=====*/ + +var RadioGroup = declare("dojox.layout.RadioGroup",[StackContainer,Templated],{ + // summary: A Container that turns its Layout Children into a single Pane and transitions between states + // onHover of the button + // + + // duration: Integer + // used for Fade and Slide RadioGroup's, the duration to run the transition animation. does not affect anything + // in default RadioGroup + duration: 750, + + // hasButtons: Boolean + // toggles internal button making on or off + hasButtons: false, + + // buttonClass: String + // The full declared className of the Button widget to use for hasButtons + buttonClass: "dojox.layout._RadioButton", + + // templateString: String + // the template for our container + templateString: '<div class="dojoxRadioGroup">' + +' <div dojoAttachPoint="buttonHolder" style="display:none;">' + +' <table class="dojoxRadioButtons"><tbody><tr class="dojoxRadioButtonRow" dojoAttachPoint="buttonNode"></tr></tbody></table>' + +' </div>' + +' <div class="dojoxRadioView" dojoAttachPoint="containerNode"></div>' + +'</div>', + + startup: function(){ + // summary: scan the container for children, and make "tab buttons" for them + this.inherited(arguments); + this._children = this.getChildren(); + this._buttons = this._children.length; + this._size = html.coords(this.containerNode); + if(this.hasButtons){ + html.style(this.buttonHolder, "display", "block"); + } + }, + + _setupChild: function(/* dijit._Widget */child){ + // summary: Creates a hover button for a child node of the RadioGroup + html.style(child.domNode, "position", "absolute"); + if(this.hasButtons){ + + var tmp = this.buttonNode.appendChild(domConstruct.create('td')); + var n = domConstruct.create("div", null, tmp), + _Button = lang.getObject(this.buttonClass), + tmpw = new _Button({ + label: child.title, + page: child + }, n) + ; + + lang.mixin(child, { _radioButton: tmpw }); + tmpw.startup(); + } + child.domNode.style.display = "none"; + }, + + removeChild: function(child){ + if(this.hasButtons && child._radioButton){ + child._radioButton.destroy(); + delete child._radioButton; + } + this.inherited(arguments); + }, + + // FIXME: shouldn't have to rewriting these, need to take styling out of _showChild and _hideChild + // and use classes on the domNode in _transition or something similar (in StackContainer) + _transition: function(/*dijit._Widget*/ newWidget, /*dijit._Widget*/ oldWidget){ + // summary: called when StackContainer receives a selectChild call, used to transition the panes. + this._showChild(newWidget); + if(oldWidget){ + this._hideChild(oldWidget); + } + // Size the new widget, in case this is the first time it's being shown, + // or I have been resized since the last time it was shown. + // page must be visible for resizing to work + if(this.doLayout && newWidget.resize){ + newWidget.resize(this._containerContentBox || this._contentBox); + } + }, + + _showChild: function(/*dijit._Widget*/ page){ + // summary: show the selected child widget + var children = this.getChildren(); + page.isFirstChild = (page == children[0]); + page.isLastChild = (page == children[children.length-1]); + page.selected = true; + + page.domNode.style.display=""; + + if(page._onShow){ + page._onShow(); // trigger load in ContentPane + }else if(page.onShow){ + page.onShow(); + } + }, + + _hideChild: function(/*dijit._Widget*/ page){ + // summary: hide the specified child widget + page.selected = false; + page.domNode.style.display="none"; + if(page.onHide){ + page.onHide(); + } + } + +}); + +declare("dojox.layout.RadioGroupFade", RadioGroup, { + // summary: An extension on a stock RadioGroup, that fades the panes. + + _hideChild: function(page){ + // summary: hide the specified child widget + baseFx.fadeOut({ + node:page.domNode, + duration:this.duration, + onEnd: lang.hitch(this,"inherited", arguments, arguments) + }).play(); + }, + + _showChild: function(page){ + // summary: show the specified child widget + this.inherited(arguments); + html.style(page.domNode, "opacity", 0); + baseFx.fadeIn({ + node:page.domNode, + duration:this.duration + }).play(); + } +}); + +declare("dojox.layout.RadioGroupSlide", RadioGroup, { + // summary: A Sliding Radio Group + // description: + // An extension on a stock RadioGroup widget, sliding the pane + // into view from being hidden. The entry direction is randomized + // on each view + // + + // easing: Function + // A hook to override the default easing of the pane slides. + easing: "dojo.fx.easing.backOut", + + // zTop: Integer + // A z-index to apply to the incoming pane + zTop: 99, + + constructor: function(){ + if(lang.isString(this.easing)){ + this.easing = lang.getObject(this.easing); + } + }, + + _positionChild: function(page){ + // summary: set the child out of view immediately after being hidden + + // FIXME: is there a real "size" floating around always? + if(!this._size){ return; } + + // there should be a contest: obfuscate this function as best you can. + var rA = true, rB = true; + switch(page.slideFrom){ + case "bottom" : rB = !rB; break; + case "right" : rA = !rA; rB = !rB; break; + case "top" : break; + case "left" : rA = !rA; break; + default: + rA = Math.round(Math.random()); + rB = Math.round(Math.random()); + break; + } + var prop = rA ? "top" : "left", + val = (rB ? "-" : "") + (this._size[rA ? "h" : "w" ] + 20) + "px"; + + html.style(page.domNode, prop, val); + + }, + + _showChild: function(page){ + // summary: Slide in the selected child widget + + var children = this.getChildren(); + page.isFirstChild = (page == children[0]); + page.isLastChild = (page == children[children.length-1]); + page.selected = true; + + html.style(page.domNode,{ + zIndex: this.zTop, display:"" + }) + + if(this._anim && this._anim.status()=="playing"){ + this._anim.gotoPercent(100,true); + } + + this._anim = baseFx.animateProperty({ + node:page.domNode, + properties: { + left: 0, + top: 0 + }, + duration: this.duration, + easing: this.easing, + onEnd: lang.hitch(page, function(){ + if(this.onShow){ this.onShow(); } + if(this._onShow){ this._onShow(); } + }), + beforeBegin: lang.hitch(this, "_positionChild", page) + }); + this._anim.play(); + }, + + _hideChild: function(page){ + // summary: reset the position of the hidden pane out of sight + + page.selected = false; + page.domNode.style.zIndex = this.zTop - 1; + if(page.onHide){ + page.onHide(); + } + + } + +}); + +declare("dojox.layout._RadioButton",[Widget,Templated,Contained],{ + // summary: The Buttons for a RadioGroup + // + // description: A private widget used to manipulate the StackContainer (RadioGroup*). Don't create directly. + // + + // label: String + // the Text Label of the button + label: "", + + // domNode to tell parent to select + page: null, + + templateString: '<div dojoAttachPoint="focusNode" class="dojoxRadioButton"><span dojoAttachPoint="titleNode" class="dojoxRadioButtonLabel">${label}</span></div>', + + startup: function(){ + // summary: start listening to mouseOver + this.connect(this.domNode, "onmouseenter", "_onMouse"); + }, + + _onMouse: function(/* Event */e){ + // summary: set the selected child on hover, and set our hover state class + this.getParent().selectChild(this.page); + this._clearSelected(); + domClass.add(this.domNode,"dojoxRadioButtonSelected"); + + }, + + _clearSelected: function(){ + // summary: remove hover state class from sibling Buttons. This is easier (and more reliable) + // than setting up an additional connection to onMouseOut + + // FIXME: this relies on the template being [div][span]node[/span][/div] + query(".dojoxRadioButtonSelected", this.domNode.parentNode.parentNode) + .removeClass("dojoxRadioButtonSelected") + ; + } + +}); + +lang.extend(Widget,{ + // slideFrom: String + // A parameter needed by RadioGroupSlide only. An optional paramter to force + // the ContentPane to slide in from a set direction. Defaults + // to "random", or specify one of "top", "left", "right", "bottom" + // to slideFrom top, left, right, or bottom. + slideFrom: "random" +}) +});
\ No newline at end of file |