kit/assets/Viewer/Viewer.js

/** @module Viewer */
kit.PluginManager.register('Viewer', function(module, exports, require, global) {

    var Collection = require('Collection');
    var support = require('support');
    var Action = require('Action');
    var ActionCollection = require('ActionCollection');



    var AnimationTrap = function (node, callbackBefore = function(){}, callbackAfter = function(){}) {
        this.node = support.getNode(node);
        this.active = 0;
        this.__timeoutId = 0;
        this.callbackBefore = callbackBefore;
        this.callbackAfter = callbackAfter;
        this.__callbackAfterHandler = function () {
            this.callbackAfter();
            this.stop();
        }.bind(this);
        this.__animationstart = false;
        this.__animationStartAction = new Action(this.node, 'animationstart', () => {
            this.__animationstart = true;
        });

        this.__animationEndAction = new ActionCollection([
            new Action(this.node, 'animationend', this.__callbackAfterHandler),
            new Action(this.node, 'animationcancel', this.__callbackAfterHandler)
        ]);
    };
    AnimationTrap.prototype.run = function () {

        if(this.active === 1){
            return;
        }

        this.active = 1;
        this.__animationStartAction.run(1);
        this.callbackBefore();
        this.__animationEndAction.run(1);

        this.__timeoutId = setTimeout(function () {
            if(!this.__animationstart) {
                this.__callbackAfterHandler();
            }
        }.bind(this), 100);
    };
    AnimationTrap.prototype.stop = function () {
        clearTimeout(this.__timeoutId);
        this.__timeoutId = 0;
        this.__animationstart = false;
        this.__animationStartAction.stop();
        this.__animationEndAction.stop();
        this.active = 0;
    };




    var removeAnimation = function(animationClass){
        if(animationClass && this.node.classList.contains(animationClass)){
            this.node.classList.remove(animationClass);
        }
    };
    var addAnimation = function(animationClass){
        if(animationClass && !this.node.classList.contains(animationClass)){
            this.node.classList.add(animationClass);
        }
    };


    /**
     * @memberOf kit
     */
    var Viewer = function (node, masterNode) {
        this.node = support.getNode(node);
        this.masterNode = support.getNode(masterNode);
        this.onShow = new Collection();
        this.onHide = new Collection();
        this.animShowClass = '';
        this.animHideClass = '';
        this.delayHide = 0;
        this.activeMasterClass = 'active';

        this.__aminationTrapHide = new AnimationTrap(this.node, function () {
            removeAnimation.call(this, this.animShowClass);
            addAnimation.call(this, this.animHideClass);
        }.bind(this), function () {
            if(this.masterNode && this.activeMasterClass) {
                this.masterNode.classList.remove(this.activeMasterClass);
            }
            this.node.classList.add('hide');
            this.node.classList.remove('show');
            this.onHide.eachCall();
            this.node.style.display = 'none';
        }.bind(this));

        this.__aminationTrapShow = new AnimationTrap(this.node, function () {
            this.node.classList.remove('hide');
            this.node.classList.add('show');
            if(this.node.style.display === 'none') {
                this.node.style.display = '';
            }
            if(this.masterNode && this.activeMasterClass) {
                this.masterNode.classList.add(this.activeMasterClass);
            }
            removeAnimation.call(this, this.animHideClass);
            addAnimation.call(this, this.animShowClass);
            this.onShow.eachCall();
        }.bind(this), function () {

        }.bind(this));

    };

    var deferredHideCancel = function () {
        if(this.__deferredHideID) {
            clearTimeout(this.__deferredHideID);
            this.__deferredHideID = 0;
        }
    };

    var proto = Viewer.prototype;
    proto.show = function(){
        if(this.isShown()) {
            return;
        }
        deferredHideCancel.call(this);
        this.__aminationTrapHide.stop();
        this.__aminationTrapShow.run();
    };
    proto.hide = function(){
        if(this.isHidden()) {
            return;
        }

        var hideDeferred = function () {
            deferredHideCancel.call(this);
            this.__deferredHideID = setTimeout(hide.bind(this), this.delayHide);
        }.bind(this);


        var hide = function() {
            deferredHideCancel.call(this);
            this.__aminationTrapShow.stop();
            this.__aminationTrapHide.run();
        }.bind(this);
        hideDeferred();
    };
    proto.toggle = function(){
        if(this.isHidden()) {
            this.show();
            return true;
        }
        this.hide();
        return false;
    };
    proto.isShown = function(){
        return !this.isHidden() && !this.__aminationTrapHide.active;
    };
    proto.isHidden = function(){
        var result = this.node.classList.contains('hide');
        if(this.masterNode && this.activeMasterClass) {
            result = result || !this.masterNode.classList.contains(this.activeMasterClass);
        }
        return result || this.__aminationTrapHide.active;
    };

    return module.exports = Viewer;
});