feat: multiline (#14)

2nthony · Jun 27, 2020 · 06d5832 · 06d5832
1 parent 0193e38
commit 06d5832
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 127 deletions.
diff --git a/example/public/README.md b/example/public/README.md
@@ -12,21 +12,18 @@ npm install @evillt/toast
 import '@evillt/toast/dist/toast.css'
 import { createToast } from '@evillt/toast'
 
-createToast('Hello world')
+createToast('The Evil Rabbit jumped over the fence.')
 ```
 
 ## Use via CDN
 
 ```html
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@evillt/toast/dist/toast.min.css"
-/>
+<link rel="stylesheet" href="https://unpkg.com/@evillt/toast/dist/toast.css" />
 
 <script src="https://unpkg.com/@evillt/toast"></script>
 
 <script>
-  toast.createToast('Hello world')
+  toast.createToast('The Evil Rabbit jumped over the fence.')
 </script>
 ```
 
@@ -53,23 +50,37 @@ destoryAllToasts()
 ```js
 import { createToast } from '@evillt/toast'
 
-createToast('Hello world', {
-  timeout: 2000 // in 2 seconds
+createToast('The Evil Rabbit jumped over the fence.', {
+  timeout: 3000 // in 3 seconds
 })
 ```
 
 <button @click="showDefault">Show toast</button>
 
+## Multiline
+
+```js
+import { createToast } from '@evillt/toast'
+
+createToast(
+  'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence.',
+  {
+    timeout: 3000
+  }
+)
+```
+
+<button @click="multiline">Show toast</button>
+
 ### Action
 
 ```js
 import { createToast } from '@evillt/toast'
 
-createToast('Hello world', {
+createToast('The Evil Rabbit jumped over the fence.', {
   action: {
-    text: 'Awesome!',
+    text: 'Undo',
     callback(toast) {
-      console.log('You just closed me.')
       toast.destory()
     }
   }
@@ -83,16 +94,18 @@ createToast('Hello world', {
 ```js
 import { createToast } from '@evillt/toast'
 
-createToast('Hello world', {
-  action: {
-    text: 'Awesome!',
-    callback(toast) {
-      console.log('You just closed me.')
-      toast.destory()
-    },
-    cancel: 'Cancel'
+createToast(
+  'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence again.',
+  {
+    action: {
+      text: 'Undo',
+      callback(toast) {
+        toast.destory()
+      },
+      cancel: 'Cancel'
+    }
   }
-})
+)
 ```
 
 <button @click="actionAndCancel">Show toast</button>
@@ -102,18 +115,18 @@ createToast('Hello world', {
 ```js
 import { createToast } from '@evillt/toast'
 
-createToast('Hello world', {
-  timeout: 2000,
+createToast('The Evil Rabbit jumped over the fence.', {
+  timeout: 3000,
   type: 'success'
 })
 
-createToast('Hello world', {
-  timeout: 2000,
+createToast('The Evil Rabbit jumped over the fence.', {
+  timeout: 3000,
   type: 'warning'
 })
 
-createToast('Hello world', {
-  timeout: 2000,
+createToast('The Evil Rabbit jumped over the fence.', {
+  timeout: 3000,
   type: 'error'
 })
 ```
@@ -124,36 +137,37 @@ createToast('Hello world', {
 
 ```js { mixin: true }
 {
-  mounted() {
-    this.action()
-  },
   methods: {
     destoryAllToasts,
 
     showDefault() {
-      createToast('Hello world', {
-        timeout: 2000
+      createToast('The Evil Rabbit jumped over the fence.', {
+        timeout: 3000
+      })
+    },
+
+    multiline() {
+      createToast('The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence.', {
+        timeout: 3000
       })
     },
 
     action() {
-      createToast('Hello world', {
+      createToast('The Evil Rabbit jumped over the fence.', {
         action: {
-          text: 'Awesome!',
+          text: 'Undo',
           callback(toast) {
-            console.log('You just closed me.')
             toast.destory()
           }
         }
       })
     },
 
     actionAndCancel() {
-      createToast('Hello world', {
+      createToast('The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence again.', {
         action: {
-          text: 'Awesome!',
+          text: 'Undo',
           callback(toast) {
-            console.log('You just closed me.')
             toast.destory()
           }
         },
@@ -162,8 +176,8 @@ createToast('Hello world', {
     },
 
     withType(type) {
-      createToast('Hello world', {
-        timeout: 2000,
+      createToast('The Evil Rabbit jumped over the fence.', {
+        timeout: 3000,
         type
       })
     }

diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "bili": "^4.8.1",
     "husky": "^3.0.1",
     "lint-staged": "^9.2.1",
-    "poi": "^12.7.1",
+    "poi": "^12.8.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.17.0",
     "rollup-plugin-typescript2": "^0.27.1",

diff --git a/src/index.ts b/src/index.ts
@@ -67,7 +67,6 @@ export class Toast {
     text.className = 'toast-text'
     inner.classList.add(type as string)
     text.textContent = this.message
-    text.title = this.message
     inner.appendChild(text)
 
     if (cancel) {
@@ -109,22 +108,12 @@ export class Toast {
 
   destory(): void {
     const { el } = this
-    if (el) {
-      el.setAttribute('aria-hidden', 'true')
-      new Promise(resolve => {
-        const eventName = getTransitionEvent(el)
-        if (eventName) {
-          el.addEventListener(eventName, () => resolve())
-        } else {
-          resolve()
-        }
-      }).then(() => {
-        container.removeChild(el)
-        instances.delete(this)
+    if (!el) return
 
-        sortToast()
-      })
-    }
+    container.removeChild(el)
+    instances.delete(this)
+
+    sortToast()
   }
 
   setContainer(): void {
@@ -144,19 +133,6 @@ export class Toast {
     container.addEventListener('mouseleave', () => {
       instances.forEach(instance => instance.startTimer())
     })
-
-    // Listen to destory all
-    const eventName = getTransitionEvent(container)
-    if (eventName) {
-      container.addEventListener(eventName, () => {
-        if (container.hasAttribute('aria-destorying')) {
-          while (container.firstChild) {
-            container.removeChild(container.firstChild)
-          }
-          container.removeAttribute('aria-destorying')
-        }
-      })
-    }
   }
 
   startTimer(): void {
@@ -184,34 +160,38 @@ export function destoryAllToasts(): void {
   if (!container) return
 
   instances.clear()
-  if (container.hasChildNodes() && !container.hasAttribute('aria-destorying')) {
-    container.setAttribute('aria-destorying', '')
+  while (container.firstChild) {
+    container.removeChild(container.firstChild)
   }
 }
 
-function getTransitionEvent(el: HTMLDivElement): string | undefined {
-  const transition: { [k: string]: string } = {
-    transition: 'transitionend',
-    OTransition: 'oTransitionEnd',
-    MozTransition: 'transitionend',
-    WebkitTransition: 'webkitTransitionEnd'
-  }
-
-  for (const key in transition) {
-    if (el.style[key as any] !== undefined) {
-      return transition[key]
-    }
-  }
-  return
-}
-
 function sortToast(): void {
   const toasts = Array.from(instances)
+    .reverse()
+    .slice(0, 4)
+
+  const heights: Array<number> = []
+
   toasts.forEach((toast, index) => {
-    const i = toasts.length - index
+    const sortIndex = index + 1
     const el = toast.el as HTMLDivElement
-    if (i <= 4) {
-      el.className = `toast toast-${i}`
+    const height = +(el.getAttribute('data-height') || 0) || el.clientHeight
+
+    heights.push(height)
+
+    el.className = `toast toast-${sortIndex}`
+    el.dataset.height = '' + height
+    el.style.setProperty('--index', '' + sortIndex)
+    el.style.setProperty('--height', height + 'px')
+    el.style.setProperty('--front-height', `${heights[0]}px`)
+
+    if (sortIndex > 1) {
+      const hoverOffsetY = heights
+        .slice(0, sortIndex - 1)
+        .reduce((res, next) => (res += next), 0)
+      el.style.setProperty('--hover-offset-y', `-${hoverOffsetY}px`)
+    } else {
+      el.style.removeProperty('--hover-offset-y')
     }
   })
 }