From 9d95ed0563a04f9b703ae52856254161125648a2 Mon Sep 17 00:00:00 2001
From: mohin7 <mohin@appscode.com>
Date: Fri, 1 Mar 2024 14:14:14 +0600
Subject: [PATCH] Read height from iframe

Signed-off-by: mohin7 <mohin@appscode.com>
---
 layouts/_default/baseof.html           |  19 ++-
 layouts/_default/notification_top.html | 168 +++++++++++++------------
 2 files changed, 105 insertions(+), 82 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 63bf13e570..ffcafe2be7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -132,11 +132,22 @@
     <div class="navbar-area header--fixed">
 
       <!-- iframe for top notification  -->
-      <iframe src="/notification-top/" id="notification" frameborder="0" scrolling="no" onload="resizeIframe()" style="height: 38px; width: 100%; display: flex; overflow: hidden;"></iframe>
+      <iframe src="/notification-top/" id="notification" frameborder="0" scrolling="no" style="width: 100%; display: flex; overflow: hidden; height: 38px;"></iframe>
       <script>
-         function resizeIframe() {
-          var iframe = document.getElementById("notification");
-          iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
+        window.addEventListener("message", receiveMessageFromIframe, false);
+
+        function receiveMessageFromIframe(event) {
+            // Check the origin of the message for security purposes
+            let baseURL = "{{$.Site.BaseURL}}"
+
+            if (baseURL.endsWith("/")) {
+              baseURL = baseURL.slice(0, -1);
+            }
+             if (event.origin !== baseURL) {
+                return;
+            }
+            const notification = document.querySelector("#notification");
+            notification.style.height = `${event.data}px`
         }
       </script>
       <!-- iframe for top notification  -->
diff --git a/layouts/_default/notification_top.html b/layouts/_default/notification_top.html
index c160c7c6bf..c6eac73c6c 100644
--- a/layouts/_default/notification_top.html
+++ b/layouts/_default/notification_top.html
@@ -9,107 +9,114 @@
   <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
 
   <style>
+ 
     @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,400;1,500;1,900&display=swap');
-    html, body, p{
+    html, body, p {
       margin: 0;
       padding: 0;
       height: auto;
-      color: #ffffff;
+      color: #fff;
       font-family: "Roboto", sans-serif;
       font-size: 14px;
     }
-
     .notification-wrapper {
-    background: linear-gradient(-100deg,#fb00ff,#ffee00 32%,#fe4d5d 70%,#ff7900);
-    .navbar-appscode.container{
+      background: linear-gradient(-100deg, #fb00ff, #fe0 32%, #fe4d5d 70%, #ff7900);
+    }
+    .notification-wrapper .navbar-appscode.container {
       padding: 0;
-      @media (max-width: 1024px) {
+    }
+    @media (max-width: 1024px) {
+      .notification-wrapper .navbar-appscode.container {
         padding: 0 16px;
       }
     }
-  }
-
     .notification-top {
       display: flex;
       align-items: center;
       padding: 6px 0;
-
-      a {
-        text-decoration: none;
-        transition: 0.3s ease-in-out;
-        .message {
-          color: #ffffff;
-          line-height: 170%;
-          transform: translateY(2px);
-            &:hover {
-              color: #f2f2f2;
-            }
-        }
+    }
+    .notification-top a {
+      text-decoration: none;
+      transition: 0.3s ease-in-out;
+    }
+    .notification-top a .message {
+      color: #fff;
+      line-height: 170%;
+      transform: translateY(2px);
+    }
+    .notification-top a .message:hover {
+      color: #f2f2f2;
+    }
+    .notification-top .left-content {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+    .notification-top .left-content p {
+      margin-bottom: 0;
+      line-height: 160%;
+    }
+    .notification-top .left-content .button {
+      background: #fff;
+      white-space: nowrap;
+      color: #1c1c1c;
+      font-size: 12px;
+      text-transform: uppercase;
+      font-weight: 500;
+      padding: 4px 8px;
+      text-decoration: none;
+      border-radius: 4px;
+      transition: 0.3s ease-in-out;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      border: 1px solid #fff;
+      cursor: pointer;
+    }
+    .notification-top .left-content .button span.icon {
+      font-weight: 500;
+    }
+    .notification-top .left-content .button:hover {
+      border: 1px solid #fff;
+      color: #00a651;
+      background: #fff;
+    }
+    .notification-top .left-content .button .icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+    }
+    /* navbar container spacing */
+    .navbar-appscode.container {
+      max-width: 1344px;
+      margin: 0 auto;
+    }
+    @media (min-width: 1601px) and (max-width: 1920px) {
+      .navbar-appscode.container {
+        max-width: 1344px;
       }
-      .left-content {
-        display: flex;
-        gap: 4px;
-        flex-wrap: wrap;
-        p{
-          margin-bottom: 0;
-          line-height: 160%;
-        }
-        .button {
-          background: #ffffff;
-          white-space: nowrap;
-          color: #1c1c1c;
-          font-size: 12px;
-          text-transform: uppercase;
-          font-weight: 500;
-          padding: 4px 8px;
-          text-decoration: none;
-          border-radius: 4px;
-          transition: 0.3s ease-in-out;
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          border:1px solid #fff;
-          cursor: pointer;
-          span.icon {
-            font-weight: 500;
-          }
-
-          &:hover {
-            border:1px solid #fff;
-            color: #00a651;
-            background: #ffffff;
-          }
-          .icon {
-            width: 16px;
-            height: 16px;
-            display: flex;
-          }
-        }
+    }
+    @media (min-width: 1408px) and (max-width: 1600px) {
+      .navbar-appscode.container {
+        max-width: 1200px;
       }
     }
-    /* navbar container spacing  */
-    .navbar-appscode{
-      &.container {
-        max-width: 1344px;
-        margin: 0 auto;
-        @media (min-width: 1601px) and (max-width: 1920px){
-          max-width: 1344px;
-        }
-        @media (min-width: 1408px) and (max-width: 1600px){
-          max-width: 1200px;
-        }
-        @media (min-width: 1216px) and (max-width: 1407px) {
-          max-width: 1152px !important;
-        }
-        @media (min-width: 1024px) and (max-width: 1215px) {
-          max-width: 960px !important;
-        }
+    @media (min-width: 1216px) and (max-width: 1407px) {
+      .navbar-appscode.container {
+        max-width: 1152px !important;
+      }
+    }
+    @media (min-width: 1024px) and (max-width: 1215px) {
+      .navbar-appscode.container {
+        max-width: 960px !important;
       }
     }
+    
   </style>
 </head>
 <body>
-  <div class="notification-wrapper">
+        
+  <div class="notification-wrapper" id="notificationWrapper">
     <div class="navbar-appscode container">
       <div class="notification-top">
         <a href="https://calendly.com/appscode/kubecon-eu-2024?text_color=1c1c1c&primary_color=00a651" target="_blank" class="left-content">
@@ -125,6 +132,11 @@
       </div>
     </div>
   </div>
-  
+  <script>
+    var notificationWrapper = document.getElementById("notificationWrapper");
+    var parentWindow = window.parent;
+    // Send a message to the parent window
+    parentWindow.postMessage(notificationWrapper.scrollHeight);
+ </script>
 </body>
 </html>