neo.mjs 3.0.1 → 3.0.2

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: `../../../resources/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

@@ -12,7 +12,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 +37,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',
@@ -64,13 +70,32 @@ class MainContainer extends Viewport {
     }
 
     /**
-     * @param {String} field
+     * @param {String} property
      * @param {Object} data
      */
-    changeSorting(field, data) {
-        let store = this.down({module: List}).store;
+    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});
 
-        store.sorters[0].property = field;
+        me.sortBy = property;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "The webworkers driven UI framework",
     "repository": {
         "type": "git",

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

@@ -17,7 +17,7 @@
         border          : 1px solid #1c60a0;
         border-radius   : 6px;
         opacity         : .9;
-        transition      : transform .5s ease-in-out;
+        transition      : opacity .5s ease-in-out, 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/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

@@ -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

@@ -39,7 +39,12 @@ 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
     }}
 
     /**
@@ -48,14 +53,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.onSort,
+            scope: me
         });
     }
 
@@ -77,27 +84,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 +105,20 @@ 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};
     }
 
     /**
@@ -167,6 +176,76 @@ 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,
+            addedItems   = [],
+            movedItems   = [],
+            removedItems = [],
+            vdom         = owner.vdom,
+            index, map, position;
+
+        data.items.forEach((record, index) => {
+            if (!data.oldItems.includes(record)) {
+                addedItems.push({index, record});
+            } else {
+                movedItems.push({index, record});
+            }
+        });
+
+        data.oldItems.forEach((record, index) => {
+            if (!data.items.includes(record)) {
+                removedItems.push({index, record});
+            }
+        });
+
+        addedItems.forEach(obj => {
+            vdom.cn.splice(obj.index, 0, me.createItem(me, obj.record, obj.index));
+
+            obj.item = vdom.cn[obj.index];
+            obj.item.style.opacity = 0;
+        });
+
+        owner.vdom = vdom;
+
+        // ensure to get into the next animation frame
+        setTimeout(() => {
+            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);
+
+            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)`;
+            });
+
+            removedItems.forEach(obj => {
+                obj.item = vdom.cn[obj.index];
+                obj.item.style.opacity = 0;
+            });
+
+            owner.vdom = vdom;
+
+            setTimeout(() => {
+                owner.createItems();
+            }, me.transitionDuration);
+        }, 50);
+    }
 }
 
 Neo.applyClassConfig(Animate);