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

Merge pull request #2872 from dpalou/MOBILE-3320 

Mobile 3320
main
Pau Ferrer Ocaña 2021-07-05 16:27:44 +02:00 committed by GitHub
parent 1939d428b3 aab1018e2b
commit 1d5fbb3bd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,7 +82,6 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
protected element: HTMLDivElement; protected element: HTMLDivElement;
protected editorElement?: HTMLDivElement; protected editorElement?: HTMLDivElement;
protected kbHeight = 0; // Last known keyboard height.
protected minHeight = 200; // Minimum height of the editor. protected minHeight = 200; // Minimum height of the editor.
protected valueChangeSubscription?: Subscription; protected valueChangeSubscription?: Subscription;
@ -257,7 +256,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
); );
}); });
this.resizeFunction = this.maximizeEditorSize.bind(this); this.resizeFunction = this.windowResized.bind(this);
window.addEventListener('resize', this.resizeFunction!); window.addEventListener('resize', this.resizeFunction!);
// Start observing the target node for configured mutations // Start observing the target node for configured mutations
@ -266,8 +265,9 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.selectionChangeFunction = this.updateToolbarStyles.bind(this); this.selectionChangeFunction = this.updateToolbarStyles.bind(this);
document.addEventListener('selectionchange', this.selectionChangeFunction!); document.addEventListener('selectionchange', this.selectionChangeFunction!);
this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, (kbHeight: number) => { this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, () => {
this.kbHeight = kbHeight; // Opening or closing the keyboard also calls the resize function, but sometimes the resize is called too soon.
// Check the height again, now the window height should have been updated.
this.maximizeEditorSize(); this.maximizeEditorSize();
}); });
@ -284,58 +284,26 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* *
* @return Resolved with calculated editor size. * @return Resolved with calculated editor size.
*/ */
protected maximizeEditorSize(): Promise<number> { protected async maximizeEditorSize(): Promise<number> {
// this.content.resize(); const contentVisibleHeight = await CoreDomUtils.getContentHeight(this.content);
const deferred = CoreUtils.promiseDefer<number>(); if (contentVisibleHeight <= 0) {
return 0;
}
setTimeout(async () => { await CoreUtils.wait(100);
let contentVisibleHeight = await CoreDomUtils.getContentHeight(this.content);
if (!CoreApp.isAndroid()) {
// In Android we ignore the keyboard height because it is not part of the web view.
contentVisibleHeight -= this.kbHeight;
}
if (contentVisibleHeight <= 0) { // Editor is ready, adjust Height if needed.
deferred.resolve(0); const contentHeight = await CoreDomUtils.getContentHeight(this.content);
const height = contentHeight - this.getSurroundingHeight(this.element);
return; if (height > this.minHeight) {
} this.element.style.height = CoreDomUtils.formatPixelsSize(height - 1);
} else {
this.element.style.height = '';
}
setTimeout(async () => { return height;
// Editor is ready, adjust Height if needed.
let height: number;
if (CoreApp.isAndroid()) {
// In Android we ignore the keyboard height because it is not part of the web view.
const contentHeight = await CoreDomUtils.getContentHeight(this.content);
height = contentHeight - this.getSurroundingHeight(this.element);
} else if (CoreApp.isIOS() && this.kbHeight > 0 && CoreApp.getPlatformMajorVersion() < 12) {
// Keyboard open in iOS 11 or previous. The window height changes when the keyboard is open.
height = window.innerHeight - this.getSurroundingHeight(this.element);
if (this.element.getBoundingClientRect().top < 40) {
// In iOS sometimes the editor is placed below the status bar. Move the scroll a bit so it doesn't happen.
window.scrollTo(window.scrollX, window.scrollY - 40);
}
} else {
// Header is fixed, use the content to calculate the editor height.
const contentHeight = await CoreDomUtils.getContentHeight(this.content);
height = contentHeight - this.kbHeight - this.getSurroundingHeight(this.element);
}
if (height > this.minHeight) {
this.element.style.height = CoreDomUtils.formatPixelsSize(height - 1);
} else {
this.element.style.height = '';
}
deferred.resolve(height);
}, 100);
}, 100);
return deferred.promise;
} }
/** /**
@ -901,6 +869,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.toolbarArrows = true; this.toolbarArrows = true;
} }
await CoreUtils.nextTick();
await this.toolbarSlides.update(); await this.toolbarSlides.update();
await this.updateToolbarArrows(); await this.updateToolbarArrows();
@ -1105,6 +1075,16 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
} }
} }
/**
* Window resized.
*/
protected async windowResized(): Promise<void> {
await CoreDomUtils.waitForResizeDone();
this.maximizeEditorSize();
this.updateToolbarButtons();
}
/** /**
* User entered the page that contains the component. * User entered the page that contains the component.
*/ */