source: Dev/branches/rest-dojo-ui/client/dojox/layout/RadioGroup.js @ 256

define(["dojo/_base/kernel","dojo/_base/declare","dojo/_base/html","dojo/_base/lang","dojo/_base/query",
                "dijit/_Widget","dijit/_Templated","dijit/_Contained","dijit/layout/StackContainer",
                "dojo/fx/easing","dojo/_base/fx","dojo/dom-construct","dojo/dom-class"],function(
        kernel,declare,html,lang,query,Widget,Templated,Contained,StackContainer,easing,baseFx,domConstruct,domClass){

kernel.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?
//
/*=====
        var StackContainer = dijit.layout.StackContainer,
                Templated = dijit._Templated,
                Contained = dijit._Contained,
                Widget = dijit._Widget;
=====*/

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

        // duration: Integer
        //      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: false,

        // buttonClass: String
        //              The full declared className of the Button widget to use for hasButtons
        buttonClass: "dojox.layout._RadioButton",
        
        // 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(arguments);
                this._children = this.getChildren();
                this._buttons = this._children.length;
                this._size = html.coords(this.containerNode);
                if(this.hasButtons){
                        html.style(this.buttonHolder, "display", "block");
                }
        },

        _setupChild: function(/* dijit._Widget */child){
                // summary: Creates a hover button for a child node of the RadioGroup
                html.style(child.domNode, "position", "absolute");
                if(this.hasButtons){
                        
                        var tmp = this.buttonNode.appendChild(domConstruct.create('td'));
                        var n = domConstruct.create("div", null, tmp),
                                _Button = lang.getObject(this.buttonClass),
                                tmpw = new _Button({
                                        label: child.title,
                                        page: child
                                }, n)
                        ;
                        
                        lang.mixin(child, { _radioButton: tmpw });
                        tmpw.startup();
                }
                child.domNode.style.display = "none";
        },
        
        removeChild: function(child){
                if(this.hasButtons && child._radioButton){
                        child._radioButton.destroy();
                        delete child._radioButton;
                }
                this.inherited(arguments);
        },
        
        // 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(/*dijit._Widget*/ newWidget, /*dijit._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(/*dijit._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._onShow){
                        page._onShow(); // trigger load in ContentPane
                }else if(page.onShow){
                        page.onShow();
                }
        },

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

});

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

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

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

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

        // zTop: Integer
        //              A z-index to apply to the incoming pane
        zTop: 99,
        
        constructor: function(){
                if(lang.isString(this.easing)){
                        this.easing = lang.getObject(this.easing);
                }
        },
        
        _positionChild: function(page){
                // summary: set the child out of view immediately after being hidden

                // FIXME: is there a real "size" floating around always?
                if(!this._size){ return; } 
                
                // there should be a contest: obfuscate this function as best you can.
                var rA = true, rB = true;
                switch(page.slideFrom){
                        case "bottom" : rB = !rB; break;
                        case "right" :  rA = !rA; rB = !rB; break;
                        case "top" :    break;
                        case "left" :   rA = !rA; break;
                        default:
                                rA = Math.round(Math.random());
                                rB = Math.round(Math.random());
                                break;
                }
                var prop = rA ? "top" : "left",
                        val = (rB ? "-" : "") + (this._size[rA ? "h" : "w" ] + 20) + "px";
                        
                html.style(page.domNode, prop, val);

        },

        _showChild: function(page){
                // summary: Slide in the selected child widget
                
                var children = this.getChildren();
                page.isFirstChild = (page == children[0]);
                page.isLastChild = (page == children[children.length-1]);
                page.selected = true;

                html.style(page.domNode,{
                        zIndex: this.zTop, display:""
                })

                if(this._anim && this._anim.status()=="playing"){
                        this._anim.gotoPercent(100,true);
                }
                
                this._anim = baseFx.animateProperty({
                        node:page.domNode,
                        properties: {
                                left: 0,
                                top: 0
                        },
                        duration: this.duration,
                        easing: this.easing,
                        onEnd: lang.hitch(page, function(){
                                if(this.onShow){ this.onShow(); }
                                if(this._onShow){ this._onShow(); }
                        }),
                        beforeBegin: lang.hitch(this, "_positionChild", page)
                });
                this._anim.play();
        },

        _hideChild: function(page){
                // summary: reset the position of the hidden pane out of sight

                page.selected = false;
                page.domNode.style.zIndex = this.zTop - 1;
                if(page.onHide){
                        page.onHide();
                }

        }
        
});

declare("dojox.layout._RadioButton",[Widget,Templated,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, "onmouseenter", "_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();
                domClass.add(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]
                query(".dojoxRadioButtonSelected", this.domNode.parentNode.parentNode)
                        .removeClass("dojoxRadioButtonSelected")
                ;
        }
        
});

lang.extend(Widget,{
        // slideFrom: String
        //              A parameter needed by RadioGroupSlide only. An optional paramter to force
        //              the ContentPane to slide in from a set direction. Defaults
        //              to "random", or specify one of "top", "left", "right", "bottom"
        //              to slideFrom top, left, right, or bottom.
        slideFrom: "random"
})
});