diff --git a/scripts/langindex.json b/scripts/langindex.json index 454c21834..8819689b2 100644 --- a/scripts/langindex.json +++ b/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", diff --git a/src/addon/mod/imscp/components/components.module.ts b/src/addon/mod/imscp/components/components.module.ts index 259c6c729..37a1cbeb2 100644 --- a/src/addon/mod/imscp/components/components.module.ts +++ b/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, - AddonModImscpTocPopoverComponent + AddonModImscpIndexComponent ], entryComponents: [ - AddonModImscpIndexComponent, - AddonModImscpTocPopoverComponent + AddonModImscpIndexComponent ] }) export class AddonModImscpComponentsModule {} diff --git a/src/addon/mod/imscp/components/index/index.ts b/src/addon/mod/imscp/components/index/index.ts index 11e53d2b2..3b793da19 100644 --- a/src/addon/mod/imscp/components/index/index.ts +++ b/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) => { - if (!itemId) { - // Not valid, probably a category. - return; + modal.onDidDismiss((itemId) => { + if (itemId) { + this.loadItem(itemId); } - this.loadItem(itemId); }); - popover.present({ + modal.present({ ev: event }); } diff --git a/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html b/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html deleted file mode 100644 index 6bda8d594..000000000 --- a/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html +++ /dev/null @@ -1,5 +0,0 @@ - - - {{item.title}} - - diff --git a/src/addon/mod/imscp/lang/en.json b/src/addon/mod/imscp/lang/en.json index 4abb95089..441eea598 100644 --- a/src/addon/mod/imscp/lang/en.json +++ b/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" } \ No newline at end of file diff --git a/src/addon/mod/imscp/pages/toc/toc.html b/src/addon/mod/imscp/pages/toc/toc.html new file mode 100644 index 000000000..035a5d6a0 --- /dev/null +++ b/src/addon/mod/imscp/pages/toc/toc.html @@ -0,0 +1,19 @@ + + + {{ 'addon.mod_imscp.toc' | translate }} + + + + + + + + diff --git a/src/addon/mod/imscp/pages/toc/toc.module.ts b/src/addon/mod/imscp/pages/toc/toc.module.ts new file mode 100644 index 000000000..28f970142 --- /dev/null +++ b/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 {} diff --git a/src/addon/mod/imscp/components/toc-popover/toc-popover.ts b/src/addon/mod/imscp/pages/toc/toc.ts similarity index 73% rename from src/addon/mod/imscp/components/toc-popover/toc-popover.ts rename to src/addon/mod/imscp/pages/toc/toc.ts index 115c1241f..1880e4813 100644 --- a/src/addon/mod/imscp/components/toc-popover/toc-popover.ts +++ b/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', - templateUrl: 'addon-mod-imscp-toc-popover.html' + selector: 'page-addon-mod-imscp-toc', + 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(); + } } diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index 54e78480c..8c35aeb95 100644 --- a/src/assets/lang/en.json +++ b/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",