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

---
 index.html                                |  15 +-
 summary-iframe-implementation-sample.html | 249 ----------------------
 2 files changed, 12 insertions(+), 252 deletions(-)
 delete mode 100644 summary-iframe-implementation-sample.html
diff --git a/index.html b/index.html
index 1f10b29b5..27f1dfcb8 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,20 @@
-<!-- Note this file is pusblish via Github Pages at the URL https://orcid.github.io/orcid-angular, by placing it on the `gh-pages` branch  -->
+<!-- 
+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>Dynamic Dialogs with URL Validation</title>
+    <title>ORCID Summary iFrame Display Tester</title>
     <style>
       body {
         font-family: Arial, sans-serif;
@@ -83,7 +92,7 @@
   </head>
   <body>
     <div class="header">
-      <h1>ORCID iFrame Display Tester</h1>
+      <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.
diff --git a/summary-iframe-implementation-sample.html b/summary-iframe-implementation-sample.html
deleted file mode 100644
index 27f1dfcb8..000000000
--- a/summary-iframe-implementation-sample.html
+++ /dev/null
@@ -1,249 +0,0 @@
-<!-- 
-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>
