docs/partials/slider-from-markup-source.mustache

	slider-from-markup-source.mustache revision d9a962241dcb254b22c8aa6857f303c76644f80b
<div id="demo" class="yui3-skin-sam">

    <div id="volume_control" class="volume-hide">
        <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
        <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
        <span id="volume_slider">
            <span class="yui3-slider-rail">
                <span class="yui3-slider-thumb"><img src="{{componentAssets}}/images/sprite.png" height="384" width="31"></span>
            </span>
        </span>
        <label for="mute"><input type="checkbox" id="mute"> mute</label>
    </div>

    <div class="demo-content">
        <p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>
        <p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>
    </div>
</div>
<script type="text/javascript">
YUI().use("slider", function (Y) {

var control    = Y.one('#volume_control'),
    volInput   = Y.one('#volume'),
    icon       = Y.one('#volume_icon'),
    mute       = Y.one('#mute'),
    open       = false,
    level      = 2,
    beforeMute = 0,
    wait,
    volume;

Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px');

volume = new Y.Slider({
    axis  : 'y',
    min   : 100,
    max   : 0,
    value : 50,
    length: '105px'
});

volume.renderRail = function () {
    return Y.one( "#volume_slider span.yui3-slider-rail" );
};
volume.renderThumb = function () {
    return this.rail.one( "span.yui3-slider-thumb" );
};

volume.render( "#volume_slider" );

// Initialize event listeners
volume.after('valueChange', updateInput);
volume.after('valueChange', updateIcon);

mute.on('click', muteVolume);

volInput.on({
    keydown : handleInput,
    keyup   : updateVolume
});

icon.on('click', showHideSlider);

Y.one( 'doc' ).on('click', handleDocumentClick );

// Support functions
function updateInput(e) {
    if (e.src !== 'KEY') {
        volInput.set('value',e.newVal);
    }
}

function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);

    if (level !== newLevel) {
        icon.replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}

function muteVolume(e) {
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);

    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        volInput.set('disabled','disabled');
    } else {
        volume.setValue(beforeMute);
        volInput.set('disabled','');
    }
}

function handleInput(e) {
    // Allow only numbers and various other control keys
    if (e.keyCode > 57) {
        e.halt();
    }
}

function updateVolume(e) {
    // delay input processing to give the user time to type
    if (wait) {
        wait.cancel();
    }

    wait = Y.later(400, null, function () {
        var value = parseInt(volInput.get('value'),10) || 0;

        if (value > 100) {
            volInput.set('value', 100);
            value = 100
        }

        volume.setValue( value );
    });
}

function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (e) {
        e.preventDefault();
    }
}

function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

});
</script>