diff --git a/config.xml b/config.xml
index 7a978e70b..1ccda30df 100644
--- a/config.xml
+++ b/config.xml
@@ -133,6 +133,7 @@
+
diff --git a/package-lock.json b/package-lock.json
index d287d318a..1ad068cad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -192,6 +192,11 @@
"resolved": "https://registry.npmjs.org/@ionic-native/push/-/push-4.17.0.tgz",
"integrity": "sha512-hOM7CwBbZXHq31DNrTqEVcaS/W9uZcgm/gv9iu2hMtYlVwaM3ppvCC/SQuOOaS1elyfMhM5rzXP6n3csifcjDA=="
},
+ "@ionic-native/screen-orientation": {
+ "version": "4.17.0",
+ "resolved": "https://registry.npmjs.org/@ionic-native/screen-orientation/-/screen-orientation-4.17.0.tgz",
+ "integrity": "sha512-NSN5I6y8Wq3xQV/fnsZdhb7iXnIyJ6SZmCw6aVJEX3rZUy48lwr/KlC4uR3S6NStBXnuWuZjFy7PITQl93UbGQ=="
+ },
"@ionic-native/splash-screen": {
"version": "4.17.0",
"resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-4.17.0.tgz",
@@ -2330,6 +2335,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.1.tgz",
"integrity": "sha1-SWBrjBWlaI1HKPkuSnMloGHeB/U="
},
+ "cordova-plugin-screen-orientation": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.1.tgz",
+ "integrity": "sha1-daNXzik4CB6PYdRgU5S213Rjwfg="
+ },
"core-js": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz",
@@ -2694,7 +2704,7 @@
},
"readable-stream": {
"version": "1.1.14",
- "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
"dev": true,
"requires": {
@@ -3019,6 +3029,11 @@
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
"integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y="
},
+ "es6-promise-plugin": {
+ "version": "4.2.2",
+ "resolved": "https://registry.npmjs.org/es6-promise-plugin/-/es6-promise-plugin-4.2.2.tgz",
+ "integrity": "sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA=="
+ },
"es6-set": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
@@ -4990,7 +5005,7 @@
},
"chalk": {
"version": "1.1.3",
- "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
diff --git a/package.json b/package.json
index bfbbe1be1..a9f2b7140 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
"@ionic-native/media-capture": "4.17.0",
"@ionic-native/network": "4.17.0",
"@ionic-native/push": "4.17.0",
+ "@ionic-native/screen-orientation": "^4.17.0",
"@ionic-native/splash-screen": "^4.17.0",
"@ionic-native/sqlite": "4.17.0",
"@ionic-native/status-bar": "^4.17.0",
@@ -79,6 +80,8 @@
"chart.js": "^2.7.2",
"cordova-android": "7.0.0",
"cordova-ios": "4.5.4",
+ "cordova-plugin-screen-orientation": "^3.0.1",
+ "es6-promise-plugin": "^4.2.2",
"font-awesome": "4.7.0",
"ionic-angular": "^3.9.2",
"ionicons": "3.0.0",
@@ -116,7 +119,10 @@
"platforms": [
"android",
"ios"
- ]
+ ],
+ "plugins": {
+ "cordova-plugin-screen-orientation": {}
+ }
},
"main": "desktop/electron.js",
"build": {
@@ -170,4 +176,4 @@
"confinement": "classic"
}
}
-}
+}
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 417cd86ec..2c4340790 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,6 +22,7 @@ import { CoreLoggerProvider } from '@providers/logger';
import { CoreSitesProvider } from '@providers/sites';
import { CoreLoginHelperProvider } from '@core/login/providers/helper';
import { Keyboard } from '@ionic-native/keyboard';
+import { ScreenOrientation } from '@ionic-native/screen-orientation';
@Component({
templateUrl: 'app.html'
@@ -35,7 +36,8 @@ export class MoodleMobileApp implements OnInit {
constructor(private platform: Platform, statusBar: StatusBar, logger: CoreLoggerProvider, keyboard: Keyboard,
private eventsProvider: CoreEventsProvider, private loginHelper: CoreLoginHelperProvider, private zone: NgZone,
- private appProvider: CoreAppProvider, private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider) {
+ private appProvider: CoreAppProvider, private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider,
+ private screenOrientation: ScreenOrientation) {
this.logger = logger.getInstance('AppComponent');
platform.ready().then(() => {
@@ -168,5 +170,23 @@ export class MoodleMobileApp implements OnInit {
pauseVideos(window);
});
+
+ // Detect orientation changes.
+ this.screenOrientation.onChange().subscribe(
+ () => {
+ if (this.platform.is('ios')) {
+ // Force ios to recalculate safe areas when rotating.
+ // This can be erased when https://issues.apache.org/jira/browse/CB-13448 issue is solved or
+ // After switching to WkWebview.
+ const viewport = document.querySelector('meta[name=viewport]');
+ viewport.setAttribute('content', viewport.getAttribute('content').replace('viewport-fit=cover,', ''));
+
+ setTimeout(() => {
+ viewport.setAttribute('content', 'viewport-fit=cover,' + viewport.getAttribute('content'));
+ });
+ }
+ }
+ );
+
}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9f9a9dd27..634219ac4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,8 @@ import { MockLocationStrategy } from '@angular/common/testing';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { ScreenOrientation } from '@ionic-native/screen-orientation';
+
import { MoodleMobileApp } from './app.component';
import { CoreInterceptor } from '@classes/interceptor';
import { CorePageTransition } from '@classes/page-transition';
@@ -276,6 +278,7 @@ export const CORE_PROVIDERS: any[] = [
useClass: CoreInterceptor,
multi: true,
},
+ ScreenOrientation,
{provide: COMPILER_OPTIONS, useValue: {}, multi: true},
{provide: JitCompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
{provide: LocationStrategy, useClass: MockLocationStrategy},