Skip to content

Commit

Permalink
9497-resolve-the-issues-integrators-are-having-when-embedding-summari…
Browse files Browse the repository at this point in the history 
…es-into-iframes
  • Loading branch information
@leomendoza123
leomendoza123 committed Nov 13, 2024
1 parent 0627a34 commit 8b99235
Showing 1 changed file with 249 additions and 0 deletions.
249 changes: 249 additions & 0 deletions summary-iframe-implementation-sample.html
View file
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>

0 comments on commit 8b99235

Please sign in to comment.