|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: Overlay: Animation Plugin</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
<style type="text/css"> |
|
|
20 |
.yui-overlay-content { |
|
|
21 |
background-color:#ccc; |
|
|
22 |
border:1px solid #000; |
|
|
23 |
padding:5px; |
|
|
24 |
} |
|
|
25 |
|
|
|
26 |
.yui-overlay .yui-widget-hd, |
|
|
27 |
.yui-overlay .yui-widget-bd, |
|
|
28 |
.yui-overlay .yui-widget-ft { |
|
|
29 |
background-color:#eee; |
|
|
30 |
padding:2px; |
|
|
31 |
border:1px solid #999; |
|
|
32 |
} |
|
|
33 |
|
|
|
34 |
.yui-overlay .yui-widget-bd { |
|
|
35 |
background-color:#fff; |
|
|
36 |
} |
|
|
37 |
</style> |
|
|
38 |
|
|
|
39 |
</head> |
|
|
40 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
41 |
<div id="custom-doc" class="yui-t2"> |
|
|
42 |
<div id="hd"> |
|
|
43 |
<div id="ygunav"> |
|
|
44 |
<p> |
|
|
45 |
<em> |
|
|
46 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
47 |
</em> |
|
|
48 |
</p> |
|
|
49 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
50 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
51 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
52 |
<div id="sitesearch"> |
|
|
53 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
54 |
<input type="text" id="searchinput" name="p"> |
|
|
55 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
56 |
</div> |
|
|
57 |
</form> |
|
|
58 |
</div> |
|
|
59 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
60 |
<div id="pagetitle"><h1>YUI Library Examples: Overlay: Animation Plugin</h1></div> |
|
|
61 |
</div> |
|
|
62 |
<div id="bd"> |
|
|
63 |
|
|
|
64 |
|
|
|
65 |
<div id="yui-main"> |
|
|
66 |
<div class="yui-b"> |
|
|
67 |
<div class="yui-ge"> |
|
|
68 |
<div class="yui-u first example" id="main"> |
|
|
69 |
|
|
|
70 |
<h2>Overlay: Animation Plugin</h2> |
|
|
71 |
|
|
|
72 |
<div id="example" class="promo"> |
|
|
73 |
<div class="example-intro"> |
|
|
74 |
<p>This example shows how you can use Widget's plugin infrastructure to customize the existing behavior of a widget.</p> |
|
|
75 |
|
|
|
76 |
<p>We create an Animation plugin class for Overlay called <code>AnimPlugin</code> which changes the way Overlay instances are shown/hidden, by fading them in and out. The Overlay is initially constructed with the <code>AnimPlugin</code> plugged in <em>(with the duration set to 2 seconds)</em>. |
|
|
77 |
Clicking the "Unplug AnimPlugin" button, will restore the original non-Animated Overlay show/hide behavior. Clicking on the "Plug AnimPlugin" button will plug in the <code>AnimPlugin</code> again, but with a shorter duration.</p> |
|
|
78 |
</div> |
|
|
79 |
|
|
|
80 |
<div class="module example-container "> |
|
|
81 |
<div class="hd exampleHd"> |
|
|
82 |
<p class="newWindowButton yui-skin-sam"> |
|
|
83 |
<a href="overlay-anim-plugin_clean.html" target="_blank">View example in new window.</a> |
|
|
84 |
</p> |
|
|
85 |
</div> <div id="example-canvas" class="bd"> |
|
|
86 |
|
|
|
87 |
|
|
|
88 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
89 |
|
|
|
90 |
<div id="overlay"> |
|
|
91 |
<div class="yui-widget-hd">Overlay Header</div> |
|
|
92 |
<div class="yui-widget-bd">Overlay Body</div> |
|
|
93 |
<div class="yui-widget-ft">Overlay Footer</div> |
|
|
94 |
</div> |
|
|
95 |
|
|
|
96 |
<button type="button" id="show">Show</button> |
|
|
97 |
<button type="button" id="hide">Hide</button> |
|
|
98 |
<button type="button" id="unplug">Unplug AnimPlugin</button> |
|
|
99 |
<button type="button" id="plug">Plug AnimPlugin (duration:0.5)</button> |
|
|
100 |
|
|
|
101 |
<script type="text/javascript"> |
|
|
102 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", "anim", "plugin", function(Y) { |
|
|
103 |
|
|
|
104 |
/* Animation Plugin Constructor */ |
|
|
105 |
function AnimPlugin(config) { |
|
|
106 |
AnimPlugin.superclass.constructor.apply(this, arguments); |
|
|
107 |
} |
|
|
108 |
|
|
|
109 |
/* |
|
|
110 |
* The namespace for the plugin. This will be the property on the widget, which will |
|
|
111 |
* reference the plugin instance, when it's plugged in |
|
|
112 |
*/ |
|
|
113 |
AnimPlugin.NS = "fx"; |
|
|
114 |
|
|
|
115 |
/* |
|
|
116 |
* The NAME of the AnimPlugin class. Used to prefix events generated |
|
|
117 |
* by the plugin class. |
|
|
118 |
*/ |
|
|
119 |
AnimPlugin.NAME = "animPlugin"; |
|
|
120 |
|
|
|
121 |
/* |
|
|
122 |
* The default set of attributes for the AnimPlugin class. |
|
|
123 |
*/ |
|
|
124 |
AnimPlugin.ATTRS = { |
|
|
125 |
|
|
|
126 |
/* |
|
|
127 |
* Default duration. Used by the default animation implementations |
|
|
128 |
*/ |
|
|
129 |
duration : { |
|
|
130 |
value: 0.2 |
|
|
131 |
}, |
|
|
132 |
|
|
|
133 |
/* |
|
|
134 |
* Default animation instance used for showing the widget (opacity fade-in) |
|
|
135 |
*/ |
|
|
136 |
animVisible : { |
|
|
137 |
valueFn : function() { |
|
|
138 |
|
|
|
139 |
var host = this.get("host"); |
|
|
140 |
var boundingBox = host.get("boundingBox"); |
|
|
141 |
|
|
|
142 |
var anim = new Y.Anim({ |
|
|
143 |
node: boundingBox, |
|
|
144 |
to: { opacity: 1 }, |
|
|
145 |
duration: this.get("duration") |
|
|
146 |
}); |
|
|
147 |
|
|
|
148 |
// Set initial opacity, to avoid initial flicker |
|
|
149 |
if (!host.get("visible")) { |
|
|
150 |
boundingBox.setStyle("opacity", 0); |
|
|
151 |
} |
|
|
152 |
|
|
|
153 |
// Clean up, on destroy. Where supported, remove |
|
|
154 |
// opacity set using style. Else make 100% opaque |
|
|
155 |
anim.on("destroy", function() { |
|
|
156 |
if (Y.UA.ie) { |
|
|
157 |
this.get("node").setStyle("opacity", 1); |
|
|
158 |
} else { |
|
|
159 |
this.get("node").setStyle("opacity", ""); |
|
|
160 |
} |
|
|
161 |
}); |
|
|
162 |
|
|
|
163 |
return anim; |
|
|
164 |
} |
|
|
165 |
}, |
|
|
166 |
|
|
|
167 |
/* |
|
|
168 |
* Default animation instance used for hiding the widget (opacity fade-out) |
|
|
169 |
*/ |
|
|
170 |
animHidden : { |
|
|
171 |
valueFn : function() { |
|
|
172 |
return new Y.Anim({ |
|
|
173 |
node: this.get("host").get("boundingBox"), |
|
|
174 |
to: { opacity: 0 }, |
|
|
175 |
duration: this.get("duration") |
|
|
176 |
}); |
|
|
177 |
} |
|
|
178 |
} |
|
|
179 |
} |
|
|
180 |
|
|
|
181 |
/* |
|
|
182 |
* Extend the base plugin class |
|
|
183 |
*/ |
|
|
184 |
Y.extend(AnimPlugin, Y.Plugin.Base, { |
|
|
185 |
|
|
|
186 |
/* |
|
|
187 |
* Initialization code. Called when the |
|
|
188 |
* plugin is instantiated (whenever it's |
|
|
189 |
* plugged into the host) |
|
|
190 |
*/ |
|
|
191 |
initializer : function(config) { |
|
|
192 |
this._bindAnimVisible(); |
|
|
193 |
this._bindAnimHidden(); |
|
|
194 |
|
|
|
195 |
this.after("animVisibleChange", this._bindAnimVisible); |
|
|
196 |
this.after("animHiddenChange", this._bindAnimHidden); |
|
|
197 |
|
|
|
198 |
// Override default _uiSetVisible method, with custom animated method |
|
|
199 |
this.doBefore("_uiSetVisible", this._uiAnimSetVisible); |
|
|
200 |
}, |
|
|
201 |
|
|
|
202 |
/* |
|
|
203 |
* Destruction code. Invokes destroy in the individual animation instances, |
|
|
204 |
* and lets them take care of cleaning up any state. |
|
|
205 |
*/ |
|
|
206 |
destructor : function() { |
|
|
207 |
this.get("animVisible").destroy(); |
|
|
208 |
this.get("animHidden").destroy(); |
|
|
209 |
}, |
|
|
210 |
|
|
|
211 |
/* |
|
|
212 |
* The custom animation method, added by the plugin. |
|
|
213 |
* |
|
|
214 |
* This method replaces the default _uiSetVisible handler |
|
|
215 |
* Widget provides, by injecting itself before _uiSetVisible, |
|
|
216 |
* (using Plugins before method) and preventing the default |
|
|
217 |
* behavior. |
|
|
218 |
*/ |
|
|
219 |
_uiAnimSetVisible : function(val) { |
|
|
220 |
if (this.get("host").get("rendered")) { |
|
|
221 |
if (val) { |
|
|
222 |
this.get("animHidden").stop(); |
|
|
223 |
this.get("animVisible").run(); |
|
|
224 |
} else { |
|
|
225 |
this.get("animVisible").stop(); |
|
|
226 |
this.get("animHidden").run(); |
|
|
227 |
} |
|
|
228 |
return new Y.Do.Prevent("AnimPlugin prevented default show/hide"); |
|
|
229 |
} |
|
|
230 |
}, |
|
|
231 |
|
|
|
232 |
/* |
|
|
233 |
* The original Widget _uiSetVisible implementation |
|
|
234 |
*/ |
|
|
235 |
_uiSetVisible : function(val) { |
|
|
236 |
var host = this.get("host"); |
|
|
237 |
var hiddenClass = host.getClassName("hidden"); |
|
|
238 |
if (!val) { |
|
|
239 |
host.get("boundingBox").addClass(hiddenClass); |
|
|
240 |
} else { |
|
|
241 |
host.get("boundingBox").removeClass(hiddenClass); |
|
|
242 |
} |
|
|
243 |
}, |
|
|
244 |
|
|
|
245 |
/* Sets up call to invoke original visibility handling when the animVisible animation is started */ |
|
|
246 |
_bindAnimVisible : function() { |
|
|
247 |
var animVisible = this.get("animVisible"); |
|
|
248 |
|
|
|
249 |
// Setup original visibility handling (for show) before starting to animate |
|
|
250 |
animVisible.on("start", Y.bind(function() { |
|
|
251 |
this._uiSetVisible(true); |
|
|
252 |
}, this)); |
|
|
253 |
}, |
|
|
254 |
|
|
|
255 |
/* Sets up call to invoke original visibility handling when the animHidden animation is complete */ |
|
|
256 |
_bindAnimHidden : function() { |
|
|
257 |
var animHidden = this.get("animHidden"); |
|
|
258 |
|
|
|
259 |
// Setup original visibility handling (for hide) after completing animation |
|
|
260 |
animHidden.after("end", Y.bind(function() { |
|
|
261 |
this._uiSetVisible(false); |
|
|
262 |
}, this)); |
|
|
263 |
} |
|
|
264 |
}); |
|
|
265 |
|
|
|
266 |
// Create a new Overlay instance, and add AnimPlugin with a default duration of 2 seconds |
|
|
267 |
var overlay = new Y.Overlay({ |
|
|
268 |
contentBox: "#overlay", |
|
|
269 |
width:"10em", |
|
|
270 |
height:"10em", |
|
|
271 |
visible:false, |
|
|
272 |
shim:false, |
|
|
273 |
align: { |
|
|
274 |
node: "#show", |
|
|
275 |
points: ["tl", "bl"] |
|
|
276 |
}, |
|
|
277 |
plugins : [{fn:AnimPlugin, cfg:{duration:2}}] |
|
|
278 |
}); |
|
|
279 |
overlay.render(); |
|
|
280 |
|
|
|
281 |
Y.on("click", function() { |
|
|
282 |
overlay.show(); |
|
|
283 |
}, "#show"); |
|
|
284 |
|
|
|
285 |
Y.on("click", function() { |
|
|
286 |
overlay.hide(); |
|
|
287 |
}, "#hide"); |
|
|
288 |
|
|
|
289 |
Y.on("click", function() { |
|
|
290 |
overlay.unplug("fx"); |
|
|
291 |
}, "#unplug"); |
|
|
292 |
|
|
|
293 |
Y.on("click", function() { |
|
|
294 |
overlay.unplug("fx"); |
|
|
295 |
overlay.plug(AnimPlugin, {duration:0.5}); |
|
|
296 |
}, "#plug"); |
|
|
297 |
|
|
|
298 |
}); |
|
|
299 |
</script> |
|
|
300 |
|
|
|
301 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
302 |
|
|
|
303 |
|
|
|
304 |
</div> |
|
|
305 |
</div> |
|
|
306 |
</div> |
|
|
307 |
|
|
|
308 |
<h3>Creating an Animation Plugin For Overlay</h3> |
|
|
309 |
|
|
|
310 |
<h4>Setting Up The YUI Instance</h4> |
|
|
311 |
|
|
|
312 |
<p>For this example, we'll pull in the <code>overlay</code> module, along with the <code>anim</code> and <code>plugin</code> modules. The <code>anim</code> module provides the animation utility, and <code>plugin</code> will provide |
|
|
313 |
the <code>Plugin</code> base class which we'll extend to create our <code>AnimPlugin</code>. The code to set up our sandbox instance is shown below:</p> |
|
|
314 |
|
|
|
315 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="st0">"anim"</span><span class="sy0">,</span> <span class="st0">"plugin"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// We'll write our code here, after pulling in the default </span></div></li><li class="li1"><div class="de1"> <span class="co1">// Overlay widget, the Animation utility and the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// Plugin base class</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="st0">"anim"</span><span class="sy0">,</span> <span class="st0">"plugin"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
316 |
<span class="co1">// We'll write our code here, after pulling in the default </span> |
|
|
317 |
<span class="co1">// Overlay widget, the Animation utility and the </span> |
|
|
318 |
<span class="co1">// Plugin base class</span> |
|
|
319 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI({...}).use("overlay", "anim", "plugin", function(Y) { |
|
|
320 |
// We'll write our code here, after pulling in the default |
|
|
321 |
// Overlay widget, the Animation utility and the |
|
|
322 |
// Plugin base class |
|
|
323 |
});</textarea></div> |
|
|
324 |
<p>Using the <code>overlay</code> module will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p> |
|
|
325 |
|
|
|
326 |
<h4>AnimPlugin Class Structure</h4> |
|
|
327 |
|
|
|
328 |
<p>The <code>AnimPlugin</code> class will extend the <code>Plugin</code> base class. Since <code>Plugin</code> derives from <code>Base</code>, we follow the same pattern we use for widgets and other utilities which extend Base to setup our new class.</p> |
|
|
329 |
|
|
|
330 |
<p>Namely:</p> |
|
|
331 |
|
|
|
332 |
<ul> |
|
|
333 |
<li>Setting up the constructor to invoke the superclass constructor</li> |
|
|
334 |
<li>Setting up a <code>NAME</code> property, to identify the class</li> |
|
|
335 |
<li>Setting up the default attributes, using the <code>ATTRS</code> property</li> |
|
|
336 |
<li>Providing prototype implementations for anything we want executed during initialization and destruction using the <code>initializer</code> and <code>destructor</code> lifecycle methods</li> |
|
|
337 |
</ul> |
|
|
338 |
|
|
|
339 |
<p>Additionally, since this is a plugin, we provide a <code>NS</code> property for the class, which defines the property which will refer to the <code>AnimPlugin</code> instance on the host class (e.g. <code>overlay.fx</code> will be an instance of <code>AnimPlugin</code>)</p>. |
|
|
340 |
|
|
|
341 |
<p>This basic structure is shown below:</p> |
|
|
342 |
|
|
|
343 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Animation Plugin Constructor */</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> AnimPlugin<span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> AnimPlugin.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The namespace for the plugin. This will be the property on the widget, which will </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * reference the plugin instance, when it's plugged in</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li2"><div class="de2">AnimPlugin.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">"fx"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The NAME of the AnimPlugin class. Used to prefix events generated</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * by the plugin class.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">AnimPlugin.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">"animPlugin"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The default set of attributes for the AnimPlugin class.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">AnimPlugin.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Default duration. Used by the default animation implementations</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> duration <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span> <span class="nu0">0.2</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Default animation instance used for showing the widget (opacity fade-in)</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> animVisible <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> ...</div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * Default animation instance used for hiding the widget (opacity fade-out)</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> animHidden <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> ...</div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * Extend the base plugin class</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">(</span>AnimPlugin<span class="sy0">,</span> Y.<span class="me1">Plugin</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Lifecycle methods</span></div></li><li class="li2"><div class="de2"> initializer <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Other plugin specific methods</span></div></li><li class="li1"><div class="de1"> _uiAnimSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> _uiSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> ...</div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Animation Plugin Constructor */</span> |
|
|
344 |
<span class="kw2">function</span> AnimPlugin<span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span> |
|
|
345 |
AnimPlugin.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">)</span><span class="sy0">;</span> |
|
|
346 |
<span class="br0">}</span> |
|
|
347 |
|
|
|
348 |
<span class="coMULTI">/* |
|
|
349 |
* The namespace for the plugin. This will be the property on the widget, which will |
|
|
350 |
* reference the plugin instance, when it's plugged in |
|
|
351 |
*/</span> |
|
|
352 |
AnimPlugin.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">"fx"</span><span class="sy0">;</span> |
|
|
353 |
|
|
|
354 |
<span class="coMULTI">/* |
|
|
355 |
* The NAME of the AnimPlugin class. Used to prefix events generated |
|
|
356 |
* by the plugin class. |
|
|
357 |
*/</span> |
|
|
358 |
AnimPlugin.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">"animPlugin"</span><span class="sy0">;</span> |
|
|
359 |
|
|
|
360 |
<span class="coMULTI">/* |
|
|
361 |
* The default set of attributes for the AnimPlugin class. |
|
|
362 |
*/</span> |
|
|
363 |
AnimPlugin.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span> |
|
|
364 |
|
|
|
365 |
<span class="coMULTI">/* |
|
|
366 |
* Default duration. Used by the default animation implementations |
|
|
367 |
*/</span> |
|
|
368 |
duration <span class="sy0">:</span> <span class="br0">{</span> |
|
|
369 |
value<span class="sy0">:</span> <span class="nu0">0.2</span> |
|
|
370 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
371 |
|
|
|
372 |
<span class="coMULTI">/* |
|
|
373 |
* Default animation instance used for showing the widget (opacity fade-in) |
|
|
374 |
*/</span> |
|
|
375 |
animVisible <span class="sy0">:</span> <span class="br0">{</span> |
|
|
376 |
valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
377 |
... |
|
|
378 |
<span class="br0">}</span> |
|
|
379 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
380 |
|
|
|
381 |
<span class="coMULTI">/* |
|
|
382 |
* Default animation instance used for hiding the widget (opacity fade-out) |
|
|
383 |
*/</span> |
|
|
384 |
animHidden <span class="sy0">:</span> <span class="br0">{</span> |
|
|
385 |
valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
386 |
... |
|
|
387 |
<span class="br0">}</span> |
|
|
388 |
<span class="br0">}</span> |
|
|
389 |
<span class="br0">}</span> |
|
|
390 |
|
|
|
391 |
<span class="coMULTI">/* |
|
|
392 |
* Extend the base plugin class |
|
|
393 |
*/</span> |
|
|
394 |
Y.<span class="me1">extend</span><span class="br0">(</span>AnimPlugin<span class="sy0">,</span> Y.<span class="me1">Plugin</span><span class="sy0">,</span> <span class="br0">{</span> |
|
|
395 |
|
|
|
396 |
<span class="co1">// Lifecycle methods</span> |
|
|
397 |
initializer <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span> |
|
|
398 |
destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span> |
|
|
399 |
|
|
|
400 |
<span class="co1">// Other plugin specific methods</span> |
|
|
401 |
_uiAnimSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span> |
|
|
402 |
_uiSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span> |
|
|
403 |
... |
|
|
404 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">/* Animation Plugin Constructor */ |
|
|
405 |
function AnimPlugin(config) { |
|
|
406 |
AnimPlugin.superclass.constructor.apply(this, arguments); |
|
|
407 |
} |
|
|
408 |
|
|
|
409 |
/* |
|
|
410 |
* The namespace for the plugin. This will be the property on the widget, which will |
|
|
411 |
* reference the plugin instance, when it's plugged in |
|
|
412 |
*/ |
|
|
413 |
AnimPlugin.NS = "fx"; |
|
|
414 |
|
|
|
415 |
/* |
|
|
416 |
* The NAME of the AnimPlugin class. Used to prefix events generated |
|
|
417 |
* by the plugin class. |
|
|
418 |
*/ |
|
|
419 |
AnimPlugin.NAME = "animPlugin"; |
|
|
420 |
|
|
|
421 |
/* |
|
|
422 |
* The default set of attributes for the AnimPlugin class. |
|
|
423 |
*/ |
|
|
424 |
AnimPlugin.ATTRS = { |
|
|
425 |
|
|
|
426 |
/* |
|
|
427 |
* Default duration. Used by the default animation implementations |
|
|
428 |
*/ |
|
|
429 |
duration : { |
|
|
430 |
value: 0.2 |
|
|
431 |
}, |
|
|
432 |
|
|
|
433 |
/* |
|
|
434 |
* Default animation instance used for showing the widget (opacity fade-in) |
|
|
435 |
*/ |
|
|
436 |
animVisible : { |
|
|
437 |
valueFn : function() { |
|
|
438 |
... |
|
|
439 |
} |
|
|
440 |
}, |
|
|
441 |
|
|
|
442 |
/* |
|
|
443 |
* Default animation instance used for hiding the widget (opacity fade-out) |
|
|
444 |
*/ |
|
|
445 |
animHidden : { |
|
|
446 |
valueFn : function() { |
|
|
447 |
... |
|
|
448 |
} |
|
|
449 |
} |
|
|
450 |
} |
|
|
451 |
|
|
|
452 |
/* |
|
|
453 |
* Extend the base plugin class |
|
|
454 |
*/ |
|
|
455 |
Y.extend(AnimPlugin, Y.Plugin, { |
|
|
456 |
|
|
|
457 |
// Lifecycle methods |
|
|
458 |
initializer : function(config) { ... }, |
|
|
459 |
destructor : function() { ... }, |
|
|
460 |
|
|
|
461 |
// Other plugin specific methods |
|
|
462 |
_uiAnimSetVisible : function(val) { ... }, |
|
|
463 |
_uiSetVisible : function(val) { ... }, |
|
|
464 |
... |
|
|
465 |
});</textarea></div> |
|
|
466 |
<h4>Attributes: animVisible, animHidden</h4> |
|
|
467 |
|
|
|
468 |
<p>The <code>animVisible</code> and <code>animHidden</code> attributes use Attribute's <code>valueFn</code> support to set up instance based default values for the attributes.</p> |
|
|
469 |
|
|
|
470 |
<p>The <code>animHidden</code> attribute is pretty straight forward and simply returns the Animation instance bound to the bounding box of the Overlay to provide a fade-out animation:</p> |
|
|
471 |
|
|
|
472 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">animHidden <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> to<span class="sy0">:</span> <span class="br0">{</span> opacity<span class="sy0">:</span> <span class="nu0">0</span> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"duration"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">animHidden <span class="sy0">:</span> <span class="br0">{</span> |
|
|
473 |
valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
474 |
<span class="kw1">return</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span> |
|
|
475 |
node<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
476 |
to<span class="sy0">:</span> <span class="br0">{</span> opacity<span class="sy0">:</span> <span class="nu0">0</span> <span class="br0">}</span><span class="sy0">,</span> |
|
|
477 |
duration<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"duration"</span><span class="br0">)</span> |
|
|
478 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
479 |
<span class="br0">}</span> |
|
|
480 |
<span class="br0">}</span></pre></div><textarea id="syntax3-plain">animHidden : { |
|
|
481 |
valueFn : function() { |
|
|
482 |
return new Y.Anim({ |
|
|
483 |
node: this.get("host").get("boundingBox"), |
|
|
484 |
to: { opacity: 0 }, |
|
|
485 |
duration: this.get("duration") |
|
|
486 |
}); |
|
|
487 |
} |
|
|
488 |
}</textarea></div> |
|
|
489 |
<p>The <code>animVisible</code> attribute is a little more interesting:</p> |
|
|
490 |
|
|
|
491 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">animVisible <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> host <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> boundingBox <span class="sy0">=</span> host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> boundingBox<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> to<span class="sy0">:</span> <span class="br0">{</span> opacity<span class="sy0">:</span> <span class="nu0">1</span> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> duration<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"duration"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Set initial opacity, to avoid initial flicker</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"visible"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> boundingBox.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">"opacity"</span><span class="sy0">,</span> <span class="nu0">0</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Clean up, on destroy. Where supported, remove</span></div></li><li class="li1"><div class="de1"> <span class="co1">// opacity set using style. Else make 100% opaque</span></div></li><li class="li2"><div class="de2"> anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">"destroy"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>Y.<span class="me1">UA</span>.<span class="me1">ie</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"node"</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">"opacity"</span><span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"node"</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">"opacity"</span><span class="sy0">,</span> <span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> anim<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">animVisible <span class="sy0">:</span> <span class="br0">{</span> |
|
|
492 |
valueFn <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
493 |
|
|
|
494 |
<span class="kw2">var</span> host <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
495 |
boundingBox <span class="sy0">=</span> host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
496 |
|
|
|
497 |
<span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span> |
|
|
498 |
node<span class="sy0">:</span> boundingBox<span class="sy0">,</span> |
|
|
499 |
to<span class="sy0">:</span> <span class="br0">{</span> opacity<span class="sy0">:</span> <span class="nu0">1</span> <span class="br0">}</span><span class="sy0">,</span> |
|
|
500 |
duration<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"duration"</span><span class="br0">)</span> |
|
|
501 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
502 |
|
|
|
503 |
<span class="co1">// Set initial opacity, to avoid initial flicker</span> |
|
|
504 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"visible"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
505 |
boundingBox.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">"opacity"</span><span class="sy0">,</span> <span class="nu0">0</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
506 |
<span class="br0">}</span> |
|
|
507 |
|
|
|
508 |
<span class="co1">// Clean up, on destroy. Where supported, remove</span> |
|
|
509 |
<span class="co1">// opacity set using style. Else make 100% opaque</span> |
|
|
510 |
anim.<span class="me1">on</span><span class="br0">(</span><span class="st0">"destroy"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
511 |
<span class="kw1">if</span> <span class="br0">(</span>Y.<span class="me1">UA</span>.<span class="me1">ie</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
512 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"node"</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">"opacity"</span><span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
513 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
|
514 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"node"</span><span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">"opacity"</span><span class="sy0">,</span> <span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
515 |
<span class="br0">}</span> |
|
|
516 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
517 |
|
|
|
518 |
<span class="kw1">return</span> anim<span class="sy0">;</span> |
|
|
519 |
<span class="br0">}</span> |
|
|
520 |
<span class="br0">}</span></pre></div><textarea id="syntax4-plain">animVisible : { |
|
|
521 |
valueFn : function() { |
|
|
522 |
|
|
|
523 |
var host = this.get("host"), |
|
|
524 |
boundingBox = host.get("boundingBox"); |
|
|
525 |
|
|
|
526 |
var anim = new Y.Anim({ |
|
|
527 |
node: boundingBox, |
|
|
528 |
to: { opacity: 1 }, |
|
|
529 |
duration: this.get("duration") |
|
|
530 |
}); |
|
|
531 |
|
|
|
532 |
// Set initial opacity, to avoid initial flicker |
|
|
533 |
if (!host.get("visible")) { |
|
|
534 |
boundingBox.setStyle("opacity", 0); |
|
|
535 |
} |
|
|
536 |
|
|
|
537 |
// Clean up, on destroy. Where supported, remove |
|
|
538 |
// opacity set using style. Else make 100% opaque |
|
|
539 |
anim.on("destroy", function() { |
|
|
540 |
if (Y.UA.ie) { |
|
|
541 |
this.get("node").setStyle("opacity", 1); |
|
|
542 |
} else { |
|
|
543 |
this.get("node").setStyle("opacity", ""); |
|
|
544 |
} |
|
|
545 |
}); |
|
|
546 |
|
|
|
547 |
return anim; |
|
|
548 |
} |
|
|
549 |
}</textarea></div> |
|
|
550 |
<p>It essentially does the same thing as <code>animHidden</code>; setting up an Animation instance to provide an opacity based fade-in. However it also sets up a listener which will attempt to cleanup the opacity state of the Overlay when the plugin is unplugged from the Overlay. When a plugin is unplugged, it is destroyed.</p> |
|
|
551 |
|
|
|
552 |
<h4>Lifecycle Methods: initializer, destructor</h4> |
|
|
553 |
|
|
|
554 |
<p>In the <code>initializer</code>, we set up listeners on the animation instances (using <code>_bindAnimVisible, _bindAnimHidden</code>), which invoke the original visibility handling to make the Overlay visible before starting the <code>animVisible</code> animation and hide it after the <code>animHidden</code> animation is complete.</p> |
|
|
555 |
|
|
|
556 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">initializer <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._bindAnimVisible<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._bindAnimHidden<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"animVisibleChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._bindAnimVisible<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"animHiddenChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._bindAnimHidden<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Override default _uiSetVisible method, with custom animated method</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">doBefore</span><span class="br0">(</span><span class="st0">"_uiSetVisible"</span><span class="sy0">,</span> <span class="kw1">this</span>._uiAnimSetVisible<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">_bindAnimVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> animVisible <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> animVisible.<span class="me1">on</span><span class="br0">(</span><span class="st0">"start"</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Setup original visibility handling (for show) before starting to animate</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._uiSetVisible<span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">_bindAnimHidden <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> animHidden <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> animHidden.<span class="me1">after</span><span class="br0">(</span><span class="st0">"end"</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Setup original visibility handling (for hide) after completing animation</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._uiSetVisible<span class="br0">(</span><span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">initializer <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span> |
|
|
557 |
<span class="kw1">this</span>._bindAnimVisible<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
558 |
<span class="kw1">this</span>._bindAnimHidden<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
559 |
|
|
|
560 |
<span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"animVisibleChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._bindAnimVisible<span class="br0">)</span><span class="sy0">;</span> |
|
|
561 |
<span class="kw1">this</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"animHiddenChange"</span><span class="sy0">,</span> <span class="kw1">this</span>._bindAnimHidden<span class="br0">)</span><span class="sy0">;</span> |
|
|
562 |
|
|
|
563 |
<span class="co1">// Override default _uiSetVisible method, with custom animated method</span> |
|
|
564 |
<span class="kw1">this</span>.<span class="me1">doBefore</span><span class="br0">(</span><span class="st0">"_uiSetVisible"</span><span class="sy0">,</span> <span class="kw1">this</span>._uiAnimSetVisible<span class="br0">)</span><span class="sy0">;</span> |
|
|
565 |
<span class="br0">}</span> |
|
|
566 |
|
|
|
567 |
... |
|
|
568 |
|
|
|
569 |
_bindAnimVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
570 |
<span class="kw2">var</span> animVisible <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
571 |
|
|
|
572 |
animVisible.<span class="me1">on</span><span class="br0">(</span><span class="st0">"start"</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
573 |
<span class="co1">// Setup original visibility handling (for show) before starting to animate</span> |
|
|
574 |
<span class="kw1">this</span>._uiSetVisible<span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
575 |
<span class="br0">}</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
576 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
577 |
|
|
|
578 |
_bindAnimHidden <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
579 |
<span class="kw2">var</span> animHidden <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
580 |
|
|
|
581 |
animHidden.<span class="me1">after</span><span class="br0">(</span><span class="st0">"end"</span><span class="sy0">,</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
582 |
<span class="co1">// Setup original visibility handling (for hide) after completing animation</span> |
|
|
583 |
<span class="kw1">this</span>._uiSetVisible<span class="br0">(</span><span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
584 |
<span class="br0">}</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
585 |
<span class="br0">}</span></pre></div><textarea id="syntax5-plain">initializer : function(config) { |
|
|
586 |
this._bindAnimVisible(); |
|
|
587 |
this._bindAnimHidden(); |
|
|
588 |
|
|
|
589 |
this.after("animVisibleChange", this._bindAnimVisible); |
|
|
590 |
this.after("animHiddenChange", this._bindAnimHidden); |
|
|
591 |
|
|
|
592 |
// Override default _uiSetVisible method, with custom animated method |
|
|
593 |
this.doBefore("_uiSetVisible", this._uiAnimSetVisible); |
|
|
594 |
} |
|
|
595 |
|
|
|
596 |
... |
|
|
597 |
|
|
|
598 |
_bindAnimVisible : function() { |
|
|
599 |
var animVisible = this.get("animVisible"); |
|
|
600 |
|
|
|
601 |
animVisible.on("start", Y.bind(function() { |
|
|
602 |
// Setup original visibility handling (for show) before starting to animate |
|
|
603 |
this._uiSetVisible(true); |
|
|
604 |
}, this)); |
|
|
605 |
}, |
|
|
606 |
|
|
|
607 |
_bindAnimHidden : function() { |
|
|
608 |
var animHidden = this.get("animHidden"); |
|
|
609 |
|
|
|
610 |
animHidden.after("end", Y.bind(function() { |
|
|
611 |
// Setup original visibility handling (for hide) after completing animation |
|
|
612 |
this._uiSetVisible(false); |
|
|
613 |
}, this)); |
|
|
614 |
}</textarea></div> |
|
|
615 |
<p> |
|
|
616 |
However the key part of the <code>initializer</code> method is the call to <code>this.doBefore("_uiSetVisible", this._uiAnimSetVisible)</code> <em>(line 9)</em>. <code>Plugin</code>'s <code>doBefore</code> and <code>doAfter</code> methods, will let you set up both before/after event listeners, as well as inject code to be executed before or after a given method on the host object (in this case the Overlay) is invoked. |
|
|
617 |
</p> |
|
|
618 |
<p> |
|
|
619 |
For the animation plugin, we want to change how the Overlay updates its UI in response to changes to the <code>visible</code> attribute. Instead of simply flipping visibility (through the application of the <code>yui-overlay-hidden</code> class), we want to fade the Overlay in and out. Therefore, we inject our custom animation method, <code>_uiSetAnimVisible</code>, before the Overlay's <code>_uiSetVisible</code>. |
|
|
620 |
</p> |
|
|
621 |
|
|
|
622 |
<p>Using <code>Plugin</code>'s <code>doBefore/doAfter</code> methods to setup any event listeners and method injection code on the host object (Overlay), ensures that the custom behavior is removed when the plugin is unplugged from the host, restoring it's original behavior.</p> |
|
|
623 |
|
|
|
624 |
<p>The <code>destructor</code> simply calls <code>destroy</code> on the animation instances used, and lets them perform their own cleanup (as defined in the discussion on attributes):</p> |
|
|
625 |
|
|
|
626 |
<div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span>.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span>.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
627 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span>.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
628 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span>.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
629 |
<span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax6-plain">destructor : function() { |
|
|
630 |
this.get("animVisible").destroy(); |
|
|
631 |
this.get("animHidden").destroy(); |
|
|
632 |
},</textarea></div> |
|
|
633 |
<h4>The Animated Visibility Method</h4> |
|
|
634 |
|
|
|
635 |
<p>The <code>_uiAnimSetVisible</code> method is the method we use to over-ride the default visibility handling for the Overlay. Instead of simply adding or removing the <code>yui-overlay-hidden</code> class, it starts the appropriate animation depending on whether or not visible is being set to true or false:</p> |
|
|
636 |
|
|
|
637 |
<div id="syntax7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_uiAnimSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"rendered"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="kw1">return</span> <span class="kw2">new</span> Y.<span class="kw1">Do</span>.<span class="me1">Halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_uiAnimSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> |
|
|
638 |
<span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"rendered"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
639 |
<span class="kw1">if</span> <span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> |
|
|
640 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
641 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
642 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
|
643 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animVisible"</span><span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
644 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"animHidden"</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
645 |
<span class="br0">}</span> |
|
|
646 |
<span class="kw1">return</span> <span class="kw2">new</span> Y.<span class="kw1">Do</span>.<span class="me1">Halt</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
647 |
<span class="br0">}</span> |
|
|
648 |
<span class="br0">}</span></pre></div><textarea id="syntax7-plain">_uiAnimSetVisible : function(val) { |
|
|
649 |
if (this.get("host").get("rendered")) { |
|
|
650 |
if (val) { |
|
|
651 |
this.get("animHidden").stop(); |
|
|
652 |
this.get("animVisible").run(); |
|
|
653 |
} else { |
|
|
654 |
this.get("animVisible").stop(); |
|
|
655 |
this.get("animHidden").run(); |
|
|
656 |
} |
|
|
657 |
return new Y.Do.Halt(); |
|
|
658 |
} |
|
|
659 |
}</textarea></div> |
|
|
660 |
<p>Since this method is injected before the default method which handles visibility changes for Overlay (<code>_uiSetVisibility</code>), we invoke <code>Y.Do.Halt()</code> to prevent the original method from being invoked, since we'd like to invoke it in response to the animation starting or completing. |
|
|
661 |
<code>Y.Do</code> is YUI's aop infrastructure and is used under the hood by Plugin's <code>doBefore</code> and <code>doAfter</code> methods when injecting code</p>. |
|
|
662 |
|
|
|
663 |
<h4>The Original Visibility Method</h4> |
|
|
664 |
|
|
|
665 |
<p>The original visiblity handling for Overlay is replicated in the <code>AnimPlugin</code>'s <code>_uiSetVisible</code> method and is invoked before starting the <code>animVisible</code> animation and after completing the <code>animHidden</code> animation as described above.</p> |
|
|
666 |
|
|
|
667 |
<div id="syntax8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_uiSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> host <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span>host.<span class="me1">getClassName</span><span class="br0">(</span><span class="st0">"hidden"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span>host.<span class="me1">getClassName</span><span class="br0">(</span><span class="st0">"hidden"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_uiSetVisible <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span> |
|
|
668 |
<span class="kw2">var</span> host <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
669 |
<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>val<span class="br0">)</span> <span class="br0">{</span> |
|
|
670 |
host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span>host.<span class="me1">getClassName</span><span class="br0">(</span><span class="st0">"hidden"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
671 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
|
672 |
host.<span class="me1">get</span><span class="br0">(</span><span class="st0">"boundingBox"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span>host.<span class="me1">getClassName</span><span class="br0">(</span><span class="st0">"hidden"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
673 |
<span class="br0">}</span> |
|
|
674 |
<span class="br0">}</span></pre></div><textarea id="syntax8-plain">_uiSetVisible : function(val) { |
|
|
675 |
var host = this.get("host"); |
|
|
676 |
if (!val) { |
|
|
677 |
host.get("boundingBox").addClass(host.getClassName("hidden")); |
|
|
678 |
} else { |
|
|
679 |
host.get("boundingBox").removeClass(host.getClassName("hidden")); |
|
|
680 |
} |
|
|
681 |
}</textarea></div> |
|
|
682 |
<p><strong>NOTE:</strong> We're evaluating whether or not <code>Y.Do</code> may provide access to the original method for a future release, which would make this replicated code unnecessary.</p> |
|
|
683 |
|
|
|
684 |
<h4>Using The Plugin</h4> |
|
|
685 |
|
|
|
686 |
<p>All objects which derive from <a href="../../api/Base.html">Base</a> are <a href="../../api/Plugin.Host.html">Plugin Hosts</a>. They provide <code>plug</code> and <code>unplug</code> methods to allow users to add/remove plugins to/from existing instances. They also allow the user to specify the set of plugins to be applied to a new instance, along with their configurations, as part of the constructor arguments:</p> |
|
|
687 |
|
|
|
688 |
<div id="syntax9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> contentBox<span class="sy0">:</span> <span class="st0">"#overlay"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> visible<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> shim<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> align<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> <span class="st0">"#show"</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> points<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"tl"</span><span class="sy0">,</span> <span class="st0">"bl"</span><span class="br0">]</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> plugins <span class="sy0">:</span> <span class="br0">[</span><span class="br0">{</span>fn<span class="sy0">:</span>AnimPlugin<span class="sy0">,</span> cfg<span class="sy0">:</span><span class="br0">{</span>duration<span class="sy0">:</span><span class="nu0">2</span><span class="br0">}</span><span class="br0">}</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span> |
|
|
689 |
contentBox<span class="sy0">:</span> <span class="st0">"#overlay"</span><span class="sy0">,</span> |
|
|
690 |
width<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
691 |
height<span class="sy0">:</span><span class="st0">"10em"</span><span class="sy0">,</span> |
|
|
692 |
visible<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> |
|
|
693 |
shim<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> |
|
|
694 |
align<span class="sy0">:</span> <span class="br0">{</span> |
|
|
695 |
node<span class="sy0">:</span> <span class="st0">"#show"</span><span class="sy0">,</span> |
|
|
696 |
points<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"tl"</span><span class="sy0">,</span> <span class="st0">"bl"</span><span class="br0">]</span> |
|
|
697 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
698 |
plugins <span class="sy0">:</span> <span class="br0">[</span><span class="br0">{</span>fn<span class="sy0">:</span>AnimPlugin<span class="sy0">,</span> cfg<span class="sy0">:</span><span class="br0">{</span>duration<span class="sy0">:</span><span class="nu0">2</span><span class="br0">}</span><span class="br0">}</span><span class="br0">]</span> |
|
|
699 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
700 |
overlay.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax9-plain">var overlay = new Y.Overlay({ |
|
|
701 |
contentBox: "#overlay", |
|
|
702 |
width:"10em", |
|
|
703 |
height:"10em", |
|
|
704 |
visible:false, |
|
|
705 |
shim:false, |
|
|
706 |
align: { |
|
|
707 |
node: "#show", |
|
|
708 |
points: ["tl", "bl"] |
|
|
709 |
}, |
|
|
710 |
plugins : [{fn:AnimPlugin, cfg:{duration:2}}] |
|
|
711 |
}); |
|
|
712 |
overlay.render();</textarea></div> |
|
|
713 |
<p>We use the constructor support to setup the <code>AnimPlugin</code> for the instance with a custom value for its <code>duration</code> attribute as shown on line 11 above.</p> |
|
|
714 |
|
|
|
715 |
<p><strong>NOTE:</strong> In the interests of keeping the example focused on the plugin infrastructure, we turn off shimming for the overlay. If we needed to enable shimming, In IE6, we'd need to remove the alpha opacity filter set on the shim while animating, to have IE animate the contents of the Overlay correctly.</p> |
|
|
716 |
|
|
|
717 |
<p>The example also uses the <code>plug</code> and <code>unplug</code> methods, to add and remove the custom animation behavior after the instance is created:</p> |
|
|
718 |
|
|
|
719 |
<div id="syntax10" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Listener for the "Unplug AnimPlugin" button, </span></div></li><li class="li1"><div class="de1"><span class="co1">// removes the AnimPlugin from the overlay instance</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> overlay.<span class="me1">unplug</span><span class="br0">(</span><span class="st0">"fx"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#unplug"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Listener for the "Plug AnimPlugin" button, </span></div></li><li class="li1"><div class="de1"><span class="co1">// removes the AnimPlugin from the overlay instance, </span></div></li><li class="li1"><div class="de1"><span class="co1">// and re-adds it with a new, shorter duration value.</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> overlay.<span class="me1">unplug</span><span class="br0">(</span><span class="st0">"fx"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> overlay.<span class="me1">plug</span><span class="br0">(</span>AnimPlugin<span class="sy0">,</span> <span class="br0">{</span>duration<span class="sy0">:</span><span class="nu0">0.5</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#plug"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Listener for the "Unplug AnimPlugin" button, </span> |
|
|
720 |
<span class="co1">// removes the AnimPlugin from the overlay instance</span> |
|
|
721 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
722 |
overlay.<span class="me1">unplug</span><span class="br0">(</span><span class="st0">"fx"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
723 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#unplug"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
724 |
|
|
|
725 |
<span class="co1">// Listener for the "Plug AnimPlugin" button, </span> |
|
|
726 |
<span class="co1">// removes the AnimPlugin from the overlay instance, </span> |
|
|
727 |
<span class="co1">// and re-adds it with a new, shorter duration value.</span> |
|
|
728 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
729 |
overlay.<span class="me1">unplug</span><span class="br0">(</span><span class="st0">"fx"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
730 |
overlay.<span class="me1">plug</span><span class="br0">(</span>AnimPlugin<span class="sy0">,</span> <span class="br0">{</span>duration<span class="sy0">:</span><span class="nu0">0.5</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
731 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#plug"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax10-plain">// Listener for the "Unplug AnimPlugin" button, |
|
|
732 |
// removes the AnimPlugin from the overlay instance |
|
|
733 |
Y.on("click", function() { |
|
|
734 |
overlay.unplug("fx"); |
|
|
735 |
}, "#unplug"); |
|
|
736 |
|
|
|
737 |
// Listener for the "Plug AnimPlugin" button, |
|
|
738 |
// removes the AnimPlugin from the overlay instance, |
|
|
739 |
// and re-adds it with a new, shorter duration value. |
|
|
740 |
Y.on("click", function() { |
|
|
741 |
overlay.unplug("fx"); |
|
|
742 |
overlay.plug(AnimPlugin, {duration:0.5}); |
|
|
743 |
}, "#plug");</textarea></div> </div> |
|
|
744 |
<div class="yui-u sidebar"> |
|
|
745 |
|
|
|
746 |
|
|
|
747 |
<div id="examples" class="mod box4"> |
|
|
748 |
<div class="hd"> |
|
|
749 |
<h4> |
|
|
750 |
Overlay Examples:</h4> |
|
|
751 |
</div> |
|
|
752 |
<div class="bd"> |
|
|
753 |
<ul> |
|
|
754 |
<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><a href='../overlay/overlay-align.html'>Extended XY Positioning</a></li><li><a href='../overlay/overlay-stack.html'>Stack Support</a></li><li><a href='../overlay/overlay-stdmod.html'>Standard Module Support</a></li><li><a href='../overlay/overlay-io-plugin.html'>IO Plugin</a></li><li class='selected'><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li> </ul> |
|
|
755 |
</div> |
|
|
756 |
</div> |
|
|
757 |
|
|
|
758 |
<div class="mod box4"> |
|
|
759 |
<div class="hd"> |
|
|
760 |
<h4>More Overlay Resources:</h4> |
|
|
761 |
</div> |
|
|
762 |
<div class="bd"> |
|
|
763 |
<ul> |
|
|
764 |
<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> --> |
|
|
765 |
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul> |
|
|
766 |
</div> |
|
|
767 |
</div> |
|
|
768 |
</div> |
|
|
769 |
</div> |
|
|
770 |
|
|
|
771 |
</div> |
|
|
772 |
</div> |
|
|
773 |
|
|
|
774 |
|
|
|
775 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
776 |
<!-- TABLE OF CONTENTS --> |
|
|
777 |
<div id="toc"> |
|
|
778 |
|
|
|
779 |
<ul> |
|
|
780 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="selected "><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
|
781 |
</div> |
|
|
782 |
</div> |
|
|
783 |
</div><!--closes bd--> |
|
|
784 |
|
|
|
785 |
<div id="ft"> |
|
|
786 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
787 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
788 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
789 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
790 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
791 |
</div> |
|
|
792 |
</div> |
|
|
793 |
<script language="javascript"> |
|
|
794 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
795 |
</script> |
|
|
796 |
<script src="../../assets/syntax.js"></script> |
|
|
797 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
798 |
<script language="javascript"> |
|
|
799 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
800 |
</script> |
|
|
801 |
</body> |
|
|
802 |
</html> |