artalk 2.1.0 → 2.1.4

package/src/components/html/list.html

@@ -8,7 +8,7 @@
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>
       <span data-action="open-sidebar" class="atk-hide atk-on">
         <span class="atk-unread-badge" style="display: none;"></span>
-        通知中心
+        <div class="atk-text">通知中心</div>
       </span>
     </div>
   </div>

package/src/components/layer.ts

@@ -13,6 +13,8 @@ export default class Layer extends Component {
   private bodyStyleOrgOverflow = ''
   private bodyStyleOrgPaddingRight = ''
 
+  public afterHide?: Function
+
   constructor (ctx: Context, name: string, el?: HTMLElement) {
     super(ctx)
 
@@ -50,13 +52,8 @@ export default class Layer extends Component {
     return this.$el
   }
 
-  private static hideTimeoutList: number[] = []
-
   show () {
-    Layer.hideTimeoutList.forEach(item => {
-      clearTimeout(item)
-    })
-    Layer.hideTimeoutList = []
+    this.fireAllActionTimer()
 
     this.$wrap.style.display = 'block'
     this.$mask.style.display = 'block'
@@ -77,26 +74,48 @@ export default class Layer extends Component {
   }
 
   hide () {
-    Layer.hideTimeoutList.push(window.setTimeout(() => {
+    if (this.afterHide) this.afterHide()
+    this.$wrap.classList.add('atk-fade-out')
+    this.$el.style.display = 'none'
+
+    this.newActionTimer(() => {
       this.$wrap.style.display = 'none'
       // body style 禁止滚动解除
       document.body.style.overflow = this.bodyStyleOrgOverflow
       document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
-    }, 450))
-
-    this.$wrap.classList.add('atk-fade-out')
-    Layer.hideTimeoutList.push(window.setTimeout(() => {
+      this.checkCleanLayer()
+    }, 450)
+    this.newActionTimer(() => {
       this.$wrap.style.display = 'none'
       this.$wrap.classList.remove('atk-fade-out')
-    }, 200))
-
-    this.$el.style.display = 'none'
+    }, 200)
   }
 
   setMaskClickHide (enable: boolean) {
     this.maskClickHideEnable = enable
   }
 
+  // Timers
+  private static actionTimers: {act: Function, tid: number}[] = []
+
+  private newActionTimer(func: Function, delay: number) {
+    const act = () => {
+      func() // 执行
+      Layer.actionTimers = Layer.actionTimers.filter(o => o.act !== act) // 删除
+    }
+
+    const tid = window.setTimeout(() => act(), delay)
+
+    Layer.actionTimers.push({ act, tid })
+  }
+
+  private fireAllActionTimer() {
+    Layer.actionTimers.forEach(item => {
+      clearTimeout(item.tid)
+      item.act() // 立即执行
+    })
+  }
+
   /** 销毁 - 无动画 */
   disposeNow () {
     document.body.style.overflow = ''