whiteboard/dist/cjs/board/Whiteboard/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Siema = require("siema");
var index_1 = require("../WhitePage/index");
var uuid_1 = require("../../utils/uuid");
var dom_1 = require("../../utils/dom");
require("./index.less");
var LeftArrowIcon = require('../../assets/bx-left-arrow.svg');
var RightArrowIcon = require('../../assets/bx-right-arrow.svg');
var prefix = 'fcw-board';
var SerializableWhiteboard = (function () {
    function SerializableWhiteboard() {
    }
    return SerializableWhiteboard;
}());
exports.SerializableWhiteboard = SerializableWhiteboard;
var Whiteboard = (function () {
    function Whiteboard(target, _a) {
        var _b = _a === void 0 ? {} : _a, sources = _b.sources, eventHub = _b.eventHub, mode = _b.mode, visiblePageIndex = _b.visiblePageIndex;
        this.id = uuid_1.uuid();
        this.sources = [];
        this.mode = 'master';
        this.isFullscreen = false;
        this.pages = [];
        this.isInitialized = false;
        this.visiblePageIndex = 0;
        if (target) {
            this.target = target;
        }
        else {
            this.target = document.createElement('div');
            document.body.appendChild(this.target);
        }
        if (!this.target.id) {
            this.target.id = this.id;
        }
        dom_1.addClassName(this.target, prefix);
        if (sources) {
            this.sources = sources;
        }
        this.eventHub = eventHub;
        if (mode) {
            this.mode = mode;
        }
        if (typeof visiblePageIndex !== 'undefined') {
            this.visiblePageIndex = visiblePageIndex;
        }
        this.init();
    }
    Object.defineProperty(Whiteboard.prototype, "activePage", {
        get: function () {
            return this.pages[this.visiblePageIndex];
        },
        enumerable: true,
        configurable: true
    });
    Whiteboard.prototype.open = function () {
        var _this = this;
        this.pages.forEach(function (page, i) {
            page.open();
            if (i !== _this.visiblePageIndex) {
                page.hide();
            }
        });
    };
    Whiteboard.prototype.close = function () {
        if (this.emitInterval) {
            clearInterval(this.emitInterval);
        }
    };
    Whiteboard.prototype.show = function () {
        if (this.activePage) {
            this.activePage.show();
        }
    };
    Whiteboard.prototype.hide = function () {
        if (this.activePage) {
            this.activePage.hide();
        }
    };
    Whiteboard.prototype.snap = function () {
        return {
            id: this.id,
            sources: this.sources,
            pageIds: this.pages.map(function (page) { return page.id; }),
            visiblePageIndex: this.visiblePageIndex
        };
    };
    Whiteboard.prototype.init = function () {
        this.imgsContainer = dom_1.createDivWithClassName(prefix + "-imgs", this.target);
        this.pagesContainer = dom_1.createDivWithClassName(prefix + "-pages", this.target);
        if (this.mode === 'master') {
            this.initMaster();
            this.emitSnapshot();
        }
        if (this.mode === 'mirror') {
            this.initMirror();
        }
    };
    Whiteboard.prototype.initMaster = function () {
        var _this = this;
        this.sources.forEach(function (source) {
            var page = new index_1.WhitePage({ imgSrc: source }, {
                mode: _this.mode,
                eventHub: _this.eventHub,
                parentContainer: _this.pagesContainer
            });
            page.container.style.visibility = 'hidden';
            _this.pages.push(page);
        });
        this.initSiema();
        var controller = dom_1.createDivWithClassName(prefix + "-controller", this.target);
        var prevEle = dom_1.createDivWithClassName(prefix + "-flip-arrow", controller);
        prevEle.innerHTML = LeftArrowIcon;
        var nextEle = dom_1.createDivWithClassName(prefix + "-flip-arrow", controller);
        nextEle.innerHTML = RightArrowIcon;
        nextEle.addEventListener('click', function () {
            var nextPageIndex = _this.visiblePageIndex + 1 > _this.pages.length - 1 ? 0 : _this.visiblePageIndex + 1;
            _this.onPageChange(nextPageIndex);
        });
        prevEle.addEventListener('click', function () {
            var nextPageIndex = _this.visiblePageIndex - 1 < 0 ? _this.pages.length - 1 : _this.visiblePageIndex - 1;
            _this.onPageChange(nextPageIndex);
        });
    };
    Whiteboard.prototype.initMirror = function () {
        var _this = this;
        if (!this.eventHub) {
            throw new Error('Invalid eventHub');
        }
        this.eventHub.on('sync', function (ev) {
            if (ev.target !== 'whiteboard') {
                return;
            }
            if (ev.event === 'snap') {
                if (_this.isInitialized) {
                    return;
                }
                _this.onSnapshot(ev.data);
            }
            if (ev.event === 'changeIndex' && ev.id === _this.id) {
                if (_this.isInitialized) {
                    _this.onPageChange(ev.data);
                }
            }
        });
    };
    Whiteboard.prototype.initSiema = function () {
        var _this = this;
        this.sources.forEach(function (source) {
            var imgEle = document.createElement('img');
            dom_1.addClassName(imgEle, prefix + "-img");
            imgEle.src = source;
            imgEle.alt = 'Siema image';
            _this.imgsContainer.appendChild(imgEle);
        });
        this.siema = new Siema({
            selector: this.imgsContainer,
            duration: 200,
            easing: 'ease-out',
            perPage: 1,
            startIndex: 0,
            draggable: false,
            multipleDrag: true,
            threshold: 20,
            loop: false,
            rtl: false
        });
    };
    Whiteboard.prototype.onPageChange = function (nextPageIndex) {
        this.siema.goTo(nextPageIndex);
        this.visiblePageIndex = nextPageIndex;
        this.pages.forEach(function (page, i) {
            if (nextPageIndex === i) {
                page.show();
            }
            else {
                page.hide();
            }
        });
        if (this.mode === 'master' && this.eventHub) {
            this.eventHub.emit('sync', {
                event: 'changeIndex',
                id: this.id,
                target: 'whiteboard',
                data: nextPageIndex
            });
        }
    };
    Whiteboard.prototype.emitSnapshot = function () {
        var _this = this;
        var innerFunc = function () {
            if (_this.eventHub) {
                _this.eventHub.emit('sync', {
                    event: 'snap',
                    id: _this.id,
                    target: 'whiteboard',
                    data: _this.snap()
                });
            }
        };
        this.emitInterval = setInterval(function () {
            innerFunc();
        }, 5 * 1000);
        setTimeout(innerFunc, 500);
    };
    Whiteboard.prototype.onSnapshot = function (snap) {
        var _this = this;
        var id = snap.id, sources = snap.sources, pageIds = snap.pageIds, visiblePageIndex = snap.visiblePageIndex;
        if (!this.isInitialized) {
            this.id = id;
            this.sources = sources;
            this.initSiema();
            this.sources.forEach(function (source, i) {
                var page = new index_1.WhitePage({ imgSrc: source }, {
                    mode: _this.mode,
                    eventHub: _this.eventHub,
                    parentContainer: _this.pagesContainer
                });
                page.id = pageIds[i];
                page.container.style.opacity = 'hidden';
                _this.pages.push(page);
                page.open();
            });
        }
        this.isInitialized = true;
        this.onPageChange(visiblePageIndex);
    };
    return Whiteboard;
}());
exports.Whiteboard = Whiteboard;