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

Merge pull request #1996 from albertgasset/MOBILE-3053 

Mobile 3053
main
Juan Leyva 2019-07-18 17:38:03 +02:00 committed by GitHub
parent b8d10dac0e 63d18cc2f5
commit 73c89bc94b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,81 +1,81 @@
<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" [attr.data-placeholder-text]="placeholder" role="textbox"> <div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
</div> </div>
<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()" (blur)="hideToolbar($event)" 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>

2
src/components/rich-text-editor/rich-text-editor.scss
View File

@ -80,6 +80,8 @@ ion-app.app-root core-rich-text-editor {
align-items: center; align-items: center;
width: 36px; width: 36px;
height: 36px; height: 36px;
padding-right: 6px;
padding-left: 6px;
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 18px;
background-color: $white; background-color: $white;

38
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();
} }
/** /**
@ -597,14 +608,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
return; return;
} }
if (!(this.toolbarSlides as any)._init) { const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
// Slides is not initialized yet, try later.
if (!(this.toolbarSlides as any)._init || !width) {
// Slides is not initialized or width is not available yet, try later.
setTimeout(this.updateToolbarButtons.bind(this), 100); setTimeout(this.updateToolbarButtons.bind(this), 100);
return; return;
} }
const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
if (width > this.toolbarSlides.length() * this.toolbarButtonWidth) { if (width > this.toolbarSlides.length() * this.toolbarButtonWidth) {
this.numToolbarButtons = this.toolbarSlides.length(); this.numToolbarButtons = this.toolbarSlides.length();
this.toolbarArrows = false; this.toolbarArrows = false;