Merge pull request #1467 from crazyserver/MOBILE-2473

Mobile 2473
main
Juan Leyva 2018-08-22 13:50:33 +01:00 committed by GitHub
commit a76a31fb08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 26 deletions

View File

@ -181,7 +181,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
});
// Recalculate footer position when keyboard is shown or hidden.
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
this.content.resize();
});
}

View File

@ -92,7 +92,7 @@ export class AddonModChatChatPage {
});
// Recalculate footer position when keyboard is shown or hidden.
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
this.keyboardObserver = this.eventsProvider.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
this.content.resize();
});
}

View File

@ -1,10 +1,14 @@
core-rich-text-editor {
height: 40vh;
overflow: hidden;
min-height: 30vh;
min-height: 200px; /* Just in case vh is not supported */
min-height: 40vh;
width: 100%;
position: relative;
> div {
position: absolute;
@include position(0, 0, 0, 0);
height: 100%;
width: 100%;
display: flex;
@ -67,7 +71,10 @@ core-rich-text-editor {
}
}
.core-textarea textarea {
.core-textarea {
position: relative;
textarea {
margin: 0 !important;
padding: 0;
height: 100% !important;
@ -75,6 +82,9 @@ core-rich-text-editor {
resize: none;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
@include position(0, 0, 0, 0);
}
}
div.core-rte-toolbar {
@ -109,3 +119,7 @@ core-rich-text-editor {
}
}
.keyboard-is-open core-rich-text-editor {
min-height: 200px;
}

View File

@ -14,7 +14,7 @@
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterContentInit, OnDestroy, Optional }
from '@angular/core';
import { TextInput, Content } from 'ionic-angular';
import { TextInput, Content, Platform } from 'ionic-angular';
import { CoreSitesProvider } from '@providers/sites';
import { CoreFilepoolProvider } from '@providers/filepool';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
@ -61,9 +61,12 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
protected element: HTMLDivElement;
protected editorElement: HTMLDivElement;
protected resizeFunction;
protected kbHeight = 0; // Last known keyboard height.
protected minHeight = 200; // Minimum height of the editor.
protected valueChangeSubscription: Subscription;
protected keyboardObs: any;
protected initHeightInterval;
rteEnabled = false;
editorSupported = true;
@ -71,7 +74,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
constructor(private domUtils: CoreDomUtilsProvider, private urlUtils: CoreUrlUtilsProvider,
private sitesProvider: CoreSitesProvider, private filepoolProvider: CoreFilepoolProvider,
@Optional() private content: Content, elementRef: ElementRef, private events: CoreEventsProvider,
private utils: CoreUtilsProvider) {
private utils: CoreUtilsProvider, private platform: Platform) {
this.contentChanged = new EventEmitter<string>();
this.element = elementRef.nativeElement as HTMLDivElement;
}
@ -112,16 +115,17 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
window.addEventListener('resize', this.resizeFunction);
let i = 0;
const interval = setInterval(() => {
this.initHeightInterval = setInterval(() => {
this.maximizeEditorSize().then((height) => {
if (i >= 5 || height != 0) {
clearInterval(interval);
clearInterval(this.initHeightInterval);
}
i++;
});
}, 750);
this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (kbHeight) => {
this.kbHeight = kbHeight;
this.maximizeEditorSize();
});
}
@ -137,7 +141,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
const deferred = this.utils.promiseDefer();
setTimeout(() => {
const contentVisibleHeight = this.content.contentHeight;
const contentVisibleHeight = this.content.contentHeight - this.kbHeight;
if (contentVisibleHeight <= 0) {
deferred.resolve(0);
@ -147,16 +151,31 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
setTimeout(() => {
// Editor is ready, adjust Height if needed.
const height = this.getSurroundingHeight(this.element);
if (contentVisibleHeight > height) {
this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height);
let height;
if (this.platform.is('ios') && this.kbHeight > 0) {
// Keyboard open in iOS.
// In this case, the header disappears or is scrollable, so we need to adjust the calculations.
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.
height = this.content.contentHeight - this.kbHeight - this.getSurroundingHeight(this.element);
}
if (height > this.minHeight) {
this.element.style.height = this.domUtils.formatPixelsSize(height);
} else {
this.element.style.height = '';
}
deferred.resolve(contentVisibleHeight - height);
deferred.resolve(height);
}, 100);
}, 100);
});
return deferred.promise;
}
@ -470,5 +489,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
ngOnDestroy(): void {
this.valueChangeSubscription && this.valueChangeSubscription.unsubscribe();
window.removeEventListener('resize', this.resizeFunction);
clearInterval(this.initHeightInterval);
this.keyboardObs && this.keyboardObs.off();
}
}

View File

@ -192,7 +192,7 @@ export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy,
promise = Promise.resolve();
}
return this.fetchContent(refresh).catch((error) => {
return promise.catch((error) => {
// Error getting data, fail.
this.domUtils.showErrorModalDefault(error, this.fetchContentDefaultError, true);
}).finally(() => {

View File

@ -52,11 +52,11 @@ export class CoreCoursesCourseLinkHandler extends CoreContentLinksHandlerBase {
courseId = parseInt(params.id, 10);
const sectionId = params.sectionid ? parseInt(params.sectionid, 10) : null,
sectionNumber = typeof params.section != 'undefined' ? parseInt(params.section, 10) : NaN,
pageParams: any = {
course: { id: courseId },
sectionId: sectionId || null
};
let sectionNumber = typeof params.section != 'undefined' ? parseInt(params.section, 10) : NaN;
if (!sectionId && !sectionNumber) {
// Check if the URL has a hash to navigate to the section.

View File

@ -79,7 +79,9 @@ export class CoreAppProvider {
zone.run(() => {
document.body.classList.add('keyboard-is-open');
this.isKeyboardShown = true;
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
// Error on iOS calculating size.
// More info: https://github.com/ionic-team/ionic-plugin-keyboard/issues/276 .
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, data.keyboardHeight);
});
});
this.keyboard.onKeyboardHide().subscribe((data) => {
@ -87,7 +89,7 @@ export class CoreAppProvider {
zone.run(() => {
document.body.classList.remove('keyboard-is-open');
this.isKeyboardShown = false;
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, 0);
});
});
}