Date: Mon, 30 Dec 2013 14:06:19 -0500 From: marc@infomarc.info To: phpmyadmin-devel@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@infomarc.info To: phpmyadmin-devel@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.clk... _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel