From 9fc59a982eb896037d86d4aa8e49a30c0b306c5b Mon Sep 17 00:00:00 2001 From: "tiago.kayaya" Date: Tue, 17 Aug 2021 09:53:06 +0100 Subject: [PATCH] add screenOrientation configuration --- config.xml | 2 +- package-lock.json | 21 ++++++++++ package.json | 5 ++- src/app/app.module.ts | 2 + src/app/pages/events/events.page.html | 2 +- src/app/pages/events/events.page.ts | 57 +++++++++++++++++++++++++-- 6 files changed, 83 insertions(+), 6 deletions(-) diff --git a/config.xml b/config.xml index 97d2fb38d..bec49347e 100644 --- a/config.xml +++ b/config.xml @@ -3,7 +3,7 @@ gabinete digital An awesome Ionic/Cordova app. Ionic Framework Team - + diff --git a/package-lock.json b/package-lock.json index 66955b93a..ac104e671 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4602,6 +4602,21 @@ "resolved": "https://registry.npmjs.org/@ionic-native/local-notifications/-/local-notifications-4.20.0.tgz", "integrity": "sha512-Ht/0zau8/2+G/bH/okXXhhWB6YrkCNL2QxVJHQ2dophXFGxQPOZAN3CKWhuQSjfbr76fa2nvQXF6jsXLpIR/ng==" }, + "@ionic-native/screen-orientation": { + "version": "5.35.0", + "resolved": "https://registry.npmjs.org/@ionic-native/screen-orientation/-/screen-orientation-5.35.0.tgz", + "integrity": "sha512-dAxPtMTcGPJ4D2yM1JuLA32SWbzYdojeNE+GVyCP596aYfInwY8w16jCFZjOnWBQwZBOeUxFkaz2n8ZakmyP0g==", + "requires": { + "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" + } + } + }, "@ionic-native/splash-screen": { "version": "5.31.1", "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.31.1.tgz", @@ -12528,6 +12543,12 @@ "resolved": "https://registry.npmjs.org/cordova-plugin-okhttp/-/cordova-plugin-okhttp-2.0.0.tgz", "integrity": "sha1-6GT2C//zQqHZJHeugvckmqYIXIA=" }, + "cordova-plugin-screen-orientation": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz", + "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==", + "dev": true + }, "cordova-plugin-splashscreen": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.4.tgz", diff --git a/package.json b/package.json index 4917bf55d..8d54ab693 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@ionic-native/in-app-browser": "^5.28.0", "@ionic-native/ionic-webview": "^5.35.0", "@ionic-native/local-notifications": "^4.20.0", + "@ionic-native/screen-orientation": "^5.35.0", "@ionic-native/splash-screen": "^5.31.1", "@ionic-native/sqlite": "^5.31.1", "@ionic-native/sqlite-porter": "^5.31.1", @@ -135,6 +136,7 @@ "cordova-plugin-mfp": "^8.0.2021031007", "cordova-plugin-mfp-jsonstore": "^8.0.2021062408", "cordova-plugin-mfp-push": "^8.0.2021062405", + "cordova-plugin-screen-orientation": "^3.0.2", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.4", @@ -172,7 +174,8 @@ "cordova-plugin-fingerprint-aio": {}, "cordova-plugin-mfp-push": {}, "cordova-plugin-mfp-jsonstore": {}, - "cordova-plugin-ionic-webview": {} + "cordova-plugin-ionic-webview": {}, + "cordova-plugin-screen-orientation": {} }, "platforms": [ "browser", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 223de9d04..792a21e41 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -52,6 +52,7 @@ import { fas } from '@fortawesome/free-solid-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons' +import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], @@ -98,6 +99,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons' //FCM, WebsocketService, ChatService, + ScreenOrientation, ], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] diff --git a/src/app/pages/events/events.page.html b/src/app/pages/events/events.page.html index 1e3aec14e..aea558096 100644 --- a/src/app/pages/events/events.page.html +++ b/src/app/pages/events/events.page.html @@ -43,7 +43,7 @@
- + diff --git a/src/app/pages/events/events.page.ts b/src/app/pages/events/events.page.ts index 738b50cfc..e64d18a26 100644 --- a/src/app/pages/events/events.page.ts +++ b/src/app/pages/events/events.page.ts @@ -7,7 +7,7 @@ import { ActivatedRoute, NavigationEnd } from '@angular/router'; import { AlertService } from 'src/app/services/alert.service'; import { AuthService } from 'src/app/services/auth.service'; import { StorageService } from 'src/app/services/storage.service'; -import { ModalController } from '@ionic/angular'; +import { ModalController, Platform } from '@ionic/angular'; import { EventDetailPage } from './event-detail/event-detail.page'; import { EventDetailModalPage } from './event-detail-modal/event-detail-modal.page'; import { ProcessesService } from '../../services/processes.service'; @@ -19,7 +19,10 @@ import { EditEventPage as EventEditPage } from './edit-event/edit-event.page'; import { GabineteDigitalPage } from '../gabinete-digital/gabinete-digital.page'; import { User } from 'src/app/models/user.model'; import { ToDayEventStorage } from 'src/app/store/to-day-event-storage.service'; -import { ExpedienteStorage } from 'src/app/store/expediente-storage-service.service' +import { ExpedienteStorage } from 'src/app/store/expediente-storage-service.service'; + +import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx'; + @Component({ selector: 'app-events', templateUrl: './events.page.html', @@ -72,6 +75,8 @@ export class EventsPage implements OnInit { loggeduser: User; + existingScreenOrientation: string; + constructor( private eventService: EventsService, private router: Router, @@ -82,15 +87,32 @@ export class EventsPage implements OnInit { private processes:ProcessesService, /* private gabineteService: GabineteDigitalPage, */ private modalController:ModalController, + private screenOrientation: ScreenOrientation, + public platform: Platform, ) { + this.existingScreenOrientation = this.screenOrientation.type; + console.log(this.existingScreenOrientation); - this.loggeduser = authService.ValidatedUser; + this.loggeduser = authService.ValidatedUser; this.prEventList = null; // list this.LoadList(); + /* this.screenOrientation.onChange().subscribe( + () => { + alert("Orientation updated" + this.screenOrientation.type); + this.existingScreenOrientation = this.screenOrientation.type; + } + ); */ + + this.platform.resize.subscribe(async () => { + //alert('Resize event detected'); + console.log('Resize event detected'); + + }); + } ngOnInit() { @@ -111,6 +133,8 @@ export class EventsPage implements OnInit { } }); this.hideSearch(); + + //this.checkScreenOrientation(); } hideSearch(){ @@ -129,6 +153,33 @@ export class EventsPage implements OnInit { this.RefreshEvents(); } + // Lock to portrait + lockToPortrait(){ + this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); + console.log('set'); + } + + // Lock to landscape + lockToLandscape(){ + this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE); + } + + // Unlock screen orientation + unlockScreenOrientation(){ + this.screenOrientation.unlock(); + } + + checkScreenOrientation(){ + if( window.innerWidth < 701) { + this.lockToPortrait(); + console.log('was here'); + + } + else{ + this.unlockScreenOrientation(); + } + } + async RefreshEvents() { this.currentEvent = ""; this.showLoader = true;