11.1: * [Portals/Interactions] In 'Website Interaction' portals and o…

…n external websites, interactions now start in 'full' mode and use a blur overlay on the underlying website. The previous 'popup' default style was difficult to see on some website themes.
jstanden · Feb 22, 2025 · 3ea61b3 · 3ea61b3
1 parent c2fe659
commit 3ea61b3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/features/cerb.website.interactions/resources/css/cerb.css b/features/cerb.website.interactions/resources/css/cerb.css
@@ -31,6 +31,27 @@
     display: none;
 }
 
+.cerb-interaction-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.cerb-interaction-overlay--active {
+    opacity: 1;
+    pointer-events: all;
+}
+
 .cerb-interaction-popup {
     font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     background: var(--cerb-interaction-window-bg-color);

diff --git a/features/cerb.website.interactions/templates/public/cerb.js b/features/cerb.website.interactions/templates/public/cerb.js
@@ -8,6 +8,7 @@ function CerbInteractions() {
     this.$head = document.getElementsByTagName('head')[0];
     this.$body = document.getElementsByTagName('body')[0];
     this.$badge = null;
+    this.$overlay = null;
     this.$popup = null;
     this.$spinner = null;
     this.focusableSelector = 'a:not([disabled]), input[type=text]:not([disabled]), textarea:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
@@ -211,6 +212,12 @@ CerbInteractions.prototype.interactionStart = function(interaction, interaction_
     xhttp.onreadystatechange = function () {
         if (4 === this.readyState) {
             if(200 === this.status) {
+                if (!inst.$overlay) {
+                    inst.$overlay = document.createElement('div');
+                    inst.$overlay.className = 'cerb-interaction-overlay';
+                    inst.$body.append(inst.$overlay);
+                }
+
                 // Open the interaction popup
                 if (!inst.$popup) {
                     inst.$popup = document.createElement('div');
@@ -222,13 +229,14 @@ CerbInteractions.prototype.interactionStart = function(interaction, interaction_
                         element.append(inst.$popup);
 
                     } else {
+                        inst.$overlay.classList.add('cerb-interaction-overlay--active');
                         inst.$popup.className += ' cerb-interaction-popup--style-float';
 
-                        if (interaction_style === 'full') {
+                        if ('popup' !== interaction_style) {
                             inst.$popup.className += ' cerb-interaction-popup--style-full';
                         }
 
-                        inst.$body.append(inst.$popup);
+                        inst.$overlay.append(inst.$popup);
                     }
 
                     inst.html(inst.$popup, this.responseText);
@@ -369,8 +377,9 @@ CerbInteractions.prototype.interactionEnd = function(eventData) {
     if(null == eventData)
         eventData = { };
 
-    this.$popup.parentNode.removeChild(this.$popup);
+    this.$overlay.parentNode.removeChild(this.$overlay);
 
+    this.$overlay = null;
     this.$popup = null;
     if(this.$badge) this.$badge.style.display = 'block';
 

diff --git a/features/cerb.website.interactions/templates/public/index.tpl b/features/cerb.website.interactions/templates/public/index.tpl
@@ -45,9 +45,9 @@
         </div>
 
         {if $page_interaction}
-        <div data-cerb-interaction="{$page_interaction}" data-cerb-interaction-params="{$page_interaction_params}" data-cerb-interaction-style="embed" data-cerb-interaction-autostart></div>
+        <div data-cerb-interaction="{$page_interaction}" data-cerb-interaction-params="{$page_interaction_params}" data-cerb-interaction-style="full" data-cerb-interaction-autostart></div>
         {/if}
 
-        <script id="cerb-interactions" data-cerb-badge-interaction="{$badge_interaction}" data-cerb-badge-interaction-style="" src="{devblocks_url full=true}c=assets&f=cerb.js{/devblocks_url}?v={$version}" type="text/javascript" nonce="{$session->nonce}" crossorigin="anonymous" defer></script>
+        <script id="cerb-interactions" data-cerb-badge-interaction="{$badge_interaction}" data-cerb-badge-interaction-style="full" src="{devblocks_url full=true}c=assets&f=cerb.js{/devblocks_url}?v={$version}" type="text/javascript" nonce="{$session->nonce}" crossorigin="anonymous" defer></script>
     </body>
 </html>