feat(ion-button): enable to disable gesture

Author: rdlabo

demo/src/app/tabs/tabs.page.ts

@@ -1,7 +1,8 @@
 import { Component, ElementRef, inject, OnInit } from '@angular/core';
-import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, ViewDidEnter } from '@ionic/angular/standalone';
+import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, ViewDidEnter, ViewDidLeave, Gesture } from '@ionic/angular/standalone';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs';
+
 // import { registerTabBarEffect } from '@rdlabo/ionic-theme-ios26';
 import { registerTabBarEffect } from '../../../../src';
 
@@ -11,9 +12,10 @@ import { registerTabBarEffect } from '../../../../src';
   styleUrls: ['tabs.page.scss'],
   imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
 })
-export class TabsPage implements OnInit, ViewDidEnter {
+export class TabsPage implements OnInit, ViewDidEnter, ViewDidLeave {
   readonly #router = inject(Router);
   readonly #el = inject(ElementRef);
+  readonly registeredGestures: Gesture[] = [];
   ngOnInit() {
     this.#router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
       const tabBar = this.#el.nativeElement.querySelector('ion-tab-bar');
@@ -29,6 +31,10 @@ export class TabsPage implements OnInit, ViewDidEnter {
   }
 
   ionViewDidEnter() {
-    registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar')!);
+    this.registeredGestures.push(registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar')!));
+  }
+
+  ionViewDidLeave() {
+    this.registeredGestures.forEach((gesture) => gesture.destroy());
   }
 }

src/index.ts

@@ -2,8 +2,8 @@ import { createGesture, GestureDetail, createAnimation } from '@ionic/core';
 import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
 import { Gesture } from '@ionic/core/dist/types/utils/gesture';
 
-export const registerTabBarEffect = (ionTabBar: HTMLElement) => {
-  let gesture: Gesture;
+export const registerTabBarEffect = (ionTabBar: HTMLElement): Gesture => {
+  let gesture!: Gesture;
   let currentTouchedButton: HTMLIonTabButtonElement | null;
   let gestureMoveStartTime: number | null;
   let tabEffectElY: number | null;
@@ -225,6 +225,8 @@ export const registerTabBarEffect = (ionTabBar: HTMLElement) => {
       ]);
     return tabButtonAnimation;
   };
+
+  return gesture;
 };
 
 const cloneElement = (tagName: string): HTMLElement => {