Merge pull request #2308 from dpalou/MOBILE-3354

MOBILE-3354 book: Support navstyle setting

scripts/langindex.json

@@ -426,6 +426,8 @@
   "addon.mod_assign_submission_onlinetext.wordlimitexceeded": "assignsubmission_onlinetext",
   "addon.mod_book.errorchapter": "book",
   "addon.mod_book.modulenameplural": "book",
+  "addon.mod_book.navnexttitle": "book",
+  "addon.mod_book.navprevtitle": "book",
   "addon.mod_book.tagarea_book_chapters": "book",
   "addon.mod_book.toc": "book",
   "addon.mod_chat.beep": "chat",

src/addon/mod/book/components/index/addon-mod-book-index.html

@@ -19,13 +19,13 @@
     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-course-module-description>
 
     <div padding class="safe-padding-horizontal">
-        <core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
+        <core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter && previousChapter.id" [previousTitle]="previousNavBarTitle" [next]="nextChapter && nextChapter.id" [nextTitle]="nextNavBarTitle" (action)="changeChapter($event)"></core-navigation-bar>
         <core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text>
         <div margin-top *ngIf="tagsEnabled && contentsMap && contentsMap[currentChapter] && contentsMap[currentChapter].tags && contentsMap[currentChapter].tags.length > 0">
             <b>{{ 'core.tag.tags' | translate }}:</b>
             <core-tag-list [tags]="contentsMap[currentChapter].tags"></core-tag-list>
         </div>
-        <core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
+        <core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter && previousChapter.id" [previousTitle]="previousNavBarTitle" [next]="nextChapter && nextChapter.id" [nextTitle]="nextNavBarTitle" (action)="changeChapter($event)"></core-navigation-bar>
     </div>
 
 </core-loading>

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

@@ -17,7 +17,9 @@ import { Content, 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 { AddonModBookProvider, AddonModBookContentsMap, AddonModBookTocChapter, AddonModBookBook } from '../../providers/book';
+import {
+    AddonModBookProvider, AddonModBookContentsMap, AddonModBookTocChapter, AddonModBookBook, AddonModBookNavStyle
+} from '../../providers/book';
 import { AddonModBookPrefetchHandler } from '../../providers/prefetch-handler';
 import { CoreTagProvider } from '@core/tag/providers/tag';
 
@@ -33,14 +35,18 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
 
     component = AddonModBookProvider.COMPONENT;
     chapterContent: string;
-    previousChapter: string;
+    previousChapter: AddonModBookTocChapter;
-    nextChapter: string;
+    nextChapter: AddonModBookTocChapter;
     tagsEnabled: boolean;
+    displayNavBar = true;
+    previousNavBarTitle: string;
+    nextNavBarTitle: string;
 
     protected chapters: AddonModBookTocChapter[];
     protected currentChapter: string;
     protected contentsMap: AddonModBookContentsMap;
     protected book: AddonModBookBook;
+    protected displayTitlesInNavBar = false;
 
     constructor(injector: Injector, private bookProvider: AddonModBookProvider, private courseProvider: CoreCourseProvider,
             private appProvider: CoreAppProvider, private prefetchDelegate: AddonModBookPrefetchHandler,
@@ -128,6 +134,8 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
             this.book = book;
             this.dataRetrieved.emit(book);
             this.description = book.intro;
+            this.displayNavBar = book.navstyle != AddonModBookNavStyle.TOC_ONLY;
+            this.displayTitlesInNavBar = book.navstyle == AddonModBookNavStyle.TEXT;
         }).catch(() => {
             // Ignore errors since this WS isn't available in some Moodle versions.
         }));
@@ -194,10 +202,15 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
             this.previousChapter = this.bookProvider.getPreviousChapter(this.chapters, chapterId);
             this.nextChapter = this.bookProvider.getNextChapter(this.chapters, chapterId);
 
+            this.previousNavBarTitle = this.previousChapter && this.displayTitlesInNavBar ?
+                    this.translate.instant('addon.mod_book.navprevtitle', {$a: this.previousChapter.title}) : '';
+            this.nextNavBarTitle = this.nextChapter && this.displayTitlesInNavBar ?
+                    this.translate.instant('addon.mod_book.navnexttitle', {$a: this.nextChapter.title}) : '';
+
             // 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, logChapterId ? chapterId : undefined, this.module.name).then(() => {
                 // Module is completed when last chapter is viewed, so we only check completion if the last is reached.
-                if (this.nextChapter == '0') {
+                if (!this.nextChapter) {
                     this.courseProvider.checkModuleCompletion(this.courseId, this.module.completiondata);
                 }
             }).catch(() => {

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

@@ -1,6 +1,8 @@
 {
     "errorchapter": "Error reading chapter of book.",
     "modulenameplural": "Books",
+    "navnexttitle": "Next: {{$a}}",
+    "navprevtitle": "Previous: {{$a}}",
     "tagarea_book_chapters": "Book chapters",
     "toc": "Table of contents"
 }

src/addon/mod/book/providers/book.ts

@@ -36,6 +36,15 @@ export const enum AddonModBookNumbering {
     INDENTED = 3,
 }
 
+/**
+ * Constants to define the navigation style used within a book.
+ */
+export const enum AddonModBookNavStyle {
+    TOC_ONLY = 0,
+    IMAGE = 1,
+    TEXT = 2,
+}
+
 /**
  * Service that provides some features for books.
  */
@@ -225,15 +234,15 @@ export class AddonModBookProvider {
      *
      * @param chapters The chapters list.
      * @param chapterId The current chapter.
-     * @return The next chapter id.
+     * @return The next chapter.
      */
-    getNextChapter(chapters: AddonModBookTocChapter[], chapterId: string): string {
+    getNextChapter(chapters: AddonModBookTocChapter[], chapterId: string): AddonModBookTocChapter {
-        let next = '0';
+        let next: AddonModBookTocChapter;
 
         for (let i = 0; i < chapters.length; i++) {
             if (chapters[i].id == chapterId) {
                 if (typeof chapters[i + 1] != 'undefined') {
-                    next = chapters[i + 1].id;
+                    next = chapters[i + 1];
                     break;
                 }
             }
@@ -247,16 +256,16 @@ export class AddonModBookProvider {
      *
      * @param chapters The chapters list.
      * @param chapterId The current chapter.
-     * @return The next chapter id.
+     * @return The next chapter.
      */
-    getPreviousChapter(chapters: AddonModBookTocChapter[], chapterId: string): string {
+    getPreviousChapter(chapters: AddonModBookTocChapter[], chapterId: string): AddonModBookTocChapter {
-        let previous = '0';
+        let previous: AddonModBookTocChapter;
 
         for (let i = 0; i < chapters.length; i++) {
             if (chapters[i].id == chapterId) {
                 break;
             }
-            previous = chapters[i].id;
+            previous = chapters[i];
         }
 
         return previous;

src/assets/lang/en.json

@@ -426,6 +426,8 @@
     "addon.mod_assign_submission_onlinetext.wordlimitexceeded": "The word limit for this assignment is {{$a.limit}} words and you are attempting to submit {{$a.count}} words. Please review your submission and try again.",
     "addon.mod_book.errorchapter": "Error reading chapter of book.",
     "addon.mod_book.modulenameplural": "Books",
+    "addon.mod_book.navnexttitle": "Next: {{$a}}",
+    "addon.mod_book.navprevtitle": "Previous: {{$a}}",
     "addon.mod_book.tagarea_book_chapters": "Book chapters",
     "addon.mod_book.toc": "Table of contents",
     "addon.mod_chat.beep": "Beep",

src/components/navigation-bar/core-navigation-bar.html

@@ -1,17 +1,19 @@
-<ion-grid no-padding *ngIf="previous || info || next">
+<ion-grid no-padding padding-bottom *ngIf="previous || info || next">
     <ion-row>
-        <ion-col text-start>
+        <ion-col text-start col-4>
-            <a ion-button icon-only clear *ngIf="previous" (click)="action.emit(previous)" [title]="'core.previous' | translate">
+            <a class="core-navigation-bar-arrow" *ngIf="previous" ion-button [attr.icon-only]="previousTitle ? null : true" [attr.icon-start]="previousTitle ? true : null" color="light" [title]="previousTitle || ('core.previous' | translate)" padding-end (click)="action.emit(previous)">
                 <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
+                <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
             </a>
         </ion-col>
-        <ion-col text-center>
+        <ion-col text-center col-4>
             <a ion-button icon-only clear *ngIf="info" (click)="showInfo()" [title]="title">
                 <ion-icon name="information-circle"></ion-icon>
             </a>
         </ion-col>
-        <ion-col text-end>
+        <ion-col text-end col-4>
-            <a ion-button icon-only clear *ngIf="next" (click)="action.emit(next)" [title]="'core.next' | translate">
+            <a class="core-navigation-bar-arrow" *ngIf="next" ion-button [attr.icon-only]="nextTitle ? null : true" [attr.icon-end]="nextTitle ? true : null" [title]="nextTitle || ('core.next' | translate)" padding-start (click)="action.emit(next)">
+                <core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
                 <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
             </a>
         </ion-col>

src/components/navigation-bar/navigation-bar.scss

@@ -0,0 +1,11 @@
+ion-app.app-root core-navigation-bar {
+    .core-navigation-bar-arrow {
+        text-transform: none;
+        max-width: 100%;
+
+        core-format-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}

src/components/navigation-bar/navigation-bar.ts

@@ -30,7 +30,9 @@ import { CoreTextUtilsProvider } from '@providers/utils/text';
 })
 export class CoreNavigationBarComponent {
     @Input() previous?: any; // Previous item. If not defined, the previous arrow won't be shown.
+    @Input() previousTitle?: string; // Previous item title. If not defined, only the arrow will be shown.
     @Input() next?: any; // Next item. If not defined, the next arrow won't be shown.
+    @Input() nextTitle?: string; // Next item title. If not defined, only the arrow will be shown.
     @Input() info?: string; // Info to show when clicking the info button. If not defined, the info button won't be shown.
     @Input() title?: string; // Title to show when seeing the info (new page).
     @Input() component?: string; // Component the bar belongs to.