tests/manual/dial.html

	dial.html revision 04f7ef259d54aeab53258697e1e7f8856adcc8a6
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>
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff<title>Dial Widget Manual Test</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
e55f55597f9faacfa2719a4b871da60c7916d296Jeff Conniff<script src="/build/yui/yui.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;}
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff#myOtherNode {margin-bottom: 1em;}
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>
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff    <ul>
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff    <input id="myOtherNode" value="hello">
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff    <br>
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff    <span id="dial_container_big">test a larger size. <p>increment controls don't affect this one.</p></span>
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff    <span id="dial_container_small">test a small size. </span>
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff</body>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff</html>
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff<script>
e55f55597f9faacfa2719a4b871da60c7916d296Jeff Conniff    YUI({lang:'es', filter:'raw'}).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,
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff            diameter: 100
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        dial.render("#dial_container");
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff        var dialBig = new Y.Dial({
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff            min:-220,
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff            max:220,
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff            stepsPerRev:100,
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff            value: 80,
dcb17c0ed0cc508b4c74234b7477b05e6a8723ebJeff Conniff            diameter: 439
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff        });
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff        dialBig.render("#dial_container_big");
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff        var dialSmall = new Y.Dial({
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff            min:-220,
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff            max:220,
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff            stepsPerRev:100,
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff            value: 80,
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff            diameter: 37,
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff            strings: {label: 'My small pre-render label', resetStr: 'Reset Long', tooltipHandle: 'Drag small handle to set value'}
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff        });
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff        dialSmall.render("#dial_container_small");
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff
56534c795febcc30a46e1f7d4b2619685cecd1eeJeff Conniff        dialBig._setLabelString('Label after render:');
56534c795febcc30a46e1f7d4b2619685cecd1eeJeff Conniff        dialBig._setTooltipString('Tooltip after render');
56534c795febcc30a46e1f7d4b2619685cecd1eeJeff Conniff        dialBig._setResetString('Reset Me');
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>