@lightningjs/ui - npm Package Compare versions

Comparing version 1.3.7 to 1.3.8

CHANGELOG.md

 # Changelog
+
+## v1.3.8
+
+*17 may 2023*
+
+- add snapToRow functionality to Keyboard
+- optimized navigation function Keyboard
+- improved Request feature CollectionWrapper
+- Resolved minor bugs CollectionWrapper
+
 ## v1.3.7
@@ -22,2 +32,12 @@
 
+## v1.3.6
+*11 jan 2023*
+- Fix Carousel initial scroll
+- Fix Carousel infinite loop issue when dataset too small
+- Fix Grid indexchanged
+
+## v1.3.5
+*3 jan 2023*
+- Fix Carousel index issue introduced in v1.3.3. Refactored the code to correctly use internal index to maintain the correct focus and output the data index instead of the internal index.
+
 ## v1.3.4
@@ -24,0 +44,0 @@

docs/CollectionWrapper/index.md

@@ -295,2 +295,4 @@ # Collection Wrapper
 
+When you've set up the Requests functionality and use the setIndex with a value that is higher than the amount of items currently available the CollectionWrapper will try to catch up to that point by calling the onRequestItems signal until it has enough data.
+
 ## Signals
@@ -355,5 +357,5 @@ The Collection Wrapper makes use of signals if you want to respond to certain actions:
 ```js
-this.tag('MyGrid').add(items)
+this.tag('MyGrid').add(items, options)
 ```
-The parameter `items` can either be an array, object, string, or number.
+The parameter `items` can either be an array, object, string, or number. The parameter `options` is an object passed to the setIndex function.
 
@@ -363,5 +365,5 @@ ### addAt
 ```js
-this.tag('MyGrid').addAt(items, index)
+this.tag('MyGrid').addAt(items, index, options)
 ```
-The parameter `items` can either be an array, object, string, or number. The parameter `index` should be a number starting from 0.
+The parameter `items` can either be an array, object, string, or number. The parameter `index` should be a number starting from 0. The parameter `options` is an object passed to the setIndex function.
 
@@ -424,6 +426,9 @@ ### reload
 ```js
-this.tag('MyGrid').setIndex(index)
+this.tag('MyGrid').setIndex(index, options)
 ```
-The parameter `index` should be a number starting from 0.
+The parameter `index` should be a number starting from 0. The parameter `options` should be an object containing options settings.
 
+#### immediate
+This option forces the collection wrapper to set the index without animation to that index.
+
 ### first
@@ -430,0 +435,0 @@ You can set the index to the first item in the Collection Wrapper by using the `first` method:

docs/Keyboard/index.md

@@ -378,2 +378,5 @@ # Keyboard
 
+### snapToRow
+Sets if the navigation to the closest key in the next row.
+
 ## Getters
@@ -391,2 +394,5 @@
 ### maxCharacters
-Returns the maximum amount of `characters` the Keyboard component registers. Default value is 56.
+Returns the maximum amount of `characters` the Keyboard component registers. Default value is 56.
+
+### snapToRow
+Returns the current `snapToRow` value.

package.json

 {
   "name": "@lightningjs/ui",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Standard UI components for Lightning",
@@ -5,0 +5,0 @@ "scripts": {

src/Grid.js

@@ -42,7 +42,13 @@ /*
 
-    setIndex(index) {
+    async setIndex(index, options) {
+        if(this._requestsEnabled && (index > this._items.length - 1)) {
+            await this._requestMore(index);
+        }
+        if(this._items.length === 0) {
+            return;
+        }
         const targetIndex = limitWithinRange(index, 0, this._items.length - 1);
         const previousIndex = this._index;
-        const {mainIndex:previousMainIndex, crossIndex:previousCrossIndex} = this._findLocationOfIndex(this._index);
-        const {mainIndex, crossIndex} = this._findLocationOfIndex(targetIndex);
+        const { mainIndex: previousMainIndex, crossIndex: previousCrossIndex } = this._findLocationOfIndex(previousIndex);
+        const { mainIndex, crossIndex } = this._findLocationOfIndex(targetIndex);
         this._mainIndex = mainIndex;
@@ -52,3 +58,3 @@ this._crossIndex = crossIndex;
         this._index = targetIndex;
-        this._indexChanged({previousIndex, index: targetIndex, mainIndex, previousMainIndex, crossIndex, previousCrossIndex, lines: this._lines.length, dataLength: this._items.length});
+        this._indexChanged({previousIndex, index: targetIndex, mainIndex, previousMainIndex, crossIndex, previousCrossIndex, lines: this._lines.length, dataLength: this._items.length}, options);
     }
@@ -55,0 +61,0 @@

src/helpers/CollectionWrapper.js

@@ -60,5 +60,4 @@ /*
     _indexChanged(obj) {    
-        let { previousIndex: previous, index: target, dataLength: max, mainIndex, previousMainIndex, lines } = obj;
+        let { index: target, dataLength: max, mainIndex, previousMainIndex, lines } = obj;
         if (!isNaN(previousMainIndex) && !isNaN(mainIndex) && !isNaN(lines)) {
-            previous = previousMainIndex;
             target = mainIndex;
@@ -84,13 +83,16 @@ max = lines;
             obj = {
-                previous: 0,
-                index: 0,
-                max: 0
+                previousIndex: 0, 
+                index: this._index,
+                mainIndex: this._mainIndex || 0,
+                previousMainIndex: this._mainIndex || 0,
+                crossIndex: this._crossIndex || 0,
+                previousCrossIndex: this._crossIndex || 0,
+                lines: this._lines && this._lines.length || 0,
+                dataLength: this._items && this._items.length || 0
             }
         }
+
         this._requestingItems = true;
-        this.signal('onRequestItems', obj)
+        this._request(obj)
             .then((response) => {
-                if (response === false) {
-                    this.enableRequests = false;
-                }
                 this._requestingItems = false;
@@ -100,15 +102,61 @@ if(reload) {
                 }
-                const type = typeof response;
-                if (Array.isArray(response) || type === 'object' ||  type === 'string' || type === 'number') {
+                if ((Array.isArray(response) && response.length > 0) || type === 'object' ||  type === 'string' || type === 'number') {
                     this.add(response);
+                    obj.dataLength = this._items && this._items.length || 0;
+                    this.signal('onRequestItemsAdded', obj);
                 }
-            })
+            });
     }
+
+    _request(obj) {
+        return new Promise((resolve) => {
+            this.signal('onRequestItems', obj)
+                .then((response) => {
+                    if(response === undefined || response === false || (Array.isArray(response) && response.length === 0)) {
+                        this.enableRequests = false;
+                    }
+                    resolve(response);
+                });
+        });
+    }
+
+    async _requestMore(index, data = []) {
+        const obj = {
+            previousIndex: this._index, 
+            index,
+            mainIndex: this._mainIndex || 0,
+            previousMainIndex: this._previous && this._previous.mainIndex || 0,
+            crossIndex: this._crossIndex || 0,
+            previousCrossIndex: this._previous && this._previous.crossIndex || 0,
+            lines: this._lines && this._lines.length || 0,
+            dataLength: data.length + this._items && this._items.length || 0
+        }
+        return this._request(obj)
+            .then((response = []) => {
+                if(response) {
+                    const newData = [...data, ...response];
+                    if(index > this._items.length + newData.length) {
+                        return this._requestMore(index, newData);
+                    }
+                    this.add(newData);
+                    obj.dataLength = this._items && this._items.length || 0;
+                    this.signal('onRequestItemsAdded', obj);
+                    return true;
+                }
+                return false;
+            });
+    }
  
-    setIndex(index) {
+    async setIndex(index, options) {
+        if(this._requestsEnabled && (index > this._items.length - 1)) {
+            await this._requestMore(index);
+        }
+        if(this._items.length === 0) {
+            return;
+        }
         const targetIndex = limitWithinRange(index, 0, this._items.length - 1);
         const previousIndex = this._index;
         this._index = targetIndex;
-        this._indexChanged({ previousIndex, index: targetIndex, dataLength: this._items.length });
-        return previousIndex !== targetIndex;   
+        this._indexChanged({ previousIndex, index: targetIndex, dataLength: this._items.length }, options);
+        return previousIndex !== targetIndex;
     }
@@ -124,3 +172,3 @@
         if(this.wrapper) {
-            const hadChildren = this.wrapper.children > 0;
+            const hadChildren = this.wrapper.children.length > 0;
             this.wrapper.patch({
@@ -135,7 +183,7 @@ x: 0, y: 0, children: []
 
-    add(item) {
-        this.addAt(item);
+    add(item, options) {
+        this.addAt(item, this._items.length, options);
     }
 
-    addAt(item, index = this._items.length) {
+    addAt(item, index = this._items.length, options) {
         if(index >= 0 && index <= this._items.length) {
@@ -148,3 +196,4 @@ if(!Array.isArray(item)) {
             this.plotItems();
-            this.setIndex(this._index);
+            const targetIndex = index < this._index ? this._index + items.length : this._index;
+            this.setIndex(targetIndex, options);
         }
@@ -165,2 +214,5 @@ else {
                 if(target.assignedID === item.assignedID) {
+                    if(i === this._items.length-1 && item.hasFocus()) {
+                        this._index = this._index - 1;
+                    }
                     return this.removeAt(i);
@@ -181,3 +233,5 @@ }
         this._items.splice(index, amount);
-        this.plotItems();
+        if(this._items.length > 0) {
+            this.plotItems();
+        }
         return item;
@@ -255,3 +309,4 @@ }
 
-    scrollCollectionWrapper(obj) {
+    scrollCollectionWrapper(obj, options) {
+        const { immediate = false } = options;
         let {previousIndex:previous, index:target, dataLength:max, mainIndex, previousMainIndex, lines} = obj;
@@ -333,3 +388,3 @@ if(!isNaN(previousMainIndex) && !isNaN(mainIndex) && !isNaN(lines)) {
 
-        if(this.active && !isNaN(scroll) && this._scrollTransition) {
+        if(!immediate && this.active && !isNaN(scroll) && this._scrollTransition) {
             if(this._scrollTransition.isRunning()) {
@@ -336,0 +391,0 @@ this._scrollTransition.reset(scroll, 0.05);

src/Keyboard.js

@@ -37,2 +37,3 @@ /*
         this.navigationWrapAround = false;
+        this._snapToRow = false;
         this.resetFocus();
@@ -99,10 +100,16 @@ }
 
-                const keySpacing = keyType.margin || keyType.type.margin;
-                const {
-                    w = keyType.type.width || 0,
-                    h = keyType.type.height || 0,
-                    marginLeft = keyType.type.marginLeft || keySpacing || 0,
-                    marginRight = keyType.type.marginRight || keySpacing || rowHorizontalSpacing,
-                } = keyType;
-
+                let keySpacing = keyType && keyType.margin || 0;
+                let w = 0;
+                let h = 0;
+                let marginLeft = 0;
+                let marginRight = rowHorizontalSpacing;
+                if(keyType.type) {
+                    keySpacing = keyType.type.margin || keySpacing;
+                    w = keyType.type.width || w;
+                    h = keyType.type.height || h;
+                    marginLeft = keyType.type.marginLeft || marginLeft;
+                    marginRight = keyType.type.marginRight || marginRight;
+                }
+                w = keyType.w || w;
+                h = keyType.h || h;
                 rowHeight = h > rowHeight ? h : rowHeight;
@@ -289,2 +296,53 @@ const currentPosition = keyPosition + marginLeft;
 
+    _findKeyInRow(currentKey, currentRow, targetRow) {
+        const currentX = currentRow.x - (currentRow.w * currentRow.mountX)  + currentKey.x;
+        const m = targetRow.children.map((key) => {
+            const keyX = targetRow.x - (targetRow.w * targetRow.mountX) + key.x;
+            if(keyX <= currentX && (this._snapToRow || currentX < keyX + key.w)) {
+                return (keyX + key.w) - currentX;
+            }
+            if(keyX >= currentX && (this._snapToRow || keyX < currentX + currentKey.w)) {
+                return (currentX + currentKey.w) - keyX;
+            }
+            return -1;
+        });
+        if(!this._snapToRow) {
+            let acc = -1;
+            let t = -1;
+            for(let i = 0; i < m.length; i++) {
+                if(m[i] === -1 && acc > -1) {
+                    break;
+                }
+                if(m[i] > acc) {
+                    acc = m[i];
+                    t = i;
+                }
+            }
+            return t;
+        }
+        let t = m.indexOf(currentKey.w);
+        if(t === -1 && m.length > 0) {
+            let acc = this.w;
+            for(let i = 0; i < m.length; i++) {
+                if(m[i] >= 0) {
+                    const cutoff = ((currentX + currentKey.w) - currentX) - m[i];
+                    if(cutoff < acc) {
+                        acc = cutoff;
+                        t = i;
+                    }
+                }
+            }
+            if(t === -1) {
+                acc = this.w;
+                for(let i = 0; i < m.length; i++) {
+                    if(Math.abs(m[i]) < acc) {
+                        acc = Math.abs(m[i]);
+                        t = i;
+                    }
+                }
+            }
+        }
+        return t;
+    }
+
     navigate(direction, shift) {
@@ -314,25 +372,3 @@ const targetIndex = (direction === 'row' ? this._columnIndex : this._rowIndex) + shift;
                 const currentRow = this.rows[this._rowIndex];
-                const currentX = currentRow.x - (currentRow.w * currentRow.mountX)  + currentKey.x;
-                const m = targetRow.children.map((key) => {
-                    const keyX = targetRow.x - (targetRow.w * targetRow.mountX) + key.x;
-                    if(keyX <= currentX && currentX < keyX + key.w) {
-                        return (keyX + key.w) - currentX;
-                    }
-                    if(keyX >= currentX && keyX <= currentX + currentKey.w) {
-                        return (currentX + currentKey.w) - keyX;
-                    }
-                    return -1;
-                });
-                let acc = -1;
-                let t = -1;
-
-                for(let i = 0; i < m.length; i++) {
-                    if(m[i] === -1 && acc > -1) {
-                        break;
-                    }
-                    if(m[i] > acc) {
-                        acc = m[i];
-                        t = i;
-                    }
-                }
+                let t = this._findKeyInRow(currentKey, currentRow, targetRow);
                 if(t > -1) {
@@ -343,3 +379,4 @@ this._rowIndex = targetIndex;
                 else if(this.navigationWrapAround){
-                    this._columnIndex = Math.min(this.rows[0].children.length-1, this._columnIndex)
+                    t = this._findKeyInRow(currentKey, currentRow, this.rows[0]);
+                    this._columnIndex = t > -1 ? t : Math.min(this.rows[0].children.length-1, this._columnIndex)
                     return this._rowIndex = 0;
@@ -413,2 +450,10 @@ }
 
+    set snapToRow(bool) {
+        this._snapToRow = bool;
+    }
+
+    get snapToRow() {
+        return true;
+    }
+
     get rows() {
@@ -419,3 +464,3 @@ return this._keys && this._keys.children;
     get currentKeyWrapper() {
-        return this.rows && this.rows[this._rowIndex].children[this._columnIndex];
+        return this.rows && this.rows[this._rowIndex] && this.rows[this._rowIndex].children[this._columnIndex];
     }
@@ -422,0 +467,0 @@

No alert changes

Improved metrics

Total package byte prevSize

218622

2.51%

Lines of code

3175

3.32%

No dependency changes