MOBILE-3633 core: Implement viewText

src/addons/notifications/services/handlers/push-click.ts

@@ -86,7 +86,7 @@ export class AddonNotificationsPushClickHandlerService implements CorePushNotifi
             // Display the text in a modal.
             return CoreTextUtils.instance.viewText(notification.title || '', <string> notification.customdata.extendedtext, {
                 displayCopyButton: true,
-                // @todo modalOptions: { cssClass: 'core-modal-fullscreen' },
+                modalOptions: { cssClass: 'core-modal-fullscreen' },
             });
         }
 

src/core/features/features.module.ts

@@ -27,6 +27,7 @@ import { CoreTagModule } from './tag/tag.module';
 import { CoreUserModule } from './user/user.module';
 import { CorePushNotificationsModule } from './pushnotifications/pushnotifications.module';
 import { CoreXAPIModule } from './xapi/xapi.module';
+import { CoreViewerModule } from './viewer/viewer.module';
 
 @NgModule({
     imports: [
@@ -43,6 +44,7 @@ import { CoreXAPIModule } from './xapi/xapi.module';
         CorePushNotificationsModule,
         CoreXAPIModule,
         CoreH5PModule,
+        CoreViewerModule,
     ],
 })
 export class CoreFeaturesModule {}

src/core/features/viewer/components/components.module.ts

@@ -0,0 +1,37 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// 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 { CoreSharedModule } from '@/core/shared.module';
+import { CoreViewerTextComponent } from './text/text';
+
+@NgModule({
+    declarations: [
+        CoreViewerTextComponent,
+    ],
+    imports: [
+        CommonModule,
+        IonicModule.forRoot(),
+        TranslateModule.forChild(),
+        CoreSharedModule,
+    ],
+    exports: [
+        CoreViewerTextComponent,
+    ],
+})
+export class CoreViewerComponentsModule {}

src/core/features/viewer/components/text/text.html

@@ -0,0 +1,29 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
+        </ion-buttons>
+        <ion-title>{{ title }}</ion-title>
+
+        <ion-buttons slot="end">
+            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon slot="icon-only" name="fas-times"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+    <core-format-text [text]="content" [component]="component" [componentId]="componentId" [filter]="filter"
+        [contextLevel]="contextLevel" [contextInstanceId]="instanceId" [courseId]="courseId">
+    </core-format-text>
+
+    <ion-card *ngIf="files?.length">
+        <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="componentId"></core-file>
+    </ion-card>
+</ion-content>
+<ion-footer color="light" *ngIf="displayCopyButton">
+    <ion-button expand="block" color="light" (click)="copyText()">
+        <ion-icon name="fas-copy" aria-hidden="true" slot="start"></ion-icon>
+        {{ 'core.copytoclipboard' | translate }}
+    </ion-button>
+</ion-footer>

src/core/features/viewer/components/text/text.scss

@@ -0,0 +1,5 @@
+ion-app.app-root page-core-viewer-text {
+    ion-footer {
+        padding: 6px;
+    }
+}

src/core/features/viewer/components/text/text.ts

@@ -0,0 +1,56 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// 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 } from '@angular/core';
+import { FileEntry } from '@ionic-native/file/ngx';
+
+import { CoreUtils } from '@services/utils/utils';
+import { CoreWSExternalFile } from '@services/ws';
+import { ModalController } from '@singletons';
+
+/**
+ * Modal component to render a certain text.
+ */
+@Component({
+    selector: 'page-core-viewer-text',
+    templateUrl: 'text.html',
+})
+export class CoreViewerTextComponent {
+
+    @Input() title?: string; // Modal title.
+    @Input() content?: string; // Modal content.
+    @Input() component?: string; // Component to use in format-text.
+    @Input() componentId?: string | number; // Component ID to use in format-text.
+    @Input() files?: (CoreWSExternalFile | FileEntry)[]; // List of files.
+    @Input() filter?: boolean; // Whether to filter the text.
+    @Input() contextLevel?: string; // The context level.
+    @Input() instanceId?: number; // The instance ID related to the context.
+    @Input() courseId?: number; // Course ID the text belongs to. It can be used to improve performance with filters.
+    @Input() displayCopyButton?: boolean; // Whether to display a button to copy the contents.
+
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        ModalController.instance.dismiss();
+    }
+
+    /**
+     * Copy the text to clipboard.
+     */
+    copyText(): void {
+        CoreUtils.instance.copyToClipboard(this.content || '');
+    }
+
+}

src/core/features/viewer/viewer.module.ts

@@ -0,0 +1,24 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// 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 { CoreViewerComponentsModule } from './components/components.module';
+
+@NgModule({
+    imports: [
+        CoreViewerComponentsModule,
+    ],
+})
+export class CoreViewerModule {}

src/core/services/utils/text.ts

@@ -14,13 +14,15 @@
 
 import { Injectable } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { ModalOptions } from '@ionic/core';
 
 import { CoreApp } from '@services/app';
 import { CoreLang } from '@services/lang';
 import { CoreError } from '@classes/errors/error';
-import { makeSingleton, Translate } from '@singletons';
+import { makeSingleton, ModalController, Translate } from '@singletons';
 import { CoreWSExternalFile } from '@services/ws';
 import { Locutus } from '@singletons/locutus';
+import { CoreViewerTextComponent } from '@features/viewer/components/text/text';
 
 /**
  * Different type of errors the app can treat.
@@ -461,7 +463,7 @@ export class CoreTextUtilsProvider {
         contextLevel?: string,
         instanceId?: number,
         courseId?: number,
-    ): void {
+    ): Promise<void> {
         return this.viewText(title, text, {
             component,
             componentId,
@@ -947,13 +949,31 @@ export class CoreTextUtilsProvider {
      * Shows a text on a new page.
      *
      * @param title Title of the new state.
-     * @param text Content of the text to be expanded.
+     * @param content Content of the text to be expanded.
      * @param component Component to link the embedded files to.
      * @param options Options.
+     * @return Promise resolved when the modal is displayed.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    viewText(title: string, text: string, options?: CoreTextUtilsViewTextOptions): void {
-        // @todo
+    async viewText(title: string, content: string, options?: CoreTextUtilsViewTextOptions): Promise<void> {
+        if (!content.length) {
+            return;
+        }
+
+        options = options || {};
+
+        const modalOptions: ModalOptions = Object.assign(options.modalOptions || {}, {
+            component: CoreViewerTextComponent,
+        });
+        delete options.modalOptions;
+        modalOptions.componentProps = {
+            title,
+            content,
+            ...options,
+        };
+
+        const modal = await ModalController.instance.create(modalOptions);
+
+        await modal.present();
     }
 
 }
@@ -970,7 +990,7 @@ export type CoreTextUtilsViewTextOptions = {
     instanceId?: number; // The instance ID related to the context.
     courseId?: number; // Course ID the text belongs to. It can be used to improve performance with filters.
     displayCopyButton?: boolean; // Whether to display a button to copy the text.
-    // modalOptions?: ModalOptions; // Modal options. @todo
+    modalOptions?: Partial<ModalOptions>; // Modal options.
 };
 
 export class CoreTextUtils extends makeSingleton(CoreTextUtilsProvider) {}