Fixed #13478 - Add resize observer

primefaces · Aug 10, 2023 · 98c149c · GiacomoDM · Aug 10, 2023 · GiacomoDM
1 parent 27b2abb
commit 98c149c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/src/app/components/tabview/tabview.css b/src/app/components/tabview/tabview.css
@@ -15,7 +15,8 @@
 }
 
 .p-tabview-nav {
-    display: flex;
+    display: inline-flex;
+    min-width: 100%;
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -70,4 +71,4 @@
 
 .p-tabview-close {
     z-index: 1;
-}
+}
diff --git a/src/app/components/tabview/tabview.ts b/src/app/components/tabview/tabview.ts
@@ -16,11 +16,13 @@ import {
     Output,
     PLATFORM_ID,
     QueryList,
+    Renderer2,
     TemplateRef,
     ViewChild,
     ViewContainerRef,
     ViewEncapsulation,
-    forwardRef
+    forwardRef,
+    signal
 } from '@angular/core';
 import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
@@ -32,6 +34,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Subscription } from 'rxjs';
 import { TabViewChangeEvent, TabViewCloseEvent } from './tabview.interface';
 import { UniqueComponentId } from 'primeng/utils';
+import { Nullable } from 'primeng/ts-helpers';
 
 /**
  * TabPanel is a helper component for TabView component.
@@ -251,7 +254,7 @@ export class TabPanel implements AfterContentInit, OnDestroy {
     selector: 'p-tabView',
     template: `
         <div [ngClass]="{ 'p-tabview p-component': true, 'p-tabview-scrollable': scrollable }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'tabview'">
-            <div class="p-tabview-nav-container">
+            <div #elementToObserve class="p-tabview-nav-container">
                 <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" [attr.tabindex]="tabindex" [attr.aria-label]="prevButtonAriaLabel" type="button" pRipple>
                     <ChevronLeftIcon *ngIf="!previousIconTemplate" [attr.aria-hidden]="true" />
                     <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
@@ -270,7 +273,8 @@ export class TabPanel implements AfterContentInit, OnDestroy {
                                     [attr.id]="getTabHeaderActionId(tab.id)"
                                     [attr.aria-selected]="tab.selected"
                                     [attr.aria-controls]="getTabContentId(tab.id)"
-                                    [attr.tabindex]="tab.disabled || !tab.selected ? '-1' : tabindex"
+                                    [attr.aria-selected]="tab.selected"
+                                    [attr.tabindex]="tab.disabled ? null : tabindex"
                                     [attr.aria-disabled]="tab.disabled"
                                     [attr.data-pc-index]="i"
                                     [attr.data-pc-section]="'headeraction'"
@@ -301,7 +305,7 @@ export class TabPanel implements AfterContentInit, OnDestroy {
                         <li #inkbar class="p-tabview-ink-bar" [attr.data-pc-section]="'inkbar'"></li>
                     </ul>
                 </div>
-                <button *ngIf="scrollable && !forwardIsDisabled" #nextBtn [attr.tabindex]="tabindex" [attr.aria-label]="nextButtonAriaLabel" class="p-tabview-nav-next p-tabview-nav-btn p-link" (click)="navForward()" type="button" pRipple>
+                <button *ngIf="scrollable && !forwardIsDisabled && shouldVisible" #nextBtn [attr.tabindex]="tabindex" [attr.aria-label]="nextButtonAriaLabel" class="p-tabview-nav-next p-tabview-nav-btn p-link" (click)="navForward()" type="button" pRipple>
                     <ChevronRightIcon *ngIf="!nextIconTemplate" [attr.aria-hidden]="true" />
                     <ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
                 </button>
@@ -426,7 +430,13 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
 
     previousIconTemplate: TemplateRef<any> | undefined;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public cd: ChangeDetectorRef) {}
+    resizeObserver: Nullable<ResizeObserver>;
+
+    shouldVisible: boolean;
+
+    @ViewChild('elementToObserve') elementToObserve: ElementRef;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public cd: ChangeDetectorRef, private renderer: Renderer2) {}
 
     ngAfterContentInit() {
         this.initTabs();
@@ -448,6 +458,32 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
         });
     }
 
+    ngAfterViewInit() {
+        if(isPlatformBrowser(this.platformId)){
+            this.bindResizeObserver();
+        }
+    }
+
+    bindResizeObserver() {
+        if(!this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for(let entry of entries) {
+                    const navbarWidth = parseFloat(getComputedStyle(this.navbar.nativeElement).width);
+                    const rect = entry.contentRect;
+                    this.shouldVisible = rect.width < navbarWidth;
+                    this.cd.detectChanges();
+                }
+            });
+
+            this.resizeObserver.observe(this.elementToObserve.nativeElement);
+        }
+    }
+
+    unbindResizeObserver() {
+        this.resizeObserver.unobserve(this.elementToObserve.nativeElement);
+        this.resizeObserver = null;
+    }
+
     ngAfterViewChecked() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.tabChanged) {
@@ -461,6 +497,10 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
         if (this.tabChangesSubscription) {
             this.tabChangesSubscription.unsubscribe();
         }
+
+        if(this.resizeObserver) {
+            this.unbindResizeObserver();
+        }
     }
 
     getTabHeaderActionId(tabId) {
@@ -743,4 +783,4 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
     exports: [TabView, TabPanel, SharedModule],
     declarations: [TabView, TabPanel]
 })
-export class TabViewModule {}
+export class TabViewModule {}