neo.mjs 4.4.19 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.19",
+    "version": "4.5.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -0,0 +1,164 @@
+.neo-toast {
+    // todo: theming
+    --toast-background-color: lightblue;
+    --toast-color           : #083741;
+
+    align-items     : center;
+    background-color: var(--toast-background-color);
+    border-radius   : 0.5rem;
+    box-shadow      : 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
+    color           : var(--toast-color);
+    display         : flex;
+    position        : fixed;
+
+    & > div {
+        background-color: transparent;
+
+        .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 var(--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;
+                }
+            }
+
+            .neo-toast-close {
+                background : transparent;
+                border     : 0;
+                color      : inherit;
+                cursor     : pointer;
+                font-size  : 1.5rem;
+                line-height: 1.5;
+                margin-left: auto;
+            }
+        }
+    }
+}
+
+/* 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/src/dialog/Toast.mjs

@@ -1,25 +1,209 @@
 import Base         from './Base.mjs';
-import ToastManager from '../manager/ToastDialog.mjs';
+import ToastManager from '../manager/Toast.mjs';
 
 /**
  * @class Neo.dialog.Toast
  * @extends Neo.dialog.Base
+ *
+ * @example
+        Neo.toast({
+            // mandatory
+            appName         : this.component.appName,
+            msg             : 'Alarm was set to 11:30 for journey into Neo development',
+            // optional                        defaults
+            closable        : true,         // false
+            iconCls         : 'fa fa-bell', // null
+            maxWidth        : 300,          // 250
+            position        : 'br',         // 'tr'
+            slideDirection  : 'right',      // 'down'
+            title           : 'Alarm Clock' // null
+        })
  */
 class Toast extends Base {
+    /**
+     * If true makes the toast sticky and show a close icon
+     * @member {Boolean} closable=false
+     */
+    closable = false
+    /**
+     * Change to use your own fade out animation
+     * @member {String} fadeOutCls='neo-toast-fade-out'
+     */
+    fadeOutCls = 'neo-toast-fade-out'
+    /**
+     * If set, it shows this icon in front of the text
+     * e.g. 'fa fa-cog'
+     * @member {String|null} iconCls=null
+     */
+    iconCls = null
+    /**
+     * Used by the ToastManager
+     * @member {Boolean} running=false
+     * @private
+     */
+    running = false
+    /**
+     * Change the complete styling with custom cls
+     * @member {String} toastCls='neo-toast-'
+     */
+    toastCls = 'neo-toast-'
+    /**
+     * Used by the ToastManager
+     * @member {String|null} toastManagerId=null
+     * @private
+     */
+    toastManagerId = null
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.dialog.Toast'
          * @protected
          */
-        className: 'Neo.dialog.Toast'
+        className: 'Neo.dialog.Toast',
+        /**
+         * @member {String} ntype='toast'
+         * @protected
+         */
+        ntype: 'toast',
+        /**
+         * The Toast should not be moved
+         * @member {Boolean} draggable=false
+         */
+        draggable: false,
+        /**
+         * Header is not meant to be shown.
+         * @member {Object} headerConfig={hidden:true}
+         */
+        headerConfig: {
+            hidden: true
+        },
+        /**
+         * Limits the width of the Toast
+         * @member {Number} maxWidth=250
+         */
+        maxWidth: 250,
+        /**
+         * Sets the minimum height of the Toast
+         * @member {Number} minHeight=50
+         */
+        minHeight: 50,
+        /**
+         * Your message. You can also pass in an iconCls
+         * @member {String|null} msg_=null
+         */
+        msg_: null,
+        /**
+         * Describes the position of the toast, e.g. bl=bottom-left
+         * This creates a cls `toastCls + position`
+         * @member {'tl'|'tc'|'tr'|'bl'|'bc'|'br'} position='tr'
+         */
+        position_: 'tr',
+        /**
+         * @member {Boolean} resizable=false
+         */
+        resizable: false,
+        /**
+         * Describes which direction from which side the toasts slides-in
+         * This creates a cls `toastCls + slide- + direction + in`
+         * @member {'down'|'up'|'left'|'right'} slideDirection_=null
+         */
+        slideDirection_: 'down',
+        /**
+         * Timeout in ms after which the toast is removed
+         * @member {Number} timeout_=3000
+         */
+        timeout_: 3000,
+        /**
+         * @member {String|null} title=null
+         */
+        title: null,
+        /**
+         * @member {Function} itemTpl
+         */
+        itemTpl: data => {
+            let cls = data.cls;
+
+            return [
+                {cls: [`${cls}icon`, data.iconCls], removeDom: !data.iconCls},
+                {cls: `${cls}text`, cn: [
+                    {cls: `${cls}title`, innerHTML: `${data.title}`, removeDom: !data.title},
+                    {cls: `${cls}msg`,   innerHTML: `${data.msg}`}
+                ]},
+                {cls: `${cls}close fa fa-close`, removeDom: !data.closable}
+        ]}
     }}
 
     /**
-     * @param {Object} config
+     * Using the afterSetMsg to trigger the setup of the dom
+     * A new container is added as an item.
+     * We cannot use the vdom here.
+     *
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetMsg(value, oldValue) {
+        let me       = this,
+            toastCls = me.toastCls,
+            data     = {closable: me.closable, cls: toastCls, iconCls: me.iconCls, msg: me.msg, title: me.title},
+            titleCls = (me.title && me.iconCls) ? `${toastCls}has-title` : '',
+            vdom     = {cn: me.itemTpl(data)};
+
+        me.add({
+            cls: [`${toastCls}inner`, titleCls],
+            vdom
+        });
+
+        // if closable add a listener to the close-element
+        me.closable && me.addDomListeners([
+            {click: {fn: me.unregister, delegate: `.${me.toastCls}close`, scope: me}}
+        ])
+    }
+
+    /**
+     * Apply a cls, based on the position
+     * @param {String} value
+     * @param {String} oldValue
      */
-    construct(config) {
-        super.construct(config);
-        ToastManager.register(this);
+    afterSetPosition(value, oldValue) {
+        value && this.addCls(`${this.toastCls}${value}`)
+    }
+
+    /**
+     * Apply a cls, based on the slideDirection
+     * @param {String} value
+     * @param {String} oldValue
+     */
+    afterSetSlideDirection(value, oldValue) {
+        value && this.addCls(`${this.toastCls}slide-${value}-in`)
+    }
+
+    /**
+     * Close the toast after the timeout if not closable
+     * @param {Number} value
+     * @param {Number} oldValue
+     */
+    async afterSetTimeout(value, oldValue) {
+        if (!this.closable && value) {
+            await Neo.timeout(value);
+            this.unregister();
+        }
+    }
+
+    /**
+     * After the close-click or timeout, we unregister the toast
+     * from the ToastManager
+     */
+    unregister() {
+        let me = this;
+
+        me.addDomListeners({
+            animationend: function () {
+                ToastManager.removeToast(me.toastManagerId);
+                me.destroy(true);
+            }
+        })
+
+        me.addCls(me.fadeOutCls);
     }
 }
 

package/src/manager/Toast.mjs

@@ -0,0 +1,173 @@
+import Base from './Base.mjs';
+
+/**
+ * See Neo.dialog.Toast for examples
+ * @class Neo.manager.Toast
+ * @extends Neo.manager.Base
+ * @singleton
+ */
+class Toast extends Base {
+    /**
+     * This is the default config for the Neo.dialog.Toast
+     * @member {Object}
+     */
+    defaultToastConfig = {
+        closable      : false,
+        cls           : ['neo-toast'],
+        maxWidth      : 250,
+        position      : 'tr',
+        running       : false,
+        slideDirection: 'down',
+        timeout       : 3000,
+        title         : null
+    }
+    /**
+     * Currently only 1 is supported, because they would overlap
+     * @member {1} maxToasts=1
+     */
+    maxToasts = 1
+    /**
+     * Counts the currently running Toasts per area
+     * @member {Object} running
+     */
+    running = {
+        bc: 0, bl: 0, br: 0,
+        tc: 0, tl: 0, tr: 0
+    }
+    /**
+     * If you prefer your own class to open, override here
+     * @member {String} toastClass='Neo.dialog.Toast'
+     */
+    toastClass = 'Neo.dialog.Toast'
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.manager.Toast'
+         * @protected
+         */
+        className: 'Neo.manager.Toast',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }}
+
+    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}
+     */
+    createToast(toast) {
+        let me = this,
+            id;
+
+        if (!toast.msg || !toast.appName) {
+            !toast.msg     && Neo.logError('[Neo.manager.Toast] Toast has to define a msg');
+            !toast.appName && Neo.logError('[Neo.manager.Toast] Toast has to define an appName. Typically me.appName.');
+            return null;
+        }
+
+        id = Neo.core.IdGenerator.getId('toastmanager-toast');
+
+        toast = {
+            id,
+            toastManagerId: id,
+            ...me.defaultToastConfig,
+            ...toast
+        };
+
+        me.register(toast);
+
+        return toast.toastManagerId;
+    }
+
+    /**
+     * Removes a task from collection.
+     * @param {String} toastId
+     */
+    removeToast(toastId) {
+        let me = this;
+
+        // decrease total of displayed toasts for a position
+        me.running[me.map.get(toastId).position]--;
+        me.unregister(toastId);
+    }
+
+    /**
+     * Runs a ToastManager to show an item from collection.
+     */
+    runQueue() {
+        let me = this,
+            toast;
+
+        if (me.getCount > 0) {
+            toast = me.findFirstToast();
+
+            toast && me.showToast(toast)
+        }
+    }
+
+    showToast(toast) {
+        let toastConfig = Neo.clone(toast);
+        // 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);
+    }
+
+    /**
+     * Find the first toast based on the maximum allowed toasts
+     * @returns {*}
+     */
+    findFirstToast() {
+        let me = this,
+            firstToast, item;
+
+        me.filters = [{property: 'running', value: false}];
+        me.filter();
+
+        for (item of me.map.values()) {
+            if (me.running[item.position] < me.maxToasts) {
+                firstToast = item;
+                break;
+            }
+        }
+
+        me.clearFilters();
+
+        return firstToast;
+    }
+}
+
+Neo.applyClassConfig(Toast);
+
+let instance = Neo.create(Toast);
+
+Neo.applyToGlobalNs(instance);
+
+export default instance;

package/src/manager/ToastDialog.mjs

@@ -1,29 +0,0 @@
-import Base from '../manager/Base.mjs';
-
-/**
- * @class Neo.manager.ToastDialog
- * @extends Neo.manager.Base
- * @singleton
- */
-class ToastDialog extends Base {
-    static getConfig() {return {
-        /**
-         * @member {String} className='Neo.manager.ToastDialog'
-         * @protected
-         */
-        className: 'Neo.manager.ToastDialog',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
-    }}
-}
-
-Neo.applyClassConfig(ToastDialog);
-
-let instance = Neo.create(ToastDialog);
-
-Neo.applyToGlobalNs(instance);
-
-export default instance;