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

---
 summary-iframe-implementation-sample.html | 249 ++++++++++++++++++++++
 1 file changed, 249 insertions(+)
 create mode 100644 summary-iframe-implementation-sample.html
diff --git a/summary-iframe-implementation-sample.html b/summary-iframe-implementation-sample.html
new file mode 100644
index 000000000..27f1dfcb8
--- /dev/null
+++ b/summary-iframe-implementation-sample.html
@@ -0,0 +1,249 @@
+<!-- 
+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>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ORCID Summary iFrame Display Tester</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;
+      }
+      .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 Summary 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>
+      <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 (1200x1200)</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);
+        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>
