tests/manual/dial_simple_night.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
2N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2N/A<html>
2N/A<head>
2N/A<title>Dial Widget Manual Test</title>
2N/A
2N/A<!-- Source File and Seed for YUI3-->
2N/A<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
2N/A<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">
2N/A
2N/A<script src="/build/yui/yui.js"></script>
2N/A
2N/A<style>
2N/A.intro-sentence{
2N/A    margin:3em;
2N/A}
2N/Abody{
2N/A    margin-top:30px;
2N/A}
2N/A.steps{
2N/A    margin:20px;
2N/A}
2N/A.steps li{margin-bottom:1em;}
2N/A.steps li a {margin-right:2em; border:solid 1px #dddddd; background-color:#eeeeee; padding:3px 6px; cursor:pointer;}
2N/A#myOtherNode {margin-bottom: 1em;}
2N/Ap{margin:40px;}
2N/A</style>
2N/A</head>
2N/A<body class="yui3-skin-night">
2N/A    <span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers.</span>
2N/A    <ul class="steps">
2N/A        <li><a class="xx d_min">-minor</a><a class="xx i_min">+minor</a></li>
2N/A        <li><a class="xx d_maj">-major</a><a class="xx i_maj">+major</a></li>
2N/A        <li><a class="xx min">min</a><a class="xx max">max</a></li>
2N/A        <li><a class="xx orig">origin</a></li>
2N/A    </ul>
2N/A    <input id="myOtherNode" value="hello">
2N/A    <br>
2N/A    <span id="dial_container_big">test a larger size. <p>increment controls don't affect this one.</p></span>
2N/A    <span id="dial_container_small">test a small size. </span>
2N/A    <p>test min max _______________________</p>
2N/A    <p>
2N/A    <p></p>
2N/A
2N/A</body>
2N/A</html>
2N/A<script>
2N/A        // YUI({ skin:{defaultSkin: 'night'}}).use
2N/A    YUI({lang:'es', filter:'raw', skin:{defaultSkin: 'night'}}).use("dial", function(Y) {          //, filter:'raw'  this make it really hard to clear cache on iPad
2N/A
2N/A        var dial = new Y.Dial({
2N/A            min:-2,
2N/A            max:110,
2N/A            stepsPerRevolution:100,
2N/A            value: 5,
2N/A            diameter: 75,
2N/A            decimalPlaces:0
2N/A        });
2N/A        dial.render("#dial_container");
2N/A
2N/A
2N/A
2N/A
2N/A
2N/A
2N/A
2N/A        Y.on('click', function(e){
2N/A            if(e.target.hasClass('i_min')){
2N/A                dial._incrMinor();
2N/A            }
2N/A            if(e.target.hasClass('d_min')){
2N/A                dial._decrMinor();
2N/A            }
2N/A            if(e.target.hasClass('i_maj')){
2N/A                dial._incrMajor();
2N/A            }
2N/A            if(e.target.hasClass('d_maj')){
2N/A                dial._decrMajor();
2N/A            }
2N/A
2N/A
2N/A            if(e.target.hasClass('min')){
2N/A                dial._setToMin();
2N/A            }
2N/A            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').toFixed(e.target.get('decimalPlaces')));
            Y.one('#myOtherNode').set('value', e.target.get('value'));
//          Y.log('dial._angle: ' + dial._angle + '... prevAng: ' + dial._prevAng + '...wrapping: ' + dial._timesWrapped);
        });


    });
</script>