Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dijit.layout.StackContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.layout.StackContainer"] = true;
dojo.provide("dijit.layout.StackContainer");

dojo.require("dijit._Templated");
dojo.require("dijit.layout._LayoutWidget");
dojo.require("dijit.form.Button");

dojo.declare(
        "dijit.layout.StackContainer",
        dijit.layout._LayoutWidget,

        // summary
        //      A container that has multiple children, but shows only
        //      one child at a time (like looking at the pages in a book one by one).
        //
        //      Publishes topics <widgetId>-addChild, <widgetId>-removeChild, and <widgetId>-selectChild
        //
        //      Can be base class for container, Wizard, Show, etc.
{
        // doLayout: Boolean
        //  if true, change the size of my currently displayed child to match my size
        doLayout: true,

        _started: false,

        // selectedChildWidget: Widget
        //      References the currently selected child widget, if any

        postCreate: function(){
                dijit.setWaiRole((this.containerNode || this.domNode), "tabpanel");
                this.connect(this.domNode, "onkeypress", this._onKeyPress);
        },
        
        startup: function(){
                if(this._started){ return; }

                var children = this.getChildren();

                // Setup each page panel
                dojo.forEach(children, this._setupChild, this);

                // Figure out which child to initially display
                dojo.some(children, function(child){
                        if(child.selected){
                                this.selectedChildWidget = child;
                        }
                        return child.selected;
                }, this);

                var selected = this.selectedChildWidget;

                // Default to the first child
                if(!selected && children[0]){
                        selected = this.selectedChildWidget = children[0];
                        selected.selected = true;
                }
                if(selected){
                        this._showChild(selected);
                }

                // Now publish information about myself so any StackControllers can initialize..
                dojo.publish(this.id+"-startup", [{children: children, selected: selected}]);
                this.inherited("startup",arguments);
                this._started = true;
        },

        _setupChild: function(/*Widget*/ page){
                // Summary: prepare the given child

                page.domNode.style.display = "none";

                // since we are setting the width/height of the child elements, they need
                // to be position:relative, or IE has problems (See bug #2033)
                page.domNode.style.position = "relative";

                return page; // dijit._Widget
        },

        addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){
                // summary: Adds a widget to the stack
                 
                dijit._Container.prototype.addChild.apply(this, arguments);
                child = this._setupChild(child);

                if(this._started){
                        // in case the tab titles have overflowed from one line to two lines
                        this.layout();

                        dojo.publish(this.id+"-addChild", [child, insertIndex]);

                        // if this is the first child, then select it
                        if(!this.selectedChildWidget){
                                this.selectChild(child);
                        }
                }
        },

        removeChild: function(/*Widget*/ page){
                // summary: Removes the pane from the stack

                dijit._Container.prototype.removeChild.apply(this, arguments);

                // If we are being destroyed than don't run the code below (to select another page), because we are deleting
                // every page one by one
                if(this._beingDestroyed){ return; }

                if(this._started){
                        // this will notify any tablists to remove a button; do this first because it may affect sizing
                        dojo.publish(this.id+"-removeChild", [page]);

                        // in case the tab titles now take up one line instead of two lines
                        this.layout();
                }

                if(this.selectedChildWidget === page){
                        this.selectedChildWidget = undefined;
                        if(this._started){
                                var children = this.getChildren();
                                if(children.length){
                                        this.selectChild(children[0]);
                                }
                        }
                }
        },

        selectChild: function(/*Widget*/ page){
                // summary:
                //      Show the given widget (which must be one of my children)

                page = dijit.byId(page);

                if(this.selectedChildWidget != page){
                        // Deselect old page and select new one
                        this._transition(page, this.selectedChildWidget);
                        this.selectedChildWidget = page;
                        dojo.publish(this.id+"-selectChild", [page]);
                }
        },

        _transition: function(/*Widget*/newWidget, /*Widget*/oldWidget){
                if(oldWidget){
                        this._hideChild(oldWidget);
                }
                this._showChild(newWidget);

                // 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);
                }
        },

        _adjacent: function(/*Boolean*/ forward){
                // summary: Gets the next/previous child widget in this container from the current selection
                var children = this.getChildren();
                var index = dojo.indexOf(children, this.selectedChildWidget);
                index += forward ? 1 : children.length - 1;
                return children[ index % children.length ]; // dijit._Widget
        },

        forward: function(){
                // Summary: advance to next page
                this.selectChild(this._adjacent(true));
        },

        back: function(){
                // Summary: go back to previous page
                this.selectChild(this._adjacent(false));
        },

        _onKeyPress: function(e){
                dojo.publish(this.id+"-containerKeyPress", [{ e: e, page: this}]);
        },

        layout: function(){
                if(this.doLayout && this.selectedChildWidget && this.selectedChildWidget.resize){
                        this.selectedChildWidget.resize(this._contentBox);
                }
        },

        _showChild: function(/*Widget*/ page){
                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._loadCheck){
                        page._loadCheck(); // trigger load in ContentPane
                }
                if(page.onShow){
                        page.onShow();
                }
        },

        _hideChild: function(/*Widget*/ page){
                page.selected=false;
                page.domNode.style.display="none";
                if(page.onHide){
                        page.onHide();
                }
        },

        closeChild: function(/*Widget*/ page){
                // summary
                //      callback when user clicks the [X] to remove a page
                //      if onClose() returns true then remove and destroy the childd
                var remove = page.onClose(this, page);
                if(remove){
                        this.removeChild(page);
                        // makes sure we can clean up executeScripts in ContentPane onUnLoad
                        page.destroy();
                }
        },

        destroy: function(){
                this._beingDestroyed = true;
                this.inherited("destroy",arguments);
        }
});

dojo.declare(
        "dijit.layout.StackController",
        [dijit._Widget, dijit._Templated, dijit._Container],
        {
                // summary:
                //      Set of buttons to select a page in a page list.
                //      Monitors the specified StackContainer, and whenever a page is
                //      added, deleted, or selected, updates itself accordingly.

                templateString: "<span wairole='tablist' dojoAttachEvent='onkeypress' class='dijitStackController'></span>",

                // containerId: String
                //      the id of the page container that I point to
                containerId: "",

                // buttonWidget: String
                //      the name of the button widget to create to correspond to each page
                buttonWidget: "dijit.layout._StackButton",

                postCreate: function(){
                        dijit.setWaiRole(this.domNode, "tablist");

                        this.pane2button = {};          // mapping from panes to buttons
                        this._subscriptions=[
                                dojo.subscribe(this.containerId+"-startup", this, "onStartup"),
                                dojo.subscribe(this.containerId+"-addChild", this, "onAddChild"),
                                dojo.subscribe(this.containerId+"-removeChild", this, "onRemoveChild"),
                                dojo.subscribe(this.containerId+"-selectChild", this, "onSelectChild"),
                                dojo.subscribe(this.containerId+"-containerKeyPress", this, "onContainerKeyPress")
                        ];
                },

                onStartup: function(/*Object*/ info){
                        // summary: called after StackContainer has finished initializing
                        dojo.forEach(info.children, this.onAddChild, this);
                        this.onSelectChild(info.selected);
                },

                destroy: function(){
                        dojo.forEach(this._subscriptions, dojo.unsubscribe);
                        this.inherited("destroy",arguments);
                },

                onAddChild: function(/*Widget*/ page, /*Integer?*/ insertIndex){
                        // summary:
                        //   Called whenever a page is added to the container.
                        //   Create button corresponding to the page.

                        // add a node that will be promoted to the button widget
                        var refNode = document.createElement("span");
                        this.domNode.appendChild(refNode);
                        // create an instance of the button widget
                        var cls = dojo.getObject(this.buttonWidget);
                        var button = new cls({label: page.title, closeButton: page.closable}, refNode);
                        this.addChild(button, insertIndex);
                        this.pane2button[page] = button;
                        page.controlButton = button;    // this value might be overwritten if two tabs point to same container
                        
                        dojo.connect(button, "onClick", dojo.hitch(this,"onButtonClick",page));
                        dojo.connect(button, "onClickCloseButton", dojo.hitch(this,"onCloseButtonClick",page));
                        
                        if(!this._currentChild){ // put the first child into the tab order
                                button.focusNode.setAttribute("tabIndex","0");
                                this._currentChild = page;
                        }
                },

                onRemoveChild: function(/*Widget*/ page){
                        // summary:
                        //   Called whenever a page is removed from the container.
                        //   Remove the button corresponding to the page.
                        if(this._currentChild === page){ this._currentChild = null; }
                        var button = this.pane2button[page];
                        if(button){
                                // TODO? if current child { reassign }
                                button.destroy();
                        }
                        this.pane2button[page] = null;
                },

                onSelectChild: function(/*Widget*/ page){
                        // summary:
                        //      Called when a page has been selected in the StackContainer, either by me or by another StackController

                        if(!page){ return; }

                        if(this._currentChild){
                                var oldButton=this.pane2button[this._currentChild];
                                oldButton.setChecked(false);
                                oldButton.focusNode.setAttribute("tabIndex", "-1");
                        }

                        var newButton=this.pane2button[page];
                        newButton.setChecked(true);
                        this._currentChild = page;
                        newButton.focusNode.setAttribute("tabIndex", "0");
                },

                onButtonClick: function(/*Widget*/ page){
                        // summary:
                        //   Called whenever one of my child buttons is pressed in an attempt to select a page
                        var container = dijit.byId(this.containerId);   // TODO: do this via topics?
                        container.selectChild(page); 
                },

                onCloseButtonClick: function(/*Widget*/ page){
                        // summary:
                        //   Called whenever one of my child buttons [X] is pressed in an attempt to close a page
                        var container = dijit.byId(this.containerId);
                        container.closeChild(page);
                        var b = this.pane2button[this._currentChild];
                        if(b){
                                dijit.focus(b.focusNode || b.domNode);
                        }
                },
                
                // TODO: this is a bit redundant with forward, back api in StackContainer
                adjacent: function(/*Boolean*/ forward){
                        // find currently focused button in children array
                        var children = this.getChildren();
                        var current = dojo.indexOf(children, this.pane2button[this._currentChild]);
                        // pick next button to focus on
                        var offset = forward ? 1 : children.length - 1;
                        return children[ (current + offset) % children.length ]; // dijit._Widget
                },

                onkeypress: function(/*Event*/ e){
                        // summary:
                        //   Handle keystrokes on the page list, for advancing to next/previous button
                        //   and closing the current page if the page is closable.

                        if(this.disabled || e.altKey ){ return; }
                        var forward = true;
                        if(e.ctrlKey || !e._djpage){
                                var k = dojo.keys;
                                switch(e.keyCode){
                                        case k.LEFT_ARROW:
                                        case k.UP_ARROW:
                                        case k.PAGE_UP:
                                                forward = false;
                                                // fall through
                                        case k.RIGHT_ARROW:
                                        case k.DOWN_ARROW:
                                        case k.PAGE_DOWN:
                                                this.adjacent(forward).onClick();
                                                dojo.stopEvent(e);
                                                break;
                                        case k.DELETE:
                                                if(this._currentChild.closable){
                                                        this.onCloseButtonClick(this._currentChild);
                                                }
                                                dojo.stopEvent(e);
                                                break;
                                        default:
                                                if(e.ctrlKey){
                                                        if(e.keyCode == k.TAB){
                                                                this.adjacent(!e.shiftKey).onClick();
                                                                dojo.stopEvent(e);
                                                        }else if(e.keyChar == "w"){
                                                                if(this._currentChild.closable){
                                                                        this.onCloseButtonClick(this._currentChild);
                                                                }
                                                                dojo.stopEvent(e); // avoid browser tab closing.
                                                        }
                                                }
                                }
                        }
                },

                onContainerKeyPress: function(/*Object*/ info){
                        info.e._djpage = info.page;
                        this.onkeypress(info.e);
                }
});

dojo.declare("dijit.layout._StackButton",
        dijit.form.ToggleButton,
        {
        // summary
        //      Internal widget used by StackContainer.
        //      The button-like or tab-like object you click to select or delete a page
        
        tabIndex: "-1", // StackContainer buttons are not in the tab order by default
        
        postCreate: function(/*Event*/ evt){
                dijit.setWaiRole((this.focusNode || this.domNode), "tab");
                this.inherited("postCreate", arguments);
        },
        
        onClick: function(/*Event*/ evt){
                // summary: This is for TabContainer where the tabs are <span> rather than button,
                //      so need to set focus explicitly (on some browsers)
                dijit.focus(this.focusNode);

                // ... now let StackController catch the event and tell me what to do
        },

        onClickCloseButton: function(/*Event*/ evt){
                // summary
                //      StackContainer connects to this function; if your widget contains a close button
                //      then clicking it should call this function.
                evt.stopPropagation();
        }
});

// These arguments can be specified for the children of a StackContainer.
// Since any widget can be specified as a StackContainer child, mix them
// into the base widget class.  (This is a hack, but it's effective.)
dojo.extend(dijit._Widget, {
        // title: String
        //              Title of this widget.  Used by TabContainer to the name the tab, etc.
        title: "",

        // selected: Boolean
        //              Is this child currently selected?
        selected: false,

        // closable: Boolean
        //              True if user can close (destroy) this child, such as (for example) clicking the X on the tab.
        closable: false,        // true if user can close this tab pane

        onClose: function(){
                // summary: Callback if someone tries to close the child, child will be closed if func returns true
                return true;
        }
});

}