Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.layout.RadioGroup"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.RadioGroup"] = true;
dojo.provide("dojox.layout.RadioGroup");
dojo.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? 
//
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Container");
dojo.require("dijit.layout.StackContainer");
dojo.require("dojox.fx.easing"); 

dojo.declare("dojox.layout.RadioGroup",
        [dijit.layout.StackContainer,dijit._Templated],
        {
        // summary: A Container that turns its Layout Children into a single Pane and transitions between states
        //      onHover of the button
        //

        // duration: Int
        //      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: true,

        // 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("startup",arguments);
                this._children = this.getChildren();
                this._buttons = this._children.length;
                this._size = dojo.coords(this.containerNode);
                if(this.hasButtons){
                        dojo.style(this.buttonHolder,"display","block");
                        dojo.forEach(this._children,this._makeButton,this);
                }
        },

        // private:
        _makeButton: function(/* DomNode */n){
                // summary: creates a hover button for a child node of the RadioGroup
                dojo.style(n.domNode,"position","absolute");
                var tmp = document.createElement('td');
                this.buttonNode.appendChild(tmp);
                var tmpt = tmp.appendChild(document.createElement('div'));
                var tmpw = new dojox.layout._RadioButton({
                        label: n.title,
                        page: n
                },tmpt);
                tmpw.startup();
        },

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

        _hideChild: function(/*Widget*/ page){
                // summary: hide the specified child widget
                page.selected=false;
                page.domNode.style.display="none";
                if(page.onHide){
                        page.onHide();
                }
        }

});

dojo.declare("dojox.layout.RadioGroupFade",
        dojox.layout.RadioGroup,
        {
        // summary: An extension on a stock RadioGroup, that fades the panes.

        _hideChild: function(page){
                // summary: hide the specified child widget
                dojo.fadeOut({
                        node:page.domNode,
                        duration:this.duration,
                        onEnd: this.inherited("_hideChild",arguments)
                }).play();
        },

        _showChild: function(page){
                // summary: show the specified child widget
                this.inherited("_showChild",arguments);
                dojo.style(page.domNode,"opacity",0);
                dojo.fadeIn({
                        node:page.domNode,
                        duration:this.duration
                }).play();
        }
});

dojo.declare("dojox.layout.RadioGroupSlide",
        dojox.layout.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: dojo._Animation.easing
        //      A hook to override the default easing of the pane slides.
        easing: dojox.fx.easing.easeOut,

        startup: function(){
                // summary: on startup, set each of the panes off-screen (_showChild is called later)
                this.inherited("startup",arguments);
                dojo.forEach(this._children,this._positionChild,this);
        },

        _positionChild: function(page){
                // summary: randomly set the child out of view
                // description: 
                var rA = Math.round(Math.random());
                var rB = Math.round(Math.random());
                dojo.style(page.domNode, rA? "top" : "left", (rB ? "-" : "") + this._size[rA?"h":"w"]+"px");
        },

        _showChild: function(page){
                // summary: Slide in the selected child widget
                this.inherited("_showChild",arguments);
                if(this._anim && this._anim.status()=="playing"){
                        this._anim.gotoPercent(100,true);
                }
                this._anim = dojo.animateProperty({
                        node:page.domNode,
                        properties: {
                                // take a performance hit determinging one of these doesn't get modified
                                // but it's better this way than an extra call to mixin in think?
                                left: { end:0, unit:"px" },
                                top: { end:0, unit:"px" }
                        },
                        duration:this.duration, 
                        easing:this.easing
                });
                this._anim.play();
        },

        _hideChild: function(page){
                // summary: reset the position of the hidden pane out of sight
                this.inherited("_hideChild",arguments);
                this._positionChild(page);
        }
});

dojo.declare("dojox.layout._RadioButton",
        [dijit._Widget,dijit._Templated,dijit._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,"onmouseover","_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();
                dojo.addClass(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]
                dojo.query(".dojoxRadioButtonSelected",this.domNode.parentNode.parentNode).forEach(function(n){
                        dojo.removeClass(n,"dojoxRadioButtonSelected");
                });
        }
});

}