@wellwind/thanos-snap/fesm5/wellwind-thanos-snap.js

Use [Thanos](https://www.google.com/search?q=Thanos) snap to destory your DOM elements.

import * as html2canvas_ from 'html2canvas';
import { range } from 'ramda';

// to fix error: Cannot call a namespace ('html2canvas')
var html2canvas = html2canvas_;
var LAYERS = 32;
var TRANSITION_DURATION = 1.5;
var TRANSITION_DELAY = 1.35;
var sampler = function (layerImages, sourceImgData, width, height) {
    var layerCount = layerImages.length;
    var repeat = 2;
    range(0, width).forEach(function (x) {
        range(0, height).forEach(function (y) {
            range(0, repeat).forEach(function (n) {
                var pieceIndex = Math.floor((layerCount * (Math.random() + (2 * x) / width)) / 3);
                var pixelPos = 4 * (y * width + x);
                for (var rgbaIndex = 0; rgbaIndex < 4; rgbaIndex++) {
                    var dataPos = pixelPos + rgbaIndex;
                    layerImages[pieceIndex].data[dataPos] = sourceImgData.data[dataPos];
                }
            });
        });
    });
};
var ɵ0 = sampler;
var transformLayerCanvas = function (canvas) {
    var rotate1 = 15 * (Math.random() - 0.5);
    var rotate2 = 15 * (Math.random() - 0.5);
    var fac = 2 * Math.PI * (Math.random() - 0.5);
    var translateX = 60 * Math.cos(fac);
    var translateY = 30 * Math.sin(fac);
    canvas.style.transform = "rotate(" + rotate1 + "deg) translate(" + translateX + "px, " + translateY + "px) rotate(" + rotate2 + "deg)";
    canvas.style.opacity = '0';
    var removeDelay = 1e3 * (TRANSITION_DURATION + 1 + Math.random());
    setTimeout(function () { return canvas.remove(); }, removeDelay);
};
var ɵ1 = transformLayerCanvas;
// fix retina problem
// https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html
var backingScale = function () {
    if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
    }
    return 1;
};
var ɵ2 = backingScale;
var thanosRewind = function (target) {
    return new Promise(function (resolve) {
        target.style.opacity = '1';
        target.style.visibility = 'visible';
        resolve();
    });
};
var thanosSnap = function (target) {
    return new Promise(function (resolve) {
        var effect = document.createElement('div');
        effect.classList.add('thanos');
        target.parentNode.insertBefore(effect, target);
        var targetRect = target.getBoundingClientRect();
        html2canvas(target).then(function (canvas) {
            var context = canvas.getContext('2d');
            effect.style.position = 'absolute';
            effect.style.left = targetRect.left + 'px';
            effect.style.top = targetRect.top + 'px';
            effect.style.width = targetRect.width + 'px';
            effect.style.height = targetRect.height + 'px';
            var width = canvas.width, height = canvas.height;
            // get element imageData
            var imgData = context.getImageData(0, 0, width, height);
            var layerImages = range(0, LAYERS).map(function (_) {
                return context.createImageData(width, height);
            });
            sampler(layerImages, imgData, width, height);
            layerImages.forEach(function (effectImage, index) {
                var newCanvas = document.createElement('canvas');
                newCanvas.style.position = 'absolute';
                newCanvas.style.transition = "all " + TRANSITION_DURATION + "s";
                newCanvas.width = targetRect.width * backingScale();
                newCanvas.height = targetRect.height * backingScale();
                newCanvas.style.width = newCanvas.width / backingScale() + "px";
                newCanvas.style.height = newCanvas.height / backingScale() + "px";
                var newContext = newCanvas.getContext('2d');
                newContext.putImageData(effectImage, 0, 0);
                effect.appendChild(newCanvas);
                var transitionDelay = TRANSITION_DELAY * (index / layerImages.length);
                newCanvas.style.transitionDelay = transitionDelay + "s";
                setTimeout(function () { return transformLayerCanvas(newCanvas); }, 0);
            });
            target.style.transition = "opacity " + TRANSITION_DURATION + " ease";
            target.style.opacity = '0';
            setTimeout(function () {
                target.style.visibility = 'hidden';
                effect.remove();
                resolve({
                    rewind: function () { return thanosRewind(target); }
                });
            }, 1e3 * TRANSITION_DURATION);
        });
    });
};

/**
 * Generated bundle index. Do not edit.
 */

export { thanosRewind, thanosSnap, ɵ0, ɵ1, ɵ2 };

//# sourceMappingURL=wellwind-thanos-snap.js.map