← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/tests/dial/tests/manual/dial_simple_night.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

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