neo.mjs 3.0.2 → 3.0.6

package/examples/list/animate/List.mjs

@@ -36,7 +36,7 @@ class List extends BaseList {
 
         return [
             {cls: ['neo-list-item-content'], id: `${id}__content`, cn: [
-                {tag: 'img', id: `${id}__image`, src: `../../../resources/examples/${record.image}`},
+                {tag: 'img', id: `${id}__image`, src: `${Neo.config.resourcesPath}examples/${record.image}`},
                 {cls: ['neo-list-item-text'], id: `${id}__content_wrapper`, cn: [
                     {html: record.firstname, id: `${id}__firstname`},
                     {cls: ['neo-lastname'],  id: `${id}__lastname`, html: record.lastname},

package/examples/list/animate/MainContainer.mjs

@@ -1,8 +1,10 @@
-import CheckBox  from '../../../src/form/field/CheckBox.mjs';
-import List      from './List.mjs';
-import MainStore from './MainStore.mjs';
-import Toolbar   from '../../../src/container/Toolbar.mjs';
-import Viewport  from '../../../src/container/Viewport.mjs';
+import CheckBox    from '../../../src/form/field/CheckBox.mjs';
+import List        from './List.mjs';
+import MainStore   from './MainStore.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import TextField   from '../../../src/form/field/Text.mjs';
+import Toolbar     from '../../../src/container/Toolbar.mjs';
+import Viewport    from '../../../src/container/Viewport.mjs';
 
 /**
  * @class Neo.examples.list.animate.MainContainer
@@ -54,6 +56,27 @@ class MainContainer extends Viewport {
                 listeners : {change: me.changeIsOnlineFilter.bind(me)},
                 style     : {marginLeft: '50px'}
             }]
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Search',
+            labelWidth: 60,
+            listeners : {change: me.changeNameFilter.bind(me)},
+            style     : {marginLeft: '10px'},
+            width     : 262
+        }, {
+            module              : NumberField,
+            clearToOriginalValue: true,
+            flex                : 'none',
+            labelText           : 'Transition Duration',
+            labelWidth          : 150,
+            listeners           : {change: me.changeTransitionDuration.bind(me)},
+            maxValue            : 5000,
+            minValue            : 100,
+            stepSize            : 100,
+            style               : {marginLeft: '10px'},
+            value               : 500,
+            width               : 262
         }, {
             module: List,
             store : MainStore
@@ -69,6 +92,15 @@ class MainContainer extends Viewport {
         store.getFilter('isOnline').disabled = !data.value;
     }
 
+    /**
+     * @param {Object} data
+     */
+    changeNameFilter(data) {
+        let store = this.down({module: List}).store;
+
+        store.getFilter('name').value = data.value;
+    }
+
     /**
      * @param {String} property
      * @param {Object} data
@@ -97,6 +129,13 @@ class MainContainer extends Viewport {
 
         me.sortBy = property;
     }
+
+    /**
+     * @param {Object} data
+     */
+    changeTransitionDuration(data) {
+        this.down({module: List}).getPlugin('animate').transitionDuration = data.value;
+    }
 }
 
 Neo.applyClassConfig(MainContainer);

package/examples/list/animate/MainStore.mjs

@@ -17,6 +17,23 @@ class MainStore extends Store {
             disabled : true,
             property : 'isOnline',
             value    : true
+        }, {
+            property : 'name',
+            value    : null,
+
+            filterBy: opts => {
+                let record = opts.item,
+                    value  = opts.value?.toLowerCase();
+
+                if (value) {
+                    return !(
+                        record.firstname.toLowerCase().includes(value) ||
+                        record.lastname .toLowerCase().includes(value)
+                    );
+                }
+
+                return false;
+            }
         }],
 
         sorters: [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.0.2",
+    "version": "3.0.6",
     "description": "The webworkers driven UI framework",
     "repository": {
         "type": "git",
@@ -36,11 +36,11 @@
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@material/mwc-button": "^0.25.3",
         "@material/mwc-textfield": "^0.25.3",
-        "autoprefixer": "^10.4.1",
+        "autoprefixer": "^10.4.2",
         "chalk": "^4.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^8.3.0",
-        "cssnano": "^5.0.14",
+        "cssnano": "^5.0.15",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.0",
         "highlightjs-line-numbers.js": "^2.8.0",
@@ -48,7 +48,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.5",
-        "sass": "^1.45.2",
+        "sass": "^1.47.0",
         "webpack": "^5.65.0",
         "webpack-cli": "^4.9.1",
         "webpack-dev-server": "4.7.2",

package/resources/scss/src/examples/list/animate/List.scss

@@ -17,7 +17,6 @@
         border          : 1px solid #1c60a0;
         border-radius   : 6px;
         opacity         : .9;
-        transition      : opacity .5s ease-in-out, transform .5s ease-in-out;
     }
 
     .neo-list-item-content {

package/src/collection/Filter.mjs

@@ -40,7 +40,7 @@ class Filter extends Base {
          */
         disabled_: false,
         /**
-         * Provide a custom filtering function, has a higher priority than property, operator & value
+         * Provide a custom filtering function which has a higher priority than property, operator & value
          * @member {Function|null} filterBy_=null
          */
         filterBy_: null,
@@ -173,7 +173,12 @@ class Filter extends Base {
         }
 
         if (me._filterBy) {
-            return me.filterBy.call(me.scope || me, item, filteredItems, allItems);
+            return me.filterBy.call(me.scope || me, {
+                allItems,
+                filteredItems,
+                item,
+                value: me._value
+            });
         }
 
         if (me.includeEmptyValues && (me._value === null || Neo.isEmpty(me._value))) {

package/src/list/Base.mjs

@@ -132,7 +132,7 @@ class Base extends Component {
             plugins.push({
                 module : module.default,
                 appName: me.appName,
-                flag   : 'animate',
+                id     : 'animate',
                 ...me.pluginAnimateConfig
             });
 

package/src/list/plugin/Animate.mjs

@@ -1,10 +1,21 @@
-import Base from '../../plugin/Base.mjs';
+import Base    from '../../plugin/Base.mjs';
+import CssUtil from '../../util/Css.mjs';
 
 /**
  * @class Neo.list.plugin.Animate
  * @extends Neo.plugin.Base
  */
 class Animate extends Base {
+    static getStaticConfig() {return {
+        /**
+         * Valid values for transitionEasing
+         * @member {String[]} transitionEasings=['ease','ease-in','ease-out','ease-in-out','linear']
+         * @protected
+         * @static
+         */
+        transitionEasings: ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear']
+    }}
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.list.plugin.Animate'
@@ -42,9 +53,20 @@ class Animate extends Base {
         rows: null,
         /**
          * Time in ms. Please ensure to match the CSS based value, in case you change the default.
-         * @member {Number} transitionDuration=500
+         * @member {Number} transitionDuration_=500
+         */
+        transitionDuration_: 500,
+        /**
+         * The easing used for fadeIn, fadeOut and position changes.
+         * Valid values: 'ease','ease-in','ease-out','ease-in-out','linear'
+         * @member {String} transitionEasing_='ease-in-out'
+         */
+        transitionEasing_: 'ease-in-out',
+        /**
+         * The id of the setTimeout() call which gets triggered after a transition is done.
+         * @member {Number|null} transitionTimeoutId=null
          */
-        transitionDuration: 500
+        transitionTimeoutId: null
     }}
 
     /**
@@ -61,9 +83,11 @@ class Animate extends Base {
         owner.onStoreFilter = me.onStoreFilter.bind(me);
 
         owner.store.on({
-            sort : me.onSort,
+            sort : me.onStoreSort,
             scope: me
         });
+
+        this.updateTransitionDetails(false);
     }
 
     /**
@@ -77,6 +101,36 @@ class Animate extends Base {
         owner.createItem   = me.createItem.bind(owner, me);
     }
 
+    /**
+     * Triggered after the transitionDuration config got changed.
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetTransitionDuration(value, oldValue) {
+        this.isConstructed && this.updateTransitionDetails(Neo.isNumber(oldValue));
+    }
+
+    /**
+     * Triggered after the transitionEasing config got changed.
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetTransitionEasing(value, oldValue) {
+        this.isConstructed && this.updateTransitionDetails(!!oldValue);
+    }
+
+    /**
+     * Triggered before the transitionEasing config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetTransitionEasing(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'transitionEasing');
+    }
+
     /**
      * @param {Neo.list.plugin.Animate} me
      * @param {Object} record
@@ -105,7 +159,6 @@ class Animate extends Base {
     }
 
     /**
-     *
      * @param {Object} record
      * @param {Number} index
      * @returns {{x: Number, y: Number}}
@@ -121,6 +174,23 @@ class Animate extends Base {
         return {x, y};
     }
 
+    /**
+     * @param {Object} obj
+     * @param {String[]} map
+     * @param {Boolean} intercept
+     * @returns {Number}
+     */
+    getItemIndex(obj, map, intercept) {
+        if (!intercept) {
+            return obj.index;
+        }
+
+        let owner = this.owner,
+            key   = owner.store.keyProperty;
+
+        return map.indexOf(owner.getItemId(obj.record[key]));
+    }
+
     /**
      *
      */
@@ -136,47 +206,6 @@ class Animate extends Base {
         });
     }
 
-    /**
-     * @param {Object} data
-     * @param {Object[]} data.items
-     * @param {Object[]} data.previousItems
-     * @param {Neo.data.Store} data.scope
-     */
-    onSort(data) {
-        let me          = this,
-            hasChange   = false,
-            keyProperty = data.scope.keyProperty,
-            owner       = me.owner,
-            newVdomCn   = [],
-            vdom        = owner.vdom,
-            vdomMap     = vdom.cn.map(e => e.id),
-            fromIndex, itemId;
-
-        if (vdomMap.length > 0) {
-            data.items.forEach((item, index) => {
-                itemId    = owner.getItemId(item[keyProperty]);
-                fromIndex = vdomMap.indexOf(itemId);
-
-                newVdomCn.push(vdom.cn[fromIndex]);
-
-                if (fromIndex !== index) {
-                    hasChange = true;
-                }
-            });
-
-            if (hasChange) {
-                owner.vdom.cn = newVdomCn;
-
-                owner.promiseVdomUpdate().then(() => {
-                    // we need to ensure to get this call into the next animation frame
-                    setTimeout(() => {
-                        owner.createItems();
-                    }, 50);
-                });
-            }
-        }
-    }
-
     /**
      * @param {Object} data
      * @param {Boolean} data.isFiltered
@@ -185,19 +214,37 @@ class Animate extends Base {
      * @param {Neo.data.Store} data.scope
      */
     onStoreFilter(data) {
-        let me           = this,
-            owner        = me.owner,
-            addedItems   = [],
-            movedItems   = [],
-            removedItems = [],
-            vdom         = owner.vdom,
-            index, map, position;
+        let me                  = this,
+            owner               = me.owner,
+            key                 = owner.store.keyProperty,
+            hasAddedItems       = false,
+            addedItems          = [],
+            movedItems          = [],
+            removedItems        = [],
+            transitionTimeoutId = me.transitionTimeoutId,
+            intercept           = !!transitionTimeoutId,
+            vdom                = owner.vdom,
+            index, item, map, position;
+
+        if (transitionTimeoutId) {
+            clearTimeout(transitionTimeoutId);
+            me.transitionTimeoutId = null;
+        }
+
+        map = intercept ? vdom.cn.map(e => e.id) : [];
 
         data.items.forEach((record, index) => {
+            item = {index, record};
+
             if (!data.oldItems.includes(record)) {
-                addedItems.push({index, record});
+                // flag items which are still inside the DOM (running remove OP)
+                if (intercept && map.includes(owner.getItemId(record[key]))) {
+                    item.reAdded = true;
+                }
+
+                addedItems.push(item);
             } else {
-                movedItems.push({index, record});
+                movedItems.push(item);
             }
         });
 
@@ -208,44 +255,144 @@ class Animate extends Base {
         });
 
         addedItems.forEach(obj => {
-            vdom.cn.splice(obj.index, 0, me.createItem(me, obj.record, obj.index));
+            if (!obj.reAdded) {
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    hasAddedItems = true;
+
+                    vdom.cn.splice(index, 0, me.createItem(me, obj.record, obj.index));
 
-            obj.item = vdom.cn[obj.index];
-            obj.item.style.opacity = 0;
+                    obj.item = vdom.cn[index];
+                    obj.item.style.opacity = 0;
+                }
+            }
         });
 
-        owner.vdom = vdom;
+        if (hasAddedItems) {
+            owner.vdom = vdom;
+        }
 
         // ensure to get into the next animation frame
         setTimeout(() => {
+            // get the latest version of the vdom, since this is a delayed callback
             vdom = owner.vdom;
 
-            addedItems.forEach(obj => {
-                vdom.cn[obj.index].style.opacity = 1;
-            });
-
             // new items are already added into the vdom, while old items are not yet removed
             // => we need a map to ensure getting the correct index
             map = vdom.cn.map(e => e.id);
 
+            addedItems.forEach(obj => {
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    // we can change the opacity for re-added items too => the vdom engine will ignore this
+                    vdom.cn[index].style.opacity = 1;
+                }
+            });
+
             movedItems.forEach(obj => {
-                index    = map.indexOf(owner.getItemId(obj.record[owner.store.keyProperty]));
-                position = me.getItemPosition(obj.record, obj.index);
-                vdom.cn[index].style.transform = `translate(${position.x}px, ${position.y}px)`;
+                index = me.getItemIndex(obj, map, true); // honor removed items, even without interceptions
+
+                if (index > -1) {
+                    position = me.getItemPosition(obj.record, obj.index);
+
+                    Object.assign(vdom.cn[index].style, {
+                        opacity  : 1,
+                        transform: `translate(${position.x}px, ${position.y}px)`
+                    });
+                }
             });
 
             removedItems.forEach(obj => {
-                obj.item = vdom.cn[obj.index];
-                obj.item.style.opacity = 0;
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    obj.item = vdom.cn[index];
+                    obj.item.style.opacity = 0;
+                }
             });
 
             owner.vdom = vdom;
 
-            setTimeout(() => {
-                owner.createItems();
-            }, me.transitionDuration);
+            me.triggerTransitionCallback();
         }, 50);
     }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreSort(data) {
+        let me          = this,
+            hasChange   = false,
+            keyProperty = data.scope.keyProperty,
+            owner       = me.owner,
+            newVdomCn   = [],
+            vdom        = owner.vdom,
+            vdomMap     = vdom.cn.map(e => e.id),
+            fromIndex, itemId;
+
+        if (vdomMap.length > 0) {
+            data.items.forEach((item, index) => {
+                itemId    = owner.getItemId(item[keyProperty]);
+                fromIndex = vdomMap.indexOf(itemId);
+
+                newVdomCn.push(vdom.cn[fromIndex]);
+
+                if (fromIndex !== index) {
+                    hasChange = true;
+                }
+            });
+
+            if (hasChange) {
+                owner.vdom.cn = newVdomCn;
+
+                owner.vdom = vdom;
+
+                // we need to ensure to get this call into the next animation frame
+                setTimeout(() => {
+                    owner.createItems();
+                }, 50);
+            }
+        }
+    }
+
+    /**
+     *
+     */
+    triggerTransitionCallback() {
+        let me = this;
+
+        me.transitionTimeoutId = setTimeout(() => {
+            me.transitionTimeoutId = null;
+
+            me.owner.createItems();
+        }, me.transitionDuration);
+    }
+
+    /**
+     * We do not want to apply the style to each list item itself,
+     * so we are using Neo.util.Css
+     * @param {Boolean} deleteRule
+     * @protected
+     */
+    updateTransitionDetails(deleteRule) {
+        let me       = this,
+            duration = me.transitionDuration,
+            easing   = me.transitionEasing,
+            id       = me.owner.id;
+
+        deleteRule && CssUtil.deleteRules(`#${id} .neo-list-item`);
+
+        CssUtil.insertRules([
+            `#${id} .neo-list-item {`,
+                `transition: opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+            '}'
+        ].join(''));
+    }
 }
 
 Neo.applyClassConfig(Animate);

package/src/main/addon/Stylesheet.mjs

@@ -8,6 +8,12 @@ import Base from '../../core/Base.mjs';
  * @singleton
  */
 class Stylesheet extends Base {
+    /**
+     * @member {String} dynamicStyleSheetId='neo-dynamic-stylesheet'
+     * @protected
+     */
+    dynamicStyleSheetId = 'neo-dynamic-stylesheet';
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.main.addon.Stylesheet'
@@ -23,6 +29,7 @@ class Stylesheet extends Base {
             app: [
                 'addThemeFiles',
                 'createStyleSheet',
+                'deleteCssRules',
                 'insertCssRules',
                 'swapStyleSheet'
             ]
@@ -137,6 +144,32 @@ class Stylesheet extends Base {
         document.head.appendChild(link);
     }
 
+    /**
+     * @param {Object} data
+     * @param {Array} data.rules
+     * @protected
+     */
+    deleteCssRules(data) {
+        let styleEl    = document.getElementById(this.dynamicStyleSheetId),
+            styleSheet = styleEl.sheet,
+            cssRules   = styleSheet.cssRules,
+            i          = 0,
+            len        = data.rules.length,
+            j, rulesLen;
+
+        for (; i < len; i++) {
+            j        = 0;
+            rulesLen = cssRules.length;
+
+            for (; j < rulesLen; j++) {
+                if (cssRules[j].selectorText === data.rules[i]) {
+                    styleSheet.deleteRule(j);
+                    break;
+                }
+            }
+        }
+    }
+
     /**
      * @param {String} token
      * @returns {Boolean}
@@ -162,7 +195,7 @@ class Stylesheet extends Base {
      * @protected
      */
     insertCssRules(data) {
-        let styleEl = document.getElementById('neoDynamicStyleSheet'),
+        let styleEl = document.getElementById(this.dynamicStyleSheetId),
             i     = 0,
             len   = data.rules.length,
             styleSheet;
@@ -170,7 +203,7 @@ class Stylesheet extends Base {
         if (!styleEl) {
             styleEl = document.createElement('style');
 
-            styleEl.id = 'neoDynamicStyleSheet';
+            styleEl.id = this.dynamicStyleSheetId;
             document.head.appendChild(styleEl);
         }
 

package/src/plugin/Base.mjs

@@ -33,7 +33,11 @@ class Base extends CoreBase {
 
         let me = this;
 
-        me.owner.on('mounted', me.onOwnerMounted, me);
+        if (me.owner.mounted) {
+            me.onOwnerMounted();
+        } else {
+            me.owner.on('mounted', me.onOwnerMounted, me);
+        }
     }
 
     /**

package/src/util/Css.mjs

@@ -14,15 +14,29 @@ class Css extends Base {
     }}
 
     /**
-     * @param {Array} rules
+     * Pass the selectorText of the rules which you want to remove
+     * @param {String[]|String} rules
+     */
+    static deleteRules(rules) {
+        if (!Array.isArray(rules)) {
+            rules = [rules];
+        }
+
+        Neo.main.addon.Stylesheet.deleteCssRules({
+            rules: rules
+        });
+    }
+
+    /**
+     * @param {String[]|String} rules
      */
     static insertRules(rules) {
+        if (!Array.isArray(rules)) {
+            rules = [rules];
+        }
+
         Neo.main.addon.Stylesheet.insertCssRules({
             rules: rules
-        }).then(function(data) {
-            // console.log('inserted CSS rules', data);
-        }).catch(function(err) {
-            console.log('App: Got error attempting to insert CSS rules', err, rules);
         });
     }
 }