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

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:'&lt;a  href=\'' + optOutCustomizer.iframeUrl + '\' rel=\'noreferrer noopener\' target=\'_blank\'>':'&lt;/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;
+    }
   }
 }