Resolve "Very unusual back button behavior"

src/app/modules/about/about-changelog.html

@@ -16,10 +16,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>Changelog</ion-title>
     <!-- TODO: translation -->

src/app/modules/about/about-licenses.html

@@ -16,10 +16,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>Licenses</ion-title>
     <!-- TODO: translation -->

src/app/modules/about/about-page/about-page.html

@@ -16,10 +16,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title *ngIf="content; else titleLoading">{{
       'title' | translateSimple: content

src/app/modules/assessments/detail/assessments-detail.html

@@ -15,10 +15,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/assessments/page/assessments-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'assessments.TITLE' | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/catalog/catalog.component.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <!--TODO: read this from the config (menu item title)-->
     <ion-title>{{ 'catalog.title' | translate | titlecase }}</ion-title>

src/app/modules/data/detail/data-detail.html

@@ -16,10 +16,7 @@
 <ion-header *ngIf="defaultHeader">
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start" *ngIf="!isModal">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons [slot]="isModal ? 'start' : 'primary'">

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

@@ -2,10 +2,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios" *ngIf="showDrawer">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ title | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/feedback/feedback-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/hebis/hebis-detail/hebis-detail.html

@@ -16,10 +16,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons slot="primary">

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

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'hebisSearch.title' | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/library/account/account.page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'library.account.title' | translate | titlecase }}</ion-title>
   </ion-toolbar>

src/app/modules/library/account/checked-out/checked-out-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{
       'library.account.pages.checked_out.title' | translate | titlecase

src/app/modules/library/account/fines/fines-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{
       'library.account.pages.fines.title' | translate | titlecase

src/app/modules/library/account/holds-and-reservations/holds-and-reservations-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{
       'library.account.pages.holds.title' | translate | titlecase

src/app/modules/library/account/profile/profile-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{
       'library.account.pages.profile.title' | translate | titlecase

src/app/modules/map/page/map-page.html

@@ -18,17 +18,7 @@
 <ion-header class="ion-no-border" translucent="true">
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        *ngIf="items.length !== 1"
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
-      <ion-back-button
-        *ngIf="items.length === 1"
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-        (click)="resetView()"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'map.page.TITLE' | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/news/page/news-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'news.title' | translate }}</ion-title>
   </ion-toolbar>

src/app/modules/profile/page/profile-page.component.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'profile.title' | translate | titlecase }}</ion-title>
   </ion-toolbar>

src/app/modules/schedule/page/schedule-page.html

@@ -16,10 +16,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title *ngIf="tabChoreographer.currentValue === 'calendar'">{{
       'schedule.calendar' | translate | titlecase

src/app/modules/settings/page/settings-page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button
-        [defaultHref]="'..'"
-        [text]="'back' | translate | titlecase"
-      ></ion-back-button>
+      <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title>{{ 'settings.title' | translate | titlecase }}</ion-title>
   </ion-toolbar>

src/app/util/ion-back-button.directive.ts

@@ -1,59 +0,0 @@
-import {Directive, HostListener, Input, Optional} from '@angular/core';
-import {
-  AnimationBuilder,
-  Config,
-  IonBackButtonDelegate,
-  IonRouterOutlet,
-  NavController,
-} from '@ionic/angular';
-
-/**
- * Overrides the default ion-back-button directive.
- *
- * @see https://github.com/ionic-team/ionic-framework/blob/main/angular/src/directives/navigation/ion-back-button.ts
- */
-@Directive({
-  selector: 'ion-back-button',
-})
-export class IonBackButtonOverrideDirective {
-  @Input()
-  defaultHref: string | undefined | null;
-
-  @Input()
-  routerAnimation?: AnimationBuilder;
-
-  constructor(
-    @Optional() private routerOutlet: IonRouterOutlet,
-    private navCtrl: NavController,
-    private config: Config,
-    private ionBackButton: IonBackButtonDelegate,
-  ) {
-    this.ionBackButton.onClick = () => {
-      // Override default onClick to prevent double execution and errors
-    };
-  }
-
-  @HostListener('click', ['$event'])
-  onClick(event: Event): void {
-    const defaultHref =
-      this.defaultHref || this.config.get('backButtonDefaultHref');
-
-    // Handle back via angular navCtrl.back()
-    // (which is animated, instead of location.back)
-    if (defaultHref === '..') {
-      this.navCtrl.back();
-    } else if (this.routerOutlet?.canGoBack()) {
-      this.navCtrl.setDirection(
-        'back',
-        undefined,
-        undefined,
-        this.routerAnimation,
-      );
-      this.routerOutlet.pop();
-      event.preventDefault();
-    } else if (defaultHref != undefined) {
-      this.navCtrl.navigateBack(defaultHref, {animation: this.routerAnimation});
-      event.preventDefault();
-    }
-  }
-}

src/app/util/util.module.ts

@@ -21,7 +21,6 @@ import {DateFromIndexPipe} from './date-from-index.pipe';
 import {DaytimeKeyPipe} from './daytime-key.pipe';
 import {LazyPipe} from './lazy.pipe';
 import {NextDateInListPipe} from './next-date-in-list.pipe';
-import {IonBackButtonOverrideDirective} from './ion-back-button.directive';
 
 @NgModule({
   declarations: [
@@ -32,7 +31,6 @@ import {IonBackButtonOverrideDirective} from './ion-back-button.directive';
     DateFromIndexPipe,
     DaytimeKeyPipe,
     NextDateInListPipe,
-    IonBackButtonOverrideDirective,
   ],
   exports: [
     ArrayLastPipe,
@@ -42,7 +40,6 @@ import {IonBackButtonOverrideDirective} from './ion-back-button.directive';
     DateFromIndexPipe,
     DaytimeKeyPipe,
     NextDateInListPipe,
-    IonBackButtonOverrideDirective,
   ],
 })
 export class UtilModule {}