tests/manual/dial.html

	dial.html revision 5bea35e34151bb0c8d21ba91e0250e55b86a2c95
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<html>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<head>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<title>Dial Widget</title>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<!-- Source File and Seed for YUI3-->
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
50bb8b485d45b99b0d672649512135881290f937Satyen Desai<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
3c7fb59120f2edd0162b58600395c7fa79259924Satyen Desai<script src="/build/yui/yui-min.js"></script>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<style>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.intro-sentence{
50bb8b485d45b99b0d672649512135881290f937Satyen Desai    margin:3em;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniffbody{
50bb8b485d45b99b0d672649512135881290f937Satyen Desai    margin-top:30px;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff}
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff.steps{
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff    margin:20px;
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff}
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff.steps li{margin-bottom:1em;}
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff.steps li a {margin-right:2em; border:solid 1px #dddddd; background-color:#eeeeee; padding:3px 6px; cursor:pointer;}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff</style>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff</head>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff<body class="yui3-skin-sam">
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff    <span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers.</span>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff    <ul class="steps">
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        <li><a class="xx d_min">-minor</a><a class="xx i_min">+minor</a></li>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        <li><a class="xx d_maj">-major</a><a class="xx i_maj">+major</a></li>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        <li><a class="xx min">min</a><a class="xx max">max</a></li>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        <li><a class="xx orig">origin</a></li>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff     <ul>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff     <input id="myOtherNode" value="hello">
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff</body>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff</html>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff<script>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff    YUI({lang:'es'}).use("dial", function(Y) {
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        var dial = new Y.Dial({
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            min:-220,
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            max:220,
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            stepsPerRev:100,
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            value: 80,
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            diameter: 100
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        dial.render("#dial_container");
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        Y.on('click', function(e){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('i_min')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._incrMinor();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('d_min')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._decrMinor();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('i_maj')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._incrMajor();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('d_maj')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._decrMajor();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('min')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._setToMin();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('max')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._setToMax();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            if(e.target.hasClass('orig')){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff                dial._resetDial();
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            }
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        }, '.xx');
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        // update value of the Dial from another object's value when it gets a keyup event
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        Y.on('keyup', function(e){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            dial.set('value', e.target.get('value') - 0);
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        }, '#myOtherNode');
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        // update the value of another object when the Dial changes value
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        dial.after('valueChange', function(e){
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff            Y.one('#myOtherNode').set('value', e.target.get('value'));
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff    });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff</script>