MOBILE-2253 core: Implement text viewer

src/core/viewer/pages/text/text.html

@@ -0,0 +1,14 @@
+<ion-header>
+    <ion-navbar>
+        <ion-title>{{ title }}</ion-title>
+
+        <ion-buttons end *ngIf="isModal">
+            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'mm.core.close' | translate">
+                <ion-icon name="close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+<ion-content padding>
+    <core-format-text [text]="content" [component]="component" [componentId]="componentId"></core-format-text>
+</ion-content>

src/core/viewer/pages/text/text.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 { CoreViewerTextPage } from './text';
+import { CoreDirectivesModule } from '../../../../directives/directives.module';
+
+@NgModule({
+    declarations: [
+        CoreViewerTextPage
+    ],
+    imports: [
+        CoreDirectivesModule,
+        IonicPageModule.forChild(CoreViewerTextPage),
+        TranslateModule.forChild()
+    ]
+})
+export class CoreViewerTextPageModule {}

src/core/viewer/pages/text/text.ts

@@ -0,0 +1,49 @@
+// (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 { IonicPage, ViewController, NavParams } from 'ionic-angular';
+import { CoreTextUtilsProvider } from '../../../../providers/utils/text';
+
+/**
+ * Component that displays an error when trying to connect to a site.
+ */
+@IonicPage()
+@Component({
+    selector: 'page-core-viewer-text',
+    templateUrl: 'text.html',
+})
+export class CoreViewerTextPage {
+    title: string; // Page title.
+    content: string; // Page content.
+    isModal: boolean; // Whether it should be opened in a modal or in a page.
+    component: string; // Component to use in format-text.
+    componentId: string|number; // Component ID to use in format-text.
+
+    constructor(private viewCtrl: ViewController, params: NavParams, textUtils: CoreTextUtilsProvider) {
+        this.title = params.get('title');
+        this.content = params.get('content');
+        this.isModal = params.get('isModal');
+        this.component = params.get('component');
+        this.componentId = params.get('componentId');
+        // @todo: Use replacelinebreaks param like in Ionic 1? format-text should do it by default.
+    }
+
+    /**
+     * Close modal.
+     */
+    closeModal() : void {
+        this.viewCtrl.dismiss();
+    }
+}

src/directives/format-text.ts

@@ -126,6 +126,7 @@ export class CoreFormatTextDirective implements OnInit {
             let imgSrc = this.textUtils.escapeHTML(img.getAttribute('src')),
                 label = this.textUtils.escapeHTML(this.translate.instant('mm.core.openfullimage'));
 
+            // @todo: Implement image viewer. Maybe we can add the listener here directly?
             container.innerHTML += '<a href="#" class="mm-image-viewer-icon" mm-image-viewer img="' + imgSrc +
                             '" aria-label="' + label + '"><ion-icon name="search"></ion-icon></a>';
         }
@@ -193,8 +194,9 @@ export class CoreFormatTextDirective implements OnInit {
                         }
 
                         // Open a new state with the contents.
-                        this.textUtils.expandText(this.fullTitle || this.translate.instant('mm.core.description'),
+                        // @todo: brOnFull is needed?
-                            this.text, this.brOnFull, this.component, this.componentId);
+                        this.textUtils.expandText(this.fullTitle || this.translate.instant('mm.core.description'), this.text,
+                            false, this.component, this.componentId);
                     });
                 }
             } else {

src/providers/utils/text.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Injectable } from '@angular/core';
+import { NavController, ModalController } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreLangProvider } from '../lang';
 
@@ -23,7 +24,7 @@ import { CoreLangProvider } from '../lang';
 export class CoreTextUtilsProvider {
     element = document.createElement('div'); // Fake element to use in some functions, to prevent re-creating it each time.
 
-    constructor(private translate: TranslateService, private langProvider: CoreLangProvider) {}
+    constructor(private translate: TranslateService, private langProvider: CoreLangProvider, private modalCtrl: ModalController) {}
 
     /**
      * Given a list of sentences, build a message with all of them wrapped in <p>.
@@ -247,22 +248,33 @@ export class CoreTextUtilsProvider {
      *
      * @param {string} title Title of the new state.
      * @param {string} text Content of the text to be expanded.
-     * @param {boolean} [replaceLineBreaks] Whether to replace line breaks by <br> tag.
+     * @param {boolean} [isModal] Whether it should be opened in a modal (true) or in a new page (false).
      * @param {string} [component] Component to link the embedded files to.
      * @param {string|number} [componentId] An ID to use in conjunction with the component.
+     * @param {NavController} [navCtrl] The NavController instance to use.
      */
-    expandText(title: string, text: string, replaceLineBreaks?: boolean, component?: string, componentId?: string|number) : void {
+    expandText(title: string, text: string, isModal?: boolean, component?: string, componentId?: string|number,
+            navCtrl?: NavController) : void {
         if (text.length > 0) {
-            // Open a new page with the interpolated contents.
+            let params: any = {
-            // @todo
+                title: title,
-            // $state.go('site.mm_textviewer', {
+                content: text,
-            //     title: title,
+                component: component,
-            //     content: text,
+                componentId: componentId
-            //     replacelinebreaks: replaceLineBreaks,
+            };
-            //     component: component,
+
-            //     componentId: componentId
+            if (isModal) {
-            // });
+                // Open a modal with the contents.
+                params.isModal = true;
+
+                let modal = this.modalCtrl.create('CoreViewerTextPage', params);
+                modal.present();
+            } else if (navCtrl) {
+                // Open a new page with the contents.
+                navCtrl.push('CoreViewerTextPage', params);
+            }
         }
+
     }
 
     /**