<html>
<head>
<title>Dial Widget Manual Test</title>
<!-- Source File and Seed for YUI3-->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/reset-min.css" />
<!-- get from 3.3.0 Release
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> -->
<!-- get from lastSuccessful
<script type="text/javascript" src="http://yuibuild.corp.yahoo.com/yui3/lastSuccessful/build/yui/yui-min.js"></script>-->
<!-- get from local copy of 3.3.0
<!-- get all from gitroot
<!-- get all from gitroot -->
<!-- get just dial from a local js dir
<script src="js/dial_local.js"></script>-->
<!-- /////////////////// for iPad (not on vger network) need these ////////////////////////-->
<!-- conniffcolletion need these new CSS files when using post 3.3.0 Dial.js re-architecture (no ...handle-user class)
<link type="text/css" rel="stylesheet" href="http://conniffcollection.com/dial/assets/dial-core.css" />
<link type="text/css" rel="stylesheet" href="http://conniffcollection.com/dial/assets/skins/sam/dial-skin.css" />
-->
<!-- get just dial from conniffcollection/dial/js dir **** MUST BE UPDATED FTP **** -->
<!--<script src="http://conniffcollection.com/dial/js/yui.js"></script>-->
<!--<script src="http://conniffcollection.com/dial/js/dial.js"></script>-->
<!--<script src="http://conniffcollection.com/build/yui/yui-min.js"></script> ftp'd the whole build subdir over to conniffco -->
<!-- ///////////////////////////////////////////////////////////////////////////////////////-->
<!-- need these new CSS files when using post 3.3.0 Dial.js re-architecture (no ...handle-user class)
<link type="text/css" rel="stylesheet" href="assets/dial-core.css" />
<style>
.intro-sentence{
margin:3em;
}
body{
margin-top:30px;
}
.steps{
margin:20px;
}
.steps li{margin-bottom:1em;}
.steps li a {margin-right:2em; border:solid 1px #dddddd; background-color:#eeeeee; padding:3px 6px; cursor:pointer;}
#myOtherNode {margin-bottom: 1em;}
p{margin:40px;}
</style>
</head>
<body class="yui3-skin-sam">
<span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers. done?</span>
<ul class="steps">
<li><a class="xx d_min">-minor</a><a class="xx i_min">+minor</a></li>
<li><a class="xx d_maj">-major</a><a class="xx i_maj">+major</a></li>
<li><a class="xx min">min</a><a class="xx max">max</a></li>
<li><a class="xx orig">origin</a></li>
</ul>
<input id="myOtherNode" value="hello">
<br>
<span id="dial_container_big">test a larger size. <p>increment controls don't affect this one.</p></span>
<span id="dial_container_small">test a small size. </span>
<p>test min max _______________________</p>
<p>
<span id="dial_one"></span>
<span id="dial_two"></span>
<span id="dial_three"></span>
<span id="dial_four"></span>
<p></p>
</body>
</html>
<script>
YUI({lang:'es', filter:'raw'}).use("dial", function(Y) {
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 60,
diameter: 100
});
dial.render("#dial_container");
var dialBig = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 0,
diameter: 439,
centerButtonDiameter: 0.2,
handleDiameter: 0.4,
markerDiameter: 0.02,
handleDistance: 0.5
});
dialBig.set('strings', {'label':'Label change using Dial.set', 'resetStr': 'set back to orig', 'tooltipHandle': 'test change tooltip'});
dialBig.render("#dial_container_big");
var dialSmall = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 80,
diameter: 37,
strings: {label: 'My small pre-render label', resetStr: 'Reset Long', tooltipHandle: 'Drag small handle to set value'}
});
dialSmall.render("#dial_container_small");
///////////// check min max issues ////////////////////////////////
var dialOne = new Y.Dial({
min:2,
max:99,
stepsPerRevolution:100,
value: 5,
diameter: 100,
strings: {label: '2...99', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
});
dialOne.render("#dial_one");
var dialTwo = new Y.Dial({
min:-2,
max:5,
stepsPerRevolution:100,
value: 3,
diameter: 100,
strings: {label: '-2...5', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
});
dialTwo.render("#dial_two");
var dialThree = new Y.Dial({
min:-48,
max:40,
stepsPerRevolution:100,
value: 35,
diameter: 100,
decimalPlaces: 3,
strings: {label: '-48...40', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
});
dialThree.render("#dial_three");
var dialFour = new Y.Dial({
min:-28,
max:28,
stepsPerRevolution:10,
value: 60,
diameter: 100,
strings: {label: '-28...28', resetStr: 'Reset', tooltipHandle: 'Drag handle to set value'}
});
dialFour.render("#dial_four");
Y.on('click', function(e){
if(e.target.hasClass('i_min')){
dial._incrMinor();
}
if(e.target.hasClass('d_min')){
dial._decrMinor();
}
if(e.target.hasClass('i_maj')){
dial._incrMajor();
}
if(e.target.hasClass('d_maj')){
dial._decrMajor();
}
if(e.target.hasClass('min')){
dial._setToMin();
}
if(e.target.hasClass('max')){
dial._setToMax();
}
if(e.target.hasClass('orig')){
dial._resetDial();
}
}, '.xx');
// update value of the Dial from another object's value when it gets a keyup event
Y.on('keyup', function(e){
dial.set('value', e.target.get('value') - 0);
}, '#myOtherNode');
// update the value of another object when the Dial changes value
dial.after('valueChange', function(e){
Y.one('#myOtherNode').set('value', e.target.get('value'));
Y.log('dial._angle: ' + dial._angle + '... prevAng: ' + dial._prevAng + '...wrapping: ' + dial._timesWrapped);
});
});
</script>