ORCID · leomendoza123 · Nov 13, 2024 · Nov 13, 2024 · Nov 13, 2024 · Nov 13, 2024
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,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>