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

MOBILE-3366 rte: Toggle toolbar button status when clicked

main
Pau Ferrer Ocaña 2020-03-02 14:13:04 +01:00
parent 80b9c74a36
commit 0f4d7c2e99
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,42 +17,42 @@
<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')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.bold' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold', 'b')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.bold' | translate">
<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')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.italic' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic', 'i')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.italic' | translate">
<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')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.underline' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline', 'u')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.underline' | translate">
<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')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.strike' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikethrough', 'strike')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.strike' | translate">
<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>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.p' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'p', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.p' | translate">
<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.h3" (click)="buttonAction($event, 'formatBlock|<h3>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h3' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'h3', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h3' | translate">
<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.h4" (click)="buttonAction($event, 'formatBlock|<h4>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h4' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'h4', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h4' | translate">
<core-icon name="fa-header"></core-icon>4 <core-icon name="fa-header"></core-icon>4
</button> </button>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'formatBlock|<h5>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h5' | translate"> <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'h5', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h5' | translate">
<core-icon name="fa-header"></core-icon>5 <core-icon name="fa-header"></core-icon>5
</button> </button>
</ion-slide> </ion-slide>

21
src/core/editor/components/rich-text-editor/rich-text-editor.ts
View File

@ -339,8 +339,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
return; return;
} }
$event.preventDefault(); this.stopBubble($event);
$event.stopPropagation();
const move = $event['key'] == 'ArrowLeft' ? -1 : +1, const move = $event['key'] == 'ArrowLeft' ? -1 : +1,
cursor = this.getCurrentCursorPosition(this.editorElement); cursor = this.getCurrentCursorPosition(this.editorElement);
@ -456,8 +455,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
* @param $event The event. * @param $event The event.
*/ */
toggleEditor($event: Event): void { toggleEditor($event: Event): void {
$event.preventDefault(); this.stopBubble($event);
$event.stopPropagation();
this.setContent(this.control.value); this.setContent(this.control.value);
@ -581,17 +579,20 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
* *
* @param $event Event data * @param $event Event data
* @param command Command to execute. * @param command Command to execute.
* @param parameters If parameters is set to block, a formatBlock command will be performed. Otherwise it will switch the
* toolbar styles button when set.
*/ */
buttonAction($event: any, command: string): void { buttonAction($event: any, command: string, parameters: string): void {
this.stopBubble($event); this.stopBubble($event);
if (command) { if (command) {
if (command.includes('|')) { if (parameters == 'block') {
const parameters = command.split('|')[1]; document.execCommand('formatBlock', false, '<' + command + '>');
command = command.split('|')[0];
document.execCommand(command, false, parameters);
} else { } else {
if (parameters) {
this.toolbarStyles[parameters] = this.toolbarStyles[parameters] == 'true' ? 'false' : 'true';
}
document.execCommand(command, false); document.execCommand(command, false);
} }
} }