@lexriver/dome 1.2.16 → 1.4.0

package/README.md

@@ -1144,6 +1144,16 @@ Check if element is in DOM. Uses `document.body.contains(el)` internally, so it
 
 <br/>
 
+## isOnScreen
+
+```typescript
+DomeManipulator.isOnScreen(el: ELement | undefined)
+```
+
+Check if element is on screen now.
+
+<br/>
+
 ## addCssClassAsync
 
 ```typescript
@@ -1597,6 +1607,7 @@ export class AnimatedListTest extends DomeComponent<Attrs>{
         getHtmlElement: (x:number) => { // render element
             return <div>the number is {x}</div>
         },
+        emptyList:<div>Loading</div>
     })
 
     render(){

package/out/AnimatedArray.d.ts

@@ -11,6 +11,7 @@ export declare class AnimatedArray<T> {
         getHtmlElement: (o: T) => HTMLElement;
         animationShow?: Animation;
         animationHide?: Animation;
+        emptyList?: HTMLElement;
     };
     arrayOfKeyToElement: KeyToElementPair[];
     constructor(params: {
@@ -20,6 +21,7 @@ export declare class AnimatedArray<T> {
         getHtmlElement: (o: T) => HTMLElement;
         animationShow?: Animation;
         animationHide?: Animation;
+        emptyList?: HTMLElement;
     });
     get size(): number;
     update(array: T[], parentElement?: HTMLElement | Element): void;

package/out/AnimatedArray.js

@@ -17,6 +17,13 @@ export class AnimatedArray {
             console.warn('AnimatedArray unable to update, no parentElement');
             return;
         }
+        if (array.length == 0 && this.params.emptyList) {
+            DomeManipulator.replaceAllChildrenAsync(parentElement, this.params.emptyList);
+            return;
+        }
+        if (array.length > 0 && this.params.emptyList) {
+            DomeManipulator.removeElementAsync(this.params.emptyList, this.params.animationHide);
+        }
         //let arrayOfKeyToElement:KeyToElementPair[] = []
         let newArrayOfKeys = array.map((item) => this.params.getKey(item));
         let oldArrayOfKeys = this.arrayOfKeyToElement.map(x => x.key);

package/out/DomeManipulator.d.ts

@@ -18,6 +18,7 @@ export declare module DomeManipulator {
     function appendChildrenAsync(containerElement: Element, children: Element | Element[] | DocumentFragment | Text | string | null | undefined, animation?: Animation): Promise<void>;
     function replaceAllChildrenAsync(containerElement: Element, childrenToInsert: Element | Element[] | DocumentFragment | Text | string | null | undefined, animationForHide?: Animation, animationForShow?: Animation): Promise<void>;
     function isInDom(el: Element | undefined): boolean;
+    function isOnScreen(el: Element | undefined): boolean;
     function addCssClassAsync(element: Element, cssClassName: string, removeAfterMs?: number): Promise<void>;
     function addCssClassesAsync(element: Element, cssClassNames: string[], removeAfterMs?: number): Promise<void>;
     function removeCssClass(element: Element, cssClassName: string): void;

package/out/DomeManipulator.js

@@ -173,6 +173,14 @@ export var DomeManipulator;
         return document.body.contains(el);
     }
     DomeManipulator.isInDom = isInDom;
+    function isOnScreen(el) {
+        if (!el)
+            return false;
+        var rect = el.getBoundingClientRect();
+        var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+        return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
+    }
+    DomeManipulator.isOnScreen = isOnScreen;
     async function addCssClassAsync(element, cssClassName, removeAfterMs) {
         if (element.nodeType !== Node.ELEMENT_NODE)
             return;
@@ -253,17 +261,15 @@ export var DomeManipulator;
     }
     DomeManipulator.hasFocus = hasFocus;
     function scrollIntoView(element, paddingFromTop = 100) {
-        const positionBefore = getCurrentScrollPosition();
+        if (isOnScreen(element)) {
+            return; // no need to scroll
+        }
+        //const positionBefore = getCurrentScrollPosition()
         //element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
         //const positionAfter = getCurrentScrollPosition()
         //console.log('before=', positionBefore, 'after=', positionAfter)
         let expectedPosition = element.getBoundingClientRect().top + window.pageYOffset;
-        if (expectedPosition < positionBefore) {
-            expectedPosition += paddingFromTop;
-        }
-        else {
-            expectedPosition -= paddingFromTop;
-        }
+        expectedPosition -= paddingFromTop;
         window.scrollTo({ top: expectedPosition, behavior: 'smooth' });
     }
     DomeManipulator.scrollIntoView = scrollIntoView;

package/package.json

@@ -2,7 +2,7 @@
     "type": "module",
     "sideEffects": false,
     "name": "@lexriver/dome",
-    "version": "1.2.16",
+    "version": "1.4.0",
     "description": "",
     "main": "out/index.js",
     "types": "out/index.d.ts",

package/src/AnimatedArray.ts

@@ -17,6 +17,8 @@ export class AnimatedArray<T>{
         getHtmlElement:(o:T)=>HTMLElement,
         animationShow?:Animation
         animationHide?:Animation
+        //renderEmptyList?:()=>HTMLElement
+        emptyList?:HTMLElement
     }){
         if(params.array && params.parentElement){
             this.update(params.array)
@@ -34,6 +36,15 @@ export class AnimatedArray<T>{
             return
         }
 
+        if(array.length == 0 && this.params.emptyList){
+            DomeManipulator.replaceAllChildrenAsync(parentElement, this.params.emptyList)    
+            return
+        }
+
+        if(array.length > 0 && this.params.emptyList){
+            DomeManipulator.removeElementAsync(this.params.emptyList, this.params.animationHide)
+        }
+
         //let arrayOfKeyToElement:KeyToElementPair[] = []
         let newArrayOfKeys = array.map((item:T) => this.params.getKey(item))
         let oldArrayOfKeys = this.arrayOfKeyToElement.map(x => x.key)

package/src/DomeManipulator.ts

@@ -201,6 +201,13 @@ export module DomeManipulator {
         return document.body.contains(el)
     }
 
+    export function isOnScreen(el:Element|undefined){
+        if(!el) return false
+        var rect = el.getBoundingClientRect()
+        var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight)
+        return !(rect.bottom < 0 || rect.top - viewHeight >= 0)
+    }
+
     export async function addCssClassAsync(element: Element, cssClassName: string, removeAfterMs?:number) {
         if(element.nodeType !== Node.ELEMENT_NODE) return
         element.classList.add(cssClassName)
@@ -285,17 +292,18 @@ export module DomeManipulator {
     }
 
     export function scrollIntoView(element: Element, paddingFromTop:number = 100) {
-        const positionBefore = getCurrentScrollPosition()
+        if(isOnScreen(element)) {
+            return  // no need to scroll
+        }
+        //const positionBefore = getCurrentScrollPosition()
         //element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
         //const positionAfter = getCurrentScrollPosition()
         //console.log('before=', positionBefore, 'after=', positionAfter)
         let expectedPosition = element.getBoundingClientRect().top + window.pageYOffset;
-        if(expectedPosition<positionBefore){
-            expectedPosition += paddingFromTop
-        } else {
-            expectedPosition -= paddingFromTop
-        }
+        expectedPosition -= paddingFromTop
         window.scrollTo({top: expectedPosition, behavior: 'smooth'});
+
+        
         
     }