diff options
author | Fabian Dellwing <f.dellwing@netfutura.de> | 2019-03-11 13:49:34 +0300 |
---|---|---|
committer | Stefan Giehl <stefan@matomo.org> | 2019-03-11 13:49:34 +0300 |
commit | 2974fce70ea1979264d50bcb35f14c278b5ffa7f (patch) | |
tree | e6709956025e5550230fedc7c59c45c5025626c8 /plugins/PrivacyManager | |
parent | 5f1d88e08efa92bd25c8109bc71d75ff16bb9c55 (diff) |
handle background color of opt out if font is almost white (#14019)
* handle background color of opt out if font is almost white
If no background color is set, the background color is transparent. But the whole site background color is white, so if you choose white or a color that is nearly white as font color the iframe appears so be empty.
This commit implements a new function that tests if a hex color is nearly white and if yes the code will change the background color to a grey color.
* use CSS instead of angular
Diffstat (limited to 'plugins/PrivacyManager')
3 files changed, 17 insertions, 1 deletions
diff --git a/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.controller.js b/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.controller.js index 9bc4a6f32f..99314d2c15 100644 --- a/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.controller.js +++ b/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.controller.js @@ -29,6 +29,11 @@ }; vm.onUpdate = function () { if (vm.piwikurl) { + if (vm.backgroundColor === '' && vm.fontColor !== '' && vm.nearlyWhite(vm.fontColor.substr(1))) { + $('#previewIframe').addClass('withBg'); + } else { + $('#previewIframe').removeClass('withBg'); + } var value = vm.piwikurl + "index.php?module=CoreAdminHome&action=optOut&language=" + vm.language + "&backgroundColor=" + vm.backgroundColor.substr(1) + "&fontColor=" + vm.fontColor.substr(1) + "&fontSize=" + vm.fontSizeWithUnit + "&fontFamily=" + encodeURIComponent(vm.fontFamily); var isAnimationAlreadyRunning = $('.optOutCustomizer pre').queue('fx').length > 0; if (value !== vm.iframeUrl && !isAnimationAlreadyRunning) { @@ -40,6 +45,14 @@ vm.iframeUrl = ""; }; } + vm.nearlyWhite = function (hex) { + var bigint = parseInt(hex, 16); + var r = (bigint >> 16) & 255; + var g = (bigint >> 8) & 255; + var b = bigint & 255; + + return (r >= 225 && g >= 225 && b >= 225); + } vm.onUpdate(); $scope.$watch('piwikurl', function (val, oldVal) { diff --git a/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.html b/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.html index 6693b4900c..cc1363d084 100644 --- a/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.html +++ b/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.html @@ -48,5 +48,5 @@ <p ng-bind-html="'CoreAdminHome_OptOutExplanationIntro'|translate:'<a href=\'' + optOutCustomizer.iframeUrl + '\' rel=\'noreferrer noopener\' target=\'_blank\'>':'</a>'"> </p> <h3>Preview of the Opt-out as it will appear on your website</h3> - <iframe ng-src="{{ optOutCustomizer.iframeUrl }}" style="border: 1px solid #333; height: 200px; width: 600px;" /> + <iframe id="previewIframe" ng-src="{{ optOutCustomizer.iframeUrl }}" style="border: 1px solid #333; height: 200px; width: 600px;" /> </div> diff --git a/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.less b/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.less index 9ad3a4e467..6ef302393b 100644 --- a/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.less +++ b/plugins/PrivacyManager/angularjs/opt-out-customizer/opt-out-customizer.directive.less @@ -23,5 +23,8 @@ iframe{ width: 100%; + &.withBg{ + background-color: #4d4d4d; + } } } |