dojox/layout/RadioGroup.js

• Provides:

  • dojox.layout.RadioGroup

• Requires:

  • dijit._Widget in common in project dijit
  • dijit._Templated in common in project dijit
  • dijit._Contained in common in project dijit
  • dijit.layout.StackContainer in common in project dijit
  • dojo.fx.easing in common in project dojo

• dojox.layout.RadioGroup

  • type

    Function

  • chains:
    • dijit.layout.StackContainer: (prototype)
    • dijit.layout.StackContainer: (call)
    • dijit._Templated: (call)
  • mixins:
    • dijit._Templated.prototype: (prototype)
  • summary

    A Container that turns its Layout Children into a single Pane and transitions between states
    onHover of the button

• dojox.layout.RadioGroup.duration

  • type

    Integer

  • summary

    used for Fade and Slide RadioGroup's, the duration to run the transition animation. does not affect anything
    in default RadioGroup

• dojox.layout.RadioGroup.hasButtons

  • type

    Boolean

  • summary

    toggles internal button making on or off

• dojox.layout.RadioGroup.buttonClass

  • type

    String

  • summary

    The full declared className of the Button widget to use for hasButtons

• dojox.layout.RadioGroup.templateString

  • type

    String

  • summary

    the template for our container

• dojox.layout.RadioGroup.startup

  • type

    Function

  • source: [view]
      this.inherited(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");
      }
  • summary

    scan the container for children, and make "tab buttons" for them

• dojox.layout.RadioGroup._setupChild

  • type

    Function

  • parameters:
    • child: (typeof dijit._Widget)
  • source: [view]
      dojo.style(child.domNode, "position", "absolute");
      if(this.hasButtons){
    
       
       var tmp = this.buttonNode.appendChild(dojo.create('td'));
       var n = dojo.create("div", null, tmp),
        _Button = dojo.getObject(this.buttonClass),
        tmpw = new _Button({
         label: child.title,
         page: child
        }, n)
       ;
    
       
       dojo.mixin(child, { _radioButton: tmpw });
       tmpw.startup();
      }
      child.domNode.style.display = "none";
  • summary

    Creates a hover button for a child node of the RadioGroup

• dojox.layout.RadioGroup.removeChild

  • type

    Function

  • parameters:
    • child: (typeof )
  • source: [view]
      if(this.hasButtons && child._radioButton){
       child._radioButton.destroy();
       delete child._radioButton;
      }
      this.inherited(arguments);
  • summary

• dojox.layout.RadioGroup._transition

  • type

    Function

  • parameters:
    • newWidget: (typeof dijit._Widget)
    • oldWidget: (typeof dijit._Widget)
  • source: [view]
      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);
      }
  • summary

    called when StackContainer receives a selectChild call, used to transition the panes.

• dojox.layout.RadioGroup._showChild

  • type

    Function

  • parameters:
    • page: (typeof dijit._Widget)
  • source: [view]
      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();
      }
  • summary

    show the selected child widget

• dojox.layout.RadioGroup._hideChild

  • type

    Function

  • parameters:
    • page: (typeof dijit._Widget)
  • source: [view]
      page.selected = false;
      page.domNode.style.display="none";
      if(page.onHide){
       page.onHide();
      }
  • summary

    hide the specified child widget

• dojox.layout.RadioGroup._children

  • summary

• dojox.layout.RadioGroup._buttons

  • summary

• dojox.layout.RadioGroup._size

  • summary

• dojox.layout.RadioGroupFade

  • type

    Function

  • chains:
    • dojox.layout.RadioGroup: (prototype)
    • dojox.layout.RadioGroup: (call)
  • summary

    An extension on a stock RadioGroup, that fades the panes.

• dojox.layout.RadioGroupFade._hideChild

  • type

    Function

  • parameters:
    • page: (typeof )
  • source: [view]
      dojo.fadeOut({
       node:page.domNode,
       duration:this.duration,
       onEnd: dojo.hitch(this,"inherited", arguments, arguments)
      }).play();
  • summary

    hide the specified child widget

• dojox.layout.RadioGroupFade._showChild

  • type

    Function

  • parameters:
    • page: (typeof )
  • source: [view]
      this.inherited(arguments);
      dojo.style(page.domNode, "opacity", 0);
      dojo.fadeIn({
       node:page.domNode,
       duration:this.duration
      }).play();
  • summary

    show the specified child widget

• dojox.layout.RadioGroupSlide

  • type

    Function

  • chains:
    • dojox.layout.RadioGroup: (prototype)
    • dojox.layout.RadioGroup: (call)
  • 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

  • source: [view]
      if(dojo.isString(this.easing)){
       this.easing = dojo.getObject(this.easing);
      }

• dojox.layout.RadioGroupSlide.easing

  • type

    Function

  • summary

    A hook to override the default easing of the pane slides.

• dojox.layout.RadioGroupSlide.zTop

  • type

    Integer

  • summary

    A z-index to apply to the incoming pane

• dojox.layout.RadioGroupSlide._positionChild

  • type

    Function

  • parameters:
    • page: (typeof )
  • source: [view]
      if(!this._size){ return; } // FIXME: is there a real "size" floating around always?
    
      
      // 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";
    
       
      dojo.style(page.domNode, prop, val);
  • summary

    set the child out of view immediately after being hidden

  • returns

    FIXME: is there a real "size" floating around always?

• dojox.layout.RadioGroupSlide._showChild

  • type

    Function

  • parameters:
    • page: (typeof )
  • source: [view]
      var children = this.getChildren();
      page.isFirstChild = (page == children[0]);
      page.isLastChild = (page == children[children.length-1]);
      page.selected = true;
    
    
      dojo.style(page.domNode,{
       zIndex: this.zTop, display:""
      })
    
    
      if(this._anim && this._anim.status()=="playing"){
       this._anim.gotoPercent(100,true);
      }
    
      
      this._anim = dojo.animateProperty({
       node:page.domNode,
       properties: {
        left: 0,
        top: 0
       },
       duration: this.duration,
       easing: this.easing,
       onEnd: dojo.hitch(page, function(){
        if(this.onShow){ this.onShow(); }
        if(this._onShow){ this._onShow(); }
       }),
       beforeBegin: dojo.hitch(this, "_positionChild", page)
      });
      this._anim.play();
  • summary

    Slide in the selected child widget

• dojox.layout.RadioGroupSlide._hideChild

  • type

    Function

  • parameters:
    • page: (typeof )
  • source: [view]
      page.selected = false;
      page.domNode.style.zIndex = this.zTop - 1;
      if(page.onHide){
       page.onHide();
      }
  • summary

    reset the position of the hidden pane out of sight

• dojox.layout.RadioGroupSlide._anim

  • summary

• dojox.layout._RadioButton

  • type

    Function

  • chains:
    • dijit._Widget: (prototype)
    • dijit._Widget: (call)
    • dijit._Templated: (call)
    • dijit._Contained: (call)
  • mixins:
    • dijit._Templated.prototype: (prototype)
    • dijit._Contained.prototype: (prototype)
  • summary

    The Buttons for a RadioGroup

  • description

    A private widget used to manipulate the StackContainer (RadioGroup*). Don't create directly.

• dojox.layout._RadioButton.label

  • type

    String

  • summary

    the Text Label of the button

• dojox.layout._RadioButton.page

  • summary

• dojox.layout._RadioButton.templateString

  • summary

• dojox.layout._RadioButton.startup

  • type

    Function

  • source: [view]
      this.connect(this.domNode, "onmouseenter", "_onMouse");
  • summary

    start listening to mouseOver

• dojox.layout._RadioButton._onMouse

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      this.getParent().selectChild(this.page);
      this._clearSelected();
      dojo.addClass(this.domNode,"dojoxRadioButtonSelected");
  • summary

    set the selected child on hover, and set our hover state class

• dojox.layout._RadioButton._clearSelected

  • type

    Function

  • source: [view]
      dojo.query(".dojoxRadioButtonSelected", this.domNode.parentNode.parentNode)
       .removeClass("dojoxRadioButtonSelected")
      ;
  • 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]

• dijit._Widget.slideFrom

  • summary

• child._radioButton

  • summary

• dojox.layout

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary