neo.mjs 4.2.7 → 4.3.1

package/src/button/Base.mjs

@@ -6,7 +6,27 @@ import NeoArray  from '../util/Array.mjs';
  * @extends Neo.component.Base
  */
 class Base extends Component {
+    /**
+     * Time in ms for the ripple effect when clicking on the button.
+     * Only active if useRippleEffect is set to true.
+     * @member {Number} rippleEffectDuration=400
+     */
+    rippleEffectDuration = 400
+    /**
+     * Internal flag to store the last setTimeout() id for ripple effect remove node callbacks
+     * @member {Number} #rippleTimeoutId=null
+     * @private
+     */
+    #rippleTimeoutId = null
+
     static getStaticConfig() {return {
+        /**
+         * Valid values for badgePosition
+         * @member {String[]} badgePositions=['bottom-left','bottom-right','top-left','top-right']
+         * @protected
+         * @static
+         */
+        badgePositions: ['bottom-left', 'bottom-right', 'top-left', 'top-right'],
         /**
          * Valid values for iconPosition
          * @member {String[]} iconPositions=['top','right','bottom','left']
@@ -27,6 +47,14 @@ class Base extends Component {
          * @protected
          */
         ntype: 'button',
+        /**
+         * @member {String} badgePosition_='top-right'
+         */
+        badgePosition_: 'top-right',
+        /**
+         * @member {String|null} badgeText_=null
+         */
+        badgeText_: null,
         /**
          * @member {String[]} cls=['neo-button']
          */
@@ -91,9 +119,9 @@ class Base extends Component {
         urlTarget_: '_blank',
         /**
          * True adds an expanding circle on click
-         * @member {Boolean} useRippleEffect_=false
+         * @member {Boolean} useRippleEffect_=true
          */
-        useRippleEffect_: false,
+        useRippleEffect_: true,
         /**
          * @member {Object} _vdom
          */
@@ -101,10 +129,49 @@ class Base extends Component {
         {tag: 'button', type: 'button', cn: [
             {tag: 'span', cls: ['neo-button-glyph']},
             {tag: 'span', cls: ['neo-button-text']},
-            {tag: 'span', cls: ['neo-button-ripple'], removeDom: true}
+            {cls: ['neo-button-badge']},
+            {cls: ['neo-button-ripple-wrapper'], cn: [
+                {cls: ['neo-button-ripple']}
+            ]}
         ]}
     }}
 
+    /**
+     * Triggered after the badgePosition config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetBadgePosition(value, oldValue) {
+        let me      = this,
+            badgeEl = me.getBadgeNode(),
+            cls     = badgeEl.cls || [],
+            vdom    = me.vdom;
+
+        NeoArray.remove(cls, 'neo-' + oldValue);
+        NeoArray.add(cls, 'neo-' + value);
+
+        badgeEl.cls = cls;
+        me.vdom = vdom;
+    }
+
+    /**
+     * Triggered after the badgeText config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetBadgeText(value, oldValue) {
+        let me        = this,
+            badgeNode = me.getBadgeNode(),
+            vdom      = me.vdom;
+
+        badgeNode.html      = value;
+        badgeNode.removeDom = !Boolean(value);
+
+        me.vdom = vdom;
+    }
+
     /**
      * Triggered after the handler config got changed
      * @param {String} value
@@ -112,17 +179,12 @@ class Base extends Component {
      * @protected
      */
     afterSetHandler(value, oldValue) {
-        if (value) {
-            let me           = this,
-                domListeners = me.domListeners;
-
-            domListeners.push({
-                click: value,
-                scope: me.handlerScope || me
-            });
+        let me = this;
 
-            me.domListeners = domListeners;
-        }
+        value && me.addDomListeners({
+            click: value,
+            scope: me.handlerScope || me
+        });
     }
 
     /**
@@ -134,7 +196,7 @@ class Base extends Component {
     afterSetIconCls(value, oldValue) {
         let me       = this,
             vdom     = me.vdom,
-            iconNode = me.getVdomRoot().cn[0];
+            iconNode = me.getIconNode();
 
         NeoArray.remove(iconNode.cls, oldValue);
 
@@ -157,7 +219,7 @@ class Base extends Component {
     afterSetIconColor(value, oldValue) {
         let me       = this,
             vdom     = me.vdom,
-            iconNode = me.getVdomRoot().cn[0];
+            iconNode = me.getIconNode();
 
         if (!iconNode.style) {
             iconNode.style = {};
@@ -206,17 +268,12 @@ class Base extends Component {
      * @protected
      */
     afterSetRoute(value, oldValue) {
-        if (value) {
-            let me           = this,
-                domListeners = me.domListeners;
-
-            domListeners.push({
-                click: me.changeRoute,
-                scope: me
-            });
+        let me = this;
 
-            me.domListeners = domListeners;
-        }
+        value && me.addDomListeners({
+            click: me.changeRoute,
+            scope: me
+        });
     }
 
     /**
@@ -274,17 +331,20 @@ class Base extends Component {
      * @protected
      */
     afterSetUseRippleEffect(value, oldValue) {
-        if (value) {
-            let me           = this,
-                domListeners = me.domListeners;
-
-            domListeners.push({
-                click: me.showRipple,
-                scope: me
-            });
-
-            me.domListeners = domListeners;
+        let me            = this,
+            listener      = {click: me.showRipple, scope: me},
+            rippleWrapper = me.getRippleWrapper(),
+            vdom          = me.vdom;
+
+        if (!value && oldValue) {
+            me.removeDomListeners(listener);
+        } else if (value) {
+            me.addDomListeners(listener);
         }
+
+        // setting the config to false should end running ripple animations
+        rippleWrapper.removeDom = true;
+        me.vdom = vdom;
     }
 
     /**
@@ -322,6 +382,17 @@ class Base extends Component {
         return iconCls;
     }
 
+    /**
+     * Triggered before the badgePosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetBadgePosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'badgePosition');
+    }
+
     /**
      * Triggered before the iconCls config gets changed. Converts the string into an array if needed.
      * @param {Array|String|null} value
@@ -360,16 +431,43 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getBadgeNode() {
+        return this.getVdomRoot().cn[2];
+    }
+
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getIconNode() {
+        return this.getVdomRoot().cn[0];
+    }
+
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getRippleWrapper() {
+        return this.getVdomRoot().cn[3];
+    }
+
     /**
      * @param {Object} data
      */
     async showRipple(data) {
-        let me         = this,
-            buttonRect = data.path[0].rect,
-            diameter   = Math.max(buttonRect.height, buttonRect.width),
-            radius     = diameter / 2,
-            vdom       = me.vdom,
-            rippleEl   = vdom.cn[2];
+        let me                   = this,
+            buttonRect           = data.path[0].rect,
+            diameter             = Math.max(buttonRect.height, buttonRect.width),
+            radius               = diameter / 2,
+            vdom                 = me.vdom,
+            rippleEffectDuration = me.rippleEffectDuration,
+            rippleWrapper        = me.getRippleWrapper(),
+            rippleEl             = rippleWrapper.cn[0],
+            rippleTimeoutId;
 
         rippleEl.style = Object.assign(rippleEl.style || {}, {
             animation: 'none',
@@ -379,14 +477,24 @@ class Base extends Component {
             width    : `${diameter}px`
         });
 
-        delete rippleEl.removeDom;
+        delete rippleWrapper.removeDom;
 
         me.vdom = vdom;
 
         await Neo.timeout(1);
 
-        rippleEl.style.animation = 'ripple 400ms linear';
+        rippleEl.style.animation = `ripple ${rippleEffectDuration}ms linear`;
         me.vdom = vdom;
+
+        me.#rippleTimeoutId = rippleTimeoutId = setTimeout(() => {
+            // we do not want to break animations when clicking multiple times
+            if (me.#rippleTimeoutId === rippleTimeoutId) {
+                me.#rippleTimeoutId = null;
+
+                rippleWrapper.removeDom = true;
+                me.vdom = vdom;
+            }
+        }, rippleEffectDuration);
     }
 }
 

package/src/calendar/view/YearComponent.mjs

@@ -178,15 +178,12 @@ class YearComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: me.onNavButtonClick, delegate: '.neo-nav-button', scope: me},
             {wheel: me.onWheel, scope: me}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         if (me.calendarStore.getCount() > 0 && me.eventStore.getCount() > 0) {
             me.createMonths(true); // silent update

package/src/calendar/view/calendars/ColorsList.mjs

@@ -21,6 +21,10 @@ class ColorsList extends List {
          * @member {String[]} cls=['neo-calendars-colors-list','neo-list']
          */
         cls: ['neo-calendars-colors-list', 'neo-list'],
+        /**
+         * @member {Boolean} useWrapperNode=false
+         */
+        useWrapperNode: false,
         /**
          * The list gets used as a form field, so we are adjusting the selection based on this config
          * @member {String} value_=null
@@ -63,6 +67,20 @@ class ColorsList extends List {
         }};
     }
 
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom;
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode;
+    }
+
     /**
      *
      */

package/src/calendar/view/calendars/EditContainer.mjs

@@ -64,9 +64,7 @@ class EditContainer extends FormContainer {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        if (value) {
-            this.getField('name').focus();
-        }
+        value && this.getField('name').focus();
     }
 
     /**
@@ -117,12 +115,12 @@ class EditContainer extends FormContainer {
 
         if (record) {
             me.colorsList = Neo.create({
-                module   : ColorsList,
-                appName  : me.appName,
-                listeners: {change: me.onColorChange, scope: me},
-                parentId : me.parentId,
-                style    : {marginTop: '0.5em'},
-                value    : record.color,
+                module      : ColorsList,
+                appName     : me.appName,
+                listeners   : {change: me.onColorChange, scope: me},
+                parentId    : me.parentId,
+                value       : record.color,
+                wrapperStyle: {marginTop: '0.2em'},
                 ...me.colorsListConfig
             });
 

package/src/calendar/view/month/Component.mjs

@@ -160,15 +160,12 @@ class Component extends BaseComponent {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {dblclick: me.onEventDoubleClick, delegate: 'neo-event', scope: me},
             {wheel   : me.onWheel, scope: me}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         if (me.calendarStore.getCount() > 0 && me.eventStore.getCount() > 0) {
             me.needsEventUpdate = true;

package/src/calendar/view/week/Component.mjs

@@ -219,15 +219,12 @@ class Component extends BaseComponent {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {dblclick: me.onEventDoubleClick, scope: me, delegate: '.neo-event'},
             {wheel   : me.onWheel,            scope: me}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         me.timeAxis = Neo.create(TimeAxisComponent, {
             appName  : me.appName,

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -29,22 +29,19 @@ class DragDrop extends Base {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            columnOpts   = {scope: me, delegate: '.neo-c-w-column'},
-            eventOpts    = {scope: me, delegate: '.neo-event'},
-            owner        = me.owner,
-            domListeners = owner.domListeners;
+        let me         = this,
+            columnOpts = {scope: me, delegate: '.neo-c-w-column'},
+            eventOpts  = {scope: me, delegate: '.neo-event'},
+            owner      = me.owner;
 
-        domListeners.push(
+        owner.addDomListeners([
             {'drag:end'  : me.onColumnDragEnd,   ...columnOpts},
             {'drag:end'  : me.onEventDragEnd,    ...eventOpts},
             {'drag:move' : me.onColumnDragMove,  ...columnOpts},
             {'drag:move' : me.onEventDragMove,   ...eventOpts},
             {'drag:start': me.onColumnDragStart, ...columnOpts},
             {'drag:start': me.onEventDragStart,  ...eventOpts}
-        );
-
-        owner.domListeners = domListeners;
+        ]);
     }
 
     /**