EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2335 book: Implement index page and its components

main
Dani Palou 2018-02-02 08:13:28 +01:00
parent 698e2cf8f6
commit 4bcecc81dd
12 changed files with 507 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/mod/book/book.module.ts
View File

@ -13,6 +13,7 @@
// limitations under the License.
import { NgModule } from '@angular/core';
import { AddonModBookComponentsModule } from './components/components.module';
import { AddonModBookProvider } from './providers/book';
import { AddonModBookModuleHandler } from './providers/module-handler';
import { AddonModBookLinkHandler } from './providers/link-handler';
@ -25,6 +26,7 @@ import { CoreCourseModulePrefetchDelegate } from '../../../core/course/providers
declarations: [
],
imports: [
AddonModBookComponentsModule
],
providers: [
AddonModBookProvider,

52
src/addon/mod/book/components/components.module.ts 100644
View File

@ -0,0 +1,52 @@
// (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 { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreComponentsModule } from '../../../../components/components.module';
import { CoreDirectivesModule } from '../../../../directives/directives.module';
import { CoreCourseComponentsModule } from '../../../../core/course/components/components.module';
import { AddonModBookIndexComponent } from './index/index';
import { AddonModBookTocPopoverComponent } from './toc-popover/toc-popover';
import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navigation-arrows';
@NgModule({
declarations: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent,
AddonModBookNavigationArrowsComponent
],
imports: [
CommonModule,
IonicModule,
TranslateModule.forChild(),
CoreComponentsModule,
CoreDirectivesModule,
CoreCourseComponentsModule
],
providers: [
],
exports: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent,
AddonModBookNavigationArrowsComponent
],
entryComponents: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent
]
})
export class AddonModBookComponentsModule {}

26
src/addon/mod/book/components/index/index.html 100644
View File

@ -0,0 +1,26 @@
<!-- Buttons to add to the header. -->
<core-navbar-buttons end>
<button ion-button icon-only (click)="showToc($event)">
<ion-icon name="bookmark"></ion-icon>
</button>
<core-context-menu>
<core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl" [iconAction]="'open'"></core-context-menu-item>
<core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate" (action)="expandDescription()" [iconAction]="'arrow-forward'"></core-context-menu-item>
<core-context-menu-item [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
<core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="600" [content]="timemodified" (action)="prefetch()" [iconAction]="prefetchStatusIcon" [closeOnClick]="false"></core-context-menu-item>
<core-context-menu-item *ngIf="size" [priority]="500" [content]="size" [iconDescription]="'cube'" (action)="removeFiles()" [iconAction]="trash"></core-context-menu-item>
</core-context-menu>
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
<div padding>
<addon-mod-book-navigation-arrows [previous]="previousChapter" [next]="nextChapter" (action)="changeChapter($event)"></addon-mod-book-navigation-arrows>
<core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent"></core-format-text>
<addon-mod-book-navigation-arrows [previous]="previousChapter" [next]="nextChapter" (action)="changeChapter($event)"></addon-mod-book-navigation-arrows>
</div>
</core-loading>

237
src/addon/mod/book/components/index/index.ts 100644
View File

@ -0,0 +1,237 @@
// (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 { Component, OnInit, Input, Output, EventEmitter, Optional } from '@angular/core';
import { NavParams, NavController, Content, PopoverController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';
import { CoreAppProvider } from '../../../../../providers/app';
import { CoreDomUtilsProvider } from '../../../../../providers/utils/dom';
import { CoreTextUtilsProvider } from '../../../../../providers/utils/text';
import { CoreCourseProvider } from '../../../../../core/course/providers/course';
import { CoreCourseHelperProvider } from '../../../../../core/course/providers/helper';
import { AddonModBookProvider, AddonModBookContentsMap, AddonModBookTocChapter } from '../../providers/book';
import { AddonModBookPrefetchHandler } from '../../providers/prefetch-handler';
import { AddonModBookTocPopoverComponent } from '../../components/toc-popover/toc-popover';
/**
* Component that displays a book.
*/
@Component({
selector: 'addon-mod-book-index',
templateUrl: 'index.html',
})
export class AddonModBookIndexComponent implements OnInit {
@Input() module: any; // The module of the book.
@Input() courseId: number; // Course ID the book belongs to.
@Output() bookRetrieved?: EventEmitter<any>;
externalUrl: string;
description: string;
loaded: boolean;
component = AddonModBookProvider.COMPONENT;
componentId: number;
chapterContent: string;
previousChapter: string;
nextChapter: string;
refreshIcon: string;
protected chapters: AddonModBookTocChapter[];
protected currentChapter: string;
protected contentsMap: AddonModBookContentsMap;
constructor(private bookProvider: AddonModBookProvider, private courseProvider: CoreCourseProvider,
private domUtils: CoreDomUtilsProvider, private appProvider: CoreAppProvider, private textUtils: CoreTextUtilsProvider,
private courseHelper: CoreCourseHelperProvider, private prefetchDelegate: AddonModBookPrefetchHandler,
private popoverCtrl: PopoverController, private translate: TranslateService, @Optional() private content: Content) {
this.bookRetrieved = new EventEmitter();
}
/**
* Component being initialized.
*/
ngOnInit(): void {
this.description = this.module.description;
this.componentId = this.module.id;
this.externalUrl = this.module.url;
this.loaded = false;
this.refreshIcon = 'spinner';
this.fetchContent();
}
/**
* Refresh the data.
*
* @param {any} [refresher] Refresher.
* @param {Function} [done] Function to call when done.
* @return {Promise<any>} Promise resolved when done.
*/
doRefresh(refresher?: any, done?: () => void): Promise<any> {
this.refreshIcon = 'spinner';
return this.bookProvider.invalidateContent(this.module.id, this.courseId).catch(() => {
// Ignore errors.
}).then(() => {
return this.fetchContent(this.currentChapter, true);
}).finally(() => {
this.refreshIcon = 'refresh';
refresher && refresher.complete();
done && done();
});
}
/**
* Show the TOC.
*
* @param {MouseEvent} event Event.
*/
showToc(event: MouseEvent): void {
const popover = this.popoverCtrl.create(AddonModBookTocPopoverComponent, {
chapters: this.chapters
});
popover.onDidDismiss((chapterId) => {
this.changeChapter(chapterId);
});
popover.present({
ev: event
});
}
/**
* Change the current chapter.
*
* @param {string} chapterId Chapter to load.
* @return {Promise<void>} Promise resolved when done.
*/
changeChapter(chapterId: string): void {
if (chapterId && chapterId != this.currentChapter) {
this.loaded = false;
this.refreshIcon = 'spinner';
this.loadChapter(chapterId);
}
}
/**
* Expand the description.
*/
expandDescription(): void {
this.textUtils.expandText(this.translate.instant('core.description'), this.description, this.component, this.module.id);
}
/**
* Prefetch the module.
*/
prefetch(): void {
// @todo this.courseHelper.contextMenuPrefetch($scope, this.module, this.courseId);
}
/**
* Confirm and remove downloaded files.
*/
removeFiles(): void {
this.courseHelper.confirmAndRemoveFiles(this.module, this.courseId);
}
/**
* Download book contents and load the current chapter.
*
* @param {string} [chapterId] Chapter to load.
* @param {boolean} [refresh] Whether we're refreshing data.
* @return {Promise<any>} Promise resolved when done.
*/
protected fetchContent(chapterId?: string, refresh?: boolean): Promise<any> {
const promises = [];
let downloadFailed = false;
// Try to get the book data.
promises.push(this.bookProvider.getBook(this.courseId, this.module.id).then((book) => {
this.bookRetrieved.emit(book);
this.description = book.intro || this.description;
}).catch(() => {
// Ignore errors since this WS isn't available in some Moodle versions.
}));
// Download content. This function also loads module contents if needed.
promises.push(this.prefetchDelegate.download(this.module, this.courseId).catch(() => {
// Mark download as failed but go on since the main files could have been downloaded.
downloadFailed = true;
if (!this.module.contents.length) {
// Try to load module contents for offline usage.
return this.courseProvider.loadModuleContents(this.module, this.courseId);
}
}));
return Promise.all(promises).then(() => {
this.contentsMap = this.bookProvider.getContentsMap(this.module.contents);
this.chapters = this.bookProvider.getTocList(this.module.contents);
if (typeof this.currentChapter == 'undefined') {
this.currentChapter = this.bookProvider.getFirstChapter(this.chapters);
}
// Show chapter.
return this.loadChapter(chapterId || this.currentChapter).then(() => {
if (downloadFailed && this.appProvider.isOnline()) {
// We could load the main file but the download failed. Show error message.
this.domUtils.showErrorModal('core.errordownloadingsomefiles', true);
}
// All data obtained, now fill the context menu.
// @todo this.courseHelper.fillContextMenu($scope, module, courseId, refresh, mmaModBookComponent);
}).catch(() => {
// Ignore errors, they're handled inside the loadChapter function.
});
}).catch((error) => {
// Error getting data, fail.
this.loaded = true;
this.refreshIcon = 'refresh';
this.domUtils.showErrorModalDefault(error, 'core.course.errorgetmodule', true);
});
}
/**
* Load a book chapter.
*
* @param {string} chapterId Chapter to load.
* @return {Promise<void>} Promise resolved when done.
*/
protected loadChapter(chapterId: string): Promise<void> {
this.currentChapter = chapterId;
this.content && this.content.scrollToTop();
return this.bookProvider.getChapterContent(this.contentsMap, chapterId, this.module.id).then((content) => {
this.chapterContent = content;
this.previousChapter = this.bookProvider.getPreviousChapter(this.chapters, chapterId);
this.nextChapter = this.bookProvider.getNextChapter(this.chapters, chapterId);
// Chapter loaded, log view. We don't return the promise because we don't want to block the user for this.
this.bookProvider.logView(this.module.instance, chapterId).then(() => {
// Module is completed when last chapter is viewed, so we only check completion if the last is reached.
if (!this.nextChapter) {
this.courseProvider.checkModuleCompletion(this.courseId, this.module.completionstatus);
}
});
}).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'addon.mod_book.errorchapter', true);
return Promise.reject(null);
}).finally(() => {
this.loaded = true;
this.refreshIcon = 'refresh';
});
}
}

14
src/addon/mod/book/components/navigation-arrows/navigation-arrows.html 100644
View File

@ -0,0 +1,14 @@
<ion-grid>
<ion-row>
<ion-col>
<a ion-button icon-only clear *ngIf="previous > 0" (click)="action.emit(previous)" title="{{ 'core.previous' | translate }}">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
</a>
</ion-col>
<ion-col text-right>
<a ion-button icon-only clear *ngIf="next > 0" (click)="action.emit(next)" title="{{ 'core.next' | translate }}">
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</a>
</ion-col>
</ion-row>
</ion-grid>

32
src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts 100644
View File

@ -0,0 +1,32 @@
// (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 { Component, Input, Output, EventEmitter } from '@angular/core';
/**
* Component to navigate to previous or next chapter in a book.
*/
@Component({
selector: 'addon-mod-book-navigation-arrows',
templateUrl: 'navigation-arrows.html'
})
export class AddonModBookNavigationArrowsComponent {
@Input() previous?: string; // Previous chapter ID.
@Input() next?: string; // Next chapter ID.
@Output() action?: EventEmitter<string>; // Will emit an event when the item clicked.
constructor() {
this.action = new EventEmitter();
}
}

5
src/addon/mod/book/components/toc-popover/toc-popover.html 100644
View File

@ -0,0 +1,5 @@
<ion-list>
<a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none>
<p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
</a>
</ion-list>

41
src/addon/mod/book/components/toc-popover/toc-popover.ts 100644
View File

@ -0,0 +1,41 @@
// (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 { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
import { AddonModBookTocChapter } from '../../providers/book';
/**
* Component to display the TOC of a book.
*/
@Component({
selector: 'addon-mod-book-toc-popover',
templateUrl: 'toc-popover.html'
})
export class AddonModBookTocPopoverComponent {
chapters: AddonModBookTocChapter[];
constructor(navParams: NavParams, private viewCtrl: ViewController) {
this.chapters = navParams.get('chapters') || [];
}
/**
* Function called when a course is clicked.
*
* @param {string} id ID of the clicked chapter.
*/
loadChapter(id: string): void {
this.viewCtrl.dismiss(id);
}
}

16
src/addon/mod/book/pages/index/index.html 100644
View File

@ -0,0 +1,16 @@
<ion-header>
<ion-navbar>
<ion-title><core-format-text [text]="title"></core-format-text></ion-title>
<ion-buttons end>
<!-- The buttons defined by the component will be added in here. -->
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-refresher [enabled]="bookComponent.loaded" (ionRefresh)="bookComponent.doRefresh($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<addon-mod-book-index [module]="module" [courseId]="courseId" (bookRetrieved)="updateData($event)"></addon-mod-book-index>
</ion-content>

33
src/addon/mod/book/pages/index/index.module.ts 100644
View File

@ -0,0 +1,33 @@
// (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 { AddonModBookComponentsModule } from '../../components/components.module';
import { AddonModBookIndexPage } from './index';
@NgModule({
declarations: [
AddonModBookIndexPage,
],
imports: [
CoreDirectivesModule,
AddonModBookComponentsModule,
IonicPageModule.forChild(AddonModBookIndexPage),
TranslateModule.forChild()
],
})
export class AddonModBookIndexPageModule {}

48
src/addon/mod/book/pages/index/index.ts 100644
View File

@ -0,0 +1,48 @@
// (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 { Component, ViewChild } from '@angular/core';
import { IonicPage, NavParams } from 'ionic-angular';
import { AddonModBookIndexComponent } from '../../components/index/index';
/**
* Page that displays a book.
*/
@IonicPage({ segment: 'addon-mod-book-index' })
@Component({
selector: 'page-addon-mod-book-index',
templateUrl: 'index.html',
})
export class AddonModBookIndexPage {
@ViewChild(AddonModBookIndexComponent) bookComponent: AddonModBookIndexComponent;
title: string;
module: any;
courseId: number;
constructor(navParams: NavParams) {
this.module = navParams.get('module') || {};
this.courseId = navParams.get('courseId');
this.title = this.module.name;
}
/**
* Update some data based on the book instance.
*
* @param {any} book Book instance.
*/
updateData(book: any): void {
this.title = book.name || this.title;
}
}

2
src/addon/mod/book/providers/module-handler.ts
View File

@ -50,7 +50,7 @@ export class AddonModBookModuleHandler implements CoreCourseModuleHandler {
title: module.name,
class: 'addon-mod_book-handler',
action(event: Event, navCtrl: NavController, module: any, courseId: number, options: NavOptions): void {
// @todo
navCtrl.push('AddonModBookIndexPage', {module: module, courseId: courseId}, options);
}
};
}