/** @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; });