Changeset 8423

Timestamp:

05/04/07 09:40:19 (21 months ago)

Author:

peller

Message:

Fixes #2814

Location:

dijit/trunk

Files:

• layout/AccordionContainer.js (copied) (copied from trunk/src/widget/AccordionContainer.js) (9 diffs)
• layout/templates (added)
• layout/templates/AccordionPane.html (copied) (copied from trunk/src/widget/templates/AccordionPane.html) (1 diff)
• tests/layout/test_AccordionContainer.html (copied) (copied from trunk/tests/widget/test_AccordionContainer.html) (5 diffs)

dijit/trunk/layout/AccordionContainer.js

@@ -1 @@
-dojo.provide("dojo.widget.AccordionContainer");
-
-dojo.require("dojo.widget.*");
-dojo.require("dojo.html.*");
-dojo.require("dojo.lfx.html");
-dojo.require("dojo.html.selection");
-dojo.require("dojo.widget.html.layout");
-dojo.require("dojo.widget.PageContainer");
-dojo.require("dojo.html.iframe");
-
-
+dojo.provide("dijit.layout.AccordionContainer");
+
+dojo.require("dojo.fx");
+dojo.require("dijit.base.Widget");
+dojo.require("dijit.base.Layout");
+dojo.require("dijit.base.Showable");
+dojo.require("dijit.layout.PageContainer");
+dojo.require("dijit.util.BackgroundIframe");
+dojo.require("dijit.base.TemplatedWidget");
 /**
  * description
@@ -40 +38 @@
  *
  * usage
- *      <div dojoType="AccordionContainer">
- *              <div dojoType="ContentPane" label="pane 1">...</div>
+ *      <div dojoType="dijit.layout.AccordionContainer">
+ *              <div dojoType="dijit.layout.ContentPane" label="pane 1">...</div>
  *              ...
  *      </div>
@@ -48 +46 @@
  *      * this widget should extend PageContainer
  */
- dojo.widget.defineWidget(
-        "dojo.widget.AccordionContainer",
-        dojo.widget.HtmlWidget,
+
+dojo.declare(
+        "dijit.layout.AccordionContainer",
+        [dijit.base.Widget, dijit.base.Layout, dijit.base.Showable],
         {
+
                 // summary: 
                 //              Holds a set of panes where every pane's title is visible, but only one pane's content is visible at a time,
                 //              and switching between panes is visualized by sliding the other panes up/down.
-
-                isContainer: true,
                 
                 // labelNodeClass: String
@@ -70 +68 @@
                 duration: 250,
 
-                fillInTemplate: function(){
+                postCreate: function(){
+                        dijit.layout.AccordionContainer.superclass.postCreate.apply(this, arguments);
                         with(this.domNode.style){
                                 // position must be either relative or absolute
@@ -80 +79 @@
                 },
 
-                addChild: function(/*Widget*/ widget){
+                addChild: function(widget){
                         var child = this._addChild(widget);
                         this._setSizes();
@@ -86 +85 @@
                 },
                 
-                _addChild: function(/*Widget*/ widget){
+                _addChild: function(widget){
                         // summary
                         //              Internal call to add child, used during postCreate() and by the real addChild() call
-                        if (widget.widgetType != "AccordionPane") {
-                                var wrapper=dojo.widget.createWidget("AccordionPane",{label: widget.label, selected: widget.selected, labelNodeClass: this.labelNodeClass, containerNodeClass: this.containerNodeClass, allowCollapse: this.allowCollapse });
+
+                        if(widget.declaredClass != "dijit.layout.AccordionPane"){
+                                // create a node that will be promoted to an accordionpane
+                                var refNode = document.createElement("span");
+                                this.domNode.appendChild(refNode);
+                                var wrapper = new dijit.layout.AccordionPane({label: widget.label, 
+                                                                        selected: widget.selected, labelNodeClass: this.labelNodeClass,
+                                                                        containerNodeClass: this.containerNodeClass, allowCollapse: this.allowCollapse }, refNode);
                                 wrapper.addChild(widget);
-                                this.addWidgetAsDirectChild(wrapper);
-                                this.registerChild(wrapper, this.children.length);
+                                this.domNode.appendChild(wrapper.domNode);
                                 return wrapper; // Widget
-                        } else {
-                                dojo.html.addClass(widget.containerNode, this.containerNodeClass);
-                                dojo.html.addClass(widget.labelNode, this.labelNodeClass);
-                                this.addWidgetAsDirectChild(widget);
-                                this.registerChild(widget, this.children.length);       
+                        }else{
+                                dojo.addClass(widget.containerNode, this.containerNodeClass);
+                                dojo.addClass(widget.labelNode, this.labelNodeClass);
+                                dojo.place(widget.domNode, this.domNode, "last");
                                 return widget;  // Widget
                         }
                 },
-        
-                postCreate: function() {
-                        var tmpChildren = this.children;
-                        this.children=[];
-                        dojo.html.removeChildren(this.domNode);
-                        dojo.lang.forEach(tmpChildren, dojo.lang.hitch(this,"_addChild"));
-                        this._setSizes();
-                },
-        
-                removeChild: function(/*Widget*/ widget) {
-                        dojo.widget.AccordionContainer.superclass.removeChild.call(this, widget);
+
+                layout: function(){
+                        var tmpChildren = this.getChildren();
+
+                        // PORT: move to utility class
+                        var _removeChildren = function(node){
+                                var count = node.childNodes.length;
+                                while(node.hasChildNodes()){
+                                        node.removeChild(node.firstChild); 
+                                }
+                                return count; // int
+                        };
+                        _removeChildren(this.domNode);
+                        dojo.forEach(tmpChildren, dojo.hitch(this,"_addChild"));
+                        this._setSizes();
+                },
+
+                removeChild: function(widget){
+                        dijit.layout.AccordionContainer.superclass.removeChild.call(this, widget);
                         this._setSizes();
                 },
@@ -121 +132 @@
                 },
 
-                _setSizes: function() {
+                _setSizes: function(){
                         // summary
                         //              Set panes' size/position based on my size, and the current open node.
@@ -128 +139 @@
                         var totalCollapsedHeight = 0;
                         var openIdx = 0;
-                        dojo.lang.forEach(this.children, function(child, idx){
+                        dojo.forEach(this.getChildren(), function(child, idx){
                                 totalCollapsedHeight += child.getLabelHeight();
                                 if(child.selected){ openIdx=idx; }
                         });
-
                         // size and position each pane
-                        var mySize=dojo.html.getContentBox(this.domNode);
+                        var mySize = dojo.contentBox(this.domNode);
                         var y = 0;
-                        dojo.lang.forEach(this.children, function(child, idx){
+                        dojo.forEach(this.getChildren(), function(child, idx){
                                 var childCollapsedHeight = child.getLabelHeight();
-                                child.resizeTo(mySize.width, mySize.height-totalCollapsedHeight+childCollapsedHeight);
-                                child.domNode.style.zIndex=idx+1;
-                                child.domNode.style.position="absolute";
-                                child.domNode.style.top = y+"px";
-                                y += (idx==openIdx) ? dojo.html.getBorderBox(child.domNode).height : childCollapsedHeight;
+                                child.resize({w: mySize.w, h: mySize.h -totalCollapsedHeight+childCollapsedHeight});
+                                var style = child.domNode.style;
+                                style.zIndex=idx+1;
+                                style.position="absolute";
+                                style.top = y+"px";
+                                // TODO: REVISIT: PORT: was getBorderBox, now is marginBox ?
+                                y += (idx==openIdx) ? dojo.marginBox(child.domNode).h : childCollapsedHeight;
                         });
                 },
 
-                selectChild: function(/*Widget*/ page){
+                selectChild: function(page){
                         // summary
                         //              close the current page and select a new one
-                        dojo.lang.forEach(this.children, function(child){child.setSelected(child==page);});
-
+                        dojo.forEach(this.getChildren(), function(child){child.setSelected(child==page);});
                         // slide each pane that needs to be moved
                         var y = 0;
                         var anims = [];
-                        dojo.lang.forEach(this.children, function(child, idx){
+                        dojo.forEach(this.getChildren(), function(child, idx){
                                 if(child.domNode.style.top != (y+"px")){
-                                        anims.push(dojo.lfx.html.slideTo(child.domNode, {top: y, left: 0}, this.duration));
-                                }
-                                y += child.selected ? dojo.html.getBorderBox(child.domNode).height : child.getLabelHeight();
+                                        anims.push(dojo.fx.slideTo({node: child.domNode,
+                                                                top: y, left: 0, duration: this.duration}));
+                                }
+                                // TODO: REVISIT: PORT: was getBorderBox, now is marginBox ?
+                                y += child.selected ? dojo.marginBox(child.domNode).h : child.getLabelHeight();
                         }, this);
-                        dojo.lfx.combine(anims).play();
-                },
-                focusNextLabel: function(/*Widget*/ page){
-                        var bFound = false;
-                        dojo.lang.forEach(this.children, function(child, idx){
-                                if(child==page){
-                                        bFound = true;
-                                        child.setFocus(false);
-                                }else{
-                                        if(bFound){
-                                                child.setFocus(true);
-                                                bFound = false;
-                                        }
-                                }
-                        }, this);
-                },
-
-                focusPreviousLabel: function(/*Widget*/ page){
-                        var nPrevious = null;
-                        dojo.lang.forEach(this.children, function(child, idx){
-                                if(child==page){
-                                        child.setFocus(false);
-                                        if(nPrevious){
-                                                nPrevious.setFocus(true);
-                                        }
-                                }
-                                nPrevious = child;
-                        }, this);
-                }
-        }
- );
-        
-
-dojo.widget.defineWidget(
-        "dojo.widget.AccordionPane",
-        dojo.widget.HtmlWidget,
+                        dojo.fx.combine(anims).play();
+                }
+        }
+);      
+
+dojo.declare(
+        "dijit.layout.AccordionPane",
+        [dijit.base.Widget, dijit.base.TemplatedWidget, dijit.base.Showable,
+          dijit.base.Layout, dijit.base.Contained],
 {
         // summary
@@ -220 +206 @@
         selected: false,
 
-        templatePath: dojo.uri.moduleUri("dojo.widget", "templates/AccordionPane.html"),
-        templateCssPath: dojo.uri.moduleUri("dojo.widget", "templates/AccordionPane.css"),
-
-        isContainer: true,
-
-        fillInTemplate: function() {
-                dojo.html.addClass(this.domNode, this["class"]);
-                dojo.widget.AccordionPane.superclass.fillInTemplate.call(this);
-                //dojo.html.disableSelection(this.labelNode);
+        templatePath: dojo.moduleUrl("dijit.layout", "templates/AccordionPane.html"),
+
+        postCreate: function(){
+                dijit.layout.AccordionPane.superclass.postCreate.apply(this, arguments);
+                dojo.addClass(this.domNode, this["class"]);
+                dijit._disableSelection(this.labelNode);
                 this.setSelected(this.selected);
 
                 // Prevent IE bleed-through problem
-                this.bgIframe = new dojo.html.BackgroundIframe(this.domNode);
-        },
-
-        setLabel: function(/*String*/ label) {
+                this.bgIframe = new dijit.util.BackgroundIframe(this.domNode);
+        },
+
+        setLabel: function(/*String*/ label){
                 // summary: set the  title of the node
                 this.labelNode.innerHTML=label;
         },
         
-        resizeTo: function(width, height){
-                dojo.html.setMarginBox(this.domNode, {width: width, height: height});
+        onResized: function(){
                 var children = [
                         {domNode: this.labelNode, layoutAlign: "top"},
                         {domNode: this.containerNode, layoutAlign: "client"}
                 ];
-                dojo.widget.html.layout(this.domNode, children);
-                var childSize = dojo.html.getContentBox(this.containerNode);
-                this.children[0].resizeTo(childSize.width, childSize.height);
-        },
-
-        getLabelHeight: function() {
+                dijit.base.Layout.layoutChildren(this.domNode, children);
+                var childSize = dojo.contentBox(this.containerNode);
+                var child = this.getChildren()[0];
+                if(child && child.resize){
+                        child.resize(childSize);
+                }
+        },
+
+        getLabelHeight: function(){
                 // summary: returns the height of the title dom node
-                return dojo.html.getMarginBox(this.labelNode).height;   // Integer
-        },
-
-        onLabelClick: function() {
+                return dojo.marginBox(this.labelNode).h;        // Integer
+        },
+
+        onLabelClick: function(){
                 // summary: callback when someone clicks my label
-                this.parent.selectChild(this);
-        },
-        onLabelKey: function(/*Event*/ e) {
-                // summary: callback when someone presses a key while focus is on my label
-                var k = dojo.event.browser.keys;
-                switch(e.key){
-                        case " ":
-                                this.onLabelClick();
-                                dojo.event.browser.stopEvent(e);
-                                return;
-                        case k.KEY_LEFT_ARROW:
-                                this.parent.focusPreviousLabel(this);
-                                dojo.event.browser.stopEvent(e);
-                                return;
-                        case k.KEY_RIGHT_ARROW:
-                                this.parent.focusNextLabel(this);
-                                dojo.event.browser.stopEvent(e);
-                                return;
-                }
-        },
-
-        onFocus: function(/*Event*/ e){dojo.debug((this["class"]+"-focused"));
-                dojo.html.addClass(this.domNode, this["class"]+"-focused");
-                this.onLabelClick();
-        },
-
-        onBlur: function(/*Event*/ e){
-                dojo.html.removeClass(this.domNode, this["class"]+"-focused");
-                
-        },
-
-        setFocus: function(/*Boolean*/ isFocused){
-                if(isFocused){
-                        this.labelNode.focus();
-                }
-        },
-
+                this.getParent().selectChild(this);
+        },
         
         setSelected: function(/*Boolean*/ isSelected){
                 this.selected=isSelected;
-                (isSelected ? dojo.html.addClass : dojo.html.removeClass)(this.domNode, this["class"]+"-selected");
-                this.labelNode.tabIndex = isSelected ? 0 : -1;
+                (isSelected ? dojo.addClass : dojo.removeClass)(this.domNode, this["class"]+"-selected");
+
                 // make sure child is showing (lazy load), and also that onShow()/onHide() is called
-                var child = this.children[0];
+                var child = this.getChildren()[0];
                 if(child){
                         if(isSelected){
-                                if(!child.isShowing()){
+                                if(child.isShowing()){
+                                        child.onShow();
+                                }else{
                                         child.show();
-                                }else{
-                                        child.onShow();
                                 }
                         }else{
+                                // #1969 - Firefox has a display glitch, force child to hide
+                                // only the titlepane will get the slide animation
+                                if(child.isShowing()){
+                                        child.hide();
+                                }
                                 child.onHide();
                         }

dijit/trunk/layout/templates/AccordionPane.html

@@ -1 @@
-<div dojoAttachPoint="domNode" waiRole="tabcontainer">
-<div dojoAttachPoint="labelNode" dojoAttachEvent="onclick: onLabelClick; onkey: onLabelKey; onFocus; onBlur;" tabindex="0" waiRole="tab" class="${this.labelNodeClass}">${this.label}</div>
-<div dojoAttachPoint="containerNode" style="overflow: hidden;" class="${this.containerNodeClass}" waiRole="tabpanel"></div>
+<div dojoAttachPoint="domNode">
+<div dojoAttachPoint="labelNode" dojoAttachEvent="onclick: onLabelClick" class="${this.labelNodeClass}">${this.label}</div>
+<div dojoAttachPoint="containerNode" style="overflow: hidden;" class="${this.containerNodeClass}"></div>
 </div>

dijit/trunk/tests/layout/test_AccordionContainer.html

@@ -5 +5 @@
         
                 <title>Accordion Widget Demo</title>
-                
+<style>
+@import "../../../dojo/resources/dojo.css";
+@import "../../themes/tundra/tundra.css";
+@import "css/dijitTests.css";
+</style>                
                 <script type="text/javascript">
                         var djConfig = {isDebug: true };
                 </script>
-                <script type="text/javascript" src="../../dojo.js"></script>
+                <script type="text/javascript" src="../../../dojo/dojo.js"></script>
                 <script type="text/javascript">
-                        dojo.require("dojo.widget.*");
-                        dojo.require("dojo.widget.AccordionContainer");
-                        dojo.require("dojo.widget.ContentPane");
-                        dojo.require("dojo.widget.TreeV3");
-                        dojo.require("dojo.widget.TreeBasicControllerV3");
-                        dojo.require("dojo.widget.SplitContainer");
+                        dojo.require("dijit.layout.AccordionContainer");
+                        dojo.require("dijit.layout.ContentPane");
+//                      dojo.require("dojo.widget.TreeV3");
+//                      dojo.require("dojo.widget.TreeBasicControllerV3");
+                        dojo.require("dijit.layout.SplitContainer");
+//                      dojo.require("dijit.form.ComboBox");
+                        dojo.require("dijit.form.Button");
+                        dojo.require("dijit.util.parser");      // scan page for widgets and instantiate them
                 </script>
                 
@@ -23 +29 @@
                         var accordion;
                 
-                        function init() {
-                                accordion = dojo.widget.createWidget("AccordionContainer", null,
-                                        dojo.byId("accordionShell"));
+                        function init(){
+                                accordion = new dijit.layout.AccordionContainer({}, dojo.byId("accordionShell"));
                                 var label=["pane 1", "pane 2", "pane 3"];
-                                for(i=0; i<label.length; ++i) {
-                                        var content = dojo.widget.createWidget("ContentPane", {label: label[i], selected: i==1});
+                                for(i=0; i<label.length; ++i){
+                                        // add a node that will be promoted to the content widget
+                                        var refNode = document.createElement("span");
+                                        document.body.appendChild(refNode);
+                                        var content = new dijit.layout.ContentPane({label: label[i], selected: i==1}, refNode);
                                         content.setContent("this is " + label[i]);
-                                        dojo.debug("adding content pane " + content.widgetId);
+                                        console.debug("adding content pane " + content.widgetId);
                                         accordion.addChild(content);
                                 }
+                                accordion.layout();
                                 accordion.onResized();
                         }
@@ -38 +47 @@
                         
                         function destroyChildren(){
-                                accordion.destroyChildren();
+                                accordion.destroyDescendants();
                         }
                 </script>
@@ -49 +58 @@
                 <p>HTML before</p>
 
-                <div dojoType="AccordionContainer" duration="200" labelNodeClass="label" containerNodeClass="accBody"
+                <div dojoType="dijit.layout.AccordionContainer" duration="200" labelNodeClass="label" containerNodeClass="accBody"
                         style="float: left; margin-right: 30px;  width: 400px; height: 300px; overflow: hidden"
                 >
-                <div dojoType="ContentPane" selected="true" label="Pane 1 (tree, select box)" style="overflow: scroll;"
-                        onShow="dojo.debug('pane 1 shown');" onHide="dojo.debug('pane 1 hidden');" >
+                <div dojoType="dijit.layout.ContentPane" selected="true" label="Pane 1 (tree, select box)" style="overflow: scroll;"
+                        onShow="console.debug('pane 1 shown');" onHide="console.debug('pane 1 hidden');" >
 
-                                <div dojoType="TreeBasicControllerV3" widgetId="controller"></div>      
+                    <div zdojoType="TreeBasicControllerV3" widgetId="controller"></div> 
                                 
-                                <div dojoType="TreeV3" listeners="controller" toggle="fade">
-                    <div dojoType="TreeNodeV3" title="Item 1">
-                        <div dojoType="TreeNodeV3" title="Item 1.1"><br/></div>
-                        <div dojoType="TreeNodeV3" title="Item 1.2">
-                            <div dojoType="TreeNodeV3" title="Item 1.2.1"></div>
-                            <div dojoType="TreeNodeV3" title="Item 1.2.2"></div>
-                        </div>
-                        <div dojoType="TreeNodeV3" title="Item 1.3">
-                            <div dojoType="TreeNodeV3" title="Item 1.3.1"></div>
-                            <div dojoType="TreeNodeV3" title="Item 1.3.2"></div>
-                        </div>
-                        <div dojoType="TreeNodeV3" title="Item 1.4">
-                            <div dojoType="TreeNodeV3" title="Item 1.4.1"></div>
-                        </div>
-                    </div>
-                </div>
+                    <div zdojoType="TreeV3" listeners="controller" toggle="fade">
+                    <div zdojoType="TreeNodeV3" title="Item 1">
+                        <div zdojoType="TreeNodeV3" title="Item 1.1"><br/></div>
+                        <div zdojoType="TreeNodeV3" title="Item 1.2">
+                            <div zdojoType="TreeNodeV3" title="Item 1.2.1"></div>
+                            <div zdojoType="TreeNodeV3" title="Item 1.2.2"></div>
+                        </div>
+                        <div zdojoType="TreeNodeV3" title="Item 1.3">
+                            <div zdojoType="TreeNodeV3" title="Item 1.3.1"></div>
+                            <div zdojoType="TreeNodeV3" title="Item 1.3.2"></div>
+                        </div>
+                        <div zdojoType="TreeNodeV3" title="Item 1.4">
+                            <div zdojoType="TreeNodeV3" title="Item 1.4.1"></div>
+                        </div>
+                    </div>
+                </div>
 
                                 <br>
@@ -81 +90 @@
                                 </select>
 
-                <p>
-                        Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
-                        suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
-                        Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
-                        bibendum sit amet, semper quis, aliquet nec, sapien.  Aliquam
-                        aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
-                        ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
-                        dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
-                        quam.
-                </p>
-                <p>
-                        Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
-