neo.mjs 3.2.3 → 3.2.4

package/apps/covid/view/country/Gallery.mjs

@@ -28,15 +28,10 @@ class CountryGallery extends Gallery {
          */
         country_: null,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -74,6 +69,11 @@ class CountryGallery extends Gallery {
                 ]}
             ]}
         ]},
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -121,10 +121,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;

package/apps/realworld2/view/article/Gallery.mjs

@@ -17,15 +17,15 @@ class Gallery extends BaseGallery {
          */
         cls: ['rw2-article-gallery', 'neo-gallery', 'page', 'view'],
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 240,
+        itemHeight: 240,
         /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
          */
-        imageWidth: 320,
+        itemWidth: 320,
         /**
          * Array containing the PreviewComponent references
          * @member {Array} items=[]
@@ -69,8 +69,8 @@ class Gallery extends BaseGallery {
             id      : me.getItemVnodeId(record[me.keyProperty]),
             tabIndex: '-1',
             style: {
-                height: me.imageHeight + 'px',
-                width : me.imageWidth  + 'px'
+                height: me.itemHeight + 'px',
+                width : me.itemWidth  + 'px'
             },
             cn: [{
                 cls: ['item-wrapper'],

package/apps/sharedcovid/view/country/Gallery.mjs

@@ -28,15 +28,10 @@ class CountryGallery extends Gallery {
          */
         country_: null,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -94,6 +89,11 @@ class CountryGallery extends Gallery {
                 }]
             }]
         },
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -141,10 +141,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -27,15 +27,10 @@ class CountryGallery extends Gallery {
          */
         cls: ['neo-country-gallery', 'neo-gallery', 'page', 'view'],
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -73,6 +68,11 @@ class CountryGallery extends Gallery {
                 ]}
             ]}
         ]},
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -103,10 +103,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = me.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;
@@ -184,7 +184,7 @@ class CountryGallery extends Gallery {
 
         imageName = map[imageName] || imageName;
 
-        return 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/' + imageName + '.png'
+        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/examples/component/coronaGallery/CountryModel.mjs

@@ -1,4 +1,4 @@
-import Model  from '../../../src/data/Model.mjs';
+import Model from '../../../src/data/Model.mjs';
 
 /**
  * @class Neo.examples.component.coronaGallery.CountryModel
@@ -6,8 +6,14 @@ import Model  from '../../../src/data/Model.mjs';
  */
 class CountryModel extends Model {
     static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.CountryModel'
+         * @protected
+         */
         className: 'Neo.examples.component.coronaGallery.CountryModel',
-
+        /**
+         * @member {Object[]} fields
+         */
         fields: [{
             name: 'cases',
             type: 'int'

package/examples/component/coronaGallery/CountryStore.mjs

@@ -7,9 +7,19 @@ import Store        from '../../../src/data/Store.mjs';
  */
 class CountryStore extends Store {
     static getConfig() {return {
-        className  : 'Neo.examples.component.coronaGallery.CountryStore',
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.CountryStore'
+         * @protected
+         */
+        className: 'Neo.examples.component.coronaGallery.CountryStore',
+        /**
+         * @member {String} keyProperty='country'
+         */
         keyProperty: 'country',
-        model      : CountryModel
+        /**
+         * @member {Neo.data.Model} model=CountryModel
+         */
+        model: CountryModel
     }}
 }
 

package/examples/component/coronaGallery/MainContainer.mjs

@@ -363,14 +363,11 @@ class MainContainer extends Viewport {
         }
     }
 
+    /**
+     * @param {Object[]} data
+     */
     addStoreItems(data) {
         this.getStore().data = data;
-
-        setTimeout(() => {
-            Neo.main.DomAccess.focus({
-                id: this.gallery.id
-            });
-        }, 200);
     }
 
     /**

package/examples/component/gallery/ImageModel.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.component.gallery.ImageModel
+ * @extends Neo.data.Model
+ */
+class ImageModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.gallery.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.gallery.ImageModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(ImageModel);
+
+export default ImageModel;

package/examples/component/gallery/ImageStore.mjs

@@ -0,0 +1,32 @@
+import ImageModel from './ImageModel.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.component.gallery.ImageStore
+ * @extends Neo.data.Store
+ */
+class ImageStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.gallery.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.gallery.ImageStore',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=ImageModel
+         */
+        model: ImageModel,
+        /**
+         * @member {String} url='../../resources/examples/data/ai_contacts.json'
+         */
+        url: '../../resources/examples/data/ai_contacts.json'
+    }}
+}
+
+Neo.applyClassConfig(ImageStore);
+
+export default ImageStore;

package/examples/component/gallery/MainContainer.mjs

@@ -1,4 +1,5 @@
 import Gallery     from '../../../src/component/Gallery.mjs';
+import ImageStore  from './ImageStore.mjs';
 import NumberField from '../../../src/form/field/Number.mjs';
 import Panel       from '../../../src/container/Panel.mjs';
 import RangeField  from '../../../src/form/field/Range.mjs';
@@ -228,6 +229,7 @@ class MainContainer extends Viewport {
         me.gallery = Neo.create({
             module: Gallery,
             id    : 'neo-gallery-1',
+            store : ImageStore,
             ...me.galleryConfig
         });
 

package/examples/list/animate/MainStore.mjs

@@ -10,7 +10,7 @@ class MainStore extends Store {
         className: 'Neo.examples.list.animate.MainStore',
         autoLoad : true,
         model    : MainModel,
-        url      : '../../resources/examples/data/circleContacts.json',
+        url      : '../../resources/examples/data/circles/group1.json',
 
         filters: [{
             disabled : true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.2.3",
+    "version": "3.2.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -49,8 +49,8 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.6",
-        "sass": "^1.49.7",
-        "webpack": "^5.68.0",
+        "sass": "^1.49.8",
+        "webpack": "^5.69.1",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "4.7.4",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/apps/covid/country/Gallery.scss

@@ -16,6 +16,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity            : .95;
             transform          : translateZ(180px) scale(1.5);
             -webkit-box-reflect: unset!important;
         }
@@ -66,4 +67,4 @@
     .image-wrap.neo-selected img {
         transform: inherit;
     }
-}
+}

package/resources/scss/src/component/Gallery.scss

@@ -62,6 +62,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity  : .95;
             transform: translate3d(0, 0, 180px) scale(1.5);
         }
     }
@@ -69,4 +70,4 @@
     .image-wrap.neo-selected img {
         -webkit-box-reflect: unset !important;
     }
-}
+}

package/resources/scss/src/examples/component/coronaGallery/CountryGallery.scss

@@ -42,6 +42,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity            : .95;
             transform          : translateZ(180px) scale(1.5);
             -webkit-box-reflect: unset!important;
         }
@@ -87,4 +88,4 @@
     .image-wrap.neo-selected img {
         transform: inherit;
     }
-}
+}

package/src/component/Circle.mjs

@@ -41,7 +41,7 @@ class Circle extends Component {
         collapsed: true,
         /**
          * Additional used keys for the selection model
-         * @member {Object} keys
+         * @member {Object} keys={}
          */
         keys: {},
         /**
@@ -73,21 +73,25 @@ class Circle extends Component {
         /**
          * @member {Number} rotateX_=0
          */
-        rotateX_:0,
+        rotateX_: 0,
         /**
          * @member {Number} rotateY_=0
          */
-        rotateY_:0,
+        rotateY_: 0,
         /**
          * @member {Number} rotateZ_=0
          */
-        rotateZ_:0,
+        rotateZ_: 0,
         /**
-         * @member {Neo.selection.Model} selectionModel_=null
+         * @member {Number} rotationIndex_=0
+         */
+        rotationIndex_: 0,
+        /**
+         * @member {Neo.selection.Model|null} selectionModel_=null
          */
         selectionModel_: null,
         /**
-         * @member {Neo.collection.Base} store_=null
+         * @member {Neo.collection.Base|null} store_=null
          */
         store_: null,
         /**
@@ -283,6 +287,18 @@ class Circle extends Component {
         oldValue && this.rendered && this.rotate();
     }
 
+    /**
+     * Triggered after the rotationIndex config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetRotationIndex(value, oldValue) {
+        if (Neo.isNumber(oldValue)) {
+            console.log('afterSetRotationIndex', value);
+        }
+    }
+
     /**
      * Triggered after the selectionModel config got changed
      * @param {Neo.selection.Model} value
@@ -527,7 +543,7 @@ class Circle extends Component {
      * @returns {String|Number} itemId
      */
     getItemRecordId(vnodeId) {
-        let itemId   = vnodeId.split('__')[1],
+        let itemId   = vnodeId.split('__').pop(),
             model    = this.store.model,
             keyField = model?.getField(model.keyProperty);
 
@@ -602,18 +618,25 @@ class Circle extends Component {
      * @param {Object} data
      */
     onMouseWheel(data) {
-        let me      = this,
-            deltaY  = data.deltaY,
-            rotateZ = me.rotateZ;
+        let me        = this,
+            deltaY    = data.deltaY,
+            itemAngle = 360 / me.maxItems,
+            maxAngle  = Math.max(0, (me.store.getCount() - me.maxItems) * itemAngle),
+            rotateZ   = me.rotateZ;
 
-        if (deltaY >  1 || deltaY < -1) {rotateZ += deltaY;}
+        if (deltaY >  1 || deltaY < -1) {
+            rotateZ += deltaY;
+        }
 
         if (rotateZ < 0) {
             rotateZ = 0;
+        } else if (rotateZ > maxAngle) {
+            rotateZ = maxAngle;
         }
 
-        if (!(me.rotateZ === 0 && rotateZ === 0)) {
-            me.rotateZ = rotateZ;
+        if (!(me.rotateZ === 0 && rotateZ === 0) && !(me.rotateZ === maxAngle && rotateZ === maxAngle)) {
+            me.rotateZ       = rotateZ;
+            me.rotationIndex = Math.floor(rotateZ / itemAngle);
 
             me.rotate();
         }
@@ -627,9 +650,9 @@ class Circle extends Component {
             vdom           = me.vdom,
             circleCenterEl = vdom.cn[0],
             transform = [
-                'rotateX(' + me.rotateX + 'deg)',
-                'rotateY(' + me.rotateY + 'deg)',
-                'rotateZ(' + me.rotateZ + 'deg)'
+                `rotateX(${me.rotateX}deg)`,
+                `rotateY(${me.rotateY}deg)`,
+                `rotateZ(${me.rotateZ}deg)`
             ].join(' ');
 
         if (me.circleCenterHasTransitionCls) {

package/src/component/Gallery.mjs

@@ -1,5 +1,4 @@
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import Collection      from '../collection/Base.mjs'
 import Component       from './Base.mjs';
 import GalleryModel    from '../selection/GalleryModel.mjs';
 import NeoArray        from '../util/Array.mjs';
@@ -38,20 +37,20 @@ class Gallery extends Component {
          */
         cls: ['neo-gallery', 'page', 'view'],
         /**
-         * True disables selection of  gallery items
+         * True disables selection of gallery items
          * @member {Boolean} disableSelection=false
          */
         disableSelection: false,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=160
+         * True will focus the gallery top level DOM node to enable the keyboard navigation right away
+         * @member {Boolean} focusOnMount=true
          */
-        imageHeight: 160,
+        focusOnMount: true,
         /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=120
+         * The image height of the gallery
+         * @member {Number} itemHeight=160
          */
-        imageWidth: 120,
+        itemHeight: 160,
         /**
          * @member {Object} itemTpl_
          */
@@ -61,6 +60,11 @@ class Gallery extends Component {
                 {tag: 'img', cls: [], style: {}}
             ]}
         ]},
+        /**
+         * The image width of the gallery
+         * @member {Number} itemWidth=120
+         */
+        itemWidth: 120,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -116,7 +120,7 @@ class Gallery extends Component {
          */
         selectedItemCls: 'neo-selected',
         /**
-         * uses the selection.GalleryModel by default
+         * Uses the selection.GalleryModel by default
          * @member {Neo.selection.GalleryModel|null} selectionModel_=null
          */
         selectionModel_: null,
@@ -129,7 +133,7 @@ class Gallery extends Component {
          * The store instance or class containing the data for the gallery items
          * @member {Neo.data.Store|null} store_=null
          */
-        store_: null, // todo: use a store once collecitons are integrated
+        store_: null,
         /**
          * The setTimeout() ids for calls which can get cancelled
          * @member {Array} transitionTimeouts=[]
@@ -173,23 +177,10 @@ class Gallery extends Component {
         super.construct(config);
 
         let me           = this,
-            domListeners = Neo.clone(me.domListeners, true),
-            vdom         = me.vdom,
-            origin       = vdom.cn[0],
-            camera       = origin.cn[0],
-            dolly        = camera.cn[0],
-            view         = dolly.cn[0],
-            prefix       = me.id + '__';
+            domListeners = Neo.clone(me.domListeners, true);
 
         me[itemsMounted] = false;
 
-        camera.id = prefix + 'camera';
-        dolly .id = prefix + 'dolly';
-        origin.id = prefix + 'origin';
-        view  .id = prefix + 'view';
-
-        me.vdom = vdom;
-
         domListeners.push({
             click: me.onClick,
             wheel: me.onMouseWheel,
@@ -213,6 +204,31 @@ class Gallery extends Component {
         }
     }
 
+    /**
+     * Triggered after the id config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetId(value, oldValue) {
+        super.afterSetId(value, oldValue);
+
+        let me     = this,
+            vdom   = me.vdom,
+            origin = vdom.cn[0],
+            camera = origin.cn[0],
+            dolly  = camera.cn[0],
+            view   = dolly.cn[0],
+            prefix = me.id + '__';
+
+        camera.id = prefix + 'camera';
+        dolly .id = prefix + 'dolly';
+        origin.id = prefix + 'origin';
+        view  .id = prefix + 'view';
+
+        me.vdom = vdom;
+    }
+
     /**
      * Triggered after the maxItem config got changed
      * @param {Number} value
@@ -238,24 +254,24 @@ class Gallery extends Component {
      * @protected
      */
     afterSetMounted(value, oldValue) {
-        let me = this;
+        let me             = this,
+            selectionModel = me.selectionModel;
 
         if (value) {
+            me.focusOnMount && me.focus(me.id);
+
             setTimeout(() => {
                 Neo.currentWorker.promiseMessage('main', {
                     action    : 'readDom',
                     appName   : me.appName,
-                    vnodeId   : me.id,
-                    attributes: [
-                        'offsetHeight',
-                        'offsetWidth'
-                    ]
+                    attributes: ['offsetHeight', 'offsetWidth'],
+                    vnodeId   : me.id
                 }).then(data => {
                     me.offsetHeight = data.attributes.offsetHeight;
                     me.offsetWidth  = data.attributes.offsetWidth;
 
-                    if (me.selectOnMount || me.selectionModel.hasSelection()) {
-                        let selection = me.selectionModel.getSelection(),
+                    if (me.selectOnMount || selectionModel.hasSelection()) {
+                        let selection = selectionModel.getSelection(),
                             key       = selection.length > 0 && selection[0];
 
                         if (!key) {
@@ -264,12 +280,12 @@ class Gallery extends Component {
                             key = me.store.getKeyAt(index);
                         }
 
-                        me.selectionModel.select(key);
+                        selectionModel.select(key);
                     }
                 });
             }, 300);
         } else {
-            me.selectionModel.items = [];
+            selectionModel.items = [];
         }
     }
 
@@ -300,9 +316,7 @@ class Gallery extends Component {
                     setTimeout(() => {
                         let sm = me.selectionModel;
 
-                        if (sm.hasSelection()) {
-                            me.onSelectionChange(sm.items);
-                        }
+                        sm.hasSelection() && me.onSelectionChange(sm.items);
                     }, 500);
                 }, 50);
             }
@@ -316,15 +330,13 @@ class Gallery extends Component {
      * @protected
      */
     afterSetSelectionModel(value, oldValue) {
-        if (this.rendered) {
-            value.register(this);
-            oldValue?.destroy();
-        }
+        oldValue?.destroy();
+        this.rendered && value.register(this);
     }
 
-    afterSetTranslateX() {this.moveOrigin();}
-    afterSetTranslateY() {this.moveOrigin();}
-    afterSetTranslateZ() {this.moveOrigin();}
+    afterSetTranslateX() {this.moveOrigin()}
+    afterSetTranslateY() {this.moveOrigin()}
+    afterSetTranslateZ() {this.moveOrigin()}
 
     /**
      * Triggered before the store config gets changed.
@@ -336,24 +348,11 @@ class Gallery extends Component {
     beforeSetStore(value, oldValue) {
         let me = this;
 
-        if (oldValue) {
-            oldValue.destroy();
-        }
-
-        // todo: remove the if check once all demos use stores (instead of collections)
-        if (value) {
-            return ClassSystemUtil.beforeSetInstance(value, Store, {
-                listeners  : {
-                    load : me.onStoreLoad,
-                    sort : me.onSort,
-                    scope: me
-                }
-            });
-        }
+        oldValue?.destroy();
 
-        return Neo.create(Collection, {
-            keyProperty: 'id',
+        return ClassSystemUtil.beforeSetInstance(value, Store, {
             listeners  : {
+                load : me.onStoreLoad,
                 sort : me.onSort,
                 scope: me
             }
@@ -361,7 +360,7 @@ class Gallery extends Component {
     }
 
     /**
-     * @returns {*}
+     * @returns {Object}
      */
     beforeGetItemTpl() {
         return Neo.clone(this._itemTpl, true);
@@ -399,8 +398,8 @@ class Gallery extends Component {
 
         imageVdom.src = Neo.config.resourcesPath + 'examples/' + record.image;
 
-        imageVdom.style.height = me.imageHeight + 'px';
-        imageVdom.style.width  = me.imageWidth  + 'px';
+        imageVdom.style.height = me.itemHeight + 'px';
+        imageVdom.style.width  = me.itemWidth  + 'px';
 
         return vdomItem;
     }
@@ -476,7 +475,7 @@ class Gallery extends Component {
     getCameraTransformForCell(index) {
         let me          = this,
             amountRows  = me.amountRows,
-            imageWidth  = me.imageWidth,
+            itemWidth   = me.itemWidth,
             gap         = 10,
             height      = me.offsetHeight / (amountRows + 2),
             spacing     = height + gap,
@@ -490,7 +489,7 @@ class Gallery extends Component {
             y = Math.floor(index / amountColumns);
         }
 
-        let cx = x * (imageWidth + 10),
+        let cx = x * (itemWidth + 10),
             cy = (y + 0.5) * spacing * 1.1 + 50;
 
         return [-cx, -cy, 0];
@@ -532,8 +531,8 @@ class Gallery extends Component {
         }
 
         return this.translate3d(
-            x * (me.imageWidth  + 10),
-            y * (me.imageHeight + 10) + 100,
+            x * (me.itemWidth  + 10),
+            y * (me.itemHeight + 10) + 100,
             0
         );
     }
@@ -570,29 +569,7 @@ class Gallery extends Component {
      */
     onConstructed() {
         super.onConstructed();
-
-        let me = this;
-
-        me.selectionModel?.register(me);
-
-        // load data for the example collection
-        if (!(me.store instanceof Store)) {
-            Neo.Xhr.promiseJson({
-                insideNeo: true,
-                url      : '../../resources/examples/data/ai_contacts.json'
-            }).then(data => {
-                me.store.items = data.json.data;
-                setTimeout(() => { // todo: rendering check
-                    me.createItems();
-
-                    if (me.selectOnMount) {
-                        me.afterSetMounted(true, false);
-                    }
-                }, 100);
-            }).catch(err => {
-                console.log('Error for Neo.Xhr.request', err, me.id);
-            });
-        }
+        this.selectionModel?.register(this);
     }
 
     /**
@@ -622,13 +599,14 @@ class Gallery extends Component {
     onSelectionChange(value) {
         let me             = this,
             index          = me.store.indexOf(value?.[0] || 0),
-            imageHeight    = me.imageHeight,
-            imageWidth     = me.imageWidth,
+            itemHeight     = me.itemHeight,
+            itemWidth      = me.itemWidth,
             vdom           = me.vdom,
             camera         = vdom.cn[0].cn[0],
+            cameraStyle    = camera.style,
             dollyTransform = me.getCameraTransformForCell(index),
             height         = me.offsetHeight / (me.amountRows + 2),
-            width          = Math.round(height * imageWidth / imageHeight),
+            width          = Math.round(height * itemWidth / itemHeight),
             spacing        = width + 10,
             timeoutId;
 
@@ -642,7 +620,7 @@ class Gallery extends Component {
             action : 'updateDom',
             appName: me.appName,
             deltas : {
-                id   : me.id + '__' + 'dolly',
+                id   : me.id + '__dolly',
                 style: {
                     transform: me.translate3d(...dollyTransform)
                 }
@@ -654,7 +632,7 @@ class Gallery extends Component {
                 vnodeId  : me.id,
                 functions: [{
                     fn            : 'getComputedStyle',
-                    params        : [me.id + '__' + 'dolly', null],
+                    params        : [me.id + '__dolly', null],
                     paramIsDomNode: [true, false],
                     scope         : 'defaultView',
                     returnFnName  : 'transform',
@@ -665,20 +643,20 @@ class Gallery extends Component {
                     translateX, angle;
 
                 if (transform.indexOf('matrix3d') === 0) {
-                    transform = transform.substring(9, transform.length - 1); // remove matrix3d( ... )
-                    transform = transform.split(',').map(e => parseFloat(e));
+                    transform  = transform.substring(9, transform.length - 1); // remove matrix3d( ... )
+                    transform  = transform.split(',').map(e => parseFloat(e));
                     translateX = transform[12]; // bottom left element of the 4x4 matrix
                 } else {
-                    transform = transform.substring(7, transform.length - 1); // remove matrix( ... )
-                    transform = transform.split(',').map(e => parseFloat(e));
+                    transform  = transform.substring(7, transform.length - 1); // remove matrix( ... )
+                    transform  = transform.split(',').map(e => parseFloat(e));
                     translateX = transform[4]; // bottom left element of the 2x3 matrix
                 }
 
                 translateX = translateX - dollyTransform[0];
                 angle      = Math.min(Math.max(translateX / (spacing * 3), -1), 1) * 45;
 
-                camera.style.transform          = 'rotateY(' + angle + 'deg)';
-                camera.style.transitionDuration = '330ms';
+                cameraStyle.transform          = `rotateY(${angle}deg)`;
+                cameraStyle.transitionDuration = '330ms';
 
                 me.vdom = vdom;
 
@@ -687,8 +665,8 @@ class Gallery extends Component {
 
                     vdom = me.vdom;
 
-                    camera.style.transform          = 'rotateY(0deg)';
-                    camera.style.transitionDuration = '5000ms';
+                    cameraStyle.transform          = 'rotateY(0deg)';
+                    cameraStyle.transitionDuration = '5000ms';
 
                     me.vdom = vdom;
                 }, 330);
@@ -739,7 +717,7 @@ class Gallery extends Component {
     }
 
     /**
-     * @param {Array} items
+     * @param {Object[]} items
      */
     onStoreLoad(items) {
         this.getItemsRoot().cn = []; // silent update
@@ -780,7 +758,7 @@ class Gallery extends Component {
      * @returns {String}
      */
     translate3d(x, y, z) {
-        return 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
+        return `translate3d(${x}px, ${y}px, ${z}px)`;
     }
 }
 

package/src/list/Base.mjs

@@ -233,7 +233,7 @@ class Base extends Component {
      * @protected
      */
     beforeSetSelectionModel(value, oldValue) {
-        oldValue && oldValue.destroy();
+        oldValue?.destroy();
         return ClassSystemUtil.beforeSetInstance(value, ListModel);
     }
 
@@ -245,7 +245,7 @@ class Base extends Component {
      * @protected
      */
     beforeSetStore(value, oldValue) {
-        oldValue && oldValue.destroy();
+        oldValue?.destroy();
         return ClassSystemUtil.beforeSetInstance(value, Store);
     }
 

package/src/selection/CircleModel.mjs

@@ -41,15 +41,15 @@ class CircleModel extends Model {
             item     = data.path[0],
             view     = me.view,
             store    = view.store,
-            maxItems = Math.min(store.getCount(), view.maxItems - 1),
+            maxIndex = Math.min(store.getCount(), view.maxItems) - 1,
             index, itemId, recordId;
 
         if (item.cls.includes('neo-circle-item')) {
             recordId = parseInt(view.getItemRecordId(item.id));
             index    = store.indexOf(recordId) + step;
 
-                 if (index < 0)        {index = maxItems;}
-            else if (index > maxItems) {index = 0;}
+                 if (index < 0)        {index = maxIndex;}
+            else if (index > maxIndex) {index = 0;}
         } else {
             index = 0;
         }

package/src/selection/ListModel.mjs

@@ -125,7 +125,7 @@ class ListModel extends Model {
             id   = me.id,
             view = me.view;
 
-        view.keys && view.keys._keys.push(
+        view.keys?._keys.push(
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
             {fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
             {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
@@ -156,7 +156,7 @@ class ListModel extends Model {
             id   = me.id,
             view = me.view;
 
-        view.keys && view.keys.removeKeys([
+        view.keys?.removeKeys([
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
             {fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
             {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},