Merge pull request #1467 from crazyserver/MOBILE-2473

Mobile 2473

src/addon/messages/pages/discussion/discussion.ts

@@ -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();
         });
     }

src/addon/mod/chat/pages/chat/chat.ts

@@ -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();
         });
     }

src/components/rich-text-editor/rich-text-editor.scss

@@ -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,14 +71,20 @@ core-rich-text-editor {
         }
     }
 
-    .core-textarea textarea {
+    .core-textarea {
-        margin: 0 !important;
+        position: relative;
-        padding: 0;
+
-        height: 100% !important;
+        textarea {
-        width: 100% !important;
+            margin: 0 !important;
-        resize: none;
+            padding: 0;
-        overflow-x: hidden;
+            height: 100% !important;
-        overflow-y: auto;
+            width: 100% !important;
+            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;
+}

src/components/rich-text-editor/rich-text-editor.ts

@@ -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);
+                let height;
-                if (contentVisibleHeight > height) {
+
-                    this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - 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();
     }
 }

src/core/course/classes/main-resource-component.ts

@@ -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(() => {

src/core/courses/providers/course-link-handler.ts

@@ -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.

src/providers/app.ts

@@ -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);
             });
         });
     }