diff --git a/src/core/login/pages/site/site.ts b/src/core/login/pages/site/site.ts
index eec309a4c..220e055d3 100644
--- a/src/core/login/pages/site/site.ts
+++ b/src/core/login/pages/site/site.ts
@@ -277,7 +277,11 @@ export class CoreLoginSitePage {
}
];
- this.domUtils.showAlertWithButtons(this.translate.instant('core.cannotconnect'), message, buttons);
+ this.domUtils.showAlertWithOptions({
+ title: this.translate.instant('core.cannotconnect'),
+ message,
+ buttons,
+ });
}
/**
@@ -369,10 +373,11 @@ export class CoreLoginSitePage {
*/
showInstructionsAndScanQR(): void {
// Show some instructions first.
- this.domUtils.showAlertWithButtons(
- this.translate.instant('core.login.faqwhereisqrcode'),
- this.translate.instant('core.login.faqwhereisqrcodeanswer', {$image: CoreLoginHelperProvider.FAQ_QRCODE_IMAGE_HTML}),
- [
+ this.domUtils.showAlertWithOptions({
+ title: this.translate.instant('core.login.faqwhereisqrcode'),
+ message: this.translate.instant('core.login.faqwhereisqrcodeanswer',
+ {$image: CoreLoginHelperProvider.FAQ_QRCODE_IMAGE_HTML}),
+ buttons: [
{
text: this.translate.instant('core.cancel'),
role: 'cancel'
@@ -383,8 +388,8 @@ export class CoreLoginSitePage {
this.scanQR();
}
},
- ]
- );
+ ],
+ });
}
/**
diff --git a/src/core/viewer/pages/textarea/textarea.html b/src/core/viewer/pages/textarea/textarea.html
new file mode 100644
index 000000000..d43f4a11e
--- /dev/null
+++ b/src/core/viewer/pages/textarea/textarea.html
@@ -0,0 +1,14 @@
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
diff --git a/src/core/viewer/pages/textarea/textarea.module.ts b/src/core/viewer/pages/textarea/textarea.module.ts
new file mode 100644
index 000000000..a17d8cc8e
--- /dev/null
+++ b/src/core/viewer/pages/textarea/textarea.module.ts
@@ -0,0 +1,36 @@
+// (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 { IonicPageModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreViewerTextAreaPage } from './textarea';
+import { CoreComponentsModule } from '@components/components.module';
+import { CoreDirectivesModule } from '@directives/directives.module';
+
+/**
+ * Module to lazy load the page.
+ */
+@NgModule({
+ declarations: [
+ CoreViewerTextAreaPage
+ ],
+ imports: [
+ CoreComponentsModule,
+ CoreDirectivesModule,
+ IonicPageModule.forChild(CoreViewerTextAreaPage),
+ TranslateModule.forChild()
+ ]
+})
+export class CoreViewerTextAreaPageModule {}
diff --git a/src/core/viewer/pages/textarea/textarea.scss b/src/core/viewer/pages/textarea/textarea.scss
new file mode 100644
index 000000000..27a2ea061
--- /dev/null
+++ b/src/core/viewer/pages/textarea/textarea.scss
@@ -0,0 +1,187 @@
+$core-modal-promt-min-width: 320px;
+
+ion-app.app-root ion-modal.core-modal-prompt {
+ /* Some styles have been copied from ionic alert component. */
+ @include position(0, 0, 0, 0);
+ position: absolute;
+ z-index: $z-index-overlay;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ contain: strict;
+
+ ion-backdrop {
+ visibility: visible;
+ }
+
+ .header {
+ &::after {
+ background: none;
+ }
+ .toolbar-background {
+ display: none;
+ }
+ }
+
+ .prompt-button-group {
+ display: flex;
+ flex-direction: row;
+
+ .prompt-button {
+ @include margin(0);
+
+ z-index: 0;
+ display: block;
+
+ font-size: $alert-button-font-size;
+ line-height: $alert-button-line-height;
+ }
+ }
+
+ ion-textarea {
+ @include placeholder($alert-input-placeholder-color);
+ @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);
+ border: 0;
+ background: inherit;
+
+ textarea {
+ margin: 0;
+ }
+ }
+
+ .prompt-message {
+ @include deprecated-variable(padding, $alert-md-message-padding) {
+ @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);
+ }
+ }
+
+ .modal-wrapper {
+ z-index: $z-index-overlay-wrapper;
+ display: flex;
+ flex-direction: column;
+ min-width: $core-modal-promt-min-width;
+ max-height: $alert-max-height;
+ opacity: 0;
+ contain: content;
+ height: auto;
+
+ page-core-viewer-textarea,
+ ion-content,
+ .fixed-content,
+ .scroll-content {
+ position: relative;
+ background: $white;
+ overflow: hidden;
+ }
+ .fixed-content {
+ display: none;
+ }
+ .scroll-content {
+ padding: 0 !important;
+ }
+ }
+
+ .content-md .prompt-button-group {
+ flex-wrap: $alert-md-button-group-flex-wrap;
+ justify-content: $alert-md-button-group-justify-content;
+
+ @include deprecated-variable(padding, $alert-md-button-group-padding) {
+ @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
+ }
+
+ .prompt-button {
+ @include text-align($alert-md-button-text-align);
+ @include border-radius($alert-md-button-border-radius);
+
+ // necessary for ripple to work properly
+ position: relative;
+ overflow: hidden;
+
+ font-weight: $alert-md-button-font-weight;
+ text-transform: $alert-md-button-text-transform;
+ color: $alert-md-button-text-color;
+ background-color: $alert-md-button-background-color;
+
+ @include deprecated-variable(margin, $alert-md-button-margin) {
+ @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);
+ }
+
+ @include deprecated-variable(padding, $alert-md-button-padding) {
+ @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
+ }
+ }
+
+ .prompt-button.activated {
+ background-color: $alert-md-button-background-color-activated;
+ }
+
+ .prompt-button .button-inner {
+ justify-content: $alert-md-button-group-justify-content;
+ }
+ }
+
+ .content-ios .prompt-button-group {
+ @include margin-horizontal(null, -$alert-ios-button-border-width);
+
+ flex-wrap: $alert-ios-button-group-flex-wrap;
+ .prompt-button {
+ @include margin($alert-ios-button-margin);
+ @include border-radius($alert-ios-button-border-radius);
+
+ overflow: hidden;
+
+ flex: $alert-ios-button-flex;
+
+ min-width: $alert-ios-button-min-width;
+ height: $alert-ios-button-min-height;
+
+ border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
+ border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
+ font-size: $alert-ios-button-font-size;
+ color: $alert-ios-button-text-color;
+ background-color: $alert-ios-button-background-color;
+ }
+
+ .prompt-button:last-child {
+ border-right: 0;
+ font-weight: $alert-ios-button-main-font-weight;
+ }
+
+ .prompt-button.activated {
+ background-color: $alert-ios-button-background-color-activated;
+ }
+ }
+}
+
+ion-app.app-root-md ion-modal.core-modal-prompt {
+ .modal-wrapper {
+ @include border-radius($alert-md-border-radius);
+ max-width: $alert-md-max-width;
+ background-color: $alert-md-background-color;
+ box-shadow: $alert-md-box-shadow;
+ }
+
+ .toolbar-content .toolbar-title {
+ color: $alert-md-message-text-color;
+ white-space: normal;
+ }
+}
+
+ion-app.app-root-ios ion-modal.core-modal-prompt {
+ .modal-wrapper {
+ @include border-radius($alert-ios-border-radius);
+ overflow: hidden;
+ max-width: $alert-ios-max-width;
+ background-color: $alert-ios-background;
+ box-shadow: $alert-ios-box-shadow;
+ }
+
+ .toolbar-content .toolbar-title {
+ color: $alert-ios-message-text-color;
+ white-space: normal;
+ }
+
+ ion-title {
+ padding: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/core/viewer/pages/textarea/textarea.ts b/src/core/viewer/pages/textarea/textarea.ts
new file mode 100644
index 000000000..e01e418be
--- /dev/null
+++ b/src/core/viewer/pages/textarea/textarea.ts
@@ -0,0 +1,71 @@
+// (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 } from '@angular/core';
+import { IonicPage, ViewController, NavParams, AlertButton } from 'ionic-angular';
+
+/**
+ * Page to render a textarea prompt.
+ */
+@IonicPage({ segment: 'core-viewer-textarea' })
+@Component({
+ selector: 'page-core-viewer-textarea',
+ templateUrl: 'textarea.html',
+})
+export class CoreViewerTextAreaPage {
+ title: string;
+ message: string;
+ placeholder: string;
+ buttons: AlertButton[];
+ text = '';
+
+ constructor(
+ protected viewCtrl: ViewController,
+ params: NavParams,
+ ) {
+ this.title = params.get('title');
+ this.message = params.get('message');
+ this.placeholder = params.get('placeholder') || '';
+
+ const buttons = params.get('buttons');
+
+ this.buttons = buttons.map((button) => {
+ if (typeof button === 'string') {
+ return { text: button };
+ }
+
+ return button;
+ });
+ }
+
+ /**
+ * Button clicked.
+ *
+ * @param button: Clicked button.
+ */
+ buttonClicked(button: AlertButton): void {
+ let shouldDismiss = true;
+ if (button.handler) {
+ // A handler has been provided, execute it pass the handler the values from the inputs
+ if (button.handler(this.text) === false) {
+ // If the return value of the handler is false then do not dismiss
+ shouldDismiss = false;
+ }
+ }
+
+ if (shouldDismiss) {
+ this.viewCtrl.dismiss(button.role);
+ }
+ }
+}
diff --git a/src/providers/utils/dom.ts b/src/providers/utils/dom.ts
index b4c904f9a..9ef11f960 100644
--- a/src/providers/utils/dom.ts
+++ b/src/providers/utils/dom.ts
@@ -15,7 +15,7 @@
import { Injectable, SimpleChange, ElementRef } from '@angular/core';
import {
LoadingController, Loading, ToastController, Toast, AlertController, Alert, Platform, Content, PopoverController,
- ModalController, AlertButton
+ ModalController, AlertButton, AlertOptions
} from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
@@ -1139,41 +1139,36 @@ export class CoreDomUtilsProvider {
* @return Promise resolved with the alert modal.
*/
async showAlert(title: string, message: string, buttonText?: string, autocloseTime?: number): Promise {
- const buttons = [buttonText || this.translate.instant('core.ok')];
-
- return this.showAlertWithButtons(title, message, buttons, autocloseTime);
+ return this.showAlertWithOptions({
+ title: title,
+ message,
+ buttons: [buttonText || this.translate.instant('core.ok')]
+ }, autocloseTime);
}
/**
- * Show an alert modal with some buttons.
+ * General show an alert modal.
*
- * @param title Title to show.
- * @param message Message to show.
- * @param buttons Buttons objects or texts.
+ * @param options Alert options to pass to the alert.
* @param autocloseTime Number of milliseconds to wait to close the modal. If not defined, modal won't be closed.
* @return Promise resolved with the alert modal.
*/
- async showAlertWithButtons(title: string, message: string, buttons: (string | AlertButton)[], autocloseTime?: number):
- Promise {
- const hasHTMLTags = this.textUtils.hasHTMLTags(message);
+ async showAlertWithOptions(options: AlertOptions = {}, autocloseTime?: number): Promise {
+ const hasHTMLTags = this.textUtils.hasHTMLTags(options.message || '');
if (hasHTMLTags) {
// Format the text.
- message = await this.textUtils.formatText(message);
+ options.message = await this.textUtils.formatText(options.message);
}
- const alertId = Md5.hashAsciiStr((title || '') + '#' + (message || ''));
+ const alertId = Md5.hashAsciiStr((options.title || '') + '#' + (options.message || ''));
if (this.displayedAlerts[alertId]) {
// There's already an alert with the same message and title. Return it.
return this.displayedAlerts[alertId];
}
- const alert: CoreAlert = this.alertCtrl.create({
- title: title,
- message: message,
- buttons: buttons,
- });
+ const alert: CoreAlert = this.alertCtrl.create(options);
alert.present().then(() => {
if (hasHTMLTags) {
@@ -1202,8 +1197,18 @@ export class CoreDomUtilsProvider {
});
if (autocloseTime > 0) {
- setTimeout(() => {
- alert.dismiss();
+ setTimeout(async () => {
+ await alert.dismiss();
+
+ if (options.buttons) {
+ // Execute dismiss function if any.
+ const cancelButton = options.buttons.find((button) => {
+ return typeof button != 'string' && typeof button.role != 'undefined' &&
+ typeof button.handler != 'undefined' && button.role == 'cancel';
+ });
+ cancelButton && cancelButton.handler(null);
+ }
+
}, autocloseTime);
}
@@ -1250,52 +1255,33 @@ export class CoreDomUtilsProvider {
* @param options More options. See https://ionicframework.com/docs/v3/api/components/alert/AlertController/
* @return Promise resolved if the user confirms and rejected with a canceled error if he cancels.
*/
- showConfirm(message: string, title?: string, okText?: string, cancelText?: string, options?: any): Promise {
+ showConfirm(message: string, title?: string, okText?: string, cancelText?: string, options: AlertOptions = {}): Promise {
return new Promise((resolve, reject): void => {
- const hasHTMLTags = this.textUtils.hasHTMLTags(message);
- let promise;
- if (hasHTMLTags) {
- // Format the text.
- promise = this.textUtils.formatText(message);
- } else {
- promise = Promise.resolve(message);
+ options.title = title;
+ options.message = message;
+
+ options.buttons = [
+ {
+ text: cancelText || this.translate.instant('core.cancel'),
+ role: 'cancel',
+ handler: (): void => {
+ reject(this.createCanceledError());
+ }
+ },
+ {
+ text: okText || this.translate.instant('core.ok'),
+ handler: (data: any): void => {
+ resolve(data);
+ }
+ }
+ ];
+
+ if (!title) {
+ options.cssClass = 'core-nohead';
}
- promise.then((message) => {
- options = options || {};
-
- options.message = message;
- options.title = title;
- if (!title) {
- options.cssClass = 'core-nohead';
- }
- options.buttons = [
- {
- text: cancelText || this.translate.instant('core.cancel'),
- role: 'cancel',
- handler: (): void => {
- reject(this.createCanceledError());
- }
- },
- {
- text: okText || this.translate.instant('core.ok'),
- handler: (data: any): void => {
- resolve(data);
- }
- }
- ];
-
- const alert = this.alertCtrl.create(options);
-
- alert.present().then(() => {
- if (hasHTMLTags) {
- // Treat all anchors so they don't override the app.
- const alertMessageEl: HTMLElement = alert.pageRef().nativeElement.querySelector('.alert-message');
- this.treatAnchors(alertMessageEl);
- }
- });
- });
+ this.showAlertWithOptions(options, 0);
});
}
@@ -1414,59 +1400,67 @@ export class CoreDomUtilsProvider {
* @param title Modal title.
* @param placeholder Placeholder of the input element. By default, "Password".
* @param type Type of the input element. By default, password.
+ * @param options More options to pass to the alert.
* @return Promise resolved with the input data if the user clicks OK, rejected if cancels.
*/
showPrompt(message: string, title?: string, placeholder?: string, type: string = 'password'): Promise {
- return new Promise((resolve, reject): void => {
- const hasHTMLTags = this.textUtils.hasHTMLTags(message);
- let promise;
+ return new Promise((resolve, reject): any => {
+ placeholder = typeof placeholder == 'undefined' || placeholder == null ?
+ this.translate.instant('core.login.password') : placeholder;
- if (hasHTMLTags) {
- // Format the text.
- promise = this.textUtils.formatText(message);
- } else {
- promise = Promise.resolve(message);
- }
-
- promise.then((message) => {
- const alert = this.alertCtrl.create({
- message: message,
- title: title,
- inputs: [
- {
- name: 'promptinput',
- placeholder: placeholder || this.translate.instant('core.login.password'),
- type: type
- }
- ],
- buttons: [
- {
- text: this.translate.instant('core.cancel'),
- role: 'cancel',
- handler: (): void => {
- reject();
- }
- },
- {
- text: this.translate.instant('core.ok'),
- handler: (data): void => {
- resolve(data.promptinput);
- }
- }
- ]
- });
-
- alert.present().then(() => {
- if (hasHTMLTags) {
- // Treat all anchors so they don't override the app.
- const alertMessageEl: HTMLElement = alert.pageRef().nativeElement.querySelector('.alert-message');
- this.treatAnchors(alertMessageEl);
+ const options: AlertOptions = {
+ title,
+ message,
+ inputs: [
+ {
+ name: 'promptinput',
+ placeholder: placeholder,
+ type: type
}
- });
- });
+ ],
+ buttons: [
+ {
+ text: this.translate.instant('core.cancel'),
+ role: 'cancel',
+ handler: (): void => {
+ reject();
+ }
+ },
+ {
+ text: this.translate.instant('core.ok'),
+ handler: (data): void => {
+ resolve(data.promptinput);
+ }
+ }
+ ],
+ };
+
+ this.showAlertWithOptions(options);
});
}
+ /**
+ * Show a prompt modal to input a textarea.
+ *
+ * @param title Modal title.
+ * @param message Modal message.
+ * @param buttons Buttons to pass to the modal.
+ * @param placeholder Placeholder of the input element if any.
+ * @return Promise resolved when modal presented.
+ */
+ showTextareaPrompt(title: string, message: string, buttons: (string | AlertButton)[], placeholder?: string): Promise {
+ const params = {
+ title: title,
+ message: message,
+ placeholder: placeholder,
+ buttons: buttons,
+ };
+
+ const modal = this.modalCtrl.create('CoreViewerTextAreaPage', params, { cssClass: 'core-modal-prompt' });
+
+ return modal.present();
+ }
+
/**
* Displays an autodimissable toast modal window.
*