fix

assets/Viewer/Viewer.js

@@ -0,0 +1,170 @@
+/** @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;
+});