neo.mjs 3.0.3 → 3.0.4

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               : 3000,
+            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;
+
+                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.3",
+    "version": "3.0.4",
     "description": "The webworkers driven UI framework",
     "repository": {
         "type": "git",

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,4 +1,6 @@
-import Base from '../../plugin/Base.mjs';
+import Base     from '../../plugin/Base.mjs';
+import CssUtil  from '../../util/Css.mjs';
+import VdomUtil from '../../util/VDom.mjs';
 
 /**
  * @class Neo.list.plugin.Animate
@@ -42,9 +44,14 @@ 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
+        transitionDuration_: 2000,
+        /**
+         * The id of the setTimeout() call which gets triggered after a transition is done.
+         * @member {Number|null} transitionTimeoutId=null
+         */
+        transitionTimeoutId: null
     }}
 
     /**
@@ -61,7 +68,7 @@ class Animate extends Base {
         owner.onStoreFilter = me.onStoreFilter.bind(me);
 
         owner.store.on({
-            sort : me.onSort,
+            sort : me.onStoreSort,
             scope: me
         });
     }
@@ -77,6 +84,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
@@ -121,6 +147,24 @@ 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,13 +180,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, vdomIndex;
+
+        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,
@@ -178,73 +335,16 @@ 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;
-            });
+    triggerTransitionCallback() {
+        let me = this;
 
-            owner.vdom = vdom;
+        me.transitionTimeoutId = setTimeout(() => {
+            me.transitionTimeoutId = null;
 
-            setTimeout(() => {
-                owner.createItems();
-            }, me.transitionDuration);
-        }, 50);
+            me.owner.createItems();
+        }, me.transitionDuration);
     }
 }
 

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);
         });
     }
 }