kaleidoscope_border

kaleidoscope_border.js

define("view/common/kaleidoscope_border", ["jquery", "underscore", "model/loader_model", "util/anim_frame", "config"], function(e, t, n, r, i) {
    var s = i.FIREFOX || i.TABLET;
    s ? n.add({
        id: "kaleido_bg",
        src: i.CDN + "/img/desktop/2_lookbook/kaleidoscope-ff-bg.jpg"
    }) : n.add({
        id: "kaleido_bg",
        src: i.CDN + "/img/desktop/2_lookbook/kaleidoscope-bg.jpg"
    });
    var o = function() {
        this.init()
    };
    return o.prototype = {
        TILE_SIZE: 480,
        DEST_WIDTH: 1920,
        DEST_HEIGHT: 1080,
        CURSOR_DIVISOR: 80,
        img: null,
        working1: null,
        working1a: null,
        working2: null,
        dest: null,
        ax: 0,
        ay: 0,
        mx: 0,
        my: 0,
        dx: 0,
        dy: 0,
        offset: 0,
        init: function() {
            this.img = n.getResult("kaleido_bg"),
            this.working1 = document.createElement("canvas"),
            this.working1a = document.createElement("canvas"),
            this.working2 = document.createElement("canvas"),
            this.dest = document.getElementById("js-look-canvas"),
            this.gw1 = this.working1.getContext("2d"),
            this.numOfImages = 13,
            this.bgHeight = 1e3 * this.numOfImages,
            this.gw1a = this.working1a.getContext("2d"),
            this.gw2 = this.working2.getContext("2d"),
            this.gd = this.dest.getContext("2d"),
            this.PER_IMAGE_OFFSET = this.img.height / this.numOfImages,
            s && (this.PER_IMAGE_OFFSET *= this.bgHeight / 8192),
            this.onResize(null),
            document.body.addEventListener("mousemove", t.bind(this.onMouseMove, this)),
            r.on("anim_frame", t.bind(this.tick, this))
        },
        onLoad: function(e) {
            this.firstTime = !0
        },
        setOffset: function(e, t) {
            this.offset = e - 1,
            t && (this.ay = this.my - this.offset * this.PER_IMAGE_OFFSET)
        },
        onResize: function(e) {
            this.DEST_WIDTH = window.innerWidth,
            this.DEST_HEIGHT = window.innerHeight,
            this.gw2.translate(-this.TILE_SIZE, -this.TILE_SIZE);
            var t = Math.ceil(window.innerWidth / 960);
            this.TILE_SIZE = Math.floor(window.innerWidth / t / 2),
            this.working1.width = this.working1.height = this.TILE_SIZE,
            this.working1a.width = this.working1a.height = this.TILE_SIZE,
            this.working2.width = this.working2.height = this.TILE_SIZE * 2,
            this.dest.width = this.DEST_WIDTH,
            this.dest.height = this.DEST_HEIGHT,
            this.gw2.translate(this.TILE_SIZE, this.TILE_SIZE)
        },
        firstTime: !0,
        tick: function() {
            try {
                var e = .8,
                    t = 1 - e,
                    n = this.mx * t + e * this.ax,
                    r = (this.my - this.offset * this.PER_IMAGE_OFFSET) * t + e * this.ay;
                if (Math.abs(this.ax - n) < .1 && Math.abs(this.ay - r) < .1) {
                    if (!this.firstTime) return;
                    this.firstTime = !1
                }
                this.dx = n,
                this.dy = r;
                var i = .8,
                    s = 1 - i;
                this.ax = i * this.ax + s * this.dx,
                this.ay = i * this.ay + s * this.dy,
                this.gw1.drawImage(this.img, this.ax, this.ay, Math.max(500, this.TILE_SIZE), this.bgHeight),
                this.gw1.drawImage(this.working1, 0, 0),
                this.gw1a.fillStyle = "rgba(255,255,255,255)", this.gw1a.drawImage(this.working1, 0, 0);
                var o = !0;
                this.gw1a.globalCompositeOperation = "destination-atop",
                this.gw1a.beginPath(),
                this.gw1a.moveTo(0, 0),
                this.gw1a.lineTo(this.TILE_SIZE, this.TILE_SIZE),
                this.gw1a.lineTo(0, this.TILE_SIZE),
                this.gw1a.fill(),
                this.gw1a.globalCompositeOperation = "source-over",
                o && (this.gw1a.rotate(Math.PI / 2),
                this.gw1a.scale(1, -1)),
                this.gw1a.drawImage(this.working1a, 0, 0),
                o && (this.gw1a.scale(1, -1),
                this.gw1a.rotate(-Math.PI / 2)),
                this.gw2.drawImage(this.working1a, -this.TILE_SIZE, -this.TILE_SIZE),
                this.gw2.scale(-1, 1),
                this.gw2.drawImage(this.working1a, -this.TILE_SIZE, -this.TILE_SIZE),
                this.gw2.scale(-1, 1),
                this.gw2.scale(1, -1),
                this.gw2.drawImage(this.working1a, -this.TILE_SIZE, -this.TILE_SIZE),
                this.gw2.scale(1, -1),
                this.gw2.scale(-1, -1),
                this.gw2.drawImage(this.working1a, -this.TILE_SIZE, -this.TILE_SIZE),
                this.gw2.scale(-1, -1);
                for (var u = 0; u * this.working2.width < this.dest.width; u++) {
                    for (var a = 0; a * this.working2.height < this.dest.height; a++) {
                        this.gd.drawImage(this.working2, u * (this.working2.width - 1), a * (this.working2.height - 1))
                    }
                }
            } catch (f) {}
        },
        onMouseMove: function(t) {
            this.CURSOR_DIVISOR = e(window).width() * 80 / 1920;
            var n = -(t.clientX || t.x),
                r = -(t.clientY || t.y);
            this.mx = n / this.CURSOR_DIVISOR, this.my = r / this.CURSOR_DIVISOR
        }
    }, o
})