[Phpmyadmin-devel] js advice please
SHERESSA HILL
sheressa at hotmail.com
Mon Dec 30 15:58:36 CET 2013
> Date: Mon, 30 Dec 2013 14:06:19 -0500
> From: marc at infomarc.info
> To: phpmyadmin-devel at lists.sourceforge.net
> Subject: Re: [Phpmyadmin-devel] js advice please
>
> Le 2013-12-30 08:55, SHERESSA HILL a écrit :
> >
> >
> > > Date: Mon, 30 Dec 2013 13:03:54 -0500
> > > From: marc at infomarc.info
> > > To: phpmyadmin-devel at lists.sourceforge.net
> > > Subject: [Phpmyadmin-devel] js advice please
> > >
> > > Hi,
> > > I'm working on a bug [0]. The solution I'm trying is:
> > >
> > > - use display:none on the throbber
> > > - temporarily replace the navi reload image with the throbber image
> > >
> > > My problem is that the reloading operation is so fast (less than one
> > > second) that I cannot see the throbber image. When I add an alert just
> > > before putting back the reload image, I have the proof that the throbber
> > > image is there.
> > >
> > > So, how can I ensure that the throbber image stays there at least, say,
> > > one or two seconds? I tried with setTimeout() to no avail.
> > >
> > > [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/
> > >
> > > --
> > > Marc Delisle
> > > http://infomarc.info | http://phpmyadmin.net
> >
> > Hi,
> > From what I understand the issue to be, I gathered the following:
>
> Thanks; any simpler solution involving jQuery?
>
>
> --
> Marc Delisle
> http://infomarc.info | http://phpmyadmin.net
>
Assuming that tools such as preloaders.net was not what you werelooking for, I found the following on GitHub. (Let me know if this is not what youhad in mind and I will share the other examples I found as well.)
/** * @preserve throbber.js v 0.1 2011-09-18 * http://aino.com * * Copyright (c) 2011, Aino * Licensed under the MIT license. * */
/*global Image, Throbber:true*/
(function( window ) {
var document = window.document,
M = Math, setTimeout = window.setTimeout,
support = ( 'getContext' in document.createElement('canvas') ),
_extend = function( defaults, obj ) { defaults = defaults || {}; for (var i in obj) { defaults[i] = obj[i]; } return defaults; },
// convert any color to RGB array _getRGB = function( color ) { if ( !support ) { return { rgb:false, alpha:1 }; }
var t = document.createElement( 'i' ), rgb;
t.style.display = 'none'; t.style.color = color; document.body.appendChild( t );
rgb = window.getComputedStyle( t, null ) .getPropertyValue( 'color' ) .replace( /^rgba?\(([^\)]+)\)/,'$1' ).replace( /\s/g, '' ).split(',').splice( 0, 4 );
document.body.removeChild( t ); t = null;
return { alpha: rgb.length == 4 ? rgb.pop() : 1, rgb: rgb }; },
// used when rotating _restore = function( ctx, size, back ) { var n = back ? -2 : 2; ctx.translate( size/n, size/n ); },
// locar vars fade, i, l, ad, rd,
// draw the frame _draw = function( alpha, o, ctx, step ) {
fade = 1-alpha || 0; ad = 1; rd = -1;
var size = o.size;
if ( o.clockwise === false ) { ad = -1; rd = 1; }
ctx.clearRect(0, 0, size, size); ctx.globalAlpha = o.alpha; ctx.lineWidth = o.strokewidth;
for (i=0; i < o.lines; i++) {
l = i+step >= o.lines ? i-o.lines+step : i+step;
ctx.strokeStyle = 'rgba(' + o.color.join(',') + ',' + M.max(0, (l/o.lines - fade) ) + ')'; ctx.beginPath();
ctx.moveTo( size/2, size/2-o.padding/2 ); ctx.lineTo( size/2, 0 ); ctx.stroke( o.strokewidth ); _restore( ctx, size, false ); ctx.rotate( ad * ( 360/o.lines ) * M.PI/180 ); _restore( ctx, size, true ); }
if ( o.rotationspeed ) { ctx.save(); _restore( ctx, size, false );
ctx.rotate( rd * ( 360/o.lines/( 20-o.rotationspeed*2 ) ) * M.PI/180 ); //rotate in origin _restore( ctx, size, true ); } };
// Throbber constructor Throbber = function( options ) {
var elem = this.elem = document.createElement('canvas'), scope = this;
if ( !isNaN( options ) ) { options = { size: options }; }
// default options // note that some of these are placeholder and calculated against size if not defined this.o = { size: 34, // diameter of loader rotationspeed: 6, // rotation speed (1-10) clockwise: true, // direction, set to false for counter clockwise color: '#fff', // color of the spinner, can be any CSS compatible value fade: 300, // duration of fadein/out when calling .start() and .stop() fallback: false, // a gif fallback for non-supported browsers alpha: 1 // global alpha, can be defined using rgba as color or separatly };
/* // more options, but these are calculated from size if not defined:
fps // frames per second (~size) padding // diameter of clipped inner area (~size/2) strokewidth // width of the lines (~size/30) lines // number of lines (~size/2+4)
*/
// _extend options this.configure( options );
// fade phase // -1 = init // 0 = idle // 1 = fadein // 2 = running // 3 = fadeout this.phase = -1;
// references if ( support ) { this.ctx = elem.getContext('2d'); elem.width = elem.height = this.o.size; } else if ( this.o.fallback ) { elem = this.elem = new Image(); elem.src = this.o.fallback; }
/////////////////// // the loop
this.loop = (function() {
var o = scope.o, alpha = 0, fade = 1000/o.fade/o.fps, interval = 1000/o.fps, step = scope.step,
style = elem.style, currentStyle = elem.currentStyle, filter = currentStyle && currentStyle.filter || style.filter, ie = 'filter' in style && o.fallback && !support;
// the canvas loop return function() {
if ( scope.phase == 3 ) {
// fadeout alpha -= fade; if ( alpha <= 0 ) { scope.phase = 0; }
}
if ( scope.phase == 1 ) {
// fadein alpha += fade; if ( alpha >= 1 ) { scope.phase = 2; } }
if ( ie ) { style.filter = 'alpha(opacity=' + M.min( o.alpha*100, M.max(0, Math.round( alpha*100 ) ) ) + ')'; } else if ( !support && o.fallback ) { style.opacity = alpha; } else if ( support ) { _draw( alpha, o, scope.ctx, step ); step = step === 0 ? scope.o.lines : step-1; }
window.setTimeout( scope.loop, 1000/o.fps ); }; }()); };
// Throbber prototypes Throbber.prototype = {
constructor: Throbber,
// append the loader to a HTML element appendTo: function( elem ) {
this.elem.style.display = 'none'; elem.appendChild( this.elem );
return this; },
// _extend options and apply calculate meassures configure: function( options ) {
var o = this.o, color;
_extend(o, options || {});
color = _getRGB( o.color );
// do some sensible calculations if not defined _extend( o, _extend({ padding: o.size/2, strokewidth: M.max( 1, M.min( o.size/30, 3 ) ), lines: M.min( 30, o.size/2+4 ), alpha: color.alpha || 1, fps: M.min( 30, o.size+4 ) }, options ));
// grab the rgba array o.color = color.rgb;
// copy the amount of lines into steps this.step = o.lines;
return this; },
// starts the animation start: function() {
this.elem.style.display = 'block'; if ( this.phase == -1 ) { this.loop(); } this.phase = 1;
return this; },
// stops the animation stop: function() { this.phase = 3; return this; },
toggle: function() { if ( this.phase == 2 ) { this.stop(); } else { this.start(); } } };
}( this ));
> ------------------------------------------------------------------------------
> Rapidly troubleshoot problems before they affect your business. Most IT
> organizations don't have a clear picture of how application performance
> affects their revenue. With AppDynamics, you get 100% visibility into your
> Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
> http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
> _______________________________________________
> Phpmyadmin-devel mailing list
> Phpmyadmin-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.phpmyadmin.net/pipermail/developers/attachments/20131230/74e26125/attachment.html>
More information about the Developers
mailing list