From bd37ed434513783f2bbc14aa9c5409e035bd1cfd Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 8 Mar 2022 18:11:49 +0100 Subject: [PATCH] MOBILE-3153 core: Implement Swipe Navigation tour --- scripts/langindex.json | 1 + .../img/user-tours/swipe-navigation.svg | 1 + src/core/components/components.module.ts | 3 ++ .../core-swipe-navigation-tour.html | 5 +++ .../swipe-navigation-tour.scss | 12 +++++++ .../swipe-navigation-tour.ts | 35 +++++++++++++++++++ src/core/directives/swipe-navigation.ts | 25 ++++++++++++- src/core/lang.json | 1 + 8 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 src/assets/img/user-tours/swipe-navigation.svg create mode 100644 src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html create mode 100644 src/core/components/swipe-navigation-tour/swipe-navigation-tour.scss create mode 100644 src/core/components/swipe-navigation-tour/swipe-navigation-tour.ts diff --git a/scripts/langindex.json b/scripts/langindex.json index b568c1a3c..ec7f4e8eb 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -2269,6 +2269,7 @@ "core.submit": "moodle", "core.success": "moodle", "core.summary": "moodle", + "core.swipenavigationtourdescription": "local_moodlemobileapp", "core.tablet": "local_moodlemobileapp", "core.tag.defautltagcoll": "tag", "core.tag.errorareanotsupported": "local_moodlemobileapp", diff --git a/src/assets/img/user-tours/swipe-navigation.svg b/src/assets/img/user-tours/swipe-navigation.svg new file mode 100644 index 000000000..ac0c1732c --- /dev/null +++ b/src/assets/img/user-tours/swipe-navigation.svg @@ -0,0 +1 @@ + diff --git a/src/core/components/components.module.ts b/src/core/components/components.module.ts index 0bfb96dc3..2ab8a0a30 100644 --- a/src/core/components/components.module.ts +++ b/src/core/components/components.module.ts @@ -60,6 +60,7 @@ import { CoreSpacerComponent } from './spacer/spacer'; import { CoreHorizontalScrollControlsComponent } from './horizontal-scroll-controls/horizontal-scroll-controls'; import { CoreButtonWithSpinnerComponent } from './button-with-spinner/button-with-spinner'; import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides'; +import { CoreSwipeNavigationTourComponent } from './swipe-navigation-tour/swipe-navigation-tour'; @NgModule({ declarations: [ @@ -102,6 +103,7 @@ import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides'; CoreComboboxComponent, CoreSpacerComponent, CoreHorizontalScrollControlsComponent, + CoreSwipeNavigationTourComponent, ], imports: [ CommonModule, @@ -151,6 +153,7 @@ import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides'; CoreComboboxComponent, CoreSpacerComponent, CoreHorizontalScrollControlsComponent, + CoreSwipeNavigationTourComponent, ], }) export class CoreComponentsModule {} diff --git a/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html b/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html new file mode 100644 index 000000000..e8b94a568 --- /dev/null +++ b/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html @@ -0,0 +1,5 @@ + +

{{ 'core.swipenavigationtourdescription' | translate }}

+ + {{ 'core.endonesteptour' | translate }} + diff --git a/src/core/components/swipe-navigation-tour/swipe-navigation-tour.scss b/src/core/components/swipe-navigation-tour/swipe-navigation-tour.scss new file mode 100644 index 000000000..f71e25d12 --- /dev/null +++ b/src/core/components/swipe-navigation-tour/swipe-navigation-tour.scss @@ -0,0 +1,12 @@ +:host { + max-width: 85vw; + + img { + max-width: 300px; + } + + p { + text-align: center; + } + +} diff --git a/src/core/components/swipe-navigation-tour/swipe-navigation-tour.ts b/src/core/components/swipe-navigation-tour/swipe-navigation-tour.ts new file mode 100644 index 000000000..fb5c59085 --- /dev/null +++ b/src/core/components/swipe-navigation-tour/swipe-navigation-tour.ts @@ -0,0 +1,35 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Component } from '@angular/core'; +import { CoreUserTours } from '@features/usertours/services/user-tours'; + +/** + * Component showing the User Tour for the Swipe Navigation feature. + */ +@Component({ + selector: 'core-swipe-navigation-tour', + templateUrl: 'core-swipe-navigation-tour.html', + styleUrls: ['swipe-navigation-tour.scss'], +}) +export class CoreSwipeNavigationTourComponent { + + /** + * Dismiss User Tour. + */ + async dismiss(): Promise { + await CoreUserTours.dismiss(); + } + +} diff --git a/src/core/directives/swipe-navigation.ts b/src/core/directives/swipe-navigation.ts index a90ae68b9..081a7a85f 100644 --- a/src/core/directives/swipe-navigation.ts +++ b/src/core/directives/swipe-navigation.ts @@ -14,6 +14,8 @@ import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core'; import { CoreSwipeNavigationItemsManager } from '@classes/items-management/swipe-navigation-items-manager'; +import { CoreSwipeNavigationTourComponent } from '@components/swipe-navigation-tour/swipe-navigation-tour'; +import { CoreUserTours } from '@features/usertours/services/user-tours'; import { Gesture, GestureDetail } from '@ionic/angular'; import { CoreScreen } from '@services/screen'; import { GestureController, Platform } from '@singletons'; @@ -50,7 +52,8 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy { /** * @inheritdoc */ - ngAfterViewInit(): void { + async ngAfterViewInit(): Promise { + // Set up gesture listener const style = this.element.style; this.swipeGesture = GestureController.create({ el: this.element, @@ -71,6 +74,26 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy { }, }); this.swipeGesture.enable(); + + // Show user tour. + const source = this.manager?.getSource(); + + if (!source) { + return; + } + + await source.waitForLoaded(); + + const items = source.getItems() ?? []; + + if (items.length < 2) { + return; + } + + await CoreUserTours.showIfPending({ + id: 'swipe-navigation', + component: CoreSwipeNavigationTourComponent, + }); } /** diff --git a/src/core/lang.json b/src/core/lang.json index 02ef670c7..8dd623b4e 100644 --- a/src/core/lang.json +++ b/src/core/lang.json @@ -302,6 +302,7 @@ "submit": "Submit", "success": "Success", "summary": "Summary", + "swipenavigationtourdescription": "Swipe left and right to navigate around.", "tablet": "Tablet", "teachers": "Teachers", "thereisdatatosync": "There are offline {{$a}} to be synchronised.",