MOBILE-2253 core: Implement text viewer
parent
28d6203784
commit
435815cbf2
|
@ -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>
|
|
@ -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 {}
|
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -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'),
|
||||
this.text, this.brOnFull, this.component, this.componentId);
|
||||
// @todo: brOnFull is needed?
|
||||
this.textUtils.expandText(this.fullTitle || this.translate.instant('mm.core.description'), this.text,
|
||||
false, this.component, this.componentId);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
|
|
@ -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.
|
||||
// @todo
|
||||
// $state.go('site.mm_textviewer', {
|
||||
// title: title,
|
||||
// content: text,
|
||||
// replacelinebreaks: replaceLineBreaks,
|
||||
// component: component,
|
||||
// componentId: componentId
|
||||
// });
|
||||
let params: any = {
|
||||
title: title,
|
||||
content: text,
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue