Merge pull request #2063 from crazyserver/MOBILE-3068

MOBILE-3068 imscp: Change toc to a lateral modal

scripts/langindex.json

@@ -640,6 +640,7 @@
   "addon.mod_imscp.deploymenterror": "imscp",
   "addon.mod_imscp.modulenameplural": "imscp",
   "addon.mod_imscp.showmoduledescription": "local_moodlemobileapp",
+  "addon.mod_imscp.toc": "imscp",
   "addon.mod_lesson.answer": "lesson",
   "addon.mod_lesson.attempt": "lesson",
   "addon.mod_lesson.attemptheader": "lesson",

src/addon/mod/imscp/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 { AddonModImscpIndexComponent } from './index/index';
-import { AddonModImscpTocPopoverComponent } from './toc-popover/toc-popover';
 
 @NgModule({
     declarations: [
         AddonModImscpIndexComponent,
-        AddonModImscpTocPopoverComponent,
     ],
     imports: [
         CommonModule,
@@ -38,12 +36,10 @@ import { AddonModImscpTocPopoverComponent } from './toc-popover/toc-popover';
     providers: [
     ],
     exports: [
-        AddonModImscpIndexComponent,
+        AddonModImscpIndexComponent
-        AddonModImscpTocPopoverComponent
     ],
     entryComponents: [
-        AddonModImscpIndexComponent,
+        AddonModImscpIndexComponent
-        AddonModImscpTocPopoverComponent
     ]
 })
 export class AddonModImscpComponentsModule {}

src/addon/mod/imscp/components/index/index.ts

@@ -13,13 +13,12 @@
 // limitations under the License.
 
 import { Component, Injector } from '@angular/core';
-import { PopoverController } from 'ionic-angular';
+import { ModalController } from 'ionic-angular';
 import { CoreAppProvider } from '@providers/app';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
 import { AddonModImscpProvider } from '../../providers/imscp';
 import { AddonModImscpPrefetchHandler } from '../../providers/prefetch-handler';
-import { AddonModImscpTocPopoverComponent } from '../../components/toc-popover/toc-popover';
 
 /**
  * Component that displays a IMSCP.
@@ -40,7 +39,7 @@ export class AddonModImscpIndexComponent extends CoreCourseModuleMainResourceCom
     nextItem = '';
 
     constructor(injector: Injector, private imscpProvider: AddonModImscpProvider, private courseProvider: CoreCourseProvider,
-            private appProvider: CoreAppProvider, private popoverCtrl: PopoverController,
+            private appProvider: CoreAppProvider, private modalCtrl: ModalController,
             private imscpPrefetch: AddonModImscpPrefetchHandler) {
         super(injector);
     }
@@ -148,17 +147,23 @@ export class AddonModImscpIndexComponent extends CoreCourseModuleMainResourceCom
      * @param {MouseEvent} event Event.
      */
     showToc(event: MouseEvent): void {
-        const popover = this.popoverCtrl.create(AddonModImscpTocPopoverComponent, { items: this.items });
+        // Create the toc modal.
+        const modal =  this.modalCtrl.create('AddonModImscpTocPage', {
+            items: this.items,
+            selected: this.currentItem
+        }, { cssClass: 'core-modal-lateral',
+            showBackdrop: true,
+            enableBackdropDismiss: true,
+            enterAnimation: 'core-modal-lateral-transition',
+            leaveAnimation: 'core-modal-lateral-transition' });
 
-        popover.onDidDismiss((itemId) => {
+        modal.onDidDismiss((itemId) => {
-            if (!itemId) {
+            if (itemId) {
-                // Not valid, probably a category.
+                this.loadItem(itemId);
-                return;
             }
-            this.loadItem(itemId);
         });
 
-        popover.present({
+        modal.present({
             ev: event
         });
     }

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

@@ -1,5 +0,0 @@
-<ion-list>
-    <a ion-item *ngFor="let item of items" (click)="loadItem(item.href)" detail-none [class.core-bold]="!item.href">
-        <span padding-left *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
-    </a>
-</ion-list>

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

@@ -1,5 +1,6 @@
 {
     "deploymenterror": "Content package error!",
     "modulenameplural": "IMS content packages",
-    "showmoduledescription": "Show description"
+    "showmoduledescription": "Show description",
+    "toc": "TOC"
 }

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

@@ -0,0 +1,19 @@
+<ion-header>
+    <ion-navbar core-back-button>
+        <ion-title>{{ 'addon.mod_imscp.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>
+            <a ion-item *ngFor="let item of items" (click)="loadItem(item.href)" [class.core-bold]="!item.href" [class.core-nav-item-selected]="selected == item.href">
+                <span padding-left *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
+            </a>
+        </ion-list>
+    </nav>
+</ion-content>

src/addon/mod/imscp/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 { AddonModImscpTocPage } from './toc';
+
+@NgModule({
+    declarations: [
+        AddonModImscpTocPage,
+    ],
+    imports: [
+        CoreDirectivesModule,
+        IonicPageModule.forChild(AddonModImscpTocPage),
+        TranslateModule.forChild()
+    ],
+})
+export class AddonModImscpTocPageModule {}

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

@@ -13,20 +13,23 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
+import { IonicPage, NavParams, ViewController } from 'ionic-angular';
 
 /**
- * Component to display the TOC of a IMSCP.
+ * Modal to display the TOC of a imscp.
  */
+@IonicPage({ segment: 'addon-mod-imscp-toc-modal' })
 @Component({
-    selector: 'addon-mod-imscp-toc-popover',
+    selector: 'page-addon-mod-imscp-toc',
-    templateUrl: 'addon-mod-imscp-toc-popover.html'
+    templateUrl: 'toc.html'
 })
-export class AddonModImscpTocPopoverComponent {
+export class AddonModImscpTocPage {
     items = [];
+    selected: string;
 
     constructor(navParams: NavParams, private viewCtrl: ViewController) {
         this.items = navParams.get('items') || [];
+        this.selected = navParams.get('selected');
     }
 
     /**
@@ -47,4 +50,11 @@ export class AddonModImscpTocPopoverComponent {
     getNumberForPadding(n: number): number[] {
         return new Array(n);
     }
+
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        this.viewCtrl.dismiss();
+    }
 }

src/assets/lang/en.json

@@ -639,6 +639,7 @@
     "addon.mod_imscp.deploymenterror": "Content package error!",
     "addon.mod_imscp.modulenameplural": "IMS content packages",
     "addon.mod_imscp.showmoduledescription": "Show description",
+    "addon.mod_imscp.toc": "TOC",
     "addon.mod_lesson.answer": "Answer",
     "addon.mod_lesson.attempt": "Attempt: {{$a}}",
     "addon.mod_lesson.attemptheader": "Attempt",