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

MOBILE-3053 rte: Fix keyboard is closed and reopened in iOS

Browse Source
This commit is contained in:
Albert Gasset 2019-07-16 09:49:39 +02:00
parent b8d10dac0e
commit aa1de96f33
2 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,78 +4,78 @@
<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (longPress)="showToolbar()" role="textbox"></ion-textarea> <ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (longPress)="showToolbar()" role="textbox"></ion-textarea>
<div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden"> <div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
<button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev()"> <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)" (mousedown)="stopBubble($event)">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon> <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
</button> </button>
<ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()"> <ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand --> <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')" (mousedown)="stopBubble($event)">
<core-icon name="fa-bold"></core-icon> <core-icon name="fa-bold"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')" (mousedown)="stopBubble($event)">
<core-icon name="fa-italic"></core-icon> <core-icon name="fa-italic"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')" (mousedown)="stopBubble($event)">
<core-icon name="fa-underline"></core-icon> <core-icon name="fa-underline"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')" (mousedown)="stopBubble($event)">
<core-icon name="fa-strikethrough"></core-icon> <core-icon name="fa-strikethrough"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')" (mousedown)="stopBubble($event)">
<core-icon name="fa-paragraph"></core-icon> <core-icon name="fa-paragraph"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h1" (click)="buttonAction($event, 'formatBlock|<h1>')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h1" (click)="buttonAction($event, 'formatBlock|<h1>')" (mousedown)="stopBubble($event)">
<core-icon name="fa-header"></core-icon>1 <core-icon name="fa-header"></core-icon>1
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h2" (click)="buttonAction($event, 'formatBlock|<h2>')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h2" (click)="buttonAction($event, 'formatBlock|<h2>')" (mousedown)="stopBubble($event)">
<core-icon name="fa-header"></core-icon>2 <core-icon name="fa-header"></core-icon>2
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')" (mousedown)="stopBubble($event)">
<core-icon name="fa-header"></core-icon>3 <core-icon name="fa-header"></core-icon>3
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="stopBubble($event)">
<core-icon name="fa-list-ul"></core-icon> <core-icon name="fa-list-ul"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="stopBubble($event)">
<core-icon name="fa-list-ol"></core-icon> <core-icon name="fa-list-ol"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')"> <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="stopBubble($event)">
<core-icon name="fa-eraser"></core-icon> <core-icon name="fa-eraser"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)"> <button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)" (mousedown)="stopBubble($event)">
<core-icon name="fa-code"></core-icon> <core-icon name="fa-code"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide *ngIf="isPhone"> <ion-slide *ngIf="isPhone">
<button (click)="hideToolbar()"> <button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)">
<core-icon name="fa-close"></core-icon> <core-icon name="fa-close"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
<button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext()"> <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext($event)" (mousedown)="stopBubble($event)">
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon> <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</button> </button>
</div> </div>

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

@ -533,10 +533,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
* @param {any} $event Event data * @param {any} $event Event data
* @param {string} command Command to execute. * @param {string} command Command to execute.
*/ */
protected buttonAction($event: any, command: string): void { buttonAction($event: any, command: string): void {
$event.preventDefault(); this.stopBubble($event);
$event.stopPropagation();
this.editorElement.focus();
if (command) { if (command) {
if (command.includes('|')) { if (command.includes('|')) {
@ -553,8 +551,9 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
/** /**
* Hide the toolbar. * Hide the toolbar.
*/ */
hideToolbar(): void { hideToolbar($event: any): void {
this.editorElement.focus(); this.stopBubble($event);
this.toolbarHidden = true; this.toolbarHidden = true;
} }
@ -566,26 +565,38 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
this.toolbarHidden = false; this.toolbarHidden = false;
} }
/**
* Stop event default and propagation.
*
* @param {Event} event Event.
*/
stopBubble(event: Event): void {
event.preventDefault();
event.stopPropagation();
}
/** /**
* Method that shows the next toolbar buttons. * Method that shows the next toolbar buttons.
*/ */
toolbarNext(): void { toolbarNext($event: any): void {
this.stopBubble($event);
if (!this.toolbarNextHidden) { if (!this.toolbarNextHidden) {
const currentIndex = this.toolbarSlides.getActiveIndex() || 0; const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
this.toolbarSlides.slideTo(currentIndex + this.numToolbarButtons); this.toolbarSlides.slideTo(currentIndex + this.numToolbarButtons);
} }
this.editorElement.focus();
} }
/** /**
* Method that shows the previous toolbar buttons. * Method that shows the previous toolbar buttons.
*/ */
toolbarPrev(): void { toolbarPrev($event: any): void {
this.stopBubble($event);
if (!this.toolbarPrevHidden) { if (!this.toolbarPrevHidden) {
const currentIndex = this.toolbarSlides.getActiveIndex() || 0; const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
this.toolbarSlides.slideTo(currentIndex - this.numToolbarButtons); this.toolbarSlides.slideTo(currentIndex - this.numToolbarButtons);
} }
this.editorElement.focus();
} }
/** /**