tests/manual/dial_simple.html

4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<html>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<head>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<title>Dial Widget Manual Test</title>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<!-- Source File and Seed for YUI3-->
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<script src="/build/yui/yui.js"></script>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<style>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff.intro-sentence{
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    margin:3em;
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniffbody{
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    margin-top:30px;
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff.steps{
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    margin:20px;
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff.steps li{margin-bottom:1em;}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff.steps li a {margin-right:2em; border:solid 1px #dddddd; background-color:#eeeeee; padding:3px 6px; cursor:pointer;}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff#myOtherNode {margin-bottom: 1em;}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniffp{margin:40px;}
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff</style>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff</head>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<body class="yui3-skin-sam">
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers.</span>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <ul class="steps">
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        <li><a class="xx d_min">-minor</a><a class="xx i_min">+minor</a></li>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        <li><a class="xx d_maj">-major</a><a class="xx i_maj">+major</a></li>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        <li><a class="xx min">min</a><a class="xx max">max</a></li>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        <li><a class="xx orig">origin</a></li>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    </ul>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <input id="myOtherNode" value="hello">
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <br>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <span id="dial_container_big">test a larger size. <p>increment controls don't affect this one.</p></span>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <span id="dial_container_small">test a small size. </span>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <p>test min max _______________________</p>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <p>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    <p></p>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff</body>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff</html>
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff<script>
e4f01a858850b47e385f5fa32c1b79fe457f9475Jeff Conniff    YUI({lang:'es', filter:'raw'}).use("dial", function(Y) {          //, filter:'raw'  this make it really hard to clear cache on iPad
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        var dial = new Y.Dial({
e4f01a858850b47e385f5fa32c1b79fe457f9475Jeff Conniff            min:-2,
e4f01a858850b47e385f5fa32c1b79fe457f9475Jeff Conniff            max:110,
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            stepsPerRevolution:100,
ed163bac6ba352072300a51751488c2f2d71e922Jeff Conniff            value: 5,
e4f01a858850b47e385f5fa32c1b79fe457f9475Jeff Conniff            diameter: 200,
63050c43ae8b728257d6bf252e5d5726ca39c0ccJeff Conniff            decimalPlaces:0
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        });
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        dial.render("#dial_container");
e4f01a858850b47e385f5fa32c1b79fe457f9475Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        Y.on('click', function(e){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('i_min')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._incrMinor();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('d_min')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._decrMinor();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('i_maj')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._incrMajor();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('d_maj')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._decrMajor();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('min')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._setToMin();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('max')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._setToMax();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            if(e.target.hasClass('orig')){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff                dial._resetDial();
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            }
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        }, '.xx');
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        // update value of the Dial from another object's value when it gets a keyup event
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        Y.on('keyup', function(e){
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            dial.set('value', e.target.get('value') - 0);
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        }, '#myOtherNode');
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        // update the value of another object when the Dial changes value
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        dial.after('valueChange', function(e){
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff//          Y.one('#myOtherNode').set('value', e.target.get('value').toFixed(e.target.get('decimalPlaces')));
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff            Y.one('#myOtherNode').set('value', e.target.get('value'));
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff//          Y.log('dial._angle: ' + dial._angle + '... prevAng: ' + dial._prevAng + '...wrapping: ' + dial._timesWrapped);
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff        });
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff    });
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff</script>