MOBILE-2911 scorm: Move navigation to lateral

src/addon/mod/scorm/components/components.module.ts

@@ -20,12 +20,10 @@ import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CoreCourseComponentsModule } from '@core/course/components/components.module';
 import { AddonModScormIndexComponent } from './index/index';
-import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
 
 @NgModule({
     declarations: [
-        AddonModScormIndexComponent,
+        AddonModScormIndexComponent
-        AddonModScormTocPopoverComponent
     ],
     imports: [
         CommonModule,
@@ -38,12 +36,10 @@ import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
     providers: [
     ],
     exports: [
-        AddonModScormIndexComponent,
+        AddonModScormIndexComponent
-        AddonModScormTocPopoverComponent
     ],
     entryComponents: [
-        AddonModScormIndexComponent,
+        AddonModScormIndexComponent
-        AddonModScormTocPopoverComponent
     ]
 })
 export class AddonModScormComponentsModule {}

src/addon/mod/scorm/components/toc-popover/addon-mod-scorm-toc-popover.html

@@ -1,19 +0,0 @@
-<ion-list>
-    <ion-item text-wrap *ngIf="attemptToContinue">
-        <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
-    </ion-item>
-    <ion-item text-center *ngIf="isBrowse">
-        <p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
-    </ion-item>
-    <ion-item text-center *ngIf="isReview">
-        <p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
-    </ion-item>
-
-    <!-- List of SCOs. -->
-    <ng-container *ngFor="let sco of toc">
-        <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="['core-padding-' + sco.level]" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" detail-none>
-            <img [src]="sco.image.url" [alt]="sco.image.description" />
-            <span>{{ sco.title }}</span>
-        </a>
-    </ng-container>
-</ion-list>

src/addon/mod/scorm/lang/en.json

@@ -47,6 +47,7 @@
     "scormstatusnotdownloaded": "This SCORM package is not downloaded. It will be automatically downloaded when you open it.",
     "scormstatusoutdated": "This SCORM package has been modified since the last download. It will be automatically downloaded when you open it.",
     "suspended": "Suspended",
+    "toc": "TOC",
     "warningofflinedatadeleted": "Some offline data from attempt {{number}} has been discarded because it couldn't be counted as a new attempt.",
     "warningsynconlineincomplete": "Some attempts couldn't be synchronised with the site because the last online attempt is not yet finished. Please finish the online attempt first."
 }

src/addon/mod/scorm/pages/player/player.html

@@ -3,7 +3,7 @@
         <ion-title><core-format-text [text]="title"></core-format-text></ion-title>
 
         <ion-buttons end>
-            <button *ngIf="showToc && !loadingToc && toc && toc.length" ion-button icon-only (click)="openToc($event)">
+            <button *ngIf="showToc && !loadingToc && toc && toc.length" ion-button icon-only (click)="openToc($event)"[attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
                 <ion-icon name="bookmark"></ion-icon>
             </button>
             <ion-spinner *ngIf="showToc && loadingToc"></ion-spinner>

src/addon/mod/scorm/pages/player/player.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { IonicPage, NavParams, PopoverController } from 'ionic-angular';
+import { IonicPage, NavParams, ModalController } from 'ionic-angular';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreSyncProvider } from '@providers/sync';
@@ -24,7 +24,6 @@ import { AddonModScormProvider, AddonModScormAttemptCountResult } from '../../pr
 import { AddonModScormHelperProvider } from '../../providers/helper';
 import { AddonModScormSyncProvider } from '../../providers/scorm-sync';
 import { AddonModScormDataModel12 } from '../../classes/data-model-12';
-import { AddonModScormTocPopoverComponent } from '../../components/toc-popover/toc-popover';
 
 /**
  * Page that allows playing a SCORM.
@@ -65,7 +64,7 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
     protected launchPrevObserver: any;
     protected goOfflineObserver: any;
 
-    constructor(navParams: NavParams, protected popoverCtrl: PopoverController, protected eventsProvider: CoreEventsProvider,
+    constructor(navParams: NavParams, protected modalCtrl: ModalController, protected eventsProvider: CoreEventsProvider,
             protected sitesProvider: CoreSitesProvider, protected syncProvider: CoreSyncProvider,
             protected domUtils: CoreDomUtilsProvider, protected timeUtils: CoreTimeUtilsProvider,
             protected scormProvider: AddonModScormProvider, protected scormHelper: AddonModScormHelperProvider,
@@ -382,20 +381,21 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
      * @param {MouseEvent} event Event.
      */
     openToc(event: MouseEvent): void {
-        const popover = this.popoverCtrl.create(AddonModScormTocPopoverComponent, {
+        const modal = this.modalCtrl.create('AddonModScormTocPage', {
             toc: this.toc,
             attemptToContinue: this.attemptToContinue,
-            mode: this.mode
+            mode: this.mode,
-        });
+            selected: this.currentSco && this.currentSco.id
+        }, { cssClass: 'core-modal-lateral' });
 
-        // If the popover sends back a SCO, load it.
+        // If the modal sends back a SCO, load it.
-        popover.onDidDismiss((sco) => {
+        modal.onDidDismiss((sco) => {
             if (sco) {
                 this.loadSco(sco);
             }
         });
 
-        popover.present({
+        modal.present({
             ev: event
         });
     }

src/addon/mod/scorm/pages/toc/toc.html

@@ -0,0 +1,33 @@
+<ion-header>
+    <ion-navbar core-back-button>
+        <ion-title>{{ 'addon.mod_scorm.toc' | translate }}</ion-title>
+        <ion-buttons end>
+            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+<ion-content>
+    <nav>
+        <ion-list>
+            <ion-item text-wrap *ngIf="attemptToContinue">
+                <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
+            </ion-item>
+            <ion-item text-center *ngIf="isBrowse">
+                <p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
+            </ion-item>
+            <ion-item text-center *ngIf="isReview">
+                <p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
+            </ion-item>
+
+            <!-- List of SCOs. -->
+            <ng-container *ngFor="let sco of toc">
+                <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="'core-padding-' + sco.level" [class.core-nav-item-selected]="selected == sco.id" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" [attr.detail-none]="!sco.prereq || !sco.launch ? true : null">
+                    <img [src]="sco.image.url" [alt]="sco.image.description" />
+                    <span>{{ sco.title }}</span>
+                </a>
+            </ng-container>
+        </ion-list>
+    </nav>
+</ion-content>

src/addon/mod/scorm/pages/toc/toc.module.ts

@@ -0,0 +1,31 @@
+// (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 { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreDirectivesModule } from '@directives/directives.module';
+import { AddonModScormTocPage } from './toc';
+
+@NgModule({
+    declarations: [
+        AddonModScormTocPage,
+    ],
+    imports: [
+        CoreDirectivesModule,
+        IonicPageModule.forChild(AddonModScormTocPage),
+        TranslateModule.forChild()
+    ],
+})
+export class AddonModScormTocPageModule {}

src/addon/mod/scorm/pages/toc/toc.ts

@@ -13,27 +13,30 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
+import { IonicPage, NavParams, ViewController } from 'ionic-angular';
 import { AddonModScormProvider } from '../../providers/scorm';
 
 /**
- * Component to display the TOC of a SCORM.
+ * Modal to display the TOC of a SCORM.
  */
+@IonicPage({ segment: 'addon-mod-scorm-toc-modal' })
 @Component({
-    selector: 'addon-mod-scorm-toc-popover',
+    selector: 'page-addon-mod-scorm-toc',
-    templateUrl: 'addon-mod-scorm-toc-popover.html'
+    templateUrl: 'toc.html'
 })
-export class AddonModScormTocPopoverComponent {
+export class AddonModScormTocPage {
     toc: any[];
     isBrowse: boolean;
     isReview: boolean;
     attemptToContinue: number;
+    selected: number;
 
     constructor(navParams: NavParams, private viewCtrl: ViewController) {
         this.toc = navParams.get('toc') || [];
         this.attemptToContinue = navParams.get('attemptToContinue');
 
         const mode = navParams.get('mode');
+        this.selected = navParams.get('selected');
 
         this.isBrowse = mode === AddonModScormProvider.MODEBROWSE;
         this.isReview = mode === AddonModScormProvider.MODEREVIEW;
@@ -51,4 +54,11 @@ export class AddonModScormTocPopoverComponent {
 
         this.viewCtrl.dismiss(sco);
     }
+
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        this.viewCtrl.dismiss();
+    }
 }

src/assets/lang/en.json

@@ -753,6 +753,7 @@
     "addon.mod_scorm.scormstatusnotdownloaded": "This SCORM package is not downloaded. It will be automatically downloaded when you open it.",
     "addon.mod_scorm.scormstatusoutdated": "This SCORM package has been modified since the last download. It will be automatically downloaded when you open it.",
     "addon.mod_scorm.suspended": "Suspended",
+    "addon.mod_scorm.toc": "TOC",
     "addon.mod_scorm.warningofflinedatadeleted": "Some offline data from attempt {{number}} has been discarded because it couldn't be counted as a new attempt.",
     "addon.mod_scorm.warningsynconlineincomplete": "Some attempts couldn't be synchronised with the site because the last online attempt is not yet finished. Please finish the online attempt first.",
     "addon.mod_survey.cannotsubmitsurvey": "Sorry, there was a problem submitting your survey. Please try again.",