Switch Class

if(!javaxt) var javaxt={};
if(!javaxt.dhtml) javaxt.dhtml={};

//******************************************************************************
//**  Switch
//*****************************************************************************/
/**
 *   Basic on/off toggle switch
 *
 ******************************************************************************/

javaxt.dhtml.Switch = function(parent, config) {

    var me = this;
    var defaultConfig = {

      /** If true, the slider will be set to the on position.
       */
        value: true,

      /** Style for individual elements within the component. Note that you can
       *  provide CSS class names instead of individual style definitions.
       */
        style: {
            groove: {
                backgroundColor: "#dcdcdc",
                width: "40px",
                height: "24px",
                borderRadius: "12px",
                position: "relative"
            },
            handle: {
                width: "20px",
                height: "20px",
                backgroundColor: "#fff",
                borderRadius: "10px",
                position: "absolute",
                margin: "2px",
                boxShadow: "0px 3px 4px rgba(0, 0, 0, 0.2)"
            },
            grooveActive: {
                backgroundColor: "#4bd763",
                width: "40px",
                height: "24px",
                borderRadius: "12px",
                position: "relative"
            },
            handleActive: {
                width: "20px",
                height: "20px",
                backgroundColor: "#fff",
                borderRadius: "10px",
                position: "absolute",
                margin: "2px",
                boxShadow: "0px 3px 4px rgba(0, 0, 0, 0.2)"
            }
        }
    };
    var groove, handle, value;


  //**************************************************************************
  //** Constructor
  //**************************************************************************
    var init = function(){

        if (typeof parent === "string"){
            parent = document.getElementById(parent);
        }
        if (!parent) return;


      //Clone the config so we don't modify the original config object
        var clone = {};
        merge(clone, config);


      //Merge clone with default config
        merge(clone, defaultConfig);
        config = clone;


        groove = createElement("div", parent, config.style.groove);
        groove.onclick = function(){
            me.setValue(!me.getValue());
        };

        handle = createElement("div", groove, config.style.handle);
        me.setValue(config.value, true);
        me.el = groove;

      //Add public show/hide methods
        addShowHide(me);
    };


  //**************************************************************************
  //** getValue
  //**************************************************************************
  /** Returns true on the slider is set to the on/active position. Otherwise
   *  returns false.
   */
    this.getValue = function(){
        return value;
    };


  //**************************************************************************
  //** setValue
  //**************************************************************************
  /** Used to set the slider to the on or off position.
   *  @param b If true, sets the slider to the on position. Otherwise, the
   *  slider will be set to the off position.
   *  @param silent By default, this slider will fire the onChange event
   *  whenever the value is changed. When silent is set to true, the slider
   *  will NOT fire the onChange event. This parameter is optional.
   */
    this.setValue = function(b, silent){
        if (b===true || b===false){
            if (b===value) return;
            if (b===true){
                setStyle(groove, config.style.grooveActive);
                setStyle(handle, config.style.handleActive);
                handle.style.left = "";
                handle.style.right = 0;
            }
            else{
                setStyle(groove, config.style.groove);
                setStyle(handle, config.style.handle);
                handle.style.right = "";
                handle.style.left = 0;
            }
            value = b;
            if (silent===true){}
            else me.onChange(value);
        }
    };


  //**************************************************************************
  //** onChange
  //**************************************************************************
  /** Called when the input value changes
   */
    this.onChange = function(value){};


  //**************************************************************************
  //** Utils
  //**************************************************************************
    var merge = javaxt.dhtml.utils.merge;
    var setStyle = javaxt.dhtml.utils.setStyle;
    var addShowHide = javaxt.dhtml.utils.addShowHide;
    var createElement = javaxt.dhtml.utils.createElement;

    init();
};