diff --git a/src/addon/mod/book/components/index/index.ts b/src/addon/mod/book/components/index/index.ts index 908ab8cdd..75ad3beb1 100644 --- a/src/addon/mod/book/components/index/index.ts +++ b/src/addon/mod/book/components/index/index.ts @@ -64,7 +64,11 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp const modal = this.modalCtrl.create('AddonModBookTocPage', { chapters: this.chapters, selected: this.currentChapter - }, { cssClass: 'core-modal-lateral' }); + }, { cssClass: 'core-modal-lateral', + showBackdrop: true, + enableBackdropDismiss: true, + enterAnimation: 'core-modal-lateral-transition', + leaveAnimation: 'core-modal-lateral-transition' }); modal.onDidDismiss((chapterId) => { if (chapterId) { diff --git a/src/addon/mod/quiz/pages/player/player.ts b/src/addon/mod/quiz/pages/player/player.ts index 456908e60..12bf38f2b 100644 --- a/src/addon/mod/quiz/pages/player/player.ts +++ b/src/addon/mod/quiz/pages/player/player.ts @@ -96,7 +96,11 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy { // Create the navigation modal. this.navigationModal = modalCtrl.create('AddonModQuizNavigationModalPage', { page: this - }, { cssClass: 'core-modal-lateral' }); + }, { cssClass: 'core-modal-lateral', + showBackdrop: true, + enableBackdropDismiss: true, + enterAnimation: 'core-modal-lateral-transition', + leaveAnimation: 'core-modal-lateral-transition' }); } /** diff --git a/src/addon/mod/quiz/pages/review/review.ts b/src/addon/mod/quiz/pages/review/review.ts index bd5825901..6d1bc331d 100644 --- a/src/addon/mod/quiz/pages/review/review.ts +++ b/src/addon/mod/quiz/pages/review/review.ts @@ -69,7 +69,11 @@ export class AddonModQuizReviewPage implements OnInit { this.navigationModal = modalCtrl.create('AddonModQuizNavigationModalPage', { isReview: true, page: this - }, { cssClass: 'core-modal-lateral' }); + }, { cssClass: 'core-modal-lateral', + showBackdrop: true, + enableBackdropDismiss: true, + enterAnimation: 'core-modal-lateral-transition', + leaveAnimation: 'core-modal-lateral-transition' }); } /** diff --git a/src/addon/mod/scorm/pages/player/player.ts b/src/addon/mod/scorm/pages/player/player.ts index 6cfa65f7b..49f2cd000 100644 --- a/src/addon/mod/scorm/pages/player/player.ts +++ b/src/addon/mod/scorm/pages/player/player.ts @@ -386,7 +386,11 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy { attemptToContinue: this.attemptToContinue, mode: this.mode, selected: this.currentSco && this.currentSco.id - }, { cssClass: 'core-modal-lateral' }); + }, { cssClass: 'core-modal-lateral', + showBackdrop: true, + enableBackdropDismiss: true, + enterAnimation: 'core-modal-lateral-transition', + leaveAnimation: 'core-modal-lateral-transition' }); // If the modal sends back a SCO, load it. modal.onDidDismiss((sco) => { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 95751524c..fbcdc4cb5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -31,6 +31,7 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation'; import { MoodleMobileApp } from './app.component'; import { CoreInterceptor } from '@classes/interceptor'; import { CorePageTransition } from '@classes/page-transition'; +import { CoreModalLateralTransition } from '@classes/modal-lateral-transition'; import { CoreLoggerProvider } from '@providers/logger'; import { CoreDbProvider } from '@providers/db'; import { CoreAppProvider } from '@providers/app'; @@ -323,6 +324,7 @@ export class AppModule { // Set transition animation. config.setTransition('core-page-transition', CorePageTransition); + config.setTransition('core-modal-lateral-transition', CoreModalLateralTransition); // Decorate ion-content. this.decorateIonContent(); diff --git a/src/classes/modal-lateral-transition.ts b/src/classes/modal-lateral-transition.ts new file mode 100644 index 000000000..69d4db3c0 --- /dev/null +++ b/src/classes/modal-lateral-transition.ts @@ -0,0 +1,72 @@ +// (C) Copyright 2015 Martin Dougiamas +// +// 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 { Animation } from 'ionic-angular/animations/animation'; +import { PageTransition } from 'ionic-angular/transitions/page-transition'; + +/** + * Sliding transition for lateral modals. + */ +export class CoreModalLateralTransition extends PageTransition { + /** + * Animation. + */ + init(): void { + const enteringView = this.enteringView; + const leavingView = this.leavingView; + + const plt = this.plt; + const OFF_RIGHT = plt.isRTL ? '-100%' : '100%'; + + if (enteringView && enteringView.pageRef()) { + const ele = enteringView.pageRef().nativeElement; + const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper')); + const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop')); + + wrapper.beforeStyles({ transform: 'translateX(' + OFF_RIGHT + ')', opacity: 0.8 }); + wrapper.fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)'); + wrapper.fromTo('opacity', 0.8, 1); + backdrop.fromTo('opacity', 0.01, 0.4); + + this + .element(enteringView.pageRef()) + .duration(300) + .easing('cubic-bezier(0.36,0.66,0.04,1)') + .add(wrapper) + .add(backdrop); + } + + if (leavingView && leavingView.pageRef()) { + const ele = this.leavingView.pageRef().nativeElement; + const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper')); + const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper')); + const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop')); + + wrapper.beforeStyles({ transform: 'translateX(0)', opacity: 1 }); + wrapper.fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')'); + wrapper.fromTo('opacity', 1, 0.8); + contentWrapper.fromTo('opacity', 1, 0); + backdrop.fromTo('opacity', 0.4, 0); + + this + .element(leavingView.pageRef()) + .duration(300) + .easing('cubic-bezier(0.36,0.66,0.04,1)') + .add(contentWrapper) + .add(wrapper) + .add(backdrop); + + } + } +}