<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 12pt;
font-family:Calibri
}
--></style></head>
<body class='hmmessage'><div dir='ltr'><br><br><div>> Date: Mon, 30 Dec 2013 14:06:19 -0500<br>> From: marc@infomarc.info<br>> To: phpmyadmin-devel@lists.sourceforge.net<br>> Subject: Re: [Phpmyadmin-devel] js advice please<br>> <br>> Le 2013-12-30 08:55, SHERESSA HILL a écrit :<br>> ><br>> ><br>> > > Date: Mon, 30 Dec 2013 13:03:54 -0500<br>> > > From: marc@infomarc.info<br>> > > To: phpmyadmin-devel@lists.sourceforge.net<br>> > > Subject: [Phpmyadmin-devel] js advice please<br>> > ><br>> > > Hi,<br>> > > I'm working on a bug [0]. The solution I'm trying is:<br>> > ><br>> > > - use display:none on the throbber<br>> > > - temporarily replace the navi reload image with the throbber image<br>> > ><br>> > > My problem is that the reloading operation is so fast (less than one<br>> > > second) that I cannot see the throbber image. When I add an alert just<br>> > > before putting back the reload image, I have the proof that the throbber<br>> > > image is there.<br>> > ><br>> > > So, how can I ensure that the throbber image stays there at least, say,<br>> > > one or two seconds? I tried with setTimeout() to no avail.<br>> > ><br>> > > [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/<br>> > ><br>> > > --<br>> > > Marc Delisle<br>> > > http://infomarc.info | http://phpmyadmin.net<br>> ><br>> > Hi,<br>> > From what I understand the issue to be, I gathered the following:<br>> <br>> Thanks; any simpler solution involving jQuery?<br>> <br>> <br>> -- <br>> Marc Delisle<br>> http://infomarc.info | http://phpmyadmin.net<br>> </div><div><br></div><div>Assuming that tools such as preloaders.net was not what you were</div><div>looking for, I found the following on GitHub. (Let me know if this is not what you</div><div>had in mind and I will share the other examples I found as well.)</div><div><br></div><div><pre style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; margin-top: 0px; margin-bottom: 0px; color: rgb(51, 51, 51); line-height: 18px;"><div class="line" id="LC1" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;">/**</span></div><div class="line" id="LC2" style="padding-left: 10px; background-color: rgb(255, 255, 204);"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> * @preserve throbber.js v 0.1 2011-09-18</span></div><div class="line" id="LC3" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> * http://aino.com</span></div><div class="line" id="LC4" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> *</span></div><div class="line" id="LC5" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> * Copyright (c) 2011, Aino</span></div><div class="line" id="LC6" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> * Licensed under the MIT license.</span></div><div class="line" id="LC7" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> *</span></div><div class="line" id="LC8" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> */</span></div><div class="line" id="LC9" style="padding-left: 10px;"><br></div><div class="line" id="LC10" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;">/*global Image, Throbber:true*/</span></div><div class="line" id="LC11" style="padding-left: 10px;"><br></div><div class="line" id="LC12" style="padding-left: 10px;"><span class="p">(</span><span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nb" style="color: rgb(0, 134, 179);">window</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC13" style="padding-left: 10px;"><br></div><div class="line" id="LC14" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nb" style="color: rgb(0, 134, 179);">document</span> <span class="o" style="font-weight: bold;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">window</span><span class="p">.</span><span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">,</span></div><div class="line" id="LC15" style="padding-left: 10px;"><br></div><div class="line" id="LC16" style="padding-left: 10px;"> <span class="nx">M</span> <span class="o" style="font-weight: bold;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">Math</span><span class="p">,</span></div><div class="line" id="LC17" style="padding-left: 10px;"> <span class="nx">setTimeout</span> <span class="o" style="font-weight: bold;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">,</span></div><div class="line" id="LC18" style="padding-left: 10px;"><br></div><div class="line" id="LC19" style="padding-left: 10px;"> <span class="nx">support</span> <span class="o" style="font-weight: bold;">=</span> <span class="p">(</span> <span class="s1" style="color: rgb(221, 17, 68);">'getContext'</span> <span class="k" style="font-weight: bold;">in</span> <span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68);">'canvas'</span><span class="p">)</span> <span class="p">),</span></div><div class="line" id="LC20" style="padding-left: 10px;"><br></div><div class="line" id="LC21" style="padding-left: 10px;"> <span class="nx">_extend</span> <span class="o" style="font-weight: bold;">=</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">obj</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC22" style="padding-left: 10px;"> <span class="nx">defaults</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">defaults</span> <span class="o" style="font-weight: bold;">||</span> <span class="p">{};</span></div><div class="line" id="LC23" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">for</span> <span class="p">(</span><span class="kd" style="font-weight: bold;">var</span> <span class="nx">i</span> <span class="k" style="font-weight: bold;">in</span> <span class="nx">obj</span><span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC24" style="padding-left: 10px;"> <span class="nx">defaults</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span></div><div class="line" id="LC25" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC26" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="nx">defaults</span><span class="p">;</span></div><div class="line" id="LC27" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC28" style="padding-left: 10px;"><br></div><div class="line" id="LC29" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// convert any color to RGB array</span></div><div class="line" id="LC30" style="padding-left: 10px;"> <span class="nx">_getRGB</span> <span class="o" style="font-weight: bold;">=</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">color</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC31" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="o" style="font-weight: bold;">!</span><span class="nx">support</span> <span class="p">)</span> <span class="p">{</span> <span class="k" style="font-weight: bold;">return</span> <span class="p">{</span> <span class="nx">rgb</span><span class="o" style="font-weight: bold;">:</span><span class="kc" style="font-weight: bold;">false</span><span class="p">,</span> <span class="nx">alpha</span><span class="o" style="font-weight: bold;">:</span><span class="mi" style="color: rgb(0, 153, 153);">1</span> <span class="p">};</span> <span class="p">}</span></div><div class="line" id="LC32" style="padding-left: 10px;"><br></div><div class="line" id="LC33" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nx">t</span> <span class="o" style="font-weight: bold;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span> <span class="s1" style="color: rgb(221, 17, 68);">'i'</span> <span class="p">),</span> <span class="nx">rgb</span><span class="p">;</span></div><div class="line" id="LC34" style="padding-left: 10px;"><br></div><div class="line" id="LC35" style="padding-left: 10px;"> <span class="nx">t</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o" style="font-weight: bold;">=</span> <span class="s1" style="color: rgb(221, 17, 68);">'none'</span><span class="p">;</span></div><div class="line" id="LC36" style="padding-left: 10px;"> <span class="nx">t</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">color</span><span class="p">;</span></div><div class="line" id="LC37" style="padding-left: 10px;"> <span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span> <span class="nx">t</span> <span class="p">);</span></div><div class="line" id="LC38" style="padding-left: 10px;"><br></div><div class="line" id="LC39" style="padding-left: 10px;"> <span class="nx">rgb</span> <span class="o" style="font-weight: bold;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">window</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">(</span> <span class="nx">t</span><span class="p">,</span> <span class="kc" style="font-weight: bold;">null</span> <span class="p">)</span></div><div class="line" id="LC40" style="padding-left: 10px;"> <span class="p">.</span><span class="nx">getPropertyValue</span><span class="p">(</span> <span class="s1" style="color: rgb(221, 17, 68);">'color'</span> <span class="p">)</span></div><div class="line" id="LC41" style="padding-left: 10px;"> <span class="p">.</span><span class="nx">replace</span><span class="p">(</span> <span class="sr" style="color: rgb(0, 153, 38);">/^rgba?\(([^\)]+)\)/</span><span class="p">,</span><span class="s1" style="color: rgb(221, 17, 68);">'$1'</span> <span class="p">).</span><span class="nx">replace</span><span class="p">(</span> <span class="sr" style="color: rgb(0, 153, 38);">/\s/g</span><span class="p">,</span> <span class="s1" style="color: rgb(221, 17, 68);">''</span> <span class="p">).</span><span class="nx">split</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68);">','</span><span class="p">).</span><span class="nx">splice</span><span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">,</span> <span class="mi" style="color: rgb(0, 153, 153);">4</span> <span class="p">);</span></div><div class="line" id="LC42" style="padding-left: 10px;"><br></div><div class="line" id="LC43" style="padding-left: 10px;"> <span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span> <span class="nx">t</span> <span class="p">);</span></div><div class="line" id="LC44" style="padding-left: 10px;"> <span class="nx">t</span> <span class="o" style="font-weight: bold;">=</span> <span class="kc" style="font-weight: bold;">null</span><span class="p">;</span></div><div class="line" id="LC45" style="padding-left: 10px;"><br></div><div class="line" id="LC46" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="p">{</span></div><div class="line" id="LC47" style="padding-left: 10px;"> <span class="nx">alpha</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">length</span> <span class="o" style="font-weight: bold;">==</span> <span class="mi" style="color: rgb(0, 153, 153);">4</span> <span class="o" style="font-weight: bold;">?</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">pop</span><span class="p">()</span> <span class="o" style="font-weight: bold;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">,</span></div><div class="line" id="LC48" style="padding-left: 10px;"> <span class="nx">rgb</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">rgb</span></div><div class="line" id="LC49" style="padding-left: 10px;"> <span class="p">};</span></div><div class="line" id="LC50" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC51" style="padding-left: 10px;"><br></div><div class="line" id="LC52" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// used when rotating</span></div><div class="line" id="LC53" style="padding-left: 10px;"> <span class="nx">_restore</span> <span class="o" style="font-weight: bold;">=</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">ctx</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="nx">back</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC54" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nx">n</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">back</span> <span class="o" style="font-weight: bold;">?</span> <span class="o" style="font-weight: bold;">-</span><span class="mi" style="color: rgb(0, 153, 153);">2</span> <span class="o" style="font-weight: bold;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="p">;</span></div><div class="line" id="LC55" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span> <span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="nx">n</span><span class="p">,</span> <span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="nx">n</span> <span class="p">);</span></div><div class="line" id="LC56" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC57" style="padding-left: 10px;"><br></div><div class="line" id="LC58" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// locar vars</span></div><div class="line" id="LC59" style="padding-left: 10px;"> <span class="nx">fade</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">l</span><span class="p">,</span> <span class="nx">ad</span><span class="p">,</span> <span class="nx">rd</span><span class="p">,</span></div><div class="line" id="LC60" style="padding-left: 10px;"><br></div><div class="line" id="LC61" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// draw the frame</span></div><div class="line" id="LC62" style="padding-left: 10px;"> <span class="nx">_draw</span> <span class="o" style="font-weight: bold;">=</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">alpha</span><span class="p">,</span> <span class="nx">o</span><span class="p">,</span> <span class="nx">ctx</span><span class="p">,</span> <span class="nx">step</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC63" style="padding-left: 10px;"><br></div><div class="line" id="LC64" style="padding-left: 10px;"> <span class="nx">fade</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="o" style="font-weight: bold;">-</span><span class="nx">alpha</span> <span class="o" style="font-weight: bold;">||</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">;</span></div><div class="line" id="LC65" style="padding-left: 10px;"> <span class="nx">ad</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span> <span class="nx">rd</span> <span class="o" style="font-weight: bold;">=</span> <span class="o" style="font-weight: bold;">-</span><span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span></div><div class="line" id="LC66" style="padding-left: 10px;"><br></div><div class="line" id="LC67" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nx">size</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">size</span><span class="p">;</span></div><div class="line" id="LC68" style="padding-left: 10px;"><br></div><div class="line" id="LC69" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">o</span><span class="p">.</span><span class="nx">clockwise</span> <span class="o" style="font-weight: bold;">===</span> <span class="kc" style="font-weight: bold;">false</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC70" style="padding-left: 10px;"> <span class="nx">ad</span> <span class="o" style="font-weight: bold;">=</span> <span class="o" style="font-weight: bold;">-</span><span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span></div><div class="line" id="LC71" style="padding-left: 10px;"> <span class="nx">rd</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span></div><div class="line" id="LC72" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC73" style="padding-left: 10px;"><br></div><div class="line" id="LC74" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">,</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="nx">size</span><span class="p">);</span></div><div class="line" id="LC75" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">globalAlpha</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">alpha</span><span class="p">;</span></div><div class="line" id="LC76" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">strokewidth</span><span class="p">;</span></div><div class="line" id="LC77" style="padding-left: 10px;"><br></div><div class="line" id="LC78" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">for</span> <span class="p">(</span><span class="nx">i</span><span class="o" style="font-weight: bold;">=</span><span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o" style="font-weight: bold;"><</span> <span class="nx">o</span><span class="p">.</span><span class="nx">lines</span><span class="p">;</span> <span class="nx">i</span><span class="o" style="font-weight: bold;">++</span><span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC79" style="padding-left: 10px;"><br></div><div class="line" id="LC80" style="padding-left: 10px;"> <span class="nx">l</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">i</span><span class="o" style="font-weight: bold;">+</span><span class="nx">step</span> <span class="o" style="font-weight: bold;">>=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">lines</span> <span class="o" style="font-weight: bold;">?</span> <span class="nx">i</span><span class="o" style="font-weight: bold;">-</span><span class="nx">o</span><span class="p">.</span><span class="nx">lines</span><span class="o" style="font-weight: bold;">+</span><span class="nx">step</span> <span class="o" style="font-weight: bold;">:</span> <span class="nx">i</span><span class="o" style="font-weight: bold;">+</span><span class="nx">step</span><span class="p">;</span></div><div class="line" id="LC81" style="padding-left: 10px;"><br></div><div class="line" id="LC82" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span> <span class="o" style="font-weight: bold;">=</span> <span class="s1" style="color: rgb(221, 17, 68);">'rgba('</span> <span class="o" style="font-weight: bold;">+</span> <span class="nx">o</span><span class="p">.</span><span class="nx">color</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68);">','</span><span class="p">)</span> <span class="o" style="font-weight: bold;">+</span> <span class="s1" style="color: rgb(221, 17, 68);">','</span> <span class="o" style="font-weight: bold;">+</span> <span class="nx">M</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">,</span> <span class="p">(</span><span class="nx">l</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">lines</span> <span class="o" style="font-weight: bold;">-</span> <span class="nx">fade</span><span class="p">)</span> <span class="p">)</span> <span class="o" style="font-weight: bold;">+</span> <span class="s1" style="color: rgb(221, 17, 68);">')'</span><span class="p">;</span></div><div class="line" id="LC83" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span></div><div class="line" id="LC84" style="padding-left: 10px;"><br></div><div class="line" id="LC85" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span> <span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="p">,</span> <span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="o" style="font-weight: bold;">-</span><span class="nx">o</span><span class="p">.</span><span class="nx">padding</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">2</span> <span class="p">);</span></div><div class="line" id="LC86" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span> <span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="p">,</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span> <span class="p">);</span></div><div class="line" id="LC87" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">(</span> <span class="nx">o</span><span class="p">.</span><span class="nx">strokewidth</span> <span class="p">);</span></div><div class="line" id="LC88" style="padding-left: 10px;"> <span class="nx">_restore</span><span class="p">(</span> <span class="nx">ctx</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="kc" style="font-weight: bold;">false</span> <span class="p">);</span></div><div class="line" id="LC89" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span> <span class="nx">ad</span> <span class="o" style="font-weight: bold;">*</span> <span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">360</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">lines</span> <span class="p">)</span> <span class="o" style="font-weight: bold;">*</span> <span class="nx">M</span><span class="p">.</span><span class="nx">PI</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">180</span> <span class="p">);</span></div><div class="line" id="LC90" style="padding-left: 10px;"> <span class="nx">_restore</span><span class="p">(</span> <span class="nx">ctx</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="kc" style="font-weight: bold;">true</span> <span class="p">);</span></div><div class="line" id="LC91" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC92" style="padding-left: 10px;"><br></div><div class="line" id="LC93" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">o</span><span class="p">.</span><span class="nx">rotationspeed</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC94" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span></div><div class="line" id="LC95" style="padding-left: 10px;"> <span class="nx">_restore</span><span class="p">(</span> <span class="nx">ctx</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="kc" style="font-weight: bold;">false</span> <span class="p">);</span></div><div class="line" id="LC96" style="padding-left: 10px;"><br></div><div class="line" id="LC97" style="padding-left: 10px;"> <span class="nx">ctx</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span> <span class="nx">rd</span> <span class="o" style="font-weight: bold;">*</span> <span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">360</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">lines</span><span class="o" style="font-weight: bold;">/</span><span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">20</span><span class="o" style="font-weight: bold;">-</span><span class="nx">o</span><span class="p">.</span><span class="nx">rotationspeed</span><span class="o" style="font-weight: bold;">*</span><span class="mi" style="color: rgb(0, 153, 153);">2</span> <span class="p">)</span> <span class="p">)</span> <span class="o" style="font-weight: bold;">*</span> <span class="nx">M</span><span class="p">.</span><span class="nx">PI</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">180</span> <span class="p">);</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">//rotate in origin</span></div><div class="line" id="LC98" style="padding-left: 10px;"> <span class="nx">_restore</span><span class="p">(</span> <span class="nx">ctx</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="kc" style="font-weight: bold;">true</span> <span class="p">);</span></div><div class="line" id="LC99" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC100" style="padding-left: 10px;"> <span class="p">};</span></div><div class="line" id="LC101" style="padding-left: 10px;"><br></div><div class="line" id="LC102" style="padding-left: 10px;"><br></div><div class="line" id="LC103" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// Throbber constructor</span></div><div class="line" id="LC104" style="padding-left: 10px;"> <span class="nx">Throbber</span> <span class="o" style="font-weight: bold;">=</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">options</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC105" style="padding-left: 10px;"><br></div><div class="line" id="LC106" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nx">elem</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">elem</span> <span class="o" style="font-weight: bold;">=</span> <span class="nb" style="color: rgb(0, 134, 179);">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68);">'canvas'</span><span class="p">),</span></div><div class="line" id="LC107" style="padding-left: 10px;"> <span class="nx">scope</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">this</span><span class="p">;</span></div><div class="line" id="LC108" style="padding-left: 10px;"><br></div><div class="line" id="LC109" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="o" style="font-weight: bold;">!</span><span class="nb" style="color: rgb(0, 134, 179);">isNaN</span><span class="p">(</span> <span class="nx">options</span> <span class="p">)</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC110" style="padding-left: 10px;"> <span class="nx">options</span> <span class="o" style="font-weight: bold;">=</span> <span class="p">{</span> <span class="nx">size</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">options</span> <span class="p">};</span></div><div class="line" id="LC111" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC112" style="padding-left: 10px;"><br></div><div class="line" id="LC113" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// default options</span></div><div class="line" id="LC114" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// note that some of these are placeholder and calculated against size if not defined</span></div><div class="line" id="LC115" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">o</span> <span class="o" style="font-weight: bold;">=</span> <span class="p">{</span></div><div class="line" id="LC116" style="padding-left: 10px;"> <span class="nx">size</span><span class="o" style="font-weight: bold;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">34</span><span class="p">,</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// diameter of loader</span></div><div class="line" id="LC117" style="padding-left: 10px;"> <span class="nx">rotationspeed</span><span class="o" style="font-weight: bold;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">6</span><span class="p">,</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// rotation speed (1-10)</span></div><div class="line" id="LC118" style="padding-left: 10px;"> <span class="nx">clockwise</span><span class="o" style="font-weight: bold;">:</span> <span class="kc" style="font-weight: bold;">true</span><span class="p">,</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// direction, set to false for counter clockwise</span></div><div class="line" id="LC119" style="padding-left: 10px;"> <span class="nx">color</span><span class="o" style="font-weight: bold;">:</span> <span class="s1" style="color: rgb(221, 17, 68);">'#fff'</span><span class="p">,</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// color of the spinner, can be any CSS compatible value</span></div><div class="line" id="LC120" style="padding-left: 10px;"> <span class="nx">fade</span><span class="o" style="font-weight: bold;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">300</span><span class="p">,</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// duration of fadein/out when calling .start() and .stop()</span></div><div class="line" id="LC121" style="padding-left: 10px;"> <span class="nx">fallback</span><span class="o" style="font-weight: bold;">:</span> <span class="kc" style="font-weight: bold;">false</span><span class="p">,</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// a gif fallback for non-supported browsers</span></div><div class="line" id="LC122" style="padding-left: 10px;"> <span class="nx">alpha</span><span class="o" style="font-weight: bold;">:</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// global alpha, can be defined using rgba as color or separatly</span></div><div class="line" id="LC123" style="padding-left: 10px;"> <span class="p">};</span></div><div class="line" id="LC124" style="padding-left: 10px;"><br></div><div class="line" id="LC125" style="padding-left: 10px;"> <span class="cm" style="color: rgb(153, 153, 136); font-style: italic;">/*</span></div><div class="line" id="LC126" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> // more options, but these are calculated from size if not defined:</span></div><div class="line" id="LC127" style="padding-left: 10px;"><br></div><div class="line" id="LC128" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> fps // frames per second (~size)</span></div><div class="line" id="LC129" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> padding // diameter of clipped inner area (~size/2)</span></div><div class="line" id="LC130" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> strokewidth // width of the lines (~size/30)</span></div><div class="line" id="LC131" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> lines // number of lines (~size/2+4)</span></div><div class="line" id="LC132" style="padding-left: 10px;"><br></div><div class="line" id="LC133" style="padding-left: 10px;"><span class="cm" style="color: rgb(153, 153, 136); font-style: italic;"> */</span></div><div class="line" id="LC134" style="padding-left: 10px;"><br></div><div class="line" id="LC135" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// _extend options</span></div><div class="line" id="LC136" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span> <span class="nx">options</span> <span class="p">);</span></div><div class="line" id="LC137" style="padding-left: 10px;"><br></div><div class="line" id="LC138" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// fade phase</span></div><div class="line" id="LC139" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// -1 = init</span></div><div class="line" id="LC140" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 0 = idle</span></div><div class="line" id="LC141" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 1 = fadein</span></div><div class="line" id="LC142" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 2 = running</span></div><div class="line" id="LC143" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// 3 = fadeout</span></div><div class="line" id="LC144" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">=</span> <span class="o" style="font-weight: bold;">-</span><span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span></div><div class="line" id="LC145" style="padding-left: 10px;"><br></div><div class="line" id="LC146" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// references</span></div><div class="line" id="LC147" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">support</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC148" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">ctx</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68);">'2d'</span><span class="p">);</span></div><div class="line" id="LC149" style="padding-left: 10px;"> <span class="nx">elem</span><span class="p">.</span><span class="nx">width</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">height</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">o</span><span class="p">.</span><span class="nx">size</span><span class="p">;</span></div><div class="line" id="LC150" style="padding-left: 10px;"> <span class="p">}</span> <span class="k" style="font-weight: bold;">else</span> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">o</span><span class="p">.</span><span class="nx">fallback</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC151" style="padding-left: 10px;"> <span class="nx">elem</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">elem</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">new</span> <span class="nx">Image</span><span class="p">();</span></div><div class="line" id="LC152" style="padding-left: 10px;"> <span class="nx">elem</span><span class="p">.</span><span class="nx">src</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">o</span><span class="p">.</span><span class="nx">fallback</span><span class="p">;</span></div><div class="line" id="LC153" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC154" style="padding-left: 10px;"><br></div><div class="line" id="LC155" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">///////////////////</span></div><div class="line" id="LC156" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// the loop</span></div><div class="line" id="LC157" style="padding-left: 10px;"><br></div><div class="line" id="LC158" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">loop</span> <span class="o" style="font-weight: bold;">=</span> <span class="p">(</span><span class="kd" style="font-weight: bold;">function</span><span class="p">()</span> <span class="p">{</span></div><div class="line" id="LC159" style="padding-left: 10px;"><br></div><div class="line" id="LC160" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nx">o</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">o</span><span class="p">,</span></div><div class="line" id="LC161" style="padding-left: 10px;"> <span class="nx">alpha</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">,</span></div><div class="line" id="LC162" style="padding-left: 10px;"> <span class="nx">fade</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">1000</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">fade</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">fps</span><span class="p">,</span></div><div class="line" id="LC163" style="padding-left: 10px;"> <span class="nx">interval</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">1000</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">fps</span><span class="p">,</span></div><div class="line" id="LC164" style="padding-left: 10px;"> <span class="nx">step</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">step</span><span class="p">,</span></div><div class="line" id="LC165" style="padding-left: 10px;"><br></div><div class="line" id="LC166" style="padding-left: 10px;"> <span class="nx">style</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">,</span></div><div class="line" id="LC167" style="padding-left: 10px;"> <span class="nx">currentStyle</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">currentStyle</span><span class="p">,</span></div><div class="line" id="LC168" style="padding-left: 10px;"> <span class="nx">filter</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">currentStyle</span> <span class="o" style="font-weight: bold;">&&</span> <span class="nx">currentStyle</span><span class="p">.</span><span class="nx">filter</span> <span class="o" style="font-weight: bold;">||</span> <span class="nx">style</span><span class="p">.</span><span class="nx">filter</span><span class="p">,</span></div><div class="line" id="LC169" style="padding-left: 10px;"> <span class="nx">ie</span> <span class="o" style="font-weight: bold;">=</span> <span class="s1" style="color: rgb(221, 17, 68);">'filter'</span> <span class="k" style="font-weight: bold;">in</span> <span class="nx">style</span> <span class="o" style="font-weight: bold;">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">fallback</span> <span class="o" style="font-weight: bold;">&&</span> <span class="o" style="font-weight: bold;">!</span><span class="nx">support</span><span class="p">;</span></div><div class="line" id="LC170" style="padding-left: 10px;"><br></div><div class="line" id="LC171" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// the canvas loop</span></div><div class="line" id="LC172" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">()</span> <span class="p">{</span></div><div class="line" id="LC173" style="padding-left: 10px;"><br></div><div class="line" id="LC174" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">==</span> <span class="mi" style="color: rgb(0, 153, 153);">3</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC175" style="padding-left: 10px;"><br></div><div class="line" id="LC176" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// fadeout</span></div><div class="line" id="LC177" style="padding-left: 10px;"> <span class="nx">alpha</span> <span class="o" style="font-weight: bold;">-=</span> <span class="nx">fade</span><span class="p">;</span></div><div class="line" id="LC178" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">alpha</span> <span class="o" style="font-weight: bold;"><=</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC179" style="padding-left: 10px;"> <span class="nx">scope</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">;</span></div><div class="line" id="LC180" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC181" style="padding-left: 10px;"><br></div><div class="line" id="LC182" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC183" style="padding-left: 10px;"><br></div><div class="line" id="LC184" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">==</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC185" style="padding-left: 10px;"><br></div><div class="line" id="LC186" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// fadein</span></div><div class="line" id="LC187" style="padding-left: 10px;"> <span class="nx">alpha</span> <span class="o" style="font-weight: bold;">+=</span> <span class="nx">fade</span><span class="p">;</span></div><div class="line" id="LC188" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">alpha</span> <span class="o" style="font-weight: bold;">>=</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC189" style="padding-left: 10px;"> <span class="nx">scope</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="p">;</span></div><div class="line" id="LC190" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC191" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC192" style="padding-left: 10px;"><br></div><div class="line" id="LC193" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">ie</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC194" style="padding-left: 10px;"> <span class="nx">style</span><span class="p">.</span><span class="nx">filter</span> <span class="o" style="font-weight: bold;">=</span> <span class="s1" style="color: rgb(221, 17, 68);">'alpha(opacity='</span> <span class="o" style="font-weight: bold;">+</span> <span class="nx">M</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span> <span class="nx">o</span><span class="p">.</span><span class="nx">alpha</span><span class="o" style="font-weight: bold;">*</span><span class="mi" style="color: rgb(0, 153, 153);">100</span><span class="p">,</span> <span class="nx">M</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi" style="color: rgb(0, 153, 153);">0</span><span class="p">,</span> <span class="nb" style="color: rgb(0, 134, 179);">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span> <span class="nx">alpha</span><span class="o" style="font-weight: bold;">*</span><span class="mi" style="color: rgb(0, 153, 153);">100</span> <span class="p">)</span> <span class="p">)</span> <span class="p">)</span> <span class="o" style="font-weight: bold;">+</span> <span class="s1" style="color: rgb(221, 17, 68);">')'</span><span class="p">;</span></div><div class="line" id="LC195" style="padding-left: 10px;"> <span class="p">}</span> <span class="k" style="font-weight: bold;">else</span> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="o" style="font-weight: bold;">!</span><span class="nx">support</span> <span class="o" style="font-weight: bold;">&&</span> <span class="nx">o</span><span class="p">.</span><span class="nx">fallback</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC196" style="padding-left: 10px;"> <span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">alpha</span><span class="p">;</span></div><div class="line" id="LC197" style="padding-left: 10px;"> <span class="p">}</span> <span class="k" style="font-weight: bold;">else</span> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="nx">support</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC198" style="padding-left: 10px;"> <span class="nx">_draw</span><span class="p">(</span> <span class="nx">alpha</span><span class="p">,</span> <span class="nx">o</span><span class="p">,</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">ctx</span><span class="p">,</span> <span class="nx">step</span> <span class="p">);</span></div><div class="line" id="LC199" style="padding-left: 10px;"> <span class="nx">step</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">step</span> <span class="o" style="font-weight: bold;">===</span> <span class="mi" style="color: rgb(0, 153, 153);">0</span> <span class="o" style="font-weight: bold;">?</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">o</span><span class="p">.</span><span class="nx">lines</span> <span class="o" style="font-weight: bold;">:</span> <span class="nx">step</span><span class="o" style="font-weight: bold;">-</span><span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span></div><div class="line" id="LC200" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC201" style="padding-left: 10px;"><br></div><div class="line" id="LC202" style="padding-left: 10px;"> <span class="nb" style="color: rgb(0, 134, 179);">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span> <span class="nx">scope</span><span class="p">.</span><span class="nx">loop</span><span class="p">,</span> <span class="mi" style="color: rgb(0, 153, 153);">1000</span><span class="o" style="font-weight: bold;">/</span><span class="nx">o</span><span class="p">.</span><span class="nx">fps</span> <span class="p">);</span></div><div class="line" id="LC203" style="padding-left: 10px;"> <span class="p">};</span></div><div class="line" id="LC204" style="padding-left: 10px;"> <span class="p">}());</span></div><div class="line" id="LC205" style="padding-left: 10px;"> <span class="p">};</span></div><div class="line" id="LC206" style="padding-left: 10px;"><br></div><div class="line" id="LC207" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// Throbber prototypes</span></div><div class="line" id="LC208" style="padding-left: 10px;"> <span class="nx">Throbber</span><span class="p">.</span><span class="nx">prototype</span> <span class="o" style="font-weight: bold;">=</span> <span class="p">{</span></div><div class="line" id="LC209" style="padding-left: 10px;"><br></div><div class="line" id="LC210" style="padding-left: 10px;"> <span class="nx">constructor</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">Throbber</span><span class="p">,</span></div><div class="line" id="LC211" style="padding-left: 10px;"><br></div><div class="line" id="LC212" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// append the loader to a HTML element</span></div><div class="line" id="LC213" style="padding-left: 10px;"> <span class="nx">appendTo</span><span class="o" style="font-weight: bold;">:</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">elem</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC214" style="padding-left: 10px;"><br></div><div class="line" id="LC215" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o" style="font-weight: bold;">=</span> <span class="s1" style="color: rgb(221, 17, 68);">'none'</span><span class="p">;</span></div><div class="line" id="LC216" style="padding-left: 10px;"> <span class="nx">elem</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">elem</span> <span class="p">);</span></div><div class="line" id="LC217" style="padding-left: 10px;"><br></div><div class="line" id="LC218" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="k" style="font-weight: bold;">this</span><span class="p">;</span></div><div class="line" id="LC219" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC220" style="padding-left: 10px;"><br></div><div class="line" id="LC221" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// _extend options and apply calculate meassures</span></div><div class="line" id="LC222" style="padding-left: 10px;"> <span class="nx">configure</span><span class="o" style="font-weight: bold;">:</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">(</span> <span class="nx">options</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC223" style="padding-left: 10px;"><br></div><div class="line" id="LC224" style="padding-left: 10px;"> <span class="kd" style="font-weight: bold;">var</span> <span class="nx">o</span> <span class="o" style="font-weight: bold;">=</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">o</span><span class="p">,</span> <span class="nx">color</span><span class="p">;</span></div><div class="line" id="LC225" style="padding-left: 10px;"><br></div><div class="line" id="LC226" style="padding-left: 10px;"> <span class="nx">_extend</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">options</span> <span class="o" style="font-weight: bold;">||</span> <span class="p">{});</span></div><div class="line" id="LC227" style="padding-left: 10px;"><br></div><div class="line" id="LC228" style="padding-left: 10px;"> <span class="nx">color</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">_getRGB</span><span class="p">(</span> <span class="nx">o</span><span class="p">.</span><span class="nx">color</span> <span class="p">);</span></div><div class="line" id="LC229" style="padding-left: 10px;"><br></div><div class="line" id="LC230" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// do some sensible calculations if not defined</span></div><div class="line" id="LC231" style="padding-left: 10px;"> <span class="nx">_extend</span><span class="p">(</span> <span class="nx">o</span><span class="p">,</span> <span class="nx">_extend</span><span class="p">({</span></div><div class="line" id="LC232" style="padding-left: 10px;"> <span class="nx">padding</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">o</span><span class="p">.</span><span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="p">,</span></div><div class="line" id="LC233" style="padding-left: 10px;"> <span class="nx">strokewidth</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">M</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">,</span> <span class="nx">M</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span> <span class="nx">o</span><span class="p">.</span><span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">30</span><span class="p">,</span> <span class="mi" style="color: rgb(0, 153, 153);">3</span> <span class="p">)</span> <span class="p">),</span></div><div class="line" id="LC234" style="padding-left: 10px;"> <span class="nx">lines</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">M</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">30</span><span class="p">,</span> <span class="nx">o</span><span class="p">.</span><span class="nx">size</span><span class="o" style="font-weight: bold;">/</span><span class="mi" style="color: rgb(0, 153, 153);">2</span><span class="o" style="font-weight: bold;">+</span><span class="mi" style="color: rgb(0, 153, 153);">4</span> <span class="p">),</span></div><div class="line" id="LC235" style="padding-left: 10px;"> <span class="nx">alpha</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">color</span><span class="p">.</span><span class="nx">alpha</span> <span class="o" style="font-weight: bold;">||</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">,</span></div><div class="line" id="LC236" style="padding-left: 10px;"> <span class="nx">fps</span><span class="o" style="font-weight: bold;">:</span> <span class="nx">M</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span> <span class="mi" style="color: rgb(0, 153, 153);">30</span><span class="p">,</span> <span class="nx">o</span><span class="p">.</span><span class="nx">size</span><span class="o" style="font-weight: bold;">+</span><span class="mi" style="color: rgb(0, 153, 153);">4</span> <span class="p">)</span></div><div class="line" id="LC237" style="padding-left: 10px;"> <span class="p">},</span> <span class="nx">options</span> <span class="p">));</span></div><div class="line" id="LC238" style="padding-left: 10px;"><br></div><div class="line" id="LC239" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// grab the rgba array</span></div><div class="line" id="LC240" style="padding-left: 10px;"> <span class="nx">o</span><span class="p">.</span><span class="nx">color</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">rgb</span><span class="p">;</span></div><div class="line" id="LC241" style="padding-left: 10px;"><br></div><div class="line" id="LC242" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// copy the amount of lines into steps</span></div><div class="line" id="LC243" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">step</span> <span class="o" style="font-weight: bold;">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">lines</span><span class="p">;</span></div><div class="line" id="LC244" style="padding-left: 10px;"><br></div><div class="line" id="LC245" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="k" style="font-weight: bold;">this</span><span class="p">;</span></div><div class="line" id="LC246" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC247" style="padding-left: 10px;"><br></div><div class="line" id="LC248" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// starts the animation</span></div><div class="line" id="LC249" style="padding-left: 10px;"> <span class="nx">start</span><span class="o" style="font-weight: bold;">:</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">()</span> <span class="p">{</span></div><div class="line" id="LC250" style="padding-left: 10px;"><br></div><div class="line" id="LC251" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o" style="font-weight: bold;">=</span> <span class="s1" style="color: rgb(221, 17, 68);">'block'</span><span class="p">;</span></div><div class="line" id="LC252" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">==</span> <span class="o" style="font-weight: bold;">-</span><span class="mi" style="color: rgb(0, 153, 153);">1</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC253" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">loop</span><span class="p">();</span></div><div class="line" id="LC254" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC255" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">1</span><span class="p">;</span></div><div class="line" id="LC256" style="padding-left: 10px;"><br></div><div class="line" id="LC257" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="k" style="font-weight: bold;">this</span><span class="p">;</span></div><div class="line" id="LC258" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC259" style="padding-left: 10px;"><br></div><div class="line" id="LC260" style="padding-left: 10px;"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic;">// stops the animation</span></div><div class="line" id="LC261" style="padding-left: 10px;"> <span class="nx">stop</span><span class="o" style="font-weight: bold;">:</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">()</span> <span class="p">{</span></div><div class="line" id="LC262" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">=</span> <span class="mi" style="color: rgb(0, 153, 153);">3</span><span class="p">;</span></div><div class="line" id="LC263" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">return</span> <span class="k" style="font-weight: bold;">this</span><span class="p">;</span></div><div class="line" id="LC264" style="padding-left: 10px;"> <span class="p">},</span></div><div class="line" id="LC265" style="padding-left: 10px;"><br></div><div class="line" id="LC266" style="padding-left: 10px;"> <span class="nx">toggle</span><span class="o" style="font-weight: bold;">:</span> <span class="kd" style="font-weight: bold;">function</span><span class="p">()</span> <span class="p">{</span></div><div class="line" id="LC267" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">if</span> <span class="p">(</span> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">phase</span> <span class="o" style="font-weight: bold;">==</span> <span class="mi" style="color: rgb(0, 153, 153);">2</span> <span class="p">)</span> <span class="p">{</span></div><div class="line" id="LC268" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span></div><div class="line" id="LC269" style="padding-left: 10px;"> <span class="p">}</span> <span class="k" style="font-weight: bold;">else</span> <span class="p">{</span></div><div class="line" id="LC270" style="padding-left: 10px;"> <span class="k" style="font-weight: bold;">this</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span></div><div class="line" id="LC271" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC272" style="padding-left: 10px;"> <span class="p">}</span></div><div class="line" id="LC273" style="padding-left: 10px;"> <span class="p">};</span></div><div class="line" id="LC274" style="padding-left: 10px;"><br></div><div class="line" id="LC275" style="padding-left: 10px;"><span class="p">}(</span> <span class="k" style="font-weight: bold;">this</span> <span class="p">));</span></div></pre></div><div><br>> ------------------------------------------------------------------------------<br>> Rapidly troubleshoot problems before they affect your business. Most IT <br>> organizations don't have a clear picture of how application performance <br>> affects their revenue. With AppDynamics, you get 100% visibility into your <br>> Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!<br>> http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk<br>> _______________________________________________<br>> Phpmyadmin-devel mailing list<br>> Phpmyadmin-devel@lists.sourceforge.net<br>> https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel<br></div> </div></body>
</html>