MOBILE-2911 animation: Modal slide from lateral animation

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) {

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' });
     }
 
     /**

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' });
     }
 
     /**

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) => {

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();

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);
+
+        }
+    }
+}