← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/tests/event/tests/manual/mouseenter.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/event/tests/manual/mouseenter.html
1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2
 
   "http://www.w3.org/TR/html4/strict.dtd">
3
 
 
4
 
<html lang="en">
5
 
<head>
6
 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7
 
        <title>MouseEnter and MouseLeave Event Tests</title>
8
 
 
9
 
        <link rel="stylesheet" type="text/css" href="../../../../build/cssreset/reset-min.css">
10
 
        <link rel="stylesheet" type="text/css" href="../../../../build/cssbase/base-min.css">
11
 
        <style type="text/css">
12
 
        
13
 
                .container {
14
 
                        background-color: #ccc;
15
 
                        padding: 20px;
16
 
                        margin: 10px 0;
17
 
                        border-width: 1px;
18
 
                        border-style: solid;
19
 
                        border-color: #ccc;
20
 
                }
21
 
                
22
 
                .container.hover {
23
 
                        background-color: #fc0;
24
 
                }
25
 
                
26
 
                .container ul {
27
 
                        list-style: none;
28
 
                        padding: 10px;
29
 
                        margin: 0;
30
 
                        background-color: #333;
31
 
                }
32
 
 
33
 
                .container ul li {
34
 
                        margin: 10px;
35
 
                        padding: 1px;
36
 
                        background-color: #999;
37
 
                        border-width: 1px;
38
 
                        border-style: solid;
39
 
                        border-color: #999;                     
40
 
                }
41
 
                
42
 
                .container ul li.hover {
43
 
                        background-color: #ff6;
44
 
                }
45
 
 
46
 
                .container ul li em {
47
 
                        display: block;
48
 
                        margin: 10px;
49
 
                        padding: 5px;
50
 
                        background-color: #666;                 
51
 
                }
52
 
                
53
 
                .outline,
54
 
                .container ul li.outline {
55
 
                        border-color: #f00;
56
 
                }
57
 
                
58
 
                .container.focus {
59
 
                        background-color: blue;
60
 
                }
61
 
        
62
 
        </style>
63
 
 
64
 
    <!--script src="/sand/delegate_leak_files/heapsize.js"></script-->
65
 
        <script type="text/javascript" src="../../../../build/yui/yui.js"></script>
66
 
        <!--script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js"></script-->
67
 
 
68
 
        <script type="text/javascript">
69
 
                YUI({
70
 
            //base: '../../../../build/',
71
 
            filter: 'raw'
72
 
        }).use('event-custom', 'event', 'node-style', function (Y) {
73
 
                        
74
 
            /*
75
 
            var count = 0;
76
 
            Y.one = (function (original) {
77
 
                return function () {
78
 
                    count++;
79
 
                    return original.apply(Y, arguments);
80
 
                };
81
 
            })(Y.one);
82
 
            */
83
 
 
84
 
            //var memsnap = trackMemory(Y);
85
 
 
86
 
                        var onContainerMouseEnter = function (event) {
87
 
 
88
 
                                if (event.currentTarget == this) {
89
 
                                        this.addClass("hover");                                 
90
 
                                }
91
 
                                
92
 
                        };
93
 
                        
94
 
                        var onContainerMouseLeave = function (event) {
95
 
 
96
 
                                if (event.currentTarget == this) {
97
 
                                        this.removeClass("hover");
98
 
                                }
99
 
 
100
 
                        };
101
 
 
102
 
                        var onLIMouseEnter = function (event) {
103
 
 
104
 
                                if (event.container.get("id") == "container-1") {
105
 
                                        this.addClass("hover");
106
 
                                }
107
 
                                
108
 
                        };
109
 
                        
110
 
                        var onLIMouseLeave = function (event) {
111
 
 
112
 
                                if (event.container.get("id") == "container-1") {
113
 
                                        this.removeClass("hover");
114
 
                                }
115
 
                                
116
 
                        };
117
 
                        
118
 
                        var addContainerOutline = function (event, className) {
119
 
 
120
 
                                event.currentTarget.addClass(className);
121
 
 
122
 
                        };
123
 
                        
124
 
                        var removeContainerOutline = function (event) {
125
 
 
126
 
                                event.currentTarget.removeClass(this);
127
 
 
128
 
                        };
129
 
 
130
 
                        
131
 
                        var addLIOutline = function (event, className) {
132
 
                        
133
 
                                event.currentTarget.addClass(className);
134
 
                        
135
 
                        };
136
 
                        
137
 
                        var removeLIOutline = function (event) {
138
 
                        
139
 
                                event.currentTarget.removeClass(this);
140
 
                        
141
 
                        };
142
 
                        
143
 
                        var setLIColor = function (event) {
144
 
 
145
 
                                this.setStyle("color", "#fff");                         
146
 
 
147
 
                        };
148
 
                        
149
 
                        var removeLIColor = function (event) {
150
 
 
151
 
                                this.setStyle("color", "");
152
 
                                                                
153
 
                        };
154
 
                        
155
 
                        var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
156
 
                        var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");
157
 
 
158
 
                        var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
159
 
                        var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");
160
 
 
161
 
                        var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
162
 
                        var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");
163
 
 
164
 
                        var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
165
 
                        var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");
166
 
 
167
 
                        var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
168
 
                        var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");
169
 
                                
170
 
 
171
 
                        Y.on("click", function () {
172
 
 
173
 
                                handle1.detach(); 
174
 
                                handle2.detach(); 
175
 
                                handle3.detach(); 
176
 
                                handle4.detach(); 
177
 
                                handle5.detach(); 
178
 
                                handle6.detach(); 
179
 
                                handle7.detach(); 
180
 
                                handle8.detach();                 
181
 
                                handle9.detach(); 
182
 
                                handle10.detach();
183
 
                                
184
 
                        }, "#remove-listeners");
185
 
                                
186
 
            document.getElementById('memsize').onclick = function () {
187
 
                //memsnap();
188
 
                //console.log(count);
189
 
                console.log(Y.Object.keys(Y.Node._instances).length);
190
 
            };
191
 
                });
192
 
        </script>
193
 
 
194
 
</head>
195
 
<body>
196
 
 
197
 
        <h1>MouseEnter and MouseLeave Event Tests</h1>
198
 
 
199
 
        <ul>
200
 
                <li>The background color of the <code>div</code> element should turn 
201
 
                orange and have a red outline when you move the mouse over it.</li>
202
 
                <li>The background color of each <code>li</code> should change to yellow
203
 
                when you mouse over it and have a red outline.</li>             
204
 
        </ul>
205
 
 
206
 
        <div id="container-1" class="container">
207
 
                <ul id="ul-1">
208
 
                        <li id="li1">
209
 
                <p><span>This</span></p>
210
 
                <p><em>is</em></p>
211
 
                <p><strong>a</strong></p>
212
 
                <p><q>bunch</q></p>
213
 
                <blockquote><p>of</p></blockquote>
214
 
                <div>
215
 
                    <div>
216
 
                        <div>
217
 
                            <div>
218
 
                                <p>paragraphs</p>
219
 
                            </div>
220
 
                        </div>
221
 
                    </div>
222
 
                </div>
223
 
                <em id="em1">Item Type One</em>
224
 
            </li>
225
 
                        <li id="li2"><em id="em2">Item Type Two</em></li>
226
 
                        <li id="li3"><em id="em3">Item Type Three</em></li>
227
 
                </ul>
228
 
        </div>
229
 
                
230
 
        <button id="remove-listeners">Remove Listeners</button>
231
 
    <button id="memsize">Check memory</button>
232
 
 
233
 
</body>
234
 
</html>