TouchSequencesController.js

function () {
    TouchSequencesController = {
        sequences: [],
        runningSequences: [],
        preShowTouchTime: .3,
        nextTouchSequence: 0,
        layer: new Kinetic.Layer,
        isPaused: !1,
        scale: 1,
        create: function (e, t, n, i) {
            var r = Object.create(this);
            return e && i ? (r.sequences = e, r.screen = n, r.$canvas = $canvas = $(t), r.screenSize = i, r.stage = new Kinetic.Stage({
                container: t.id,
                width: $canvas.width(),
                height: $canvas.height()
            }), r.scale = t.offsetHeight / i.height, $(window).on("resize", _.throttle(_.bind(r.setScale, r), 200)), r) : r
        },
        start: function () {
            var e = this;
            e.intervalId = Meteor.setInterval(function () {
                if (!e.isPaused) {
                    var t = e.sequences[e.nextTouchSequence];
                    e.nextTouchSequence >= e.sequences.length || t[0].time - e.preShowTouchTime < e.screen.currentTime && (TouchSequence.create(t, e.stage, e.layer, e.preShowTouchTime, e), e.nextTouchSequence++)
                }
            }, 50)
        },
        setScale: function () {
            var e = this,
                t = e.$canvas,
                n = t[0].offsetHeight / e.screenSize.height;
            e.scale != n && (e.scale = n, e.stage.setHeight(t.height()), e.stage.setWidth(t.width()), _.each(e.runningSequences, function (t) {
                t.setScale(e.scale)
            }))
        },
        stop: function () {
            this.intervalId && Meteor.clearInterval(this.intervalId), $(window).off("resize"), this.stopAll(), this.stage && $(this.stage.content).remove()
        },
        pause: function () {
            this.isPaused = !0, this.stopAll()
        },
        resume: function () {
            this.isPaused = !1, this.updateNextTouch()
        },
        updateNextTouch: function () {
            for (this.nextTouchSequence = 0; this.nextTouchSequence < this.sequences.length && this.sequences[this.nextTouchSequence][0].time < this.screen.currentTime;) this.nextTouchSequence++
        },
        add: function (e) {
            this.runningSequences.push(e)
        },
        remove: function (e) {
            var t = this.runningSequences.indexOf(e);
            this.runningSequences.splice(t, 1)
        },
        stopAll: function () {
            _.each(this.runningSequences, function (e) {
                e.stop()
            })
        }
    }, TouchSequence = {
        touches: [],
        preShowTouchTime: 0,
        nextIndex: 1,
        isStopped: !1,
        stop: function () {
            this.isStopped = !0, this.touchController.remove(this)
        },
        create: function (e, t, n, i, r) {
            var o = Object.create(this);
            return o.touches = e, o.stage = t, o.preShowTouchTime = i, o.touchController = r, o.setScale(r.scale), o.circle = new Kinetic.Circle({
                x: e[0].x * o.scale,
                y: e[0].y * o.scale,
                width: 20,
                height: 20,
                fill: "white",
                stroke: "black",
                strokeWidth: 1,
                opacity: .35,
                shadowColor: "000",
                shadowOpacity: .8,
                shadowOffset: {
                    x: 1,
                    y: 5
                }
            }), o.layer = n, o.layer.add(o.circle), o.stage.add(o.layer), o.start(), r.add(o), o
        },
        start: function () {
            function e() {
                n.circle.transitionTo({
                    duration: n.preShowTouchTime,
                    shadowOffset: {
                        x: 1,
                        y: 1
                    },
                    opacity: 0,
                    width: 30,
                    height: 30,
                    shadowOpacity: 0,
                    callback: function () {
                        n.circle.destroy()
                    }
                }), n.stop()
            }

            function t() {
                if (n.isStopped) n.circle.destroy();
                else if (n.nextIndex >= n.touches.length) e();
                else {
                    var i = n.touches[n.nextIndex],
                        r = n.touches[n.nextIndex - 1],
                        o = i.time - r.time;
                    n.nextIndex++, n.circle.transitionTo({
                        x: i.x * n.scale,
                        y: i.y * n.scale,
                        duration: o,
                        callback: t
                    })
                }
            }
            var n = this;
            n.circle.transitionTo({
                duration: n.preShowTouchTime,
                shadowOffset: {
                    x: 1,
                    y: 1
                },
                opacity: .6,
                callback: t
            })
        },
        setScale: function (e) {
            this.scale = e
        }
    }
}(),