neo.mjs 4.6.3 → 4.6.5

package/src/manager/Toast.mjs

@@ -1,4 +1,5 @@
-import Base from './Base.mjs';
+import Base     from './Base.mjs';
+import NeoArray from "../util/Array.mjs";
 
 /**
  * See Neo.dialog.Toast for examples
@@ -8,37 +9,29 @@ import Base from './Base.mjs';
  */
 class Toast extends Base {
     /**
-     * This is the default config for the Neo.dialog.Toast
-     * @member {Object}
+     * Using a default margin between the item
+     * If you switch the distance to the top or bottom you have to change this value accordingly
+     * @member {Number} defaultMargin=16
      */
-    defaultToastConfig = {
-        closable      : false,
-        cls           : ['neo-toast'],
-        maxWidth      : 250,
-        position      : 'tr',
-        running       : false,
-        slideDirection: 'down',
-        timeout       : 3000,
-        title         : null
-    }
+    defaultMargin = 16
     /**
      * Currently only 1 is supported, because they would overlap
-     * @member {1} maxToasts=1
+     * @member {Number} maxToasts=3
      */
-    maxToasts = 1
+    maxToasts = 3
     /**
      * Counts the currently running Toasts per area
      * @member {Object} running
      */
     running = {
-        bc: 0, bl: 0, br: 0,
-        tc: 0, tl: 0, tr: 0
+        bc: [], bl: [], br: [],
+        tc: [], tl: [], tr: []
     }
     /**
      * If you prefer your own class to open, override here
-     * @member {String} toastClass='Neo.dialog.Toast'
+     * @member {String} toastClass='Neo.component.Toast'
      */
-    toastClass = 'Neo.dialog.Toast'
+    toastClass = 'Neo.component.Toast'
 
     static getConfig() {return {
         /**
@@ -53,37 +46,26 @@ class Toast extends Base {
         singleton: true
     }}
 
+    /**
+     * @param {Object} config
+     */
     construct(config) {
         super.construct(config);
         Neo.toast = this.createToast.bind(this);
     }
 
-    /**
-     * @param {Object} item
-     */
-    register(item) {
-        super.register(item);
-        this.runQueue();
-    }
-
-    /**
-     * Removes a collection item passed by reference or key
-     * @param {Object|String} item
-     */
-    unregister(item) {
-        super.unregister(item);
-        this.runQueue();
-    }
-
     /**
      * Create the Toast definition and pass it to the Collection
-     *
      * @param {Object} toast
-     * @returns {Object}
+     * @returns {String|null}
      */
     createToast(toast) {
-        let me = this,
-            id;
+        let me = this;
+
+        if (toast.position && !me.running[toast.position]) {
+            Neo.logError('[Neo.manager.Toast] Supported values for slideDirection are: tl, tc, tr, bl, bc, br');
+            return null;
+        }
 
         if (!toast.msg || !toast.appName) {
             !toast.msg     && Neo.logError('[Neo.manager.Toast] Toast has to define a msg');
@@ -91,18 +73,49 @@ class Toast extends Base {
             return null;
         }
 
-        id = Neo.core.IdGenerator.getId('toastmanager-toast');
-
-        toast = {
-            id,
-            toastManagerId: id,
-            ...me.defaultToastConfig,
+        toast = Neo.create({
+            className: this.toastClass,
             ...toast
-        };
+        });
 
-        me.register(toast);
+        toast.on({
+            mounted: me.updateItemsInPosition,
+            scope  : me
+        })
 
-        return toast.toastManagerId;
+        return toast.id;
+    }
+
+    /**
+     * Find the first toast based on the maximum allowed toasts
+     * @returns {*}
+     * @private
+     */
+    findFirstToast() {
+        let me = this,
+            firstToast, item;
+
+        me.filters = [{property: 'running', value: false}];
+
+        for (item of me.map.values()) {
+            if (me.running[item.position].length < me.maxToasts) {
+                firstToast = item;
+                firstToast.running = true;
+                break;
+            }
+        }
+
+        me.clearFilters();
+
+        return firstToast;
+    }
+
+    /**
+     * @param {Object} item
+     */
+    register(item) {
+        super.register(item);
+        this.runQueue();
     }
 
     /**
@@ -110,11 +123,20 @@ class Toast extends Base {
      * @param {String} toastId
      */
     removeToast(toastId) {
-        let me = this;
+        let me    = this,
+            toast = me.get(toastId),
+            position;
+
+        if (!toast) {
+            return;
+        }
+
+        position = toast.position;
 
         // decrease total of displayed toasts for a position
-        me.running[me.map.get(toastId).position]--;
-        me.unregister(toastId);
+        NeoArray.remove(me.running[position], toastId);
+
+        me.updateItemsInPosition(toastId);
     }
 
     /**
@@ -131,36 +153,59 @@ class Toast extends Base {
         }
     }
 
+    /**
+     * @param {Neo.component.Toast} toast
+     */
     showToast(toast) {
-        let toastConfig = Neo.clone(toast);
+        toast.render(true);
+
         // increase total of displayed toasts for a position
-        this.running[toastConfig.position]++
-        // Neo.create does not allow to pass an id
-        delete toastConfig.id;
-        Neo.create(this.toastClass, toastConfig);
+        this.running[toast.position].unshift(toast.id);
+
+        // todo: we could use a mounted listener
+        setTimeout(() => {
+            this.updateItemsInPosition(toast.id);
+        }, 50);
     }
 
     /**
-     * Find the first toast based on the maximum allowed toasts
-     * @returns {*}
+     * Removes a collection item passed by reference or key
+     * @param {Object|String} item
      */
-    findFirstToast() {
-        let me = this,
-            firstToast, item;
-
-        me.filters = [{property: 'running', value: false}];
-        me.filter();
+    unregister(item) {
+        super.unregister(item);
+        this.runQueue();
+    }
 
-        for (item of me.map.values()) {
-            if (me.running[item.position] < me.maxToasts) {
-                firstToast = item;
-                break;
-            }
+    /**
+     * To handle multiple toasts we handle the exact position
+     * from the top or bottom
+     * @param {String} id
+     * @returns {Promise<void>}
+     */
+    async updateItemsInPosition(id) {
+        let me            = this,
+            toast         = me.get(id),
+            position      = toast.position,
+            positionArray = me.running[position],
+            acc           = 0,
+            margin        = me.defaultMargin,
+            moveTo        = position.substring(0, 1) === 't' ? 'top' : 'bottom',
+            component, componentId, index, moveObj, rects;
+
+        rects = await toast.getDomRect(positionArray);
+
+        for ([index, componentId] of positionArray.entries()) {
+            component = Neo.getComponent(componentId);
+            moveObj   = {};
+
+            acc = acc + margin;
+            moveObj[moveTo] = acc + 'px';
+            component.style = moveObj;
+            component.update();
+
+            acc = acc + rects[index].height;
         }
-
-        me.clearFilters();
-
-        return firstToast;
     }
 }
 

package/resources/scss/src/dialog/Toast.scss

@@ -1,190 +0,0 @@
-.neo-toast {
-  z-index: 20; // ensure to be on top of table headers
-  align-items: center;
-  background-color: v(toast-background-color);
-  border-radius: 0.5rem;
-  box-shadow: 0 0.25rem 0.5rem v(toast-shadow-color);
-  color: v(toast-color);
-  display: flex;
-  position: fixed;
-
-  .neo-toast-inner {
-    align-items: center;
-    display: flex;
-
-    &.neo-toast-has-title {
-      .neo-toast-text {
-        text-align: left;
-      }
-    }
-
-    & > div {
-      padding: 0.25em 0.5em;
-    }
-
-    .neo-toast-icon {
-      border-right: 2px solid v(toast-color);
-      flex: 1;
-      font-size: 1.5em;
-    }
-
-    .neo-toast-text {
-      padding: 0.25em 1em;
-      text-align: center;
-
-      .neo-toast-msg {
-        font-size: 0.8em;
-      }
-
-      .neo-toast-title {
-        padding-bottom: 0.2em;
-        text-transform: uppercase;
-      }
-    }
-
-    .neo-toast-close {
-      background: transparent;
-      border: 0;
-      color: inherit;
-      cursor: pointer;
-      font-size: 1.5rem;
-      line-height: 1.5;
-      margin-left: auto;
-    }
-  }
-}
-
-// ui: danger
-.neo-toast-danger {
-  background-color: v(toast-danger-background-color);
-  color: v(toast-danger-color);
-
-  & > div {
-
-    .neo-toast-inner {
-
-      .neo-toast-icon {
-        border-right: 2px solid v(toast-danger-color);
-      }
-    }
-  }
-}
-
-// ui: success
-.neo-toast-success {
-  background-color: v(toast-success-background-color);
-  color: v(toast-success-color);
-
-  & > div {
-
-    .neo-toast-inner {
-
-      .neo-toast-icon {
-        border-right: 2px solid v(toast-success-color);
-      }
-    }
-  }
-}
-
-/* Toast positions */
-.neo-toast-tr {
-  right: 1rem;
-  top: 1rem;
-}
-
-.neo-toast-tc {
-  left: 50%;
-  top: 1rem;
-  transform: translateX(-50%);
-}
-
-.neo-toast-tl {
-  left: 1rem;
-  top: 1rem;
-}
-
-.neo-toast-br {
-  bottom: 1rem;
-  right: 1rem;
-}
-
-.neo-toast-bc {
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.neo-toast-bl {
-  bottom: 1rem;
-  left: 1rem;
-}
-
-/* Toast slide-in animation */
-@keyframes neo-toast-slide-down-in {
-  from {
-    transform: translateY(-150%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes neo-toast-slide-up-in {
-  from {
-    transform: translateY(150%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes neo-toast-slide-left-in {
-  from {
-    transform: translateX(-150%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes neo-toast-slide-right-in {
-  from {
-    transform: translateX(150%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-/* Add the slide-in animation to the toast when the slide-in class is added */
-.neo-toast-slide-down-in {
-  animation: neo-toast-slide-down-in 0.25s ease-out;
-}
-
-.neo-toast-slide-up-in {
-  animation: neo-toast-slide-up-in 0.25s ease-out;
-}
-
-.neo-toast-slide-left-in {
-  animation: neo-toast-slide-left-in 0.25s ease-out;
-}
-
-.neo-toast-slide-right-in {
-  animation: neo-toast-slide-right-in 0.25s ease-out;
-}
-
-/* Toast fade-out animation */
-@keyframes neo-toast-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* Add the fade-out animation to the toast when the fade-out class is added */
-.neo-toast-fade-out {
-  animation: neo-toast-fade-out 0.25s ease-out;
-  animation-fill-mode: forwards;
-}

package/resources/scss/theme-dark/dialog/Toast.scss

@@ -1,13 +0,0 @@
-$neoMap: map-merge($neoMap, (
-        'toast-background-color'   : #083741,
-        'toast-color'              : lightblue,
-        'toast-shadow-color'        : rgba(255, 255, 255, 0.15)
-));
-
-@if $useCssVars == true {
-  :root .neo-theme-dark { // .neo-button
-    --toast-background-color  : #{neo(toast-background-color)};
-    --toast-color             : #{neo(toast-color)};
-    --toast-shadow-color      : #{neo(toast-shadow-color)};
-  }
-}

package/resources/scss/theme-light/dialog/Toast.scss

@@ -1,25 +0,0 @@
-$neoMap: map-merge($neoMap, (
-        'toast-background-color'   : lightblue,
-        'toast-color'              : #083741,
-        'toast-shadow-color'        : rgba(0, 0, 0, 0.15),
-  // ui: danger
-        'toast-danger-background-color'   : #e6adad,
-        'toast-danger-color'              : #410808,
-  // ui: success
-        'toast-success-background-color'   : #b7e6ad,
-        'toast-success-color'              : #124108,
-));
-
-@if $useCssVars == true {
-  :root .neo-theme-light { // .neo-button
-    --toast-background-color  : #{neo(toast-background-color)};
-    --toast-color             : #{neo(toast-color)};
-    --toast-shadow-color      : #{neo(toast-shadow-color)};
-    // ui: danger
-    --toast-danger-background-color  : #{neo(toast-danger-background-color)};
-    --toast-danger-color             : #{neo(toast-danger-color)};
-    // ui: success
-    --toast-success-background-color  : #{neo(toast-success-background-color)};
-    --toast-success-color             : #{neo(toast-success-color)};
-  }
-}