neo.mjs 6.15.5 → 6.15.6

package/src/main/addon/IntersectionObserver.mjs

@@ -80,16 +80,25 @@ class NeoIntersectionObserver extends Base {
     /**
      * Add more or new items into an existing observer instance
      * @param {Object} data
-     * @param {Boolean} data.disconnect=false true removes all currently observed targets
+     * @param {Boolean} [data.disconnect=false] true removes all currently observed targets
      * @param {String} data.id
-     * @param {String} data.observe The querySelector to match elements
+     * @param {String|String[]} data.observe The querySelector to match elements
      * @returns {Boolean} true in case the targets got observed, false in case they got cached prior to a register() call
      */
     observe(data) {
-        let me       = this,
-            cache    = me.cache,
-            targets  = document.querySelectorAll(data.observe),
-            observer = me.map[data.id];
+        let me            = this,
+            cache         = me.cache,
+            {id, observe} = data,
+            observer      = me.map[data.id],
+            targets       = [];
+
+        if (!Neo.isArray(observe)) {
+            observe = [observe]
+        }
+
+        observe.forEach(item => {
+            targets.push(...document.querySelectorAll(item))
+        })
 
         if (observer) {
             data.disconnect && observer.disconnect();
@@ -98,11 +107,11 @@ class NeoIntersectionObserver extends Base {
                 observer.observe(target)
             })
         } else {
-            if (!cache[data.id]) {
-                cache[data.id] = []
+            if (!cache[id]) {
+                cache[id] = []
             }
 
-            cache[data.id].push(data);
+            cache[id].push(data);
         }
 
         return !!observer
@@ -112,18 +121,18 @@ class NeoIntersectionObserver extends Base {
      * @param {Object} data
      * @param {String} data.callback
      * @param {String} data.id
-     * @param {String} [data.observe] The querySelector to match elements
+     * @param {String|String[]} [data.observe] The querySelector to match elements
      * @param {String} data.root
      * @param {String} data.rootMargin='0px'
      * @param {Number|Number[]} data.threshold=0.0
      */
     register(data) {
-        let me      = this,
-            cache   = me.cache,
-            targets = data.observe && document.querySelectorAll(data.observe),
+        let me            = this,
+            cache         = me.cache,
+            {id, observe} = data,
             observer;
 
-        me.map[data.id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
+        me.map[id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
             root      : document.querySelector(data.root),
             rootMargin: data.rootMargin || '0px',
             threshold : data.threshold  || 0.0
@@ -131,13 +140,11 @@ class NeoIntersectionObserver extends Base {
 
         observer.rootId = data.id; // storing the component id
 
-        targets?.forEach(target => {
-            observer.observe(target)
-        });
+        observe && me.observe({id, observe});
 
-        if (cache[data.id]) {
-            cache[data.id].forEach(item => me.observe(item));
-            delete cache[data.id]
+        if (cache[id]) {
+            cache[id].forEach(item => me.observe(item));
+            delete cache[id]
         }
     }
 

package/src/tab/Container.mjs

@@ -110,7 +110,7 @@ class Container extends BaseContainer {
      * @returns {Neo.component.Base|Neo.component.Base[]}
      */
     add(item) {
-        return this.insert(this.getTabBar().items.length, item);
+        return this.insert(this.getTabBar().items.length, item)
     }
 
     /**
@@ -125,8 +125,8 @@ class Container extends BaseContainer {
 
         if (Neo.isNumber(value) && value > -1 && !cardContainer) {
             me.on('constructed', () => {
-                me.afterSetActiveIndex(value, oldValue);
-            });
+                me.afterSetActiveIndex(value, oldValue)
+            })
         } else {
             if (Neo.isNumber(value) && value > -1) {
                 // we need to ensure the afterSet method triggers when lazy loading the module
@@ -140,7 +140,7 @@ class Container extends BaseContainer {
                         item: me.getActiveCard(),
                         oldValue,
                         value
-                    });
+                    })
                 }
             }
         }
@@ -157,7 +157,7 @@ class Container extends BaseContainer {
             cls = me.cls;
 
         NeoArray[value ? 'unshift' : 'remove'](cls, me.tabContainerCls + '-plain');
-        me.cls = cls;
+        me.cls = cls
     }
 
     /**
@@ -168,7 +168,7 @@ class Container extends BaseContainer {
      */
     afterSetSortable(value, oldValue) {
         if (oldValue !== undefined) {
-            this.getTabBar().sortable = value;
+            this.getTabBar().sortable = value
         }
     }
 
@@ -195,7 +195,7 @@ class Container extends BaseContainer {
                 component: me,
                 oldValue,
                 value
-            });
+            })
         }
     }
 
@@ -208,7 +208,7 @@ class Container extends BaseContainer {
     afterSetUseActiveTabIndicator(value, oldValue) {
         if (oldValue !== undefined) {
             this.getTabBar()  .useActiveTabIndicator = value;
-            this.getTabStrip().useActiveTabIndicator = value;
+            this.getTabStrip().useActiveTabIndicator = value
         }
     }
 
@@ -220,7 +220,7 @@ class Container extends BaseContainer {
      * @returns {String} value
      */
     beforeSetTabBarPosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'tabBarPosition');
+        return this.beforeSetEnumValue(value, oldValue, 'tabBarPosition')
     }
 
     /**
@@ -242,10 +242,10 @@ class Container extends BaseContainer {
             tabButtons.push(me.getTabButtonConfig(item.tabButtonConfig, index));
 
             if (!(item instanceof Neo.component.Base)) {
-                item = {flex: 1, ...me.itemDefaults, isTab: true, ...item};
+                item = {flex: 1, ...me.itemDefaults, isTab: true, ...item}
             }
 
-            tabComponents.push(item);
+            tabComponents.push(item)
         });
 
         me.items = [{
@@ -278,7 +278,7 @@ class Container extends BaseContainer {
 
         me.itemDefaults = null;
 
-        super.createItems();
+        super.createItems()
     }
 
     /**
@@ -286,7 +286,7 @@ class Container extends BaseContainer {
      * @returns {Neo.component.Base|null}
      */
     getActiveCard() {
-        return this.getCardContainer().items[this.activeIndex] || null;
+        return this.getCardContainer().items[this.activeIndex] || null
     }
 
     /**
@@ -295,14 +295,14 @@ class Container extends BaseContainer {
      * @returns {Neo.component.Base|null}
      */
     getCard(index) {
-        return this.getCardContainer().items[index] || null;
+        return this.getCardContainer().items[index] || null
     }
 
     /**
      * @returns {Neo.container.Base}
      */
     getCardContainer() {
-        return Neo.getComponent(this.cardContainerId);
+        return Neo.getComponent(this.cardContainerId)
     }
 
     /**
@@ -310,7 +310,7 @@ class Container extends BaseContainer {
      * @returns {Number}
      */
     getCount() {
-        return this.getTabBar().items.length;
+        return this.getTabBar().items.length
     }
 
     /**
@@ -354,7 +354,7 @@ class Container extends BaseContainer {
                 break;
         }
 
-        return layoutConfig;
+        return layoutConfig
     }
 
     /**
@@ -362,14 +362,14 @@ class Container extends BaseContainer {
      * @returns {Neo.tab.header.Button|null}
      */
     getTabAtIndex(index) {
-        return this.getTabBar().items[index] || null;
+        return this.getTabBar().items[index] || null
     }
 
     /**
      * @returns {Neo.toolbar.Base}
      */
     getTabBar() {
-        return Neo.getComponent(this.tabBarId);
+        return Neo.getComponent(this.tabBarId)
     }
 
     /**
@@ -380,28 +380,29 @@ class Container extends BaseContainer {
      */
     getTabButtonConfig(config, index) {
         let me = this,
-            defaultConfig = {
-                module : HeaderButton,
-                flex   : 'none',
-                index  : index,
-                pressed: me.activeIndex === index,
-
-                domListeners: [{
-                    click: function(data) {
-                        me.activeIndex = data.component.index;
-                    },
-                    scope: me
-                }]
-            };
-
-        return {...defaultConfig, ...config};
+
+        defaultConfig = {
+            module : HeaderButton,
+            flex   : 'none',
+            index  : index,
+            pressed: me.activeIndex === index,
+
+            domListeners: [{
+                click: function(data) {
+                    me.activeIndex = data.component.index
+                },
+                scope: me
+            }]
+        };
+
+        return {...defaultConfig, ...config}
     }
 
     /**
      * @returns {Neo.tab.Strip}
      */
     getTabStrip() {
-        return Neo.getComponent(this.tabStripId);
+        return Neo.getComponent(this.tabStripId)
     }
 
     /**
@@ -425,7 +426,7 @@ class Container extends BaseContainer {
 
             for (; i < len; i++) {
                 // insert the array backwards
-                returnArray.unshift(me.insert(index, item[len - 1 - i], true));
+                returnArray.unshift(me.insert(index, item[len - 1 - i], true))
             }
 
             superItem = returnArray;
@@ -439,7 +440,7 @@ class Container extends BaseContainer {
                     superItem = cardContainer.items[i];
 
                     if (me.activateInsertedTabs) {
-                        me.activeIndex = i;
+                        me.activeIndex = i
                     }
 
                     break;
@@ -456,7 +457,7 @@ class Container extends BaseContainer {
                 len = tabBar.items.length;
 
                 for (; i < len; i++) {
-                    tabBar.items[i].index = i;
+                    tabBar.items[i].index = i
                 }
 
                 item.flex = 1;
@@ -464,9 +465,9 @@ class Container extends BaseContainer {
 
                 if (me.activateInsertedTabs) {
                     if (!me.vnode) {
-                        me.activeIndex = index;
+                        me.activeIndex = index
                     } else {
-                        tab.on('mounted', me.onTabButtonMounted, me);
+                        tab.on('mounted', me.onTabButtonMounted, me)
                     }
                 }
             }
@@ -496,17 +497,17 @@ class Container extends BaseContainer {
         if (index !== me.activeIndex) {
             // silent updates
             me._activeIndex = index;
-            cardContainer.layout._activeIndex = index;
+            cardContainer.layout._activeIndex = index
         }
 
         returnValue = cardContainer.moveTo(fromIndex, toIndex);
 
         me.fire('moveTo', {
-            fromIndex: fromIndex,
-            toIndex  : toIndex
+            fromIndex,
+            toIndex
         });
 
-        return returnValue;
+        return returnValue
     }
 
     /**
@@ -514,7 +515,7 @@ class Container extends BaseContainer {
      */
     onConstructed() {
         this._layout = this.getLayoutConfig(); // silent update
-        super.onConstructed();
+        super.onConstructed()
     }
 
     /**
@@ -535,7 +536,7 @@ class Container extends BaseContainer {
         for (; i < len; i++) {
             if (tabBar.items[i].id === buttonId) {
                 index = i;
-                break;
+                break
             }
         }
 
@@ -545,10 +546,10 @@ class Container extends BaseContainer {
             if (me.vnode && !card.mounted) {
                 listenerId = card.on('mounted', () => {
                     card.un('mounted', listenerId);
-                    me.activeIndex = index;
-                });
+                    me.activeIndex = index
+                })
             } else {
-                me.activeIndex = index;
+                me.activeIndex = index
             }
         }
     }
@@ -566,7 +567,7 @@ class Container extends BaseContainer {
 
         for (; i < len; i++) {
             if (items[i].id === component.id) {
-                this.removeAt(i, destroyItem, silent);
+                this.removeAt(i, destroyItem, silent)
             }
         }
     }
@@ -589,9 +590,9 @@ class Container extends BaseContainer {
         if (index < activeIndex) {
             // silent updates
             me._activeIndex = activeIndex - 1;
-            cardContainer.layout._activeIndex = activeIndex - 1;
+            cardContainer.layout._activeIndex = activeIndex - 1
         } else if (index === activeIndex) {
-            me.activeIndex = activeIndex - 1;
+            me.activeIndex = activeIndex - 1
         }
 
         // todo: non index based matching of tab buttons and cards
@@ -599,7 +600,7 @@ class Container extends BaseContainer {
         len = tabBar.items.length;
 
         for (; i < len; i++) {
-            tabBar.items[i].index = i;
+            tabBar.items[i].index = i
         }
     }
 
@@ -612,8 +613,8 @@ class Container extends BaseContainer {
             tabButtons  = me.getTabBar().items || [];
 
         tabButtons.forEach((item, index) => {
-            item.pressed = index === activeIndex;
-        });
+            item.pressed = index === activeIndex
+        })
     }
 }
 

package/docs/app/model/Tutorial.mjs

@@ -1,41 +0,0 @@
-import Model  from '../../../src/data/Model.mjs';
-
-/**
- * @class Docs.app.model.Tutorial
- * @extends Neo.data.Model
- */
-class Tutorial extends Model {
-    static config = {
-        /**
-         * @member {String} className='Docs.app.model.Tutorial'
-         * @protected
-         */
-        className: 'Docs.app.model.Tutorial',
-        /**
-         * @member {Object[]} fields
-         */
-        fields: [{
-            name: 'fileName',
-            type: 'String'
-        }, {
-            name: 'id',
-            type: 'Integer'
-        }, {
-            name: 'isLeaf',
-            type: 'Boolean'
-        }, {
-            name: 'name',
-            type: 'String'
-        }, {
-            name: 'parentId',
-            type: 'Integer'
-        }, {
-            name: 'type',
-            type: 'String'
-        }]
-    }
-}
-
-Neo.setupClass(Tutorial);
-
-export default Tutorial;

package/docs/app/store/Tutorials.mjs

@@ -1,28 +0,0 @@
-import Store    from '../../../src/data/Store.mjs';
-import Tutorial from '../model/Tutorial.mjs';
-
-/**
- * @class Docs.app.store.Tutorials
- * @extends Neo.data.Store
- */
-class Tutorials extends Store {
-    static config = {
-        /**
-         * @member {String} className='Docs.app.store.Tutorials'
-         * @protected
-         */
-        className: 'Docs.app.store.Tutorials',
-        /**
-         * @member {String} keyProperty='id'
-         */
-        keyProperty: 'id',
-        /**
-         * @member {Neo.data.Model} model=Tutorial
-         */
-        model: Tutorial
-    }
-}
-
-Neo.setupClass(Tutorials);
-
-export default Tutorials;

package/docs/app/view/TutorialsTreeList.mjs

@@ -1,51 +0,0 @@
-import TreeList       from '../../../src/tree/List.mjs';
-import TutorialsStore from '../store/Tutorials.mjs';
-
-/**
- * @class Docs.view.TutorialsTreeList
- * @extends Neo.tree.List
- */
-class TutorialsTreeList extends TreeList {
-    static config = {
-        /**
-         * @member {String} className='Docs.view.TutorialsTreeList'
-         * @protected
-         */
-        className: 'Docs.view.TutorialsTreeList',
-        /**
-         * @member {String} ntype='tutorials-treelist'
-         * @protected
-         */
-        ntype: 'tutorials-treelist',
-        /**
-         * @member {String[]} cls=['docs-tutorials-treelist']
-         */
-        cls: ['docs-tutorials-treelist'],
-        /**
-         * @member {Neo.data.Store|null} store=TutorialsStore
-         * @protected
-         */
-        store: TutorialsStore
-    }
-
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        Neo.Xhr.promiseJson({
-            url: '../../docs/tutorials/tutorials.json'
-        }).then(data => {
-            me.store.data = data.json;
-            me.createItems(null, me.getListItemsRoot(), 0);
-            me.update();
-        });
-    }
-}
-
-Neo.setupClass(TutorialsTreeList);
-
-export default TutorialsTreeList;

package/docs/tutorials/01_Concept.html

@@ -1,45 +0,0 @@
-<div class="neo-header-text-container">
-    <span class="neo-header-text">Tutorial: Concept</span>
-</div>
-<article>
-    <h4>Why yet another Javascript framework?</h4>
-    <ol>
-        <li>neo.mjs is web workers driven</li>
-        <li>neo.mjs does not need any cryptic XML markups</li>
-        <li>neo.mjs uses a custom blazing fast virtual dom engine</li>
-        <li>neo.mjs is based on EcmaScript 8 (ES8)</li>
-        <li>neo.mjs uses HTML5 and CSS3 to the fullest</li>
-        <li>Simplicity</li>
-        <li>No transpiled code</li>
-    </ol>
-    <hr>
-    <p>(1) neo.mjs uses 3 web workers:</p>
-    <ul>
-        <li>App</li>
-        <li>Data</li>
-        <li>Vdom</li>
-    </ul>
-    <p>The main reason is that browsers by default only use 1 CPU core, while most computers and mobile devices have
-        more. Multi-Threading solves this performance bottleneck and it will ensure that there are no hidden
-        background-tasks in the main thread, which mess with your beautiful animations.</p>
-    <p>In short: Most parts of neo.mjs as well as all apps you will create are inside the App worker.</p>
-    <p>The main thread is only responsible to manipulate the DOM and delegate DOM events to the App worker.</p>
-    <p>The Data worker will perform all Ajax requests to your backend and host the Store instances.</p>
-    <p>The Vdom worker parses your JSON based markup (Vdom) into a virtual node (Vnode) and creates deltas
-        when you dynamically change your Vdom.</p>
-    <p>(2) Did you ever enjoy writing pseudo-html including curly braces like {tpl if}, {tpl for} or even better
-        {[this.doSomething()]}? Those XML templates evolved to a point, where they try to do everything what
-        Javascript itself is capable of and you will most likely have encountered scoping issues (where does &quot;this&quot;
-        point to now?). The solution is as simple as it should have been obvious for quite a while: JSON. You can easily manipulate Javascript objects with Javascript.</p>
-    <p>(3) Since neo.mjs does not need to parse XML templates back into JSON and then create virtual DOM nodes,
-        the custom Vdom engine is blazing fast. The algorithms to create deltas are highly efficient and
-        recognise moved DOM subtrees immediately.</p>
-    <p>(4) neo.mjs is most likely the first UI framework out there which does not only allow devs to create
-        ES6 classes on top of ES5 prototypes, but is itself fully written in ES6.</p>
-    <p>(5) neo.mjs uses the latest web APIs and CSS features to the fullest and give you an easy and intuitive
-        access to them.</p>
-    <p>(6) The first and most important design goal of neo.mjs is simplicity. This does not only mean to keep the
-        code base as clean and simple as possible, but also to keep the created DOM as lightweight and minimal as
-        possible.</p>
-    <p>(7) neo.mjs does not use Babel or any other tool to transpile code (which does not mean you can't use it for your own apps).</p>
-</article>