root / trunk / web / dojo / dijit / layout / AccordionContainer.js
History | View | Annotate | Download (8.02 KB)
| 1 | 9 | andrej.cim | /*
|
|---|---|---|---|
| 2 | Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
||
| 3 | Available via Academic Free License >= 2.1 OR the modified BSD license.
|
||
| 4 | see: http://dojotoolkit.org/license for details
|
||
| 5 | */
|
||
| 6 | |||
| 7 | |||
| 8 | if(!dojo._hasResource["dijit.layout.AccordionContainer"]){ |
||
| 9 | dojo._hasResource["dijit.layout.AccordionContainer"]=true; |
||
| 10 | dojo.provide("dijit.layout.AccordionContainer");
|
||
| 11 | dojo.require("dojo.fx");
|
||
| 12 | dojo.require("dijit._Container");
|
||
| 13 | dojo.require("dijit._Templated");
|
||
| 14 | dojo.require("dijit._CssStateMixin");
|
||
| 15 | dojo.require("dijit.layout.StackContainer");
|
||
| 16 | dojo.require("dijit.layout.ContentPane");
|
||
| 17 | dojo.require("dijit.layout.AccordionPane");
|
||
| 18 | dojo.declare("dijit.layout.AccordionContainer",dijit.layout.StackContainer,{duration:dijit.defaultDuration,buttonWidget:"dijit.layout._AccordionButton",_verticalSpace:0,baseClass:"dijitAccordionContainer",postCreate:function(){ |
||
| 19 | this.domNode.style.overflow="hidden"; |
||
| 20 | this.inherited(arguments); |
||
| 21 | dijit.setWaiRole(this.domNode,"tablist"); |
||
| 22 | },startup:function(){ |
||
| 23 | if(this._started){ |
||
| 24 | return;
|
||
| 25 | } |
||
| 26 | this.inherited(arguments); |
||
| 27 | if(this.selectedChildWidget){ |
||
| 28 | var _1=this.selectedChildWidget.containerNode.style; |
||
| 29 | _1.display="";
|
||
| 30 | _1.overflow="auto";
|
||
| 31 | this.selectedChildWidget._wrapperWidget.set("selected",true); |
||
| 32 | } |
||
| 33 | },_getTargetHeight:function(_2){ |
||
| 34 | var cs=dojo.getComputedStyle(_2);
|
||
| 35 | return Math.max(this._verticalSpace-dojo._getPadBorderExtents(_2,cs).h-dojo._getMarginExtents(_2,cs).h,0); |
||
| 36 | },layout:function(){ |
||
| 37 | var _3=this.selectedChildWidget; |
||
| 38 | if(!_3){
|
||
| 39 | return;
|
||
| 40 | } |
||
| 41 | var _4=_3._wrapperWidget.domNode,_5=dojo._getMarginExtents(_4),_6=dojo._getPadBorderExtents(_4),_7=this._contentBox; |
||
| 42 | var _8=0; |
||
| 43 | dojo.forEach(this.getChildren(),function(_9){ |
||
| 44 | if(_9!=_3){
|
||
| 45 | _8+=dojo.marginBox(_9._wrapperWidget.domNode).h; |
||
| 46 | } |
||
| 47 | }); |
||
| 48 | this._verticalSpace=_7.h-_8-_5.h-_6.h-_3._buttonWidget.getTitleHeight();
|
||
| 49 | this._containerContentBox={h:this._verticalSpace,w:this._contentBox.w-_5.w-_6.w}; |
||
| 50 | if(_3){
|
||
| 51 | _3.resize(this._containerContentBox);
|
||
| 52 | } |
||
| 53 | },_setupChild:function(_a){ |
||
| 54 | _a._wrapperWidget=new dijit.layout._AccordionInnerContainer({contentWidget:_a,buttonWidget:this.buttonWidget,id:_a.id+"_wrapper",dir:_a.dir,lang:_a.lang,parent:this}); |
||
| 55 | this.inherited(arguments); |
||
| 56 | },addChild:function(_b,_c){ |
||
| 57 | if(this._started){ |
||
| 58 | dojo.place(_b.domNode,this.containerNode,_c);
|
||
| 59 | if(!_b._started){
|
||
| 60 | _b.startup(); |
||
| 61 | } |
||
| 62 | this._setupChild(_b);
|
||
| 63 | dojo.publish(this.id+"-addChild",[_b,_c]); |
||
| 64 | this.layout();
|
||
| 65 | if(!this.selectedChildWidget){ |
||
| 66 | this.selectChild(_b);
|
||
| 67 | } |
||
| 68 | }else{
|
||
| 69 | this.inherited(arguments); |
||
| 70 | } |
||
| 71 | },removeChild:function(_d){ |
||
| 72 | _d._wrapperWidget.destroy(); |
||
| 73 | delete _d._wrapperWidget;
|
||
| 74 | dojo.removeClass(_d.domNode,"dijitHidden");
|
||
| 75 | this.inherited(arguments); |
||
| 76 | },getChildren:function(){ |
||
| 77 | return dojo.map(this.inherited(arguments),function(_e){ |
||
| 78 | return _e.declaredClass=="dijit.layout._AccordionInnerContainer"?_e.contentWidget:_e; |
||
| 79 | },this);
|
||
| 80 | },destroy:function(){ |
||
| 81 | dojo.forEach(this.getChildren(),function(_f){ |
||
| 82 | _f._wrapperWidget.destroy(); |
||
| 83 | }); |
||
| 84 | this.inherited(arguments); |
||
| 85 | },_transition:function(_10,_11,_12){ |
||
| 86 | if(this._inTransition){ |
||
| 87 | return;
|
||
| 88 | } |
||
| 89 | var _13=[];
|
||
| 90 | var _14=this._verticalSpace; |
||
| 91 | if(_10){
|
||
| 92 | _10._wrapperWidget.set("selected",true); |
||
| 93 | this._showChild(_10);
|
||
| 94 | if(this.doLayout&&_10.resize){ |
||
| 95 | _10.resize(this._containerContentBox);
|
||
| 96 | } |
||
| 97 | var _15=_10.domNode;
|
||
| 98 | dojo.addClass(_15,"dijitVisible");
|
||
| 99 | dojo.removeClass(_15,"dijitHidden");
|
||
| 100 | if(_12){
|
||
| 101 | var _16=_15.style.overflow;
|
||
| 102 | _15.style.overflow="hidden";
|
||
| 103 | _13.push(dojo.animateProperty({node:_15,duration:this.duration,properties:{height:{start:1,end:this._getTargetHeight(_15)}},onEnd:function(){
|
||
| 104 | _15.style.overflow=_16; |
||
| 105 | if(dojo.isIE){
|
||
| 106 | setTimeout(function(){
|
||
| 107 | dojo.removeClass(_15.parentNode,"dijitAccordionInnerContainerFocused");
|
||
| 108 | setTimeout(function(){
|
||
| 109 | dojo.addClass(_15.parentNode,"dijitAccordionInnerContainerFocused");
|
||
| 110 | },0);
|
||
| 111 | },0);
|
||
| 112 | } |
||
| 113 | }})); |
||
| 114 | } |
||
| 115 | } |
||
| 116 | if(_11){
|
||
| 117 | _11._wrapperWidget.set("selected",false); |
||
| 118 | var _17=_11.domNode;
|
||
| 119 | if(_12){
|
||
| 120 | var _18=_17.style.overflow;
|
||
| 121 | _17.style.overflow="hidden";
|
||
| 122 | _13.push(dojo.animateProperty({node:_17,duration:this.duration,properties:{height:{start:this._getTargetHeight(_17),end:1}},onEnd:function(){
|
||
| 123 | dojo.addClass(_17,"dijitHidden");
|
||
| 124 | dojo.removeClass(_17,"dijitVisible");
|
||
| 125 | _17.style.overflow=_18; |
||
| 126 | if(_11.onHide){
|
||
| 127 | _11.onHide(); |
||
| 128 | } |
||
| 129 | }})); |
||
| 130 | }else{
|
||
| 131 | dojo.addClass(_17,"dijitHidden");
|
||
| 132 | dojo.removeClass(_17,"dijitVisible");
|
||
| 133 | if(_11.onHide){
|
||
| 134 | _11.onHide(); |
||
| 135 | } |
||
| 136 | } |
||
| 137 | } |
||
| 138 | if(_12){
|
||
| 139 | this._inTransition=true; |
||
| 140 | var _19=dojo.fx.combine(_13);
|
||
| 141 | _19.onEnd=dojo.hitch(this,function(){ |
||
| 142 | delete this._inTransition; |
||
| 143 | }); |
||
| 144 | _19.play(); |
||
| 145 | } |
||
| 146 | },_onKeyPress:function(e,_1a){ |
||
| 147 | if(this._inTransition||this.disabled||e.altKey||!(_1a||e.ctrlKey)){ |
||
| 148 | if(this._inTransition){ |
||
| 149 | dojo.stopEvent(e); |
||
| 150 | } |
||
| 151 | return;
|
||
| 152 | } |
||
| 153 | var k=dojo.keys,c=e.charOrCode;
|
||
| 154 | if((_1a&&(c==k.LEFT_ARROW||c==k.UP_ARROW))||(e.ctrlKey&&c==k.PAGE_UP)){
|
||
| 155 | this._adjacent(false)._buttonWidget._onTitleClick(); |
||
| 156 | dojo.stopEvent(e); |
||
| 157 | }else{
|
||
| 158 | if((_1a&&(c==k.RIGHT_ARROW||c==k.DOWN_ARROW))||(e.ctrlKey&&(c==k.PAGE_DOWN||c==k.TAB))){
|
||
| 159 | this._adjacent(true)._buttonWidget._onTitleClick(); |
||
| 160 | dojo.stopEvent(e); |
||
| 161 | } |
||
| 162 | } |
||
| 163 | }}); |
||
| 164 | dojo.declare("dijit.layout._AccordionInnerContainer",[dijit._Widget,dijit._CssStateMixin],{baseClass:"dijitAccordionInnerContainer",isContainer:true,isLayoutContainer:true,buildRendering:function(){ |
||
| 165 | this.domNode=dojo.place("<div class='"+this.baseClass+"'>",this.contentWidget.domNode,"after"); |
||
| 166 | var _1b=this.contentWidget,cls=dojo.getObject(this.buttonWidget); |
||
| 167 | this.button=_1b._buttonWidget=(new cls({contentWidget:_1b,label:_1b.title,title:_1b.tooltip,dir:_1b.dir,lang:_1b.lang,iconClass:_1b.iconClass,id:_1b.id+"_button",parent:this.parent})).placeAt(this.domNode); |
||
| 168 | dojo.place(this.contentWidget.domNode,this.domNode); |
||
| 169 | },postCreate:function(){ |
||
| 170 | this.inherited(arguments); |
||
| 171 | this.connect(this.contentWidget,"set",function(_1c,_1d){ |
||
| 172 | var _1e={title:"label",tooltip:"title",iconClass:"iconClass"}[_1c]; |
||
| 173 | if(_1e){
|
||
| 174 | this.button.set(_1e,_1d);
|
||
| 175 | } |
||
| 176 | },this);
|
||
| 177 | },_setSelectedAttr:function(_1f){ |
||
| 178 | this.selected=_1f;
|
||
| 179 | this.button.set("selected",_1f); |
||
| 180 | if(_1f){
|
||
| 181 | var cw=this.contentWidget; |
||
| 182 | if(cw.onSelected){
|
||
| 183 | cw.onSelected(); |
||
| 184 | } |
||
| 185 | } |
||
| 186 | },startup:function(){ |
||
| 187 | this.contentWidget.startup();
|
||
| 188 | },destroy:function(){ |
||
| 189 | this.button.destroyRecursive();
|
||
| 190 | delete this.contentWidget._buttonWidget; |
||
| 191 | delete this.contentWidget._wrapperWidget; |
||
| 192 | this.inherited(arguments); |
||
| 193 | },destroyDescendants:function(){ |
||
| 194 | this.contentWidget.destroyRecursive();
|
||
| 195 | }}); |
||
| 196 | dojo.declare("dijit.layout._AccordionButton",[dijit._Widget,dijit._Templated,dijit._CssStateMixin],{templateString:dojo.cache("dijit.layout","templates/AccordionButton.html","<div dojoAttachEvent='onclick:_onTitleClick' class='dijitAccordionTitle'>\n\t<div dojoAttachPoint='titleNode,focusNode' dojoAttachEvent='onkeypress:_onTitleKeyPress'\n\t\t\tclass='dijitAccordionTitleFocus' wairole=\"tab\" waiState=\"expanded-false\"\n\t\t><span class='dijitInline dijitAccordionArrow' waiRole=\"presentation\"></span\n\t\t><span class='arrowTextUp' waiRole=\"presentation\">+</span\n\t\t><span class='arrowTextDown' waiRole=\"presentation\">-</span\n\t\t><img src=\"${_blankGif}\" alt=\"\" class=\"dijitIcon\" dojoAttachPoint='iconNode' style=\"vertical-align: middle\" waiRole=\"presentation\"/>\n\t\t<span waiRole=\"presentation\" dojoAttachPoint='titleTextNode' class='dijitAccordionText'></span>\n\t</div>\n</div>\n"),attributeMap:dojo.mixin(dojo.clone(dijit.layout.ContentPane.prototype.attributeMap),{label:{node:"titleTextNode",type:"innerHTML"},title:{node:"titleTextNode",type:"attribute",attribute:"title"},iconClass:{node:"iconNode",type:"class"}}),baseClass:"dijitAccordionTitle",getParent:function(){ |
||
| 197 | return this.parent; |
||
| 198 | },postCreate:function(){ |
||
| 199 | this.inherited(arguments); |
||
| 200 | dojo.setSelectable(this.domNode,false); |
||
| 201 | var _20=dojo.attr(this.domNode,"id").replace(" ","_"); |
||
| 202 | dojo.attr(this.titleTextNode,"id",_20+"_title"); |
||
| 203 | dijit.setWaiState(this.focusNode,"labelledby",dojo.attr(this.titleTextNode,"id")); |
||
| 204 | },getTitleHeight:function(){ |
||
| 205 | return dojo.marginBox(this.domNode).h; |
||
| 206 | },_onTitleClick:function(){ |
||
| 207 | var _21=this.getParent(); |
||
| 208 | if(!_21._inTransition){
|
||
| 209 | _21.selectChild(this.contentWidget,true); |
||
| 210 | dijit.focus(this.focusNode);
|
||
| 211 | } |
||
| 212 | },_onTitleKeyPress:function(evt){ |
||
| 213 | return this.getParent()._onKeyPress(evt,this.contentWidget); |
||
| 214 | },_setSelectedAttr:function(_22){ |
||
| 215 | this.selected=_22;
|
||
| 216 | dijit.setWaiState(this.focusNode,"expanded",_22); |
||
| 217 | dijit.setWaiState(this.focusNode,"selected",_22); |
||
| 218 | this.focusNode.setAttribute("tabIndex",_22?"0":"-1"); |
||
| 219 | }}); |
||
| 220 | } |