neo.mjs 4.6.2 → 4.6.4

package/src/component/Toast.mjs

@@ -0,0 +1,282 @@
+import Base         from '../component/Base.mjs';
+import ToastManager from '../manager/Toast.mjs';
+import NeoArray     from "../util/Array.mjs";
+
+/**
+ * @class Neo.component.Toast
+ * @extends Neo.component.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',      // 'right'
+            title           : 'Alarm Clock' // null
+        })
+ */
+class Toast extends Base {
+    /**
+     * Used by the ToastManager
+     * @member {Boolean} running=false
+     * @private
+     */
+    running = false
+    /**
+     * Timeout in ms after which the toast is removed
+     * @member {Number} timeout=3000
+     */
+    timeout = 3000
+
+    static getStaticConfig() {return {
+        /**
+         * Valid values for positions
+         * @member {String[]} positions = ['tl', 'tc', 'tr', 'bl', 'bc', 'br']
+         * @protected
+         * @static
+         */
+        positions: ['tl', 'tc', 'tr', 'bl', 'bc', 'br'],
+        /**
+         * True automatically applies the core/Observable.mjs mixin
+         * @member {String[]} slideDirections = ['down', 'up', 'left', 'right']
+         * @static
+         */
+        slideDirections: ['down', 'up', 'left', 'right']
+    }}
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.component.Toast'
+         * @protected
+         */
+        className: 'Neo.component.Toast',
+        /**
+         * @member {String} ntype='toast'
+         * @protected
+         */
+        ntype: 'toast',
+        /**
+         * @member {String[]} baseCls=['neo-toast']
+         * @protected
+         */
+        baseCls: ['neo-toast'],
+        /**
+         * If true makes the toast sticky and show a close icon
+         * @member {Boolean} closable=false
+         */
+        closable_: false,
+        /**
+         * If set, it shows this icon in front of the text
+         * e.g. 'fa fa-cog'
+         * @member {String|null} iconCls=null
+         */
+        iconCls_: null,
+        /**
+         * 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 `noe-toast-position`
+         * @member {'tl'|'tc'|'tr'|'bl'|'bc'|'br'} position='tr'
+         */
+        position_: 'tr',
+        /**
+         * Describes which direction from which side the toasts slides-in
+         * This creates a cls `neo-toast-slide-${direction}-in`
+         * @member {'down'|'up'|'left'|'right'} slideDirection_='right'
+         */
+        slideDirection_: 'right',
+        /**
+         * Adds a title to the toast
+         * @member {Number} title_=null
+         */
+        title_: null,
+        /**
+         * @member {String|null} title=null
+         */
+        vdom: {cn: [{
+            cls: 'neo-toast-inner', cn: [
+                {cls: ['neo-toast-icon'], removeDom: true},
+                {cls: 'neo-toast-text', cn: [
+                    {cls: ['neo-toast-title'], removeDom: true},
+                    {cls: 'neo-toast-msg'}
+                ]},
+                {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
+            ]
+        }]}
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        // click listener for close
+        me.addDomListeners([
+            {click: {fn: me.unregister, delegate: '.neo-toast-close', scope: me}}
+        ]);
+
+        ToastManager.register(me);
+    }
+
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetClosable(value, oldValue) {
+        let vdom = this.getVdomInner().cn[2];
+
+        vdom.removeDom = !value;
+    }
+
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetIconCls(value, oldValue) {
+        let vdom = this.getVdomInner().cn[0],
+            cls = vdom.cls,
+            clsFn = !!value ? 'add' : 'remove';
+
+        vdom.removeDom = Neo.isEmpty(value);
+        NeoArray[clsFn](cls, value);
+    }
+
+    /**
+     * 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 vdom     = this.getTextRootVdom().cn[1];
+
+        vdom.innerHTML = value;
+    }
+
+    /**
+     * Apply a cls, based on the position
+     * @param {String} value
+     * @param {String} oldValue
+     */
+    afterSetPosition(value, oldValue) {
+        value && this.addCls(`neo-toast-${value}`)
+    }
+
+    /**
+     * Apply a cls, based on the slideDirection
+     * @param {String} value
+     * @param {String} oldValue
+     */
+    afterSetSlideDirection(value, oldValue) {
+        value && this.addCls(`neo-toast-slide-${value}-in`)
+    }
+
+    /**
+     * Close the toast after the mounted if not closable
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this;
+
+        if (!me.closable && value) {
+            setTimeout(() => {
+                this.destroy(true);
+            }, me.timeout)
+        }
+    }
+
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetTitle(value, oldValue) {
+        let vdom = this.getTextRootVdom().cn[0],
+            clsFn = !!value ? 'add' : 'remove';
+
+        vdom.removeDom = Neo.isEmpty(value);
+        vdom.innerHTML = value;
+        NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
+    }
+
+    /**
+     * Triggered before the position config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetPosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'position');
+    }
+
+    /**
+     * Triggered before the slideDirection config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetSlideDirection(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'slideDirection');
+    }
+
+    /**
+     *
+     */
+    async destroy(...args) {
+        let me = this;
+
+        me.addDomListeners({
+            animationend: function () {
+                ToastManager.removeToast(me.id);
+                ToastManager.unregister(me);
+                me.destroy(true);
+            }
+        });
+
+        me.addCls('neo-toast-fade-out')
+    }
+
+    /**
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {Object} vdom
+     */
+    getTextRootVdom() {
+        return this.getVdomInner().cn[1];
+    }
+
+    /**
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {Object} vdom
+     */
+    getVdomInner() {
+        return this.vdom.cn[0];
+    }
+}
+
+Neo.applyClassConfig(Toast);
+
+export default Toast;

package/src/form/field/Text.mjs

@@ -908,15 +908,17 @@ class Text extends Base {
         let me  = this,
             cls = me.cls;
 
-        NeoArray.add(cls, 'neo-focus');
-        me.cls = cls;
+        if (!me.readOnly) {
+            NeoArray.add(cls, 'neo-focus');
+            me.cls = cls;
 
-        if (me.labelPosition === 'inline') {
-            if (me.centerBorderElWidth) {
-                me.getCenterBorderEl().width = me.centerBorderElWidth;
-                me.update();
-            } else {
-                me.updateCenterBorderElWidth(false);
+            if (me.labelPosition === 'inline') {
+                if (me.centerBorderElWidth) {
+                    me.getCenterBorderEl().width = me.centerBorderElWidth;
+                    me.update();
+                } else {
+                    me.updateCenterBorderElWidth(false);
+                }
             }
         }
     }
@@ -931,16 +933,18 @@ class Text extends Base {
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
             cls            = me.cls;
 
-        me.validate(); // silent
+        if (!me.readOnly) {
+            me.validate(); // silent
 
-        NeoArray.remove(cls, 'neo-focus');
-        me.cls = cls;
+            NeoArray.remove(cls, 'neo-focus');
+            me.cls = cls;
 
-        if (centerBorderEl && me.isEmpty()) {
-            delete centerBorderEl.width;
-        }
+            if (centerBorderEl && me.isEmpty()) {
+                delete centerBorderEl.width;
+            }
 
-        me.update();
+            me.update();
+        }
     }
 
     /**
@@ -969,20 +973,26 @@ class Text extends Base {
      * @param {Object} data
      */
     onMouseEnter(data) {
-        let cls = this.cls;
+        let me  = this,
+            cls = me.cls;
 
-        NeoArray.add(cls, 'neo-hovered');
-        this.cls = cls;
+        if (!me.readOnly) {
+            NeoArray.add(cls, 'neo-hovered');
+            me.cls = cls;
+        }
     }
 
     /**
      * @param {Object} data
      */
     onMouseLeave(data) {
-        let cls = this.cls;
+        let me  = this,
+            cls = me.cls;
 
-        NeoArray.remove(cls, 'neo-hovered');
-        this.cls = cls;
+        if (!me.readOnly) {
+            NeoArray.remove(cls, 'neo-hovered');
+            me.cls = cls;
+        }
     }
 
     /**

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/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)};
-  }
-}