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 editorElement?: HTMLDivElement;
protected kbHeight = 0; // Last known keyboard height.
protected minHeight = 200; // Minimum height of the editor.
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!);
// Start observing the target node for configured mutations
@ -266,8 +265,9 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.selectionChangeFunction = this.updateToolbarStyles.bind(this);
document.addEventListener('selectionchange', this.selectionChangeFunction!);
this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, (kbHeight: number) => {
this.kbHeight = kbHeight;
this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, () => {
// 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();
});
@ -284,58 +284,26 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
*
* @return Resolved with calculated editor size.
*/
protected maximizeEditorSize(): Promise<number> {
// this.content.resize();
protected async maximizeEditorSize(): Promise<number> {
const contentVisibleHeight = await CoreDomUtils.getContentHeight(this.content);
const deferred = CoreUtils.promiseDefer<number>();
if (contentVisibleHeight <= 0) {
return 0;
}
setTimeout(async () => {
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;
}
await CoreUtils.wait(100);
if (contentVisibleHeight <= 0) {
deferred.resolve(0);
// Editor is ready, adjust Height if needed.
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 () => {
// 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;
return height;
}
/**
@ -901,6 +869,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.toolbarArrows = true;
}
await CoreUtils.nextTick();
await this.toolbarSlides.update();
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.
*/