neo.mjs 2.3.15 → 2.3.19

package/src/list/Base.mjs

@@ -20,6 +20,10 @@ class Base extends Component {
          * @protected
          */
         ntype: 'list',
+        /**
+         * @member {Boolean} animate_=false
+         */
+        animate_: false,
         /**
          * True will destroy the used collection / store when the component gets destroyed
          * @member {Boolean} autoDestroyStore=true
@@ -67,6 +71,11 @@ class Base extends Component {
          * @member {Object} keys
          */
         keys: {},
+        /**
+         * config values for Neo.list.plugin.Animate
+         * @member {Object} pluginAnimateConfig=null
+         */
+        pluginAnimateConfig: null,
         /**
          * Either pass a selection.Model module, an instance or a config object
          * @member {Object|Neo.selection.Model} selectionModel_=null
@@ -94,7 +103,6 @@ class Base extends Component {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -110,6 +118,28 @@ class Base extends Component {
         me.domListeners = domListeners;
     }
 
+    /**
+     * Triggered after the animate config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAnimate(value, oldValue) {
+        value && import('./plugin/Animate.mjs').then(module => {
+            let me      = this,
+                plugins = me.plugins || [];
+
+            plugins.push({
+                module : module.default,
+                appName: me.appName,
+                flag   : 'animate',
+                ...me.pluginAnimateConfig
+            });
+
+            me.plugins = plugins;
+        });
+    }
+
     /**
      * Triggered after the disableSelection config got changed
      * @param {Boolean} value
@@ -236,6 +266,10 @@ class Base extends Component {
         };
 
         switch (Neo.typeOf(itemContent)) {
+            case null: {
+                return null;
+            }
+
             case 'Array': {
                 item.cn = itemContent;
                 break;
@@ -283,12 +317,14 @@ class Base extends Component {
      */
     createItems(silent=false) {
         let me   = this,
-            vdom = me.vdom;
+            vdom = me.vdom,
+            listItem;
 
         vdom.cn = [];
 
         me.store.items.forEach((item, index) => {
-            vdom.cn.push(me.createItem(item, index));
+            listItem = me.createItem(item, index);
+            listItem && vdom.cn.push(listItem);
         });
 
         if (silent) {
@@ -327,7 +363,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -336,7 +371,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {String} vnodeId
      * @returns {String|Number} itemId
      */
@@ -361,7 +395,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onClick(data) {
@@ -390,7 +423,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onContainerClick(data) {
@@ -406,7 +438,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Object} node
      * @param {Object} data
      */

package/src/list/Color.mjs

@@ -66,7 +66,6 @@ class Color extends Base {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -75,7 +74,6 @@ class Color extends Base {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -84,7 +82,6 @@ class Color extends Base {
     }
 
     /**
-     *
      * @param {String[]} items
      */
     onSelect(items) {

package/src/list/Component.mjs

@@ -53,7 +53,6 @@ class Component extends Base {
     }
 
     /**
-     *
      * @param {Number} index
      * @returns {String}
      */
@@ -62,7 +61,6 @@ class Component extends Base {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -71,7 +69,6 @@ class Component extends Base {
     }
 
     /**
-     *
      * @param {String} vnodeId
      * @returns {String|Number} itemId
      */

package/src/list/plugin/Animate.mjs

@@ -0,0 +1,176 @@
+import Base from '../../plugin/Base.mjs';
+
+/**
+ * @class Neo.list.plugin.Animate
+ * @extends Neo.plugin.Base
+ */
+class Animate extends Base {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.list.plugin.Animate'
+         * @protected
+         */
+        className: 'Neo.list.plugin.Animate',
+        /**
+         * Read only
+         * @member {Number|null} columns=null
+         */
+        columns: null,
+        /**
+         * Value in px
+         * @member {Number} itemHeight=200
+         */
+        itemHeight: 200,
+        /**
+         * Value in px
+         * @member {Number} itemMargin=10
+         */
+        itemMargin: 10,
+        /**
+         * Value in px
+         * @member {Number} itemWidth=300
+         */
+        itemWidth: 300,
+        /**
+         * @member {DOMRect|null} ownerRect=null
+         */
+        ownerRect: null,
+        /**
+         * Read only
+         * @member {Number|null} rows=null
+         */
+        rows: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    constructor(config) {
+        super(config);
+
+        let me = this;
+
+        me.adjustCreateItem();
+
+        me.owner.store.on({
+            filter: me.onFilter,
+            sort  : me.onSort,
+            scope : me
+        });
+    }
+
+    /**
+     *
+     */
+    adjustCreateItem() {
+        let me    = this,
+            owner = me.owner;
+
+        me.ownerCreateItem = owner.createItem.bind(owner);
+        owner.createItem   = me.createItem.bind(owner, me);
+    }
+
+    /**
+     * @param {Neo.list.plugin.Animate} me
+     * @param {Object} record
+     * @param {Number} index
+     * @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;
+
+        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`,
+            position : 'absolute',
+            transform: `translate(${x}px, ${y}px)`,
+            width    : `${itemWidth}px`
+        });
+
+        item.style = style;
+
+        return item;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFilter(data) {
+        console.log('onFilter', data);
+    }
+
+    /**
+     *
+     */
+    onOwnerMounted() {
+        let me = this;
+
+        Neo.main.DomAccess.getBoundingClientRect({
+            id: me.owner.id
+        }).then(rect => {
+            Object.assign(me, {
+                columns  : Math.floor(rect.width / me.itemWidth),
+                ownerRect: rect,
+                rows     : Math.floor(rect.height / me.itemHeight)
+            });
+        });
+    }
+
+    /**
+     * @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);
+                });
+            }
+        }
+    }
+}
+
+Neo.applyClassConfig(Animate);
+
+export {Animate as default};

package/src/main/DomAccess.mjs

@@ -76,7 +76,6 @@ class DomAccess extends Base {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -99,14 +98,13 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {Boolean} data.async
      * @param {Boolean} [data.defer=false]
      * @param {String} [data.src=true]
      */
     addScript(data) {
-        const script = document.createElement('script');
+        let script = document.createElement('script');
 
         if (!data.hasOwnProperty('async')) {
             data.async = true;
@@ -118,17 +116,15 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String[]} data.cls
      */
     applyBodyCls(data) {
-        const cls = data.cls || [];
+        let cls = data.cls || [];
         document.body.classList.add(...cls);
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.command
      * @returns {Object} data
@@ -237,7 +233,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {String} nodeId
      * @returns {HTMLElement}
      * @protected
@@ -251,7 +246,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {String} [nodeId='document.body']
      * @returns {HTMLElement}
      * @protected
@@ -277,10 +271,10 @@ class DomAccess extends Base {
             script = document.createElement('script');
 
             Object.assign(script, {
-                async  : async,
+                async,
                 onerror: reject,
                 onload : resolve,
-                src    : src
+                src
             });
 
             document.head.appendChild(script);
@@ -299,7 +293,7 @@ class DomAccess extends Base {
             link = document.createElement('link');
 
             Object.assign(link, {
-                href   : href,
+                href,
                 onerror: reject,
                 onload : resolve,
                 rel    : 'stylesheet',
@@ -332,14 +326,13 @@ class DomAccess extends Base {
 
         Neo.worker.Manager.sendMessage(data.origin, {
             action : 'reply',
-            data   : data,
+            data,
             replyId: data.id,
             success: true
         }, [offscreen]);
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String[]} data.attributes
      * @param {Array} data.functions An array containing strings and/or objects
@@ -398,14 +391,13 @@ class DomAccess extends Base {
 
         Neo.worker.Manager.sendMessage(data.origin, {
             action : 'reply',
-            data   : data,
+            data,
             replyId: data.id,
             success: true
         });
     }
 
     /**
-     *
      * @param {Object} data
      * @protected
      */
@@ -416,7 +408,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.direction left, top
      * @param {String} data.id
@@ -434,7 +425,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.id
      * @param {String} [data.behavior='smooth']
@@ -457,7 +447,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.direction left, top
      * @param {String} data.id
@@ -475,7 +464,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.id
      * @param {String} [data.behavior='smooth']
@@ -501,7 +489,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.id
      * @param {Number} [data.start=0]
@@ -557,7 +544,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} [data.behavior='smooth'] // auto or smooth
      * @param {String} [data.left=0]
@@ -572,7 +558,6 @@ class DomAccess extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @protected
      */