Fix spacer size calculation

Fix primefaces#16246
Klebert-Engineering · Aug 22, 2024 · 022c5a0 · 022c5a0
1 parent 1f6c5d9
commit 022c5a0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
         "@types/jest": "^29.5.1",
         "@types/node": "^16.18.67",
         "@types/react": "^18.2.41",
+        "@types/resize-observer-browser": "^0.1.11",
         "@typescript-eslint/eslint-plugin": "^7.11.0",
         "chart.js": "4.4.2",
         "codelyzer": "^0.0.28",

diff --git a/src/app/components/scroller/scroller.ts b/src/app/components/scroller/scroller.ts
@@ -460,7 +460,7 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
 
     initialized: boolean = false;
 
-    windowResizeListener: VoidListener;
+    resizeObserver: any;
 
     defaultWidth: number | undefined;
 
@@ -614,6 +614,8 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
                 this.defaultHeight = DomHandler.getHeight(this.elementViewChild?.nativeElement);
                 this.defaultContentWidth = DomHandler.getWidth(this.contentEl);
                 this.defaultContentHeight = DomHandler.getHeight(this.contentEl);
+                this.resizeObserver = new ResizeObserver(() => this.onResize());
+                this.resizeObserver.observe(this.elementViewChild?.nativeElement);
                 this.initialized = true;
             }
         }
@@ -624,7 +626,6 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
             this.setSize();
             this.calculateOptions();
             this.setSpacerSize();
-            this.bindResizeListener();
 
             this.cd.detectChanges();
         }
@@ -866,15 +867,16 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
     }
 
     setSpacerSize() {
-        if (this._scrollHeight !== '100%' && this._items) {
-            const contentPos = this.getContentPosition();
-            const setProp = (_name: string, _value: any, _size: number, _cpos: number = 0) => (this.spacerStyle = { ...this.spacerStyle, ...{ [`${_name}`]: (_value || []).length * _size + _cpos + 'px' } });
+        if (this._items) {
+            const setProp = (_name, _count, _size) => (this.spacerStyle = { ...this.spacerStyle, ...{[`${_name}`]: _count * _size + 'px' }});
 
+            const numItems = this._items.length;
             if (this.both) {
-                setProp('height', this._items, (<number[]>this._itemSize)[0], contentPos.y);
-                setProp('width', this._columns || this._items[1], (<number[]>this._itemSize)[1], contentPos.x);
-            } else {
-                this.horizontal ? setProp('width', this._columns || this._items, <number>this._itemSize, contentPos.x) : setProp('height', this._items, <number>this._itemSize, contentPos.y);
+                setProp('height', numItems, this._itemSize[0]);
+                setProp('width', this._columns?.length || this._items[1]?.length, this._itemSize[1]);
+            }
+            else {
+                this.horizontal ? setProp('width', this._columns.length || this._items.length, this._itemSize) : setProp('height', numItems, this._itemSize);
             }
         }
     }
@@ -1030,26 +1032,14 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
         }
     }
 
-    bindResizeListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (!this.windowResizeListener) {
-                this.zone.runOutsideAngular(() => {
-                    const window = this.document.defaultView as Window;
-                    const event = DomHandler.isTouchDevice() ? 'orientationchange' : 'resize';
-                    this.windowResizeListener = this.renderer.listen(window, event, this.onWindowResize.bind(this));
-                });
-            }
-        }
-    }
-
     unbindResizeListener() {
-        if (this.windowResizeListener) {
-            this.windowResizeListener();
-            this.windowResizeListener = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(this.elementViewChild?.nativeElement);
+            this.resizeObserver = null;
         }
     }
 
-    onWindowResize() {
+    onResize() {
         if (this.resizeTimeout) {
             clearTimeout(this.resizeTimeout);
         }

diff --git a/src/app/components/tsconfig.lib.json b/src/app/components/tsconfig.lib.json
@@ -15,7 +15,7 @@
             "dom"
         ],
         "skipLibCheck": true,
-        "types": [],
+        "types": ["resize-observer-browser"],
         "paths": {
             "primeng/*": ["src/app/components/*/public_api"]
         }