EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1450 from dpalou/MOBILE-2508 

Mobile 2508
main
Juan Leyva 2018-08-21 16:48:51 +01:00 committed by GitHub
parent 02f0d87456 4f832f1f9b
commit 73cfbafde2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 147 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/rich-text-editor/core-rich-text-editor.html
View File

@ -5,18 +5,18 @@
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<div #decorate class="core-rte-toolbar">
<div class="core-rte-buttons">
<button data-command="bold"><core-icon name="fa-bold"></core-icon></button>
<button data-command="italic"><core-icon name="fa-italic"></core-icon></button>
<button data-command="underline"><core-icon name="fa-underline"></core-icon></button>
<button data-command="strikeThrough"><core-icon name="fa-strikethrough"></core-icon></button>
<button data-command="formatBlock|<p>"><core-icon name="fa-paragraph"></core-icon></button>
<button data-command="formatBlock|<h1>"><core-icon name="fa-header"></core-icon>1</button>
<button data-command="formatBlock|<h2>"><core-icon name="fa-header"></core-icon>2</button>
<button data-command="formatBlock|<h3>"><core-icon name="fa-header"></core-icon>3</button>
<button data-command="insertUnorderedList"><core-icon name="fa-list-ul"></core-icon></button>
<button data-command="insertOrderedList"><core-icon name="fa-list-ol"></core-icon></button>
<button data-command="removeFormat"><core-icon name="fa-eraser"></core-icon></button>
<button (click)="toggleEditor($event)"><core-icon name="fa-code"></core-icon> {{ 'core.viewcode' | translate }}</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'bold')"><core-icon name="fa-bold"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'italic')"><core-icon name="fa-italic"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'underline')"><core-icon name="fa-underline"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'strikeThrough')"><core-icon name="fa-strikethrough"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<p>')"><core-icon name="fa-paragraph"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<h1>')"><core-icon name="fa-header"></core-icon>1</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<h2>')"><core-icon name="fa-header"></core-icon>2</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<h3>')"><core-icon name="fa-header"></core-icon>3</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'insertUnorderedList')"><core-icon name="fa-list-ul"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'insertOrderedList')"><core-icon name="fa-list-ol"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'removeFormat')"><core-icon name="fa-eraser"></core-icon></button>
<button [core-suppress-events] (onClick)="toggleEditor($event)"><core-icon name="fa-code"></core-icon> {{ 'core.viewcode' | translate }}</button>
</div>
</div>
</div>
@ -25,7 +25,7 @@
<ion-textarea #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)"></ion-textarea>
<div class="core-rte-toolbar" [hidden]="!editorSupported">
<div #decorate class="core-rte-buttons">
<button tappable (click)="toggleEditor($event)"><core-icon name="fa-pencil-square-o"></core-icon> {{ 'core.vieweditor' | translate }}</button>
<button tappable [core-suppress-events] (onClick)="toggleEditor($event)"><core-icon name="fa-pencil-square-o"></core-icon> {{ 'core.vieweditor' | translate }}</button>
</div>
</div>
</div>

53
src/components/rich-text-editor/rich-text-editor.ts
View File

@ -22,7 +22,6 @@ import { CoreUrlUtilsProvider } from '@providers/utils/url';
import { CoreUtilsProvider } from '@providers/utils/utils';
import { CoreEventsProvider } from '@providers/events';
import { FormControl } from '@angular/forms';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs';
/**
@ -69,7 +68,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
rteEnabled = false;
editorSupported = true;
constructor(private domUtils: CoreDomUtilsProvider, private keyboard: Keyboard, private urlUtils: CoreUrlUtilsProvider,
constructor(private domUtils: CoreDomUtilsProvider, private urlUtils: CoreUrlUtilsProvider,
private sitesProvider: CoreSitesProvider, private filepoolProvider: CoreFilepoolProvider,
@Optional() private content: Content, elementRef: ElementRef, private events: CoreEventsProvider,
private utils: CoreUtilsProvider) {
@ -104,28 +103,6 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
this.textarea.value = param;
});
// Setup button actions.
const buttons = (this.decorate.nativeElement as HTMLDivElement).getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
const button = buttons[i];
let command = button.getAttribute('data-command');
if (command) {
if (command.includes('|')) {
const parameter = command.split('|')[1];
command = command.split('|')[0];
button.addEventListener('click', ($event) => {
this.buttonAction($event, command, parameter);
});
} else {
button.addEventListener('click', ($event) => {
this.buttonAction($event, command);
});
}
}
}
// Use paragraph on enter.
document.execCommand('DefaultParagraphSeparator', false, 'p');
@ -397,13 +374,9 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
setTimeout(() => {
if (this.rteEnabled) {
this.editorElement.focus();
this.setCurrentCursorPosition(this.editorElement.firstChild);
} else {
this.textarea.setFocus();
}
setTimeout(() => {
this.keyboard.show();
});
});
}
@ -472,25 +445,23 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
* Execute an action over the selected text.
* API docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
*
* @param {any} $event Event data
* @param {string} command Command to execute.
* @param {any} [parameters] Parameters of the command.
* @param {any} $event Event data
* @param {string} command Command to execute.
*/
protected buttonAction($event: any, command: string, parameters: any = null): void {
protected buttonAction($event: any, command: string): void {
$event.preventDefault();
$event.stopPropagation();
document.execCommand(command, false, parameters);
setTimeout(() => {
if (this.rteEnabled) {
this.editorElement.focus();
if (command) {
if (command.includes('|')) {
const parameters = command.split('|')[1];
command = command.split('|')[0];
document.execCommand(command, false, parameters);
} else {
this.textarea.setFocus();
document.execCommand(command, false);
}
setTimeout(() => {
this.keyboard.show();
});
});
}
}
/**

4
src/components/send-message-form/core-send-message-form.html
View File

@ -1,7 +1,7 @@
<form (ngSubmit)="submitForm($event)">
<form>
<textarea class="core-send-message-input" [core-auto-focus]="showKeyboard" [placeholder]="placeholder" rows="1" core-auto-rows [(ngModel)]="message" name="message" (onResize)="textareaResized()"></textarea>
<ion-buttons end>
<button ion-button icon-only clear="true" type="submit" [disabled]="!message" [attr.aria-label]="'core.send' | translate">
<button ion-button icon-only clear="true" type="submit" [disabled]="!message" [attr.aria-label]="'core.send' | translate" [core-suppress-events] (onClick)="submitForm($event)">
<ion-icon name="send" color="dark"></ion-icon>
</button>
</ion-buttons>

14
src/components/send-message-form/send-message-form.ts
View File

@ -48,20 +48,22 @@ export class CoreSendMessageFormComponent implements OnInit {
/**
* Form submitted.
* @param {any} $event Form submit
*
* @param {Event} $event Mouse event.
*/
submitForm($event: any): void {
let value = this.message.trim();
$event.target.reset();
submitForm($event: Event): void {
$event.preventDefault();
$event.stopPropagation();
// Focus again on textarea.
$event.target[0].focus();
let value = this.message.trim();
if (!value) {
// Silent error.
return;
}
this.message = ''; // Reset the form.
value = this.textUtils.replaceNewLines(value, '<br>');
this.onSubmit.emit(value);
}

2
src/components/show-password/core-show-password.html
View File

@ -1,4 +1,4 @@
<ng-content></ng-content>
<a ion-button icon-only clear [attr.aria-label]="label | translate" (click)="toggle()" [core-keep-keyboard]="selector" [inButton]="true">
<a ion-button icon-only clear [attr.aria-label]="label | translate" [core-suppress-events] (onClick)="toggle($event)">
<core-icon [name]="iconName"></core-icon>
</a>

7
src/components/show-password/show-password.ts
View File

@ -99,8 +99,13 @@ export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
/**
* Toggle show/hide password.
*
* @param {Event} event The mouse event.
*/
toggle(): void {
toggle(event: Event): void {
event.preventDefault();
event.stopPropagation();
this.shown = !this.shown;
this.setData();
}

7
src/directives/directives.module.ts
View File

@ -24,6 +24,7 @@ import { CoreAutoRowsDirective } from './auto-rows';
import { CoreLongPressDirective } from './long-press';
import { CoreChartDirective } from './chart';
import { CoreBackButtonDirective } from './back-button';
import { CoreSupressEventsDirective } from './supress-events';
@NgModule({
declarations: [
@ -37,7 +38,8 @@ import { CoreBackButtonDirective } from './back-button';
CoreAutoRowsDirective,
CoreLongPressDirective,
CoreChartDirective,
CoreBackButtonDirective
CoreBackButtonDirective,
CoreSupressEventsDirective
],
imports: [],
exports: [
@ -51,7 +53,8 @@ import { CoreBackButtonDirective } from './back-button';
CoreAutoRowsDirective,
CoreLongPressDirective,
CoreChartDirective,
CoreBackButtonDirective
CoreBackButtonDirective,
CoreSupressEventsDirective
]
})
export class CoreDirectivesModule {}

5
src/directives/keep-keyboard.ts
View File

@ -17,6 +17,9 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreUtilsProvider } from '@providers/utils/utils';
/**
* IMPORTANT: This directive is deprecated because it causes a weird effect (the keyboard closes and opens again).
* We recommend using core-suppress-events directive for a better user experience.
*
* Directive to keep the keyboard open when clicking a certain element (usually a button).
*
* @description
@ -39,6 +42,8 @@ import { CoreUtilsProvider } from '@providers/utils/utils';
*
* <textarea id="send-message-input"></textarea>
* <button [core-keep-keyboard]="'#send-message-input'" [inButton]="true">Send</button>
*
* @deprecated v3.5.2
*/
@Directive({
selector: '[core-keep-keyboard]'

95
src/directives/supress-events.ts 100644
View File

@ -0,0 +1,95 @@
// (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.
// Based on http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/
import { Directive, ElementRef, OnInit, Input, Output, EventEmitter } from '@angular/core';
/**
* Directive to suppress all events on an element. This is useful to prevent keyboard closing when clicking this element.
*
* This directive is based on some code posted by johnthackstonanderson in
* https://github.com/ionic-team/ionic-plugin-keyboard/issues/81
*
* @description
*
* If nothing is supplied or string 'all', then all the default events will be suppressed. This is the recommended usage.
*
* If you only want to suppress a single event just pass the name of the event. If you want to suppress a set of events,
* pass an array with the names of the events to suppress.
*
* Example usage:
*
* <a ion-button [core-suppress-events] (onClick)="toggle($event)">
*/
@Directive({
selector: '[core-suppress-events]'
})
export class CoreSupressEventsDirective implements OnInit {
@Input('core-suppress-events') suppressEvents: string | string[];
@Output() onClick = new EventEmitter();
protected element: HTMLElement;
constructor(el: ElementRef) {
this.element = el.nativeElement;
}
/**
* Initialize event listeners.
*/
ngOnInit(): void {
let events: string[];
if (this.suppressEvents == 'all' || typeof this.suppressEvents == 'undefined' || this.suppressEvents === null) {
// Suppress all events.
events = ['click', 'mousedown', 'touchdown', 'touchmove', 'touchstart'];
} else if (typeof this.suppressEvents == 'string') {
// It's a string, just suppress this event.
events = [this.suppressEvents];
} else if (Array.isArray(this.suppressEvents)) {
// Array supplied.
events = this.suppressEvents;
} else {
events = [];
}
// Suppress the events.
for (const evName of events) {
this.element.addEventListener(evName, this.stopBubble.bind(this));
}
// Now listen to "click" events.
this.element.addEventListener('mouseup', (event) => { // Triggered in Android & iOS.
this.onClick.emit(event);
});
this.element.addEventListener('touchend', (event) => { // Triggered desktop & browser.
this.stopBubble(event);
this.onClick.emit(event);
});
}
/**
* Stop event default and propagation.
*
* @param {Event} event Event.
*/
protected stopBubble(event: Event): void {
event.preventDefault();
event.stopPropagation();
}
}