web/public/gis/loadding.js

document.addEventListener('DOMContentLoaded', () => {
    function getRandomInteger(min, max) {
        var random = min + Math.random() * (max + 1 - min);
        random = Math.floor(random);

        return random;
    }

    //  password recovery animation
    let canvas;
    let ctx;
    let config = {
        sparkFreq: 2,
        meanSparkSize: 0.002,
        meanSparkLife: 500,
        meanSparkVelocity: [ 0, 4 ],
        sparkSizeVariation: 50,
        sparkBlink: 15, // Lower is more blink
        floorHeight: 0
    };

    var resize = window.resize = function() {
        canvas.height = document.body.offsetHeight;
        canvas.width = document.body.offsetWidth;

        if (document.body.offsetWidth < 768) {
            config.sparkFreq = 1;
            config.meanSparkVelocity = [0, 3];
        }
    };

    window.onload = function() {
        canvas = document.querySelector('.password-intro__canvas');

        if (canvas) {
            ctx = canvas.getContext('2d');
            resize();

            config.meanSparkSize = canvas.width*config.meanSparkSize;

            var fire = new Fire(ctx, canvas, canvas.height-canvas.height*config.floorHeight, config);

            var loop = function() {
                window.requestAnimFrame(loop);
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                fire.update();
                for (var i=0; i<config.sparkFreq; i++) {
                    fire.spark(Math.random()*canvas.width);
                }
            };

            window.requestAnimFrame = function(){
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(a) { window.setTimeout(a,1E3/60); };
            }();

            window.onresize = function () {
                resize();
            };

            if (window.DeviceMotionEvent && document.body.offsetWidth < 1024) {

                config.meanSparkLife = 1000;

                // window.addEventListener('deviceorientation', function (event) {
                //   // // console.log(event.gamma);
                //
                //   if (event.gamma > 45) {
                //     // console.log('l90')
                //   } else if (event.gamma < -45) {
                //     // console.log('r90');
                //   }
                // }, false); // variant for refactoring

                const deviceIsAndroid = /android/i.test(navigator.userAgent);

                window.addEventListener('devicemotion', function (event) {

                    fire.sparks.forEach(function (spark) {
                        // spark.v[1] -= event.accelerationIncludingGravity.y + 6;
                        if (deviceIsAndroid) {
                            spark.v[0] -= event.accelerationIncludingGravity.x / 150;
                        } else {
                            spark.v[0] += event.accelerationIncludingGravity.x / 150;
                        }

                        if (window.orientation === 90 || window.orientation === -90) {
                            spark.v[0] = config.meanSparkVelocity[0]*(Math.random()-0.5);
                        }
                    });
                }, false);
            }

            loop();
        }
    };

//////////////////////////////////////////////////
    var Fire = function Fire(ctx, canvas, y, config) {
        this.ctx = ctx;
        this.canvas = canvas;
        this.y = y;
        this.r = 255;
        this.config = config;
        this.sparks = [ ];
    };
    Fire.prototype.spark = function(x) {
        this.sparks.push(new Spark(this.ctx, x, this.y, this.config));
    };
    Fire.prototype.updateColor = function() {
        this.r += (Math.random()-0.5)*10;
        this.r = Math.round(Math.min(80, Math.max(60, this.r)));
    };
    Fire.prototype.update = function() {
        this.updateColor();
        this.ctx.beginPath();
        this.ctx.rect(0, this.y, this.canvas.width, this.config.meanSparkSize);
        this.ctx.fillStyle = 'rgba('+this.r+', 0, 0, 1)';
        this.ctx.fill();

        for (var i=0; i<this.sparks.length; i++) {
            if (this.sparks[i].update()) { // Spark died
                this.sparks.splice(i, 1);
            }
        }
    };

///////////////////////////////////////////////
    var Spark = function Spark(ctx, x, y, config) {
        this.ctx = ctx;
        this.pos = [ x, y ];
        this.size = config.meanSparkSize+(Math.random()-0.5)*config.sparkSizeVariation;
        this.v = [
            config.meanSparkVelocity[0]*(Math.random()-0.5),
            -1*config.meanSparkVelocity[1]*Math.random()
        ];
        this.c = [
            0,
            getRandomInteger(111, 276),
            getRandomInteger(16, 176)
        ];
        this.life = this.lifeOrig = Math.floor(config.meanSparkLife*Math.random());
        this.config = config;
    };
    Spark.prototype.move = function() {
        for (var i=0; i<2; i++) {
            this.pos[i] += this.v[i]*(1-this.life/this.lifeOrig);
        }
    };
    Spark.prototype.getAlpha = function() {
        return Math.sqrt(this.life/this.lifeOrig)+((Math.random()-0.9)/this.config.sparkBlink);
    };
    Spark.prototype.update = function() {
        this.move();
        if (!(this.life--)) { return true; }
        this.ctx.beginPath();
        this.ctx.rect(this.pos[0], this.pos[1], this.size, this.size);
        this.ctx.fillStyle = 'rgba('+this.c[0]+', '+this.c[1]+', '+this.c[2]+', 1)';
        this.ctx.fill();
    };
});