neo.mjs 4.2.6 → 4.3.0

package/resources/scss/theme-dark/button/Base.scss

@@ -6,6 +6,8 @@ $neoMap: map-merge($neoMap, (
     'button-background-image'         : linear-gradient(#434749, #323536),
     'button-background-gradient-end'  : #323536,
     'button-background-gradient-start': #434749,
+    'button-badge-background-color'   : #64b5f6,
+    'button-badge-color'              : #282828,
     'button-border'                   : 1px solid #2b2b2b,
     'button-border-radius'            : 0,
     'button-glyph-color'              : #bbb,
@@ -15,6 +17,7 @@ $neoMap: map-merge($neoMap, (
     'button-margin'                   : 2px,
     'button-padding'                  : 5px 12px 5px 12px,
     'button-pressed-border-color'     : #5d83a7,
+    'button-ripple-background-color'  : darken(#5d83a7, 10%),
     'button-text-color'               : #bbb,
     'button-text-font-family'         : #{neo(neo-font-family)},
     'button-text-font-size'           : 11px,
@@ -33,6 +36,8 @@ $neoMap: map-merge($neoMap, (
         --button-background-image         : #{neo(button-background-image)};
         --button-background-gradient-end  : #{neo(button-background-gradient-end)};
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
+        --button-badge-background-color   : #{neo(button-badge-background-color)};
+        --button-badge-color              : #{neo(button-badge-color)};
         --button-border                   : #{neo(button-border)};
         --button-border-radius            : #{neo(button-border-radius)};
         --button-glyph-color              : #{neo(button-glyph-color)};
@@ -42,6 +47,7 @@ $neoMap: map-merge($neoMap, (
         --button-margin                   : #{neo(button-margin)};
         --button-padding                  : #{neo(button-padding)};
         --button-pressed-border-color     : #{neo(button-pressed-border-color)};
+        --button-ripple-background-color  : #{neo(button-ripple-background-color)};
         --button-text-color               : #{neo(button-text-color)};
         --button-text-font-family         : #{neo(button-text-font-family)};
         --button-text-font-size           : #{neo(button-text-font-size)};
@@ -50,4 +56,4 @@ $neoMap: map-merge($neoMap, (
         --button-text-transform           : #{neo(button-text-transform)};
         --button-use-gradients            : #{neo(button-use-gradients)};
     }
-}
+}

package/resources/scss/theme-dark/table/header/Button.scss

@@ -1,15 +1,17 @@
 $neoMap: map-merge($neoMap, (
-    'table-header-button-background-color': #323232,
-    'table-header-button-background-image': linear-gradient(#3c3f41, #323232),
-    'table-header-button-color'           : #bbb,
-    'table-header-button-glyph-color'     : #bbb
+    'table-header-button-background-color'       : #323232,
+    'table-header-button-background-image'       : linear-gradient(#3c3f41, #323232),
+    'table-header-button-color'                  : #bbb,
+    'table-header-button-glyph-color'            : #bbb,
+    'table-header-button-ripple-background-color': darken(#5d83a7, 10%),
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-dark { // .neo-table-header
-        --table-header-button-background-color: #{neo(table-header-button-background-color)};
-        --table-header-button-background-image: #{neo(table-header-button-background-image)};
-        --table-header-button-color           : #{neo(table-header-button-color)};
-        --table-header-button-glyph-color     : #{neo(table-header-button-glyph-color)};
+        --table-header-button-background-color       : #{neo(table-header-button-background-color)};
+        --table-header-button-background-image       : #{neo(table-header-button-background-image)};
+        --table-header-button-color                  : #{neo(table-header-button-color)};
+        --table-header-button-glyph-color            : #{neo(table-header-button-glyph-color)};
+        --table-header-button-ripple-background-color: #{neo(table-header-button-ripple-background-color)};
     }
-}
+}

package/resources/scss/theme-light/button/Base.scss

@@ -6,6 +6,8 @@ $neoMap: map-merge($neoMap, (
     'button-background-image'         : none,
     'button-background-gradient-end'  : #323536,
     'button-background-gradient-start': #434749,
+    'button-badge-background-color'   : #1c60a0,
+    'button-badge-color'              : #fff,
     'button-border'                   : 1px solid #ddd,
     'button-border-radius'            : 3px,
     'button-glyph-color'              : #1c60a0,
@@ -15,6 +17,7 @@ $neoMap: map-merge($neoMap, (
     'button-margin'                   : 2px,
     'button-padding'                  : 5px 12px 5px 12px,
     'button-pressed-border-color'     : #1c60a0,
+    'button-ripple-background-color'  : lighten(#1c60a0, 50%),
     'button-text-color'               : #1c60a0,
     'button-text-font-family'         : #{neo(neo-font-family)},
     'button-text-font-size'           : 11px,
@@ -33,6 +36,8 @@ $neoMap: map-merge($neoMap, (
         --button-background-image         : #{neo(button-background-image)};
         --button-background-gradient-end  : #{neo(button-background-gradient-end)};
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
+        --button-badge-background-color   : #{neo(button-badge-background-color)};
+        --button-badge-color              : #{neo(button-badge-color)};
         --button-border                   : #{neo(button-border)};
         --button-border-radius            : #{neo(button-border-radius)};
         --button-glyph-color              : #{neo(button-glyph-color)};
@@ -42,6 +47,7 @@ $neoMap: map-merge($neoMap, (
         --button-margin                   : #{neo(button-margin)};
         --button-padding                  : #{neo(button-padding)};
         --button-pressed-border-color     : #{neo(button-pressed-border-color)};
+        --button-ripple-background-color  : #{neo(button-ripple-background-color)};
         --button-text-color               : #{neo(button-text-color)};
         --button-text-font-family         : #{neo(button-text-font-family)};
         --button-text-font-size           : #{neo(button-text-font-size)};
@@ -50,4 +56,4 @@ $neoMap: map-merge($neoMap, (
         --button-text-transform           : #{neo(button-text-transform)};
         --button-use-gradients            : #{neo(button-use-gradients)};
     }
-}
+}

package/resources/scss/theme-light/table/header/Button.scss

@@ -1,15 +1,17 @@
 $neoMap: map-merge($neoMap, (
-    'table-header-button-background-color': #5d83a7,
-    'table-header-button-background-image': none,
-    'table-header-button-color'           : #fff,
-    'table-header-button-glyph-color'     : #fff
+    'table-header-button-background-color'       : #5d83a7,
+    'table-header-button-background-image'       : none,
+    'table-header-button-color'                  : #fff,
+    'table-header-button-glyph-color'            : #fff,
+    'table-header-button-ripple-background-color': darken(#5d83a7, 10%),
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-light { // .neo-table-header-button
-        --table-header-button-background-color: #{neo(table-header-button-background-color)};
-        --table-header-button-background-image: #{neo(table-header-button-background-image)};
-        --table-header-button-color           : #{neo(table-header-button-color)};
-        --table-header-button-glyph-color     : #{neo(table-header-button-glyph-color)};
+        --table-header-button-background-color       : #{neo(table-header-button-background-color)};
+        --table-header-button-background-image       : #{neo(table-header-button-background-image)};
+        --table-header-button-color                  : #{neo(table-header-button-color)};
+        --table-header-button-glyph-color            : #{neo(table-header-button-glyph-color)};
+        --table-header-button-ripple-background-color: #{neo(table-header-button-ripple-background-color)};
     }
-}
+}

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']
          */
@@ -89,16 +117,61 @@ class Base extends Component {
          * @member {String} urlTarget_='_blank'
          */
         urlTarget_: '_blank',
+        /**
+         * True adds an expanding circle on click
+         * @member {Boolean} useRippleEffect_=true
+         */
+        useRippleEffect_: true,
         /**
          * @member {Object} _vdom
          */
         _vdom:
         {tag: 'button', type: 'button', cn: [
             {tag: 'span', cls: ['neo-button-glyph']},
-            {tag: 'span', cls: ['neo-button-text']}
+            {tag: 'span', cls: ['neo-button-text']},
+            {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
@@ -106,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
+        });
     }
 
     /**
@@ -128,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);
 
@@ -151,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 = {};
@@ -200,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
+        });
     }
 
     /**
@@ -261,6 +324,29 @@ class Base extends Component {
         me.vdom = vdom;
     }
 
+    /**
+     * Triggered after the useRippleEffect config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseRippleEffect(value, oldValue) {
+        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;
+    }
+
     /**
      * Triggered after the urlTarget config got changed
      * @param {String} value
@@ -296,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
@@ -333,6 +430,72 @@ class Base extends Component {
             Neo.Main.setRoute({value: me.route});
         }
     }
+
+    /**
+     * 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,
+            rippleEffectDuration = me.rippleEffectDuration,
+            rippleWrapper        = me.getRippleWrapper(),
+            rippleEl             = rippleWrapper.cn[0],
+            rippleTimeoutId;
+
+        rippleEl.style = Object.assign(rippleEl.style || {}, {
+            animation: 'none',
+            left     : `${data.clientX - buttonRect.left - radius}px`,
+            height   : `${diameter}px`,
+            top      : `${data.clientY - buttonRect.top - radius}px`,
+            width    : `${diameter}px`
+        });
+
+        delete rippleWrapper.removeDom;
+
+        me.vdom = vdom;
+
+        await Neo.timeout(1);
+
+        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);
+    }
 }
 
 Neo.applyClassConfig(Base);

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

package/src/component/Base.mjs

@@ -105,7 +105,7 @@ class Base extends CoreBase {
          * afterSetStayOnHover(value, oldValue) {
          *     if (value) {
          *         let me           = this,
-         *             domListeners = me.domListeners || [];
+         *             domListeners = me.domListeners;
          *
          *         domListeners.push(
          *             {mouseenter: me.onMouseEnter, scope: me},
@@ -432,6 +432,22 @@ class Base extends CoreBase {
         this.cls = cls;
     }
 
+    /**
+     * Convenience shortcut to add additional dom listeners
+     * @param {Object|Object[]} value
+     */
+    addDomListeners(value) {
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+
+        let domListeners = this.domListeners;
+
+        domListeners.push(...value);
+
+        this.domListeners = domListeners;
+    }
+
     /**
      * Either a string like 'color: red; background-color: blue;'
      * or an object containing style attributes

package/src/component/Carousel.mjs

@@ -99,24 +99,12 @@ class Carousel extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
-
-        domListeners.push({
-            click: {
-                fn      : me.onCarouselBtnClick,
-                delegate: '.neo-carousel-btn',
-                scope   : me
-            }
-        }, {
-            click: {
-                fn      : me.onClick,
-                delegate: '.neo-carousel-item',
-                scope   : me
-            }
-        });
+        let me = this;
 
-        me.domListeners = domListeners;
+        me.addDomListeners([
+            {click: me.onCarouselBtnClick, delegate: '.neo-carousel-btn',  scope: me},
+            {click: me.onClick,            delegate: '.neo-carousel-item', scope: me}
+        ]);
     }
 
     /**

package/src/component/Chip.mjs

@@ -63,19 +63,14 @@ class Chip extends Component {
     construct(config) {
         super.construct(config);
 
-        let me = this,
-            domListeners;
+        let me = this;
 
         if (me.useDomListeners) {
-            domListeners = me.domListeners;
-
-            domListeners.push({
+            me.addDomListeners({
                 click   : me.onCloseButtonClick,
                 delegate: 'neo-chip-close-button',
                 scope   : me
             });
-
-            me.domListeners = domListeners;
         }
     }
 

package/src/component/Circle.mjs

@@ -132,9 +132,8 @@ class Circle extends Component {
             cls : ['neo-circle', 'neo-circle-back']
         });
 
-        let me           = this,
-            domListeners = me.domListeners,
-            vdom         = me.vdom;
+        let me   = this,
+            vdom = me.vdom;
 
         if (!me.backsideIconPath) {
             me.backsideIconPath = Neo.config.resourcesPath + 'images/circle/';
@@ -144,7 +143,7 @@ class Circle extends Component {
             me.itemImagePath = Neo.config.resourcesPath + 'examples/';
         }
 
-        domListeners.push({
+        me.addDomListeners([{
             mouseenter: me.expand,
             mouseleave: me.collapse,
             scope     : me
@@ -166,9 +165,7 @@ class Circle extends Component {
             wheel      : me.onMouseWheel,
             delegate   : 'neo-circle',
             scope      : me
-        });
-
-        me.domListeners = domListeners;
+        }]);
 
         me.store = Neo.create(Collection, {
             keyProperty: 'id'

package/src/component/DateSelector.mjs

@@ -143,15 +143,12 @@ class DateSelector extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
-
-        domListeners.push({
-            click: {fn: me.onComponentClick, scope: me},
-            wheel: {fn: me.onComponentWheel, scope: me}
-        });
+        let me = this;
 
-        me.domListeners = domListeners;
+        me.addDomListeners([
+            {click: me.onComponentClick, scope: me},
+            {wheel: me.onComponentWheel, scope: me}
+        ]);
 
         me.updateHeaderMonth(0, 0, true);
         me.updateHeaderYear(0, true);