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