switchWidget

by dfederighi

HTML

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

CSS

#switchWrapper {
    margin: 15px;        
}

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

.knob {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: #111; /* lines show in this color for right position? */
    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;
}

.switch span {
    font-size: 10px;
    position: absolute;
    font-weight: bold;
}

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

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

JavaScript

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

    var SWITCH_TEMPLATE = '<div id="fj-switch" class="switch">' +
                            '<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}" />',
    
    fjSwitch = Y.Base.create('fj-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'), "#fj-switch", this);       
        },
        syncUI: function() {
 
        },
        switchClick: function(e) {
            var knob = this.get('boundingBox').one('.knob'),
                contentBox = this.get('contentBox'),
                toStyle = '',
                fromStyle = '';
        
            
           
            if (knob.getStyle('marginLeft') == '32px') {
                toStyle = '0px';
                fromStyle = '32px'; 
            } else {
                toStyle = '32px';
                fromStyle = '0px';
            } 
                          
        

            if (toStyle == '32px') {
             ...