From 87246e40d31fcd734748cf1d65f7d664ff4dc04f Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Mon, 22 Nov 2021 11:22:00 +0100 Subject: [PATCH] MOBILE-3935 core: Allow changing IAB toolbar colors --- package-lock.json | 16 +++++---- package.json | 2 +- src/core/services/app.ts | 10 +----- src/core/services/utils/utils.ts | 56 +++++++++++++++++++++++++++----- src/core/singletons/colors.ts | 19 +++++++++++ src/types/config.d.ts | 1 + 6 files changed, 79 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 14a098f20..ea2219902 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,7 +44,7 @@ "@ionic-native/zip": "^5.33.0", "@ionic/angular": "^5.6.6", "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2", - "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2", + "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3", "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1", "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.3", "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2", @@ -5126,9 +5126,10 @@ } }, "node_modules/@moodlehq/cordova-plugin-inappbrowser": { - "version": "5.0.0-moodle.2", - "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz", - "integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ==", + "version": "5.0.0-moodle.3", + "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.3.tgz", + "integrity": "sha512-BDW53W8BzHIJY6lqV3IyYIO9Rh3qi/nA3qkwZjvJiw7iohlQMeR67LV+bXjM4I8N1PTGoBSXiS5BmaS9NFi/1A==", + "dev": true, "engines": { "cordovaDependencies": { "0.2.3": { @@ -35196,9 +35197,10 @@ "integrity": "sha512-nvddQelAwPXmvjv0YJJwuf2xFNi78ZmTa47BgtHGebOvdKpmcbphkOQAVN7KMheL4J3KNE9DbMBHwEHkGGkH4g==" }, "@moodlehq/cordova-plugin-inappbrowser": { - "version": "5.0.0-moodle.2", - "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz", - "integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ==" + "version": "5.0.0-moodle.3", + "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.3.tgz", + "integrity": "sha512-BDW53W8BzHIJY6lqV3IyYIO9Rh3qi/nA3qkwZjvJiw7iohlQMeR67LV+bXjM4I8N1PTGoBSXiS5BmaS9NFi/1A==", + "dev": true }, "@moodlehq/cordova-plugin-ionic-webview": { "version": "5.0.0-moodle.1", diff --git a/package.json b/package.json index 5c790b408..6a006d22f 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@ionic-native/zip": "^5.33.0", "@ionic/angular": "^5.6.6", "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2", - "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2", + "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3", "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1", "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.3", "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2", diff --git a/src/core/services/app.ts b/src/core/services/app.ts index b3419ce9e..cbbdeb207 100644 --- a/src/core/services/app.ts +++ b/src/core/services/app.ts @@ -638,15 +638,7 @@ export class CoreAppProvider { if (!color) { // Get the default color to change it. - const element = document.querySelector('ion-header ion-toolbar'); - if (element) { - color = getComputedStyle(element).getPropertyValue('--background').trim(); - } else { - // Fallback, it won't always work. - color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim(); - } - - color = CoreColors.getColorHex(color); + color = CoreColors.getToolbarBackgroundColor(); } // Make darker on Android, except white. diff --git a/src/core/services/utils/utils.ts b/src/core/services/utils/utils.ts index 6d06cbf3d..eba5fc793 100644 --- a/src/core/services/utils/utils.ts +++ b/src/core/services/utils/utils.ts @@ -33,6 +33,7 @@ import { CoreCanceledError } from '@classes/errors/cancelederror'; import { CoreFileEntry } from '@services/file-helper'; import { CoreConstants } from '@/core/constants'; import { CoreWindow } from '@singletons/window'; +import { CoreColors } from '@singletons/colors'; type TreeNode = T & { children: TreeNode[] }; @@ -981,14 +982,8 @@ export class CoreUtilsProvider { options = options || {}; options.usewkwebview = 'yes'; // Force WKWebView in iOS. - - if (!options.enableViewPortScale) { - options.enableViewPortScale = 'yes'; // Enable zoom on iOS. - } - - if (!options.allowInlineMediaPlayback) { - options.allowInlineMediaPlayback = 'yes'; // Allow playing inline videos in iOS. - } + options.enableViewPortScale = options.enableViewPortScale ?? 'yes'; // Enable zoom on iOS by default. + options.allowInlineMediaPlayback = options.allowInlineMediaPlayback ?? 'yes'; // Allow playing inline videos in iOS. if (!options.location && CoreApp.isIOS() && url.indexOf('file://') === 0) { // The URL uses file protocol, don't show it on iOS. @@ -996,6 +991,8 @@ export class CoreUtilsProvider { options.location = 'no'; } + this.setInAppBrowserToolbarColors(options); + this.iabInstance = InAppBrowser.create(url, '_blank', options); if (CoreApp.isMobile()) { @@ -1043,6 +1040,49 @@ export class CoreUtilsProvider { return this.iabInstance; } + /** + * Given some IAB options, set the toolbar colors properties to the right values. + * + * @param options Options to change. + * @return Changed options. + */ + protected setInAppBrowserToolbarColors(options: InAppBrowserOptions): InAppBrowserOptions { + if (options.toolbarcolor) { + // Color already set. + return options; + } + + // Color not set. Check if it needs to be changed automatically. + let bgColor: string | undefined; + let textColor: string | undefined; + + if (CoreConstants.CONFIG.iabToolbarColors === 'auto') { + bgColor = CoreColors.getToolbarBackgroundColor(); + } else if (CoreConstants.CONFIG.iabToolbarColors && typeof CoreConstants.CONFIG.iabToolbarColors === 'object') { + bgColor = CoreConstants.CONFIG.iabToolbarColors.background; + textColor = CoreConstants.CONFIG.iabToolbarColors.text; + } + + if (!bgColor) { + // Use default color. In iOS, use black background color since the default is transparent and doesn't look good. + options.locationcolor = '#000000'; + + return options; + } + + if (!textColor) { + textColor = CoreColors.isWhiteContrastingBetter(bgColor) ? '#ffffff' : '#000000'; + } + + options.toolbarcolor = bgColor; + options.closebuttoncolor = textColor; + options.navigationbuttoncolor = textColor; + options.locationcolor = bgColor; + options.locationtextcolor = textColor; + + return options; + } + /** * Open a URL using a browser. * Do not use for files, refer to {@link openFile}. diff --git a/src/core/singletons/colors.ts b/src/core/singletons/colors.ts index 9256f5154..97a2eac81 100644 --- a/src/core/singletons/colors.ts +++ b/src/core/singletons/colors.ts @@ -140,4 +140,23 @@ export class CoreColors { return ('0' + c.toString(16)).slice(-2); } + /** + * Get the toolbar's current background color. + * + * @return Color in hex format. + */ + static getToolbarBackgroundColor(): string { + const element = document.querySelector('ion-header ion-toolbar'); + let color: string; + + if (element) { + color = getComputedStyle(element).getPropertyValue('--background').trim(); + } else { + // Fallback, it won't always work. + color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim(); + } + + return CoreColors.getColorHex(color); + } + } diff --git a/src/types/config.d.ts b/src/types/config.d.ts index 3d5b59ebf..14b0b5a51 100644 --- a/src/types/config.d.ts +++ b/src/types/config.d.ts @@ -57,4 +57,5 @@ export interface EnvironmentConfig { customMainMenuItems?: CoreMainMenuLocalizedCustomItem[]; feedbackFormUrl?: string | false; a11yStatement?: string | false; + iabToolbarColors?: 'auto' | { background: string; text?: string } | null; }