First working version

tp-toaster.js

@@ -0,0 +1,259 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import './tp-toast.js';
+import '@tp/helpers/debounce.js';
+import '@tp/tp-icon/tp-icon.js';
+import '@tp/tp-media-query/tp-media-query.js';
+import { debounce } from '@tp/helpers/debounce.js';
+import { closest } from '@tp/helpers/closest.js';
+import { EventHelpers } from '@tp/helpers/event-helpers.js';
+import { LitElement, html, css, svg } from 'lit';
+
+export default class TpToaster extends EventHelpers(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: inline-block;
+          position: fixed;
+          top: 15px;
+          left: 50%;
+          width: 50%;
+          z-index: 1009;
+          transform: translateY(-60px);
+        }
+
+        :host [hidden] {
+          display: none;
+        }
+
+        #infos {
+          display: inline-block;
+          font-size: 0.7em;
+          border-radius: 4px;
+          background: #FAFAFA;
+          transition: transform 0.3s;
+          will-change: transform;
+          box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+                    0 1px 8px 0 rgba(0, 0, 0, 0.12),
+                    0 3px 3px -2px rgba(0, 0, 0, 0.4);
+        }
+
+        #infos .info-wrap {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+
+        #infos[show-infos] {
+          transform: translateY(60px);
+        }
+
+        #infos .info-wrap tp-icon {
+          padding: 5px;
+          --tp-icon-width: 18px;
+          --tp-icon-height: 18px;
+        }
+
+        #infos .info-wrap > div {
+          padding: 0 5px;
+        }
+
+        #wrap {
+          transition: transform 0.3s;
+          will-change: transform;
+          transform: translateY(30px);
+        }
+
+        #wrap[show-infos] {
+          transform: translateY(70px);
+        }
+
+        :host ::slotted(tp-toast) {
+          position: absolute;
+        }
+
+        @media all and (min-width: 0) and (max-width: 480px) {
+          :host {
+            left: 2%;
+            width: 96%
+          }
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { hiddenCount, dismissLabel, moreLabel } = this;
+
+    const show = this.toasts.length > 1;
+
+    return html`
+      <tp-media-query @media-query-update=${this.queryMatchChanged}></tp-media-query>
+
+      <div id="infos" ?show-infos=${show}>
+        <div class="info-wrap">
+          <tp-icon .icon=${TpToaster.clearAllIcon} @click=${this.dismissAll}>${dismissLabel}</tp-icon>
+          <div ?hidden=${hiddenCount === 0}><span>${hiddenCount}</span> <span>${moreLabel}</span></div>
+        </div>
+      </div>
+      <div id="wrap" ?show-infos=${show}>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      maxVisible: { type: Number },
+      count: { type: Number },
+      hiddenCount: { type: Number },
+      dismissLabel: { type: String },
+      moreLabel: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.updateList = debounce(this.updateList.bind(this), 50);
+    window.TpToaster = this;
+    this.moreLabel = 'more';
+    this.hiddenCount = 0;
+    this.maxVisible = 4;
+  }
+
+  static get clearAllIcon() {
+    return svg`<path fill="var(--tp-toaster-icon-color, #000000)" d="M5,13H19V11H5M3,17H17V15H3M7,7V9H21V7" />`;
+  }
+
+  get toasts() {
+    const slot = this.shadowRoot.querySelector('slot');
+
+    if (!slot) return [];
+
+    return slot
+      .assignedNodes({ flatten:true })
+      .filter(n => n.nodeType === Node.ELEMENT_NODE);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.listen(this, 'click', 'onClick');
+    this.listen(this, 'toast-dismissed', 'onToastDismissed');
+  }
+
+  /**
+   * Adds a new toast. This can be a `tp-toast` element or a object with the properties:
+   * ```json
+   * {
+   *   "content": "The message to display",
+   *   "type": "warning",
+   *   "delay": "5000"
+   * }
+   * ```
+   * If the value of `content` starts with `i18n.`, the toaster tries to translate the string.
+   *
+   * @param toast
+   */
+  add(toast) {
+    toast = Object.assign({
+      content: '',
+      type: 'info',
+      delay: 5000
+    }, toast);
+
+    const newContent = document.createElement('div');
+    newContent.textContent = toast.content;
+
+    const newToast = document.createElement('tp-toast');
+    newToast.type = toast.type;
+    newToast.delay = toast.delay;
+    newToast.sticky = toast.sticky;
+    newToast.icon = toast.icon;
+    newToast.appendChild(newContent);
+
+    this.appendChild(newToast);
+    this.updateList();
+  }
+
+  /**
+   * Dismiss all non-sticky toasts.
+   */
+  dismissAll() {
+    this.toasts.forEach(toast => {
+      if (!toast.sticky) {
+        toast.dismiss();
+      }
+    });
+  }
+
+  /**
+   * Dismiss all sticky toasts.
+   */
+  dismissSticky() {
+    this.toasts.forEach(toast => {
+      if (toast.sticky) {
+        toast.dismiss();
+      }
+    });
+  }
+
+  onClick(e) {
+    const target = closest(e.target, 'tp-toast', true);
+    if (target && !target.isDismissed) {
+      target.parentNode.appendChild(target);
+      setTimeout(() => {
+        this.updateList();
+      }, 50);
+    }
+  }
+
+  onToastDismissed(e) {
+    this.removeChild(e.detail.toast);
+    this.updateList();
+  }
+
+  updateList() {
+    const toasts = this.toasts;
+    this.count = toasts.length;
+
+    const hiddenToasts = toasts.slice(0, toasts.length - this.maxVisible);
+
+    for (let i = 0, li = hiddenToasts.length; i < li; ++i) {
+      hiddenToasts[i].translateY = -150;
+      hiddenToasts[i].stopDelay();
+    }
+
+    const visibleToasts = toasts.slice(Math.max(0, toasts.length - this.maxVisible));
+
+    for (let i = 0, li = visibleToasts.length; i < li; ++i) {
+      visibleToasts[i].translateY = 30 * i;
+
+      if (i === li - 1) {
+        visibleToasts[i].activateDelay();
+      } else {
+        visibleToasts[i].stopDelay();
+      }
+    }
+
+    this.hiddenCount = Math.max(0, this.count - this.maxVisible);
+  }
+
+  shouldShowMoreLabel(hiddenCount) {
+    return hiddenCount > 0;
+  }
+
+  queryMatchChanged(e) {
+    this.maxVisible = e.detail.value ? 1 : 4;
+    if (this.isConnected) {
+      this.updateList();
+    }
+  }
+}
+
+window.customElements.define('tp-toaster', TpToaster);