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 8191991 commit 9703bdb
Showing 1 changed file with 91 additions and 61 deletions.
152 changes: 91 additions & 61 deletions summary-iframe-implementation-sample.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
<!--
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>
Expand Down Expand Up @@ -64,9 +75,30 @@
.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 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>
Expand All @@ -81,7 +113,7 @@
<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 (12000x2000)</button>
<button onclick="openDialog(1200, 1200)">Open Dialog (1200x1200)</button>
</div>

<!-- Single Dialog Box -->
Expand All @@ -93,127 +125,125 @@
<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',
]
"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)$/
/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)
console.log(savedUrls)

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)
); // 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}`);
}
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');
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
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
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()
const url = document.getElementById("new-url").value.trim();
if (!url) {
alert('Please enter or select a URL.')
return
alert("Please enter or select a URL.");
return;
}

try {
validateUrl(url) // Validate the URL before proceeding
validateUrl(url); // Validate the URL before proceeding
} catch (error) {
alert(error.message)
return
alert(error.message);
return;
}

// Save URL to "Previously Open URLs" if not already present
let urls = JSON.parse(localStorage.getItem('iframeUrls')) || []
let urls = JSON.parse(localStorage.getItem("iframeUrls")) || [];
if (!urls.includes(url)) {
urls.push(url)
localStorage.setItem('iframeUrls', JSON.stringify(urls))
updateDropdown(urls)
urls.push(url);
localStorage.setItem("iframeUrls", JSON.stringify(urls));
updateDropdown(urls);
}

const dialog = document.getElementById('dialog-box')
const iframe = document.getElementById('dialog-iframe')
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`
iframe.src = url;
dialog.style.width = `${width}px`;
dialog.style.height = `${height}px`;

// Display the dialog
dialog.style.display = 'block'
dialog.style.display = "block";
}

// Close the dialog
function closeDialog() {
const dialog = document.getElementById('dialog-box')
const iframe = document.getElementById('dialog-iframe')
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 = ''
dialog.style.display = "none";
iframe.src = "";
}

// Load URLs when the page loads
window.onload = loadUrls
window.onload = loadUrls;
</script>
</body>
</html>

0 comments on commit 9703bdb

Please sign in to comment.