-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2396 from ORCID/9497-resolve-the-issues-integrato…
…rs-are-having-when-embedding-summaries-into-iframes 9497 resolve the issues integrators are having when embedding summaries into iframes
- Loading branch information
Showing
3 changed files
with
253 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |