MOBILE-2911 scorm: Move navigation to lateral

main
Pau Ferrer Ocaña 2019-03-07 16:21:15 +01:00 committed by Albert Gasset
parent c7529954e7
commit 0eda77d095
9 changed files with 94 additions and 41 deletions

View File

@ -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,
AddonModScormTocPopoverComponent
AddonModScormIndexComponent
],
imports: [
CommonModule,
@ -38,12 +36,10 @@ import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
providers: [
],
exports: [
AddonModScormIndexComponent,
AddonModScormTocPopoverComponent
AddonModScormIndexComponent
],
entryComponents: [
AddonModScormIndexComponent,
AddonModScormTocPopoverComponent
AddonModScormIndexComponent
]
})
export class AddonModScormComponentsModule {}

View File

@ -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>

View File

@ -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."
}

View File

@ -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>

View File

@ -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.
popover.onDidDismiss((sco) => {
// If the modal sends back a SCO, load it.
modal.onDidDismiss((sco) => {
if (sco) {
this.loadSco(sco);
}
});
popover.present({
modal.present({
ev: event
});
}

View File

@ -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>

View File

@ -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 {}

View File

@ -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',
templateUrl: 'addon-mod-scorm-toc-popover.html'
selector: 'page-addon-mod-scorm-toc',
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();
}
}

View File

@ -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.",