tests/manual/dial.html

	dial.html revision 7928e2ef0532df9064d9374ceda31d6ab080eb2d
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;}
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniffp{margin:40px;}
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>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff 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>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <p>test min max _______________________</p>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <p>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <span id="dial_one"></span>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <span id="dial_two"></span>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <span id="dial_three"></span>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <span id="dial_four"></span>
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff    <p></p>
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({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:-220,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:220,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 60,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            diameter: 100
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        dial.render("#dial_container");
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff        var dialBig = new Y.Dial({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:-220,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:220,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 0,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            diameter: 439,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            centerButtonDiameter: 0.2,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            handleDiameter: 0.4,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            markerDiameter: 0.02,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            handleDistance: 0.5
f4cd01f200ab234d7ac783ae424696f5d5e08dadJeff Conniff        });
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff        dialBig.set('strings', {'label':'Label change using Dial.set', 'resetStr': 'set back to orig', 'tooltipHandle': 'test change tooltip'});
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff        dialBig.render("#dial_container_big");
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff        var dialSmall = new Y.Dial({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:-220,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:220,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 80,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff 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");
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff///////////// check min max issues ////////////////////////////////
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        var dialOne = new Y.Dial({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:2,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:99,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 5,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            diameter: 100,
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff            strings: {label: '2...99', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        });
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        dialOne.render("#dial_one");
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        var dialTwo = new Y.Dial({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:-2,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:5,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 3,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            diameter: 100,
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff            strings: {label: '-2...5', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        });
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        dialTwo.render("#dial_two");
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        var dialThree = new Y.Dial({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:-48,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:40,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 35,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            diameter: 100,
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff            strings: {label: '-48...40', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        });
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        dialThree.render("#dial_three");
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        var dialFour = new Y.Dial({
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            min:-28,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            max:28,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            stepsPerRevolution:100,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            value: 60,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff            diameter: 100,
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff            strings: {label: '-28...28', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        });
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff        dialFour.render("#dial_four");
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff 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){
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff            Y.one('#myOtherNode').set('value', e.target.get('value'));
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff            Y.log('dial._angle: ' + dial._angle + '... prevAng: ' + dial._prevAng + '...wrapping: ' + dial._timesWrapped);
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff        });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff    });
5bea35e34151bb0c8d21ba91e0250e55b86a2c95Jeff Conniff</script>