switchWidget v2

by dfederighi

HTML

<body bgcolor="#222">
    <div id="switchWrapper"></div>
</body>

CSS

body {
    font-family: helvetica;        
}

#switchWrapper {
    margin: 15px;        
}

.switch-background {
    width: 50px;
    height: 18px;
    background-color: #333;
    border: 2px solid #666;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
}

.knob {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: #111;
    margin-left: 0px;
    display: inline-block;
    -webkit-transition: margin-left .20s ease-out;
    -moz-transition: margin-left .20s ease-out;
    transition: margin-left .20s ease-out;
    zoom: 1;
    overflow: hidden;
    position: absolute;
}

.toggle-switch-on .knob {
    margin-left: 32px;
}

.toggle-switch-off .knob {
    margin-left: 0px;        
}

.left-on {
    display: block;
    left: 6px; 
    padding-top: 3px;
    color: rgba(241, 159, 9, 1);
    text-shadow: 0 0 5px rgba(241, 159, 9, .8);
    position: absolute;
}

.right-off {
    display: block;
    right: 10px; 
    padding-top: 3px;
    color: #999;
    position: absolute;    
}

.toggle-switch-off .left-on {
    display: none;        
}

.toggle-switch-on .right-off {
    display: none;        
}

JavaScript

YUI.add('toggle-switch', function(Y) {

    var SWITCH_TEMPLATE = '<div class="switch-background">' +
                            '<span class="knob"></span>' +
                            '<span class="left-on">{trueLabel}</span>' +
                            '<span class="right-off">{falseLabel}</span>' +
                          '</div>',
        
        HIDDEN_TEMPLATE = '<input name="{name}" type="hidden" value="{value}" />',
    
    ToggleSwitch = Y.Base.create('toggle-switch', Y.Widget, [], {
        
        initializer: function() {},
        
        destructor: function() {},
        
        renderUI: function() {
            var contentBox = this.get('contentBox'),
                labels = this.get('labels'),
                switchNode = null,
                hiddenNode = null;

            switchNode = Y.Node.create(Y.Lang.sub(SWITCH_TEMPLATE, {
                'trueLabel': labels[0],
                'falseLabel': labels[1]
            }));
            
            hiddenNode = Y.Node.create(Y.Lang.sub(HIDDEN_TEMPLATE, {
                'name': this.get('name'),
                'value': 0                        
            }));
            
            switchNode.appendChild(hiddenNode);        
            contentBox.append(switchNode);    
        },
        
        bindUI: function() {
            Y.delegate('click', this.switchClick, this.get('boundingBox'), ".switch-background", this);       
        },
        
        syncUI: function() {
            var cb = this.get('contentBox');
            
            if (this.get('value') === 1) {
                this.setOn();
            } else {
                this.setOff();
            }         
        },
        
        switchClick: function(e) {
            var cb = this.get('contentBox');
            
            if (this.get('value') === 0) {
                this.setOn();
            } else {
                this.setOff();
            }
        },

        setOn: function() {
         ...