Changeset 5940

Timestamp:

10/02/06 02:25:05 (2 years ago)

Author:

bill

Message:

documentation. also move AccordionPane? inside of AccordionContainer?.js since AccordionPane? is just being used as an internal widget.

Location:

trunk/src

Files:

• namespaces/dojo.js (modified) (2 diffs)
• widget/AccordionContainer.js (modified) (7 diffs)
• widget/AccordionPane.js (deleted)

trunk/src/namespaces/dojo.js

@@ -12 +12 @@
                 html: {
                         "accordioncontainer": "dojo.widget.AccordionContainer",
-                        "treerpccontroller": "dojo.widget.TreeRPCController",
-                        "accordionpane": "dojo.widget.AccordionPane",
                         "button": "dojo.widget.Button",
                         "chart": "dojo.widget.Chart",
@@ -95 +93 @@
                         "treecontrollerextension": "dojo.widget.TreeControllerExtension",
                         "treenode": "dojo.widget.TreeNode",
+                        "treerpccontroller": "dojo.widget.TreeRPCController",
                         "treebasiccontrollerv3": "dojo.widget.TreeBasicControllerV3",
                         "treecontextmenuv3": "dojo.widget.TreeContextMenuV3",

trunk/src/widget/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");
+
+
 /**
- * Holds a set of panes where every pane's title is visible, but only one pane's content is visible at a time.
- *
- * Front view (3 panes, pane #2 open)
- * ------------------------
- * |:::Pane#1 title:::    |
- * |:::Pane#2 title:::    |
- * |                      |
- * |    pane#2 contents   |
- * |                      |
- * |:::Pane#3 title:::    |
- * ------------------------
- *
- * Side view (showing implementation):
+ *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.
+ *
+ * description
+ *      Front view (3 panes, pane #2 open)
+ *      ------------------------
+ *      |:::Pane#1 title:::    |
+ *      |:::Pane#2 title:::    |
+ *      |                      |
+ *      |    pane#2 contents   |
+ *      |                      |
+ *      |:::Pane#3 title:::    |
+ *      ------------------------
+ *
+ *      Side view (showing implementation):
  *
  *         viewport    pane#3     pane#2     pane#1
@@ -18 +31 @@
  *            |                                =
  *            |                      =         |
- * front      |                      |         |
+ *      front     |                      |         |
  *            |                      |         =
  *            |                      =
@@ -26 +39 @@
  *                       =
  *
- * Panes are stacked by z-index like a stack of cards, so they can be slid correctly.
- * The panes on the bottom extend past the bottom of the viewport.
- *
- * TODO: this class should extend PageContainer
+ *      Panes are stacked by z-index like a stack of cards, so they can be slid correctly.
+ *      The panes on the bottom extend past the bottom of the viewport (but are hidden).
+ *
+ * TODO:
+ *      * this widget should extend PageContainer
+ *      * call child.onShow(), child.onHide() so you can attach to those methods if you want
  */
-
-dojo.provide("dojo.widget.AccordionContainer");
-
-dojo.require("dojo.widget.*");
-dojo.require("dojo.html.*");
-dojo.require("dojo.lfx.html");
-dojo.require("dojo.widget.AccordionPane");
-dojo.require("dojo.widget.PageContainer");
-
-dojo.widget.defineWidget(
+ dojo.widget.defineWidget(
         "dojo.widget.AccordionContainer",
         dojo.widget.HtmlWidget,
         {
                 isContainer: true,
+                
+                // String
+                //      CSS class name for dom node w/the title
                 labelNodeClass: "label",
+                
+                // String
+                //      CSS class name for dom node holding the content
                 containerNodeClass: "accBody",
 
@@ -62 +74 @@
                 },
 
-                addChild: function(widget, overrideContainerNode, pos, ref, insertIndex){
+                addChild: function(/*Widget*/ widget){
                         var child = this._addChild(widget);
                         this._setSizes();
@@ -99 +111 @@
                 },
         
-                removeChild: function(widget) {
+                removeChild: function(/*Widget*/ widget) {
                         dojo.widget.AccordionContainer.superclass.removeChild.call(this, widget);
                         this._setSizes();
@@ -110 +122 @@
                 _setSizes: function() {
                         // summary
-                        //      Move panes to right position based on current open node.
+                        //      Set panes' size/position based on my size, and the current open node.
 
                         // get cumulative height of all the title bars, and figure out which pane is open
@@ -152 +164 @@
 );
 
+/**
+ * summary
+ *      AccordionPane is a box with a title that contains another widget (often a ContentPane).
+ *      It's a widget used internally by AccordionContainer.
+ */
+dojo.widget.defineWidget(
+        "dojo.widget.AccordionPane",
+        dojo.widget.HtmlWidget,
+{
+        // parameters
+
+        // String
+        //      label to print on top of AccordionPane
+        label: "",
+
+        // String
+        //      CSS class name for the AccordionPane's dom node
+        "class": "dojoAccordionPane",
+
+        // String
+        //      CSS class name for the AccordionPane's label node
+        labelNodeClass: "label",
+
+        // String
+        //      CSS class name for the AccordionPane's container node
+        containerNodeClass: "accBody",
+        
+        // Boolean
+        //      if true, this is the open pane
+        selected: false,
+
+        templatePath: dojo.uri.dojoUri("src/widget/templates/AccordionPane.html"),
+        templateCssPath: dojo.uri.dojoUri("src/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);
+                this.setSelected(this.selected);
+        },
+
+        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});
+                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() {
+                // summary: returns the height of the title dom node
+                return dojo.html.getMarginBox(this.labelNode).height;
+        },
+
+        onLabelClick: function() {
+                // summary: callback when someone clicks my label
+                this.parent.selectChild(this);
+        },
+        
+        setSelected: function(/*Boolean*/ isSelected){
+                this.selected=isSelected;
+                (isSelected ? dojo.html.addClass : dojo.html.removeClass)(this.domNode, this["class"]+"-selected");
+
+                // make sure child is showing (lazy load)
+                if(isSelected  && this.children.length){
+                        var child = this.children[0];
+                        if(!child.isShowing()){
+                                child.show();
+                        }
+                }
+        }
+});
+
 // These arguments can be specified for the children of an AccordionContainer
 // Since any widget can be specified as a child, mix them