[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