neo.mjs 3.0.1 → 3.0.5

package/examples/list/animate/List.mjs

@@ -32,13 +32,15 @@ class List extends BaseList {
      * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
      */
     createItemContent(record, index) {
+        let id = this.getItemId(record.id);
+
         return [
-            {cls: ['neo-list-item-content'], cn: [
-                {tag: 'img', src: `../../../resources/examples/${record.image}`},
-                {cls: ['neo-list-item-text'], cn: [
-                    {html: record.firstname},
-                    {cls: ['neo-lastname'], html: record.lastname},
-                    {cls: ['neo-is-online'], removeDom: !record.isOnline}
+            {cls: ['neo-list-item-content'], id: `${id}__content`, cn: [
+                {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},
+                    {cls: ['neo-is-online'], id: `${id}__isonline`, removeDom: !record.isOnline}
                 ]}
             ]}
         ];

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
@@ -12,7 +14,8 @@ class MainContainer extends Viewport {
     static getConfig() {return {
         className: 'Neo.examples.list.animate.MainContainer',
         autoMount: true,
-        layout   : {ntype: 'vbox', align: 'stretch'}
+        layout   : {ntype: 'vbox', align: 'stretch'},
+        sortBy   : 'firstname'
     }}
 
     /**
@@ -36,11 +39,16 @@ class MainContainer extends Viewport {
                 ntype: 'label',
                 text : 'Sort by'
             }, {
-                handler: me.changeSorting.bind(me, 'firstname'),
-                text   : 'Firstname'
+                field       : 'firstname',
+                handler     : me.changeSorting.bind(me, 'firstname'),
+                iconCls     : 'fas fa-arrow-circle-up',
+                iconPosition: 'right',
+                text        : 'Firstname'
             }, {
-                handler: me.changeSorting.bind(me, 'lastname'),
-                text   : 'Lastname'
+                field       : 'lastname',
+                handler     : me.changeSorting.bind(me, 'lastname'),
+                iconPosition: 'right',
+                text        : 'Lastname'
             }, {
                 module    : CheckBox,
                 labelText : 'Is online',
@@ -48,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
@@ -64,13 +93,48 @@ class MainContainer extends Viewport {
     }
 
     /**
-     * @param {String} field
      * @param {Object} data
      */
-    changeSorting(field, data) {
+    changeNameFilter(data) {
         let store = this.down({module: List}).store;
 
-        store.sorters[0].property = field;
+        store.getFilter('name').value = data.value;
+    }
+
+    /**
+     * @param {String} property
+     * @param {Object} data
+     */
+    changeSorting(property, data) {
+        let me              = this,
+            buttonFirstName = me.down({field: 'firstname'}),
+            buttonLastName  = me.down({field: 'lastname'}),
+            direction       = 'ASC',
+            store           = me.down({module: List}).store,
+            sorter          = store.sorters[0],
+            button;
+
+        button = property === 'firstname' ? buttonFirstName : buttonLastName;
+
+        if (property === me.sortBy) {
+            direction = sorter.direction === 'ASC' ? 'DESC' : 'ASC';
+        }
+
+        button.iconCls = `fas fa-arrow-circle-${direction === 'ASC' ? 'up' : 'down'}`;
+
+        button = button === buttonFirstName ? buttonLastName : buttonFirstName;
+        button.iconCls = null;
+
+        sorter.set({direction, property});
+
+        me.sortBy = property;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeTransitionDuration(data) {
+        this.down({module: List}).getPlugin('animate').transitionDuration = data.value;
     }
 }
 

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.1",
+    "version": "3.0.5",
     "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      : transform .5s ease-in-out;
     }
 
     .neo-list-item-content {

package/src/collection/Base.mjs

@@ -469,11 +469,13 @@ class Base extends CoreBase {
     }
 
     /**
+     *
+     * @param {Object[]} items=this._items
+     * @param {Boolean} silent=false
      * @protected
      */
-    doSort() {
+    doSort(items=this._items, silent=false) {
         let me                = this,
-            items             = me._items,
             previousItems     = [...items],
             sorters           = me.sorters,
             sortDirections    = me.sortDirections,
@@ -558,7 +560,7 @@ class Base extends CoreBase {
 
         me[isSorted] = countSorters > 0;
 
-        if (me[updatingIndex] === 0) {
+        if (!silent && me[updatingIndex] === 0) {
             me.fire('sort', {
                 items: me._items,
                 previousItems,
@@ -607,6 +609,8 @@ class Base extends CoreBase {
             i               = 0,
             countItems      = items.length,
             filteredItems   = [],
+            needsSorting    = false,
+            oldItems        = [...me._items],
             config, isIncluded, item, j, tmpItems;
 
         for (; i < countAllFilters; i++) {
@@ -616,6 +620,10 @@ class Base extends CoreBase {
         }
 
         if (countFilters === 0 && me.allItems) {
+            if (me.sorters.length > 0) {
+                needsSorting = true;
+            }
+
             me.clear();
 
             me.items = [...me.allItems._items];
@@ -682,7 +690,16 @@ class Base extends CoreBase {
 
         me[isFiltered] = countFilters !== 0;
 
-        me.fire('filter', me);
+        if (needsSorting) {
+            me.doSort(me.items, true);
+        }
+
+        me.fire('filter', {
+            isFiltered: me[isFiltered],
+            items     : me.items,
+            oldItems,
+            scope     : me
+        });
     }
 
     /**

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/core/Observable.mjs

@@ -107,6 +107,10 @@ class Observable extends Base {
             for (i = 0; i < len; i++) {
                 eventConfig = events[i];
 
+                if (!Neo.isFunction(eventConfig.fn)) {
+                    eventConfig.fn = eventConfig.scope[eventConfig.fn];
+                }
+
                 eventConfig.fn.apply(eventConfig.scope || me, eventConfig.data ? args.concat(eventConfig.data) : args);
             }
         }

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
             });
 
@@ -191,9 +191,9 @@ class Base extends Component {
         let me = this;
 
         value?.on({
-            filter      : me.onStoreFilter,
-            load        : me.onStoreLoad,
-            recordChange: me.onStoreRecordChange,
+            filter      : 'onStoreFilter',
+            load        : 'onStoreLoad',
+            recordChange: 'onStoreRecordChange',
             scope       : me
         });
 

package/src/list/plugin/Animate.mjs

@@ -1,4 +1,5 @@
-import Base from '../../plugin/Base.mjs';
+import Base    from '../../plugin/Base.mjs';
+import CssUtil from '../../util/Css.mjs';
 
 /**
  * @class Neo.list.plugin.Animate
@@ -39,7 +40,17 @@ class Animate extends Base {
          * Read only
          * @member {Number|null} rows=null
          */
-        rows: null
+        rows: null,
+        /**
+         * Time in ms. Please ensure to match the CSS based value, in case you change the default.
+         * @member {Number} transitionDuration_=500
+         */
+        transitionDuration_: 500,
+        /**
+         * The id of the setTimeout() call which gets triggered after a transition is done.
+         * @member {Number|null} transitionTimeoutId=null
+         */
+        transitionTimeoutId: null
     }}
 
     /**
@@ -48,14 +59,16 @@ class Animate extends Base {
     construct(config) {
         super.construct(config);
 
-        let me = this;
+        let me    = this,
+            owner = me.owner;
 
         me.adjustCreateItem();
 
-        me.owner.store.on({
-            filter: me.onFilter,
-            sort  : me.onSort,
-            scope : me
+        owner.onStoreFilter = me.onStoreFilter.bind(me);
+
+        owner.store.on({
+            sort : me.onStoreSort,
+            scope: me
         });
     }
 
@@ -70,6 +83,25 @@ class Animate extends Base {
         owner.createItem   = me.createItem.bind(owner, me);
     }
 
+    /**
+     * Triggered after the transitionDuration config got changed.
+     *
+     * We do not want to apply the style to each list item itself,
+     * so we are using Neo.util.Css
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetTransitionDuration(value, oldValue) {
+        Neo.isNumber(oldValue) && CssUtil.deleteRules(`#${this.owner.id} .neo-list-item`);
+
+        CssUtil.insertRules([
+            `#${this.owner.id} .neo-list-item {`,
+                `transition: opacity ${value}ms ease-in-out, transform ${value}ms ease-in-out`,
+            '}'
+        ].join(''));
+    }
+
     /**
      * @param {Neo.list.plugin.Animate} me
      * @param {Object} record
@@ -77,27 +109,19 @@ class Animate extends Base {
      * @returns {Object}
      */
     createItem(me, record, index) {
-        let item       = me.ownerCreateItem(record, index),
-            itemHeight = me.itemHeight,
-            itemWidth  = me.itemWidth,
-            margin     = me.itemMargin,
-            style      = item.style || {},
-            column, row, x, y;
+        let item     = me.ownerCreateItem(record, index),
+            position = me.getItemPosition(record, index),
+            style    = item.style || {};
 
         if (!me.ownerRect) {
             return null;
         }
 
-        column = index % me.columns;
-        row    = Math.floor(index / me.columns);
-        x      = column * (margin + itemWidth)  + margin;
-        y      = row    * (margin + itemHeight) + margin;
-
         Object.assign(style, {
-            height   : `${itemHeight}px`,
+            height   : `${me.itemHeight}px`,
             position : 'absolute',
-            transform: `translate(${x}px, ${y}px)`,
-            width    : `${itemWidth}px`
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            width    : `${me.itemWidth}px`
         });
 
         item.style = style;
@@ -106,10 +130,38 @@ class Animate extends Base {
     }
 
     /**
-     * @param {Object} data
+     *
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {{x: Number, y: Number}}
      */
-    onFilter(data) {
-        console.log('onFilter', data);
+    getItemPosition(record, index) {
+        let me     = this,
+            column = index % me.columns,
+            margin = me.itemMargin,
+            row    = Math.floor(index / me.columns),
+            x      = column * (margin + me.itemWidth)  + margin,
+            y      = row    * (margin + me.itemHeight) + margin;
+
+        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]));
     }
 
     /**
@@ -127,13 +179,126 @@ class Animate extends Base {
         });
     }
 
+    /**
+     * @param {Object} data
+     * @param {Boolean} data.isFiltered
+     * @param {Object[]} data.items
+     * @param {Object[]} data.oldItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreFilter(data) {
+        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)) {
+                // 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(item);
+            }
+        });
+
+        data.oldItems.forEach((record, index) => {
+            if (!data.items.includes(record)) {
+                removedItems.push({index, record});
+            }
+        });
+
+        addedItems.forEach(obj => {
+            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[index];
+                    obj.item.style.opacity = 0;
+                }
+            }
+        });
+
+        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;
+
+            // 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 = 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 => {
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    obj.item = vdom.cn[index];
+                    obj.item.style.opacity = 0;
+                }
+            });
+
+            owner.vdom = vdom;
+
+            me.triggerTransitionCallback();
+        }, 50);
+    }
+
     /**
      * @param {Object} data
      * @param {Object[]} data.items
      * @param {Object[]} data.previousItems
      * @param {Neo.data.Store} data.scope
      */
-    onSort(data) {
+    onStoreSort(data) {
         let me          = this,
             hasChange   = false,
             keyProperty = data.scope.keyProperty,
@@ -158,15 +323,28 @@ class Animate extends Base {
             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);
-                });
+                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);
+    }
 }
 
 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);
         });
     }
 }