From 6d8f557ada3bfa5da54044d2743e540aa3972e66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 19 Nov 2018 17:40:04 +0100 Subject: [PATCH] MOBILE-2676 ios: Force iOS to calculate safe areas on rotate --- config.xml | 1 + package-lock.json | 19 +++++++++++++++++-- package.json | 10 ++++++++-- src/app/app.component.ts | 22 +++++++++++++++++++++- src/app/app.module.ts | 3 +++ 5 files changed, 50 insertions(+), 5 deletions(-) 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},