From e76698ba51b88867b31a61ecac33e050eb3a984b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 21 Jun 2018 12:10:32 +0200 Subject: [PATCH] MOBILE-2430 rte: Resize with keyboard open and close --- .../rich-text-editor/rich-text-editor.ts | 57 +++++++++++++------ src/providers/app.ts | 5 +- src/providers/events.ts | 1 + 3 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/components/rich-text-editor/rich-text-editor.ts b/src/components/rich-text-editor/rich-text-editor.ts index f4d1955ff..bd0feb256 100644 --- a/src/components/rich-text-editor/rich-text-editor.ts +++ b/src/components/rich-text-editor/rich-text-editor.ts @@ -19,6 +19,8 @@ import { CoreSitesProvider } from '@providers/sites'; import { CoreFilepoolProvider } from '@providers/filepool'; import { CoreDomUtilsProvider } from '@providers/utils/dom'; 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'; @@ -61,13 +63,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy protected resizeFunction; protected valueChangeSubscription: Subscription; + protected keyboardObs: any; rteEnabled = false; editorSupported = true; constructor(private domUtils: CoreDomUtilsProvider, private keyboard: Keyboard, private urlUtils: CoreUrlUtilsProvider, private sitesProvider: CoreSitesProvider, private filepoolProvider: CoreFilepoolProvider, - @Optional() private content: Content, elementRef: ElementRef) { + @Optional() private content: Content, elementRef: ElementRef, private events: CoreEventsProvider, + private utils: CoreUtilsProvider) { this.contentChanged = new EventEmitter(); this.element = elementRef.nativeElement as HTMLDivElement; } @@ -130,34 +134,50 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy let i = 0; const interval = setInterval(() => { - const height = this.maximizeEditorSize(); - if (i >= 5 || height != 0) { - clearInterval(interval); - } - i++; + this.maximizeEditorSize().then((height) => { + if (i >= 5 || height != 0) { + clearInterval(interval); + } + i++; + }); }, 750); + + this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => { + this.maximizeEditorSize(); + }); } /** * Resize editor to maximize the space occupied. + * + * @return {Promise} Resolved with calculated editor size. */ - protected maximizeEditorSize(): number { + protected maximizeEditorSize(): Promise { this.content.resize(); - const contentVisibleHeight = this.content.contentHeight; - // Editor is ready, adjust Height if needed. - if (contentVisibleHeight > 0) { - const height = this.getSurroundingHeight(this.element); - if (contentVisibleHeight > height) { - this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height); - } else { - this.element.style.height = ''; + const deferred = this.utils.promiseDefer(); + + setTimeout(() => { + const contentVisibleHeight = this.content.contentHeight; + + // Editor is ready, adjust Height if needed. + if (contentVisibleHeight > 0) { + const height = this.getSurroundingHeight(this.element); + if (contentVisibleHeight > height) { + this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height); + } else { + this.element.style.height = ''; + } + + deferred.resolve(contentVisibleHeight - height); + + return; } - return contentVisibleHeight - height; - } + deferred.resolve(0); + }); - return 0; + return deferred.promise; } /** @@ -467,6 +487,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy */ ngOnDestroy(): void { this.valueChangeSubscription && this.valueChangeSubscription.unsubscribe(); + this.keyboardObs && this.keyboardObs.off(); window.removeEventListener('resize', this.resizeFunction); } } diff --git a/src/providers/app.ts b/src/providers/app.ts index 75c9c0991..0a7a2d2e2 100644 --- a/src/providers/app.ts +++ b/src/providers/app.ts @@ -19,6 +19,7 @@ import { Network } from '@ionic-native/network'; import { CoreDbProvider } from './db'; import { CoreLoggerProvider } from './logger'; +import { CoreEventsProvider } from './events'; import { SQLiteDB } from '@classes/sqlitedb'; /** @@ -69,16 +70,18 @@ export class CoreAppProvider { protected isKeyboardShown = false; constructor(dbProvider: CoreDbProvider, private platform: Platform, private keyboard: Keyboard, private appCtrl: App, - private network: Network, logger: CoreLoggerProvider) { + private network: Network, logger: CoreLoggerProvider, events: CoreEventsProvider) { this.logger = logger.getInstance('CoreAppProvider'); this.db = dbProvider.getDB(this.DBNAME); this.keyboard.onKeyboardShow().subscribe((data) => { this.isKeyboardShown = true; + events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown); }); this.keyboard.onKeyboardHide().subscribe((data) => { this.isKeyboardShown = false; + events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown); }); } diff --git a/src/providers/events.ts b/src/providers/events.ts index c9309ac9e..7c4e27599 100644 --- a/src/providers/events.ts +++ b/src/providers/events.ts @@ -54,6 +54,7 @@ export class CoreEventsProvider { static IAB_EXIT = 'inappbrowser_exit'; static APP_LAUNCHED_URL = 'app_launched_url'; // App opened with a certain URL (custom URL scheme). static FILE_SHARED = 'file_shared'; + static KEYBOARD_CHANGE = 'keyboard_change'; protected logger; protected observables: { [s: string]: Subject } = {};