9497-resolve-the-issues-integrators-are-having-when-embedding-summari…

…es-into-iframes
ORCID · Nov 13, 2024 · 8191991 · 8191991
1 parent a58e91b
commit 8191991
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 1 deletion.
diff --git a/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.scss b/src/app/cdk/trusted-summary/component/trusted-summary/trusted-summary.component.scss
@@ -17,6 +17,7 @@ main.inside-iframe {
   align-content: start;
   grid-gap: 0;
   box-sizing: border-box;
+  height: 100vh;
 
   .panel-body {
     padding-top: 16px;

diff --git a/src/app/environment-banner/environment-banner/environment-banner.component.ts b/src/app/environment-banner/environment-banner/environment-banner.component.ts
@@ -14,12 +14,14 @@ export class EnvironmentBannerComponent implements OnInit {
   canDismiss = environment['CAN_DISABLE_TEST_WARNING_BANNER']
   @HostBinding('style.display') display = 'none'
   labelWarning = $localize`:@@environmentBanner.ariaLabelWarning:Warning, testing website`
+  notInsideIframe: boolean
   constructor(
     @Inject(WINDOW) private window: Window,
     private _cookieService: CookieService
   ) {
+    this.notInsideIframe = window.self === window.top
     this.hostUrl = window.location.host
-    if (!this._cookieService.get('testWarningCookie') || !this.canDismiss) {
+    if ((!this._cookieService.get('testWarningCookie') || !this.canDismiss) && this.notInsideIframe) {
       this.display = 'auto'
     }
   }

diff --git a/summary-iframe-implementation-sample.html b/summary-iframe-implementation-sample.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dynamic Dialogs with URL Validation</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+      .controls {
+        margin-bottom: 20px;
+      }
+      label {
+        font-weight: bold;
+        margin-right: 10px;
+      }
+      select,
+      input,
+      button {
+        margin: 5px;
+        padding: 5px 10px;
+      }
+      .dialog-box {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: white;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+        display: none;
+        overflow: hidden;
+      }
+      .dialog-box iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+      .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: #ff5e5e;
+        border: none;
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        cursor: pointer;
+        font-size: 16px;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .close-button:hover {
+        background: #ff3d3d;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Controls to set URL -->
+    <div class="controls">
+      <label for="iframe-url">Previously Open URLs:</label>
+      <select id="iframe-url" onchange="selectUrl()">
+        <option value="">-- Select a URL --</option>
+      </select>
+      <input type="text" id="new-url" placeholder="Enter ORCID URL" size="50" />
+    </div>
+
+    <!-- Buttons to open dialogs -->
+    <div class="controls">
+      <button onclick="openDialog(400, 600)">Open Dialog (400x600)</button>
+      <button onclick="openDialog(840, 500)">Open Dialog (840x500)</button>
+      <button onclick="openDialog(840, 700)">Open Dialog (840x700)</button>
+      <button onclick="openDialog(1200, 1200)">Open Dialog (12000x2000)</button>
+    </div>
+
+    <!-- Single Dialog Box -->
+    <div class="dialog-box" id="dialog-box">
+      <button class="close-button" onclick="closeDialog()">×</button>
+      <iframe id="dialog-iframe" src=""></iframe>
+    </div>
+
+    <script>
+      // Default URLs
+      const defaultUrls = [
+        'https://orcid.org/0000-0001-9389-7387/summary',
+        'https://sandbox.orcid.org/0000-0003-3363-7801/summary',
+        'https://qa.orcid.org/0009-0006-7603-4444/summary',
+        'https://qa.orcid.org/0009-0007-9334-3617/summary',
+        'http://localhost:4200/0009-0006-7603-4444/summary',
+        'http://localhost:4200/0009-0007-9334-3617/summary',
+      ]
+
+      // Validate ORCID URL
+      function validateUrl(url) {
+        const orcidRegex =
+          /https?:\/\/.*\/\d{4}-\d{4}-\d{4}-\d{3}[0-9X](\/summary)$/
+        if (!orcidRegex.test(url)) {
+          throw new Error(
+            "Invalid URL. The URL must contain a valid ORCID ID and optionally end with '/summary'."
+          )
+        }
+      }
+
+      // Initialize URLs from localStorage or defaults
+      function loadUrls() {
+        let savedUrls = JSON.parse(localStorage.getItem('iframeUrls')) || []
+        savedUrls = savedUrls.concat(defaultUrls)
+        console.log(savedUrls)
+
+        savedUrls = savedUrls.filter(
+          (url, index, self) => self.indexOf(url) === index
+        ) // Remove duplicates
+        localStorage.setItem('iframeUrls', JSON.stringify(savedUrls)) // Ensure defaults are saved
+        updateDropdown(savedUrls)
+      }
+
+      function groupUrlsByDomain(urls) {
+        const grouped = {};
+        urls.forEach(url => {
+            try {
+                const { hostname } = new URL(url); // Extract base domain
+                if (!grouped[hostname]) grouped[hostname] = [];
+                grouped[hostname].push(url);
+            } catch (e) {
+                console.error(`Invalid URL skipped: ${url}`);
+            }
+        });
+        return grouped;
+    }
+
+      // Update dropdown with URLs
+      function updateDropdown(urls) {
+        const urlDropdown = document.getElementById('iframe-url');
+        urlDropdown.innerHTML = '<option value="">-- Select a URL --</option>'; // Reset dropdown
+
+        // Group URLs by domain
+        const groupedUrls = groupUrlsByDomain(urls);
+
+        // Create optgroups for each domain
+        Object.keys(groupedUrls).forEach(domain => {
+            const optgroup = document.createElement('optgroup');
+            optgroup.label = domain; // Set the group label to the domain
+            groupedUrls[domain].forEach(url => {
+                const option = document.createElement('option');
+                option.value = url;
+                option.textContent = url;
+                optgroup.appendChild(option);
+            });
+            urlDropdown.appendChild(optgroup); // Add the group to the dropdown
+        });
+    }
+
+      // Select a URL from the dropdown
+      function selectUrl() {
+        const selectedUrl = document.getElementById('iframe-url').value
+        document.getElementById('new-url').value = selectedUrl
+      }
+
+      // Open the dialog with the selected or entered URL
+      function openDialog(width, height) {
+        const url = document.getElementById('new-url').value.trim()
+        if (!url) {
+          alert('Please enter or select a URL.')
+          return
+        }
+
+        try {
+          validateUrl(url) // Validate the URL before proceeding
+        } catch (error) {
+          alert(error.message)
+          return
+        }
+
+        // Save URL to "Previously Open URLs" if not already present
+        let urls = JSON.parse(localStorage.getItem('iframeUrls')) || []
+        if (!urls.includes(url)) {
+          urls.push(url)
+          localStorage.setItem('iframeUrls', JSON.stringify(urls))
+          updateDropdown(urls)
+        }
+
+        const dialog = document.getElementById('dialog-box')
+        const iframe = document.getElementById('dialog-iframe')
+
+        // Set iframe URL and dialog dimensions
+        iframe.src = url
+        dialog.style.width = `${width}px`
+        dialog.style.height = `${height}px`
+
+        // Display the dialog
+        dialog.style.display = 'block'
+      }
+
+      // Close the dialog
+      function closeDialog() {
+        const dialog = document.getElementById('dialog-box')
+        const iframe = document.getElementById('dialog-iframe')
+
+        // Hide the dialog and clear the iframe URL
+        dialog.style.display = 'none'
+        iframe.src = ''
+      }
+
+      // Load URLs when the page loads
+      window.onload = loadUrls
+    </script>
+  </body>
+</html>