first

sample/dev/talk/bundle/awesome-notifications-3.1.1/toast.js

@@ -0,0 +1,61 @@
+import Elem from "./elem.js"
+import Timer from "./timer.js"
+
+import {
+  tConsts,
+  eConsts
+} from "./constants.js"
+
+export default class extends Elem {
+  constructor(msg, type, options, parent) {
+    super(
+      parent,
+      `${tConsts.prefix}-${Math.floor(Date.now() - Math.random() * 100)}`,
+      `${tConsts.prefix} ${tConsts.prefix}-${type}`,
+      `animation-duration: ${options.toSecs(options.animationDuration)};`,
+      options
+    )
+    this.updateType(type)
+    this.setInnerHtml(msg)
+  }
+
+  setInnerHtml(html) {
+    if (this.type === 'alert' && html) html = this.options.formatError(html)
+    html = this.options.applyReplacements(html, this.type)
+    this.newNode.innerHTML = `<div class="awn-toast-wrapper">${this.progressBar}${this.label}<div class="${tConsts.klass.content}">${html}</div><span class="${tConsts.klass.icon}">${this.options.icon(this.type)}</span></div>`
+  }
+
+  beforeInsert() {
+    if (this.parent.childElementCount >= this.options.maxNotifications) {
+      let elements = Array.from(this.parent.getElementsByClassName(tConsts.prefix))
+      this.delete(elements.find(e => !this.isDeleted(e)))
+    }
+  }
+  afterInsert() {
+    if (this.type == "async") return this.start = Date.now()
+
+    this.addEvent("click", () => this.delete())
+
+    if (this.duration <= 0) return
+    this.timer = new Timer(() => this.delete(), this.duration)
+    for (const e of ["mouseenter", "mouseleave"]) {
+      this.addEvent(e, () => {
+        if (this.isDeleted()) return
+        this.toggleClass(tConsts.klass.progressBarPause)
+        this.timer.toggle()
+      })
+    }
+  }
+
+  isDeleted(el = this.el) {
+    return el.classList.contains(eConsts.klass.hiding)
+  }
+  get progressBar() {
+    if (this.duration <= 0 || this.type === 'async') return ""
+    return `<div class='${tConsts.klass.progressBar}' style="animation-duration:${this.options.toSecs(this.duration)};"></div>`
+  }
+  get label() {
+    return `<b class="${tConsts.klass.label}">${this.options.label(this.type)}</b>`
+  }
+
+}