@tehnoskarb/xn-snowflakes/dist/snowflakes.js

Add beautiful falling down snowflakes to any of the elements container (or fullscreen) in your webpage.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var snowflake_1 = require("./snowflake");
var element_resize_detector_1 = __importDefault(require("element-resize-detector"));
var Snowflakes = /** @class */ (function () {
    function Snowflakes(container) {
        if (container === void 0) { container = document.body; }
        this.count = 300;
        this.color = '#ffffff';
        this.width = 0;
        this.height = 0;
        this.snowflakes = [];
        this.animationId = 0;
        this.erd = element_resize_detector_1.default();
        this.active = false;
        this.container = container;
    }
    Snowflakes.prototype.start = function () {
        var _this = this;
        // initialize, when it's not
        if (!this.canvas) {
            this.init();
        }
        this.active = true;
        // check if there is still animation going on, if there is, do not intialize a new loop
        if (!this.animationId) {
            this.animationId = requestAnimationFrame(function () { return _this.update(); });
        }
    };
    Snowflakes.prototype.pause = function () {
        this.active = false;
    };
    Snowflakes.prototype.toggle = function () {
        if (this.active) {
            this.pause();
        }
        else {
            this.start();
        }
    };
    Snowflakes.prototype.init = function () {
        var _this = this;
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.canvas.style.position = 'absolute';
        this.canvas.style.left = this.canvas.style.top = '0';
        this.canvas.style.pointerEvents = 'none';
        this.canvas.style.zIndex = '500';
        this.onResize();
        this.setupTheSnow();
        this.erd.listenTo(this.container, function (ele) {
            _this.onResize();
        });
    };
    Snowflakes.prototype.destroy = function () {
        if (!this.canvas) {
            return;
        }
        this.canvas.remove();
        this.canvas = null;
        this.ctx = null;
        this.animationId = 0;
        this.snowflakes.length = 0;
        this.erd.removeAllListeners(this.container);
    };
    Snowflakes.prototype.setupTheSnow = function () {
        if (!this.canvas) {
            return;
        }
        for (var i = 0; i < this.count; i++) {
            var snowflake = new snowflake_1.Snowflake();
            snowflake.reset(this.width, this.height);
            this.snowflakes.push(snowflake);
        }
        this.container.appendChild(this.canvas);
    };
    Snowflakes.prototype.onResize = function () {
        if (!this.canvas || !this.ctx) {
            return;
        }
        this.width = this.container.clientWidth;
        this.height = this.container.clientHeight > 10000 ? 10000 : this.container.clientHeight;
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.ctx.fillStyle = this.color;
    };
    Snowflakes.prototype.update = function () {
        var _this = this;
        if (!this.ctx) {
            return;
        }
        this.ctx.clearRect(0, 0, this.width, this.height);
        var offStageFlakesCount = 0;
        for (var i = 0; i < this.count; i++) {
            var snowflake = this.snowflakes[i];
            if (!this.active && (snowflake.y < 0 || snowflake.y > this.height)) {
                offStageFlakesCount++;
                continue;
            }
            snowflake.y += snowflake.vy;
            snowflake.x += snowflake.vx;
            // draw the flake
            this.ctx.globalAlpha = snowflake.o;
            this.ctx.beginPath();
            this.ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
            this.ctx.closePath();
            this.ctx.fill();
            if (snowflake.y > this.height && this.active) {
                snowflake.reset(this.width, this.height);
            }
        }
        if (offStageFlakesCount === this.count) {
            this.destroy();
        }
        else {
            this.animationId = requestAnimationFrame(function () { return _this.update(); });
        }
    };
    return Snowflakes;
}());
exports.Snowflakes = Snowflakes;