feat: tab navigation bar animations and state

src/app/modules/data/list/search-page-switch-animation.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type {AnimationBuilder} from '@ionic/angular';
+import {AnimationController} from '@ionic/angular';
+import type {AnimationOptions} from '@ionic/angular/providers/nav-controller';
+
+/**
+ *
+ */
+export function searchPageSwitchAnimation(
+  animationController: AnimationController,
+): AnimationBuilder {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (_baseElement: HTMLElement, options: AnimationOptions | any) => {
+    const rootTransition = animationController
+      .create()
+      .duration(options.duration ?? 200)
+      .easing('ease');
+
+    const enterTransition = animationController
+      .create()
+      .fromTo('opacity', '0', '1')
+      .addElement(options.enteringEl);
+    const exitTransition = animationController
+      .create()
+      .fromTo('opacity', '1', '1')
+      .addElement(options.leavingEl);
+    console.log(options.enteringEl.querySelector('stapps-data-list'));
+    const contentSlide = animationController
+      .create()
+      .fromTo('transform', 'translateX(600px)', 'translateX(0px)')
+      .addElement(options.enteringEl.querySelector('stapps-data-list'));
+
+    rootTransition.addAnimation([
+      enterTransition,
+      exitTransition,
+      contentSlide,
+    ]);
+    return rootTransition;
+  };
+}

src/app/modules/data/list/search-page.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018-2021 StApps
+ * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -12,10 +12,14 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnInit, OnDestroy} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Keyboard} from '@capacitor/keyboard';
-import {AlertController} from '@ionic/angular';
+import {
+  AlertController,
+  AnimationBuilder,
+  AnimationController,
+} from '@ionic/angular';
 import {
   SCFacet,
   SCFeatureConfiguration,
@@ -33,6 +37,7 @@ import {DataRoutingService} from '../data-routing.service';
 import {DataProvider} from '../data.provider';
 import {PositionService} from '../../map/position.service';
 import {ConfigProvider} from '../../config/config.provider';
+import {searchPageSwitchAnimation} from './search-page-switch-animation';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -138,6 +143,8 @@ export class SearchPageComponent implements OnInit, OnDestroy {
    */
   subscriptions: Subscription[] = [];
 
+  routeAnimation: AnimationBuilder;
+
   /**
    * Injects the providers and creates subscriptions
    *
@@ -163,7 +170,10 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     private readonly route: ActivatedRoute,
     protected positionService: PositionService,
     private readonly configProvider: ConfigProvider,
-  ) {}
+    animationController: AnimationController,
+  ) {
+    this.routeAnimation = searchPageSwitchAnimation(animationController);
+  }
 
   /**
    * Fetches items with set query configuration

src/app/modules/data/list/search-page.html

@@ -1,16 +1,16 @@
 <!--
   ~ Copyright (C) 2022 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
-  ~  under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <stapps-context contentId="data-list"></stapps-context>
@@ -50,6 +50,8 @@
       }}</ion-button>
       <ion-button
         [routerLink]="['/hebis-search/' + (queryText || '')]"
+        [skipLocationChange]="true"
+        [routerAnimation]="routeAnimation"
         fill="outline"
         size="large"
         >{{ 'hebisSearch.type' | translate }}

src/app/modules/data/list/search-provider.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {SCThings} from '@openstapps/core';
+
+export abstract class SearchProvider {
+  abstract fetchAndUpdateItems(append: boolean): Promise<void> | void;
+
+  abstract route(item: SCThings): Promise<void> | void;
+}