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-->
63050c43ae8b728257d6bf252e5d5726ca39c0ccJeff Conniff<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
63050c43ae8b728257d6bf252e5d5726ca39c0ccJeff Conniff<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/reset-min.css" />
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- get from 3.3.0 Release
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> -->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- get from lastSuccessful
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<script type="text/javascript" src="http://yuibuild.corp.yahoo.com/yui3/lastSuccessful/build/yui/yui-min.js"></script>-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- get from local copy of 3.3.0
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<script src="/yui_3.3.0/yui/build/yui/yui.js"></script>-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- get all from gitroot
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<script src="file:///C|/dev/gitroot/yui3/build/yui/yui.js"></script> -->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- get all from gitroot -->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<script src="/build/yui/yui.js"></script>
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- get just dial from a local js dir
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<script src="js/dial_local.js"></script>-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- /////////////////// for iPad (not on vger network) need these ////////////////////////-->
7505fb0434c916f7c5c0ba7fe766fa86faf7937fJeff Conniff <!-- conniffcolletion need these new CSS files when using post 3.3.0 Dial.js re-architecture (no ...handle-user class)
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <link type="text/css" rel="stylesheet" href="http://conniffcollection.com/dial/assets/dial-core.css" />
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <link type="text/css" rel="stylesheet" href="http://conniffcollection.com/dial/assets/skins/sam/dial-skin.css" />
7505fb0434c916f7c5c0ba7fe766fa86faf7937fJeff Conniff-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <!-- get just dial from conniffcollection/dial/js dir **** MUST BE UPDATED FTP **** -->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <!--<script src="http://conniffcollection.com/dial/js/yui.js"></script>-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <!--<script src="http://conniffcollection.com/dial/js/dial.js"></script>-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <!--<script src="http://conniffcollection.com/build/yui/yui-min.js"></script> ftp'd the whole build subdir over to conniffco -->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- ///////////////////////////////////////////////////////////////////////////////////////-->
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<!-- need these new CSS files when using post 3.3.0 Dial.js re-architecture (no ...handle-user class)
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<link type="text/css" rel="stylesheet" href="assets/dial-core.css" />
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff<link type="text/css" rel="stylesheet" href="assets/skins/sam/dial-skin.css" />-->
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">
5cbeb1422f0a930517496f24307ea05077878f7dJeff Conniff <span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers. done?</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,
63050c43ae8b728257d6bf252e5d5726ca39c0ccJeff Conniff decimalPlaces: 3,
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,
332df97d8fc20ff4b1c5c0bcb2ee275f33bb04b3Jeff Conniff stepsPerRevolution:10,
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>