From 9703bdba1523c03a43e0948bf002ab097d60211c Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Wed, 13 Nov 2024 11:09:18 -0600
Subject: [PATCH] 
 9497-resolve-the-issues-integrators-are-having-when-embedding-summaries-into-iframes

---
 summary-iframe-implementation-sample.html | 152 +++++++++++++---------
 1 file changed, 91 insertions(+), 61 deletions(-)
diff --git a/summary-iframe-implementation-sample.html b/summary-iframe-implementation-sample.html
index 99f7cb5d9..8eca03e18 100644
--- a/summary-iframe-implementation-sample.html
+++ b/summary-iframe-implementation-sample.html
@@ -1,3 +1,14 @@
+<!-- 
+This file is published via GitHub Pages at the URL: https://orcid.github.io/orcid-angular.
+To make it publicly accessible, it must be included in the `gh-pages` branch of the repository. 
+
+If you need to update this file ensure the changes are correctly committed 
+and pushed to the `gh-pages` branch.
+
+For more information about GitHub Pages and the `gh-pages` branch, visit:
+https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages
+-->
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -64,9 +75,30 @@
       .close-button:hover {
         background: #ff3d3d;
       }
+      .header {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      h1 {
+        margin: 0;
+        font-size: 2em;
+      }
+      p {
+        margin: 10px 0 0;
+        font-size: 1.2em;
+        color: #555;
+      }
     </style>
   </head>
   <body>
+    <div class="header">
+      <h1>ORCID iFrame Display Tester</h1>
+      <p>
+        This tool allows you to display ORCID IDs within iframes of various
+        sizes. Test how the content adapts to different iframe dimensions.
+      </p>
+    </div>
+
     <!-- Controls to set URL -->
     <div class="controls">
       <label for="iframe-url">Previously Open URLs:</label>
@@ -81,7 +113,7 @@
       <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>
+      <button onclick="openDialog(1200, 1200)">Open Dialog (1200x1200)</button>
     </div>
 
     <!-- Single Dialog Box -->
@@ -93,127 +125,125 @@
     <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',
-      ]
+        "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)$/
+          /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)
-
+        let savedUrls = JSON.parse(localStorage.getItem("iframeUrls")) || [];
+        savedUrls = savedUrls.concat(defaultUrls);
         savedUrls = savedUrls.filter(
           (url, index, self) => self.indexOf(url) === index
-        ) // Remove duplicates
-        localStorage.setItem('iframeUrls', JSON.stringify(savedUrls)) // Ensure defaults are saved
-        updateDropdown(savedUrls)
+        ); // 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}`);
-            }
+        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');
+        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
+        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
+        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()
+        const url = document.getElementById("new-url").value.trim();
         if (!url) {
-          alert('Please enter or select a URL.')
-          return
+          alert("Please enter or select a URL.");
+          return;
         }
 
         try {
-          validateUrl(url) // Validate the URL before proceeding
+          validateUrl(url); // Validate the URL before proceeding
         } catch (error) {
-          alert(error.message)
-          return
+          alert(error.message);
+          return;
         }
 
         // Save URL to "Previously Open URLs" if not already present
-        let urls = JSON.parse(localStorage.getItem('iframeUrls')) || []
+        let urls = JSON.parse(localStorage.getItem("iframeUrls")) || [];
         if (!urls.includes(url)) {
-          urls.push(url)
-          localStorage.setItem('iframeUrls', JSON.stringify(urls))
-          updateDropdown(urls)
+          urls.push(url);
+          localStorage.setItem("iframeUrls", JSON.stringify(urls));
+          updateDropdown(urls);
         }
 
-        const dialog = document.getElementById('dialog-box')
-        const iframe = document.getElementById('dialog-iframe')
+        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`
+        iframe.src = url;
+        dialog.style.width = `${width}px`;
+        dialog.style.height = `${height}px`;
 
         // Display the dialog
-        dialog.style.display = 'block'
+        dialog.style.display = "block";
       }
 
       // Close the dialog
       function closeDialog() {
-        const dialog = document.getElementById('dialog-box')
-        const iframe = document.getElementById('dialog-iframe')
+        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 = ''
+        dialog.style.display = "none";
+        iframe.src = "";
       }
 
       // Load URLs when the page loads
-      window.onload = loadUrls
+      window.onload = loadUrls;
     </script>
   </body>
 </html>
