CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

Merge pull request #1996 from albertgasset/MOBILE-3053

Browse Source 
Mobile 3053
This commit is contained in:
Juan Leyva 2019-07-18 17:38:03 +02:00 committed by GitHub
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>
<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">
<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>
</button>
<ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<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>
</button>
</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>
</button>
</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>
</button>
</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>
</button>
</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>
</button>
</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
</button>
</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
</button>
</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
</button>
</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>
</button>
</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>
</button>
</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>
</button>
</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>
</button>
</ion-slide>
<ion-slide *ngIf="isPhone">
<button (click)="hideToolbar()">
<button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)">
<core-icon name="fa-close"></core-icon>
</button>
</ion-slide>
</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>
</button>
</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;
width: 36px;
height: 36px;
padding-right: 6px;
padding-left: 6px;
margin: 0 auto;
font-size: 18px;
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 {string} command Command to execute.
*/
protected buttonAction($event: any, command: string): void {
$event.preventDefault();
$event.stopPropagation();
this.editorElement.focus();
buttonAction($event: any, command: string): void {
this.stopBubble($event);
if (command) {
if (command.includes('|')) {
@ -553,8 +551,9 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
/**
* Hide the toolbar.
*/
hideToolbar(): void {
this.editorElement.focus();
hideToolbar($event: any): void {
this.stopBubble($event);
this.toolbarHidden = true;
}
@ -566,26 +565,38 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
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.
*/
toolbarNext(): void {
toolbarNext($event: any): void {
this.stopBubble($event);
if (!this.toolbarNextHidden) {
const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
this.toolbarSlides.slideTo(currentIndex + this.numToolbarButtons);
}
this.editorElement.focus();
}
/**
* Method that shows the previous toolbar buttons.
*/
toolbarPrev(): void {
toolbarPrev($event: any): void {
this.stopBubble($event);
if (!this.toolbarPrevHidden) {
const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
this.toolbarSlides.slideTo(currentIndex - this.numToolbarButtons);
}
this.editorElement.focus();
}
/**
@ -597,14 +608,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
return;
}
if (!(this.toolbarSlides as any)._init) {
// Slides is not initialized yet, try later.
const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
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);
return;
}
const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
if (width > this.toolbarSlides.length() * this.toolbarButtonWidth) {
this.numToolbarButtons = this.toolbarSlides.length();
this.toolbarArrows = false;