// embl-content-hub-loader__fetch // load optional dependencies import { vfBanner } from "../vf-banner/vf-banner"; import { vfTabs } from "../vf-tabs/vf-tabs"; import { emblConditionalEdit } from "../embl-conditional-edit/embl-conditional-edit"; import { emblNotifications } from "../embl-notifications/embl-notifications"; /** * Fetch html links from content.embl.org */ function emblContentHubFetch() { // Some JS utilities // via https://stackoverflow.com/a/32135318 Element.prototype.appendBefore = function (element) { element.parentNode.insertBefore(this, element); },false; Element.prototype.appendAfter = function (element) { element.parentNode.insertBefore(this, element.nextSibling); },false; /** * Get the number of days between two dates. */ function days_between(date1, date2) { // The number of milliseconds in one day var ONE_DAY = 1000 * 60 * 60 * 24; // Convert both dates to milliseconds var date1_ms = date1.getTime(); var date2_ms = date2.getTime(); // Calculate the difference in milliseconds var difference_ms = Math.abs(date1_ms - date2_ms); // Convert back to days and return return Math.round(difference_ms/ONE_DAY) + 1; } // A list of all the links var emblContentHubLinks = document.querySelectorAll("[data-embl-js-content-hub-loader]"); var emblContentHubLinkLoadingProgress = {}; var emblContentHubShowTimers = false; // Handle the import of each element for (var i = 0; i < emblContentHubLinks.length; ++i) { (function () { var linkPosition = i; // track time it takes for link to be shown if (emblContentHubShowTimers) { console.time("timer for import " + linkPosition); } // await the load of the html import from the polyfill // note: we use polyfill in all cases; see https://github.com/visual-framework/vf-core/issues/508 emblContentHubAwaitLoading(emblContentHubLinks[linkPosition],linkPosition); }()); } // If nothing to import if (emblContentHubLinks.length == 0) { emblContentHubSignalFinished(); } // Add a class to the body once the last item has been processed function emblContentHubSignalFinished() { // @todo, shouldn't require the body element document.querySelectorAll("body")[0].classList.add("embl-content-hub-loaded"); // if the JS to run embl-conditional-edit is present, run it now if (typeof emblConditionalEdit === "function") { emblConditionalEdit(); } // if the JS to run embl-notifications is present, run it now if (typeof emblNotifications === "function") { emblNotifications(); } } // Dispatch load to the pollyfill function emblContentHubAwaitLoading(targetLink,position) { /* global addImport */ // Docs: https://github.com/AshleyScirra/html-imports-polyfill#usage addImport(targetLink.href, null, emblContentHubLinkLoadingProgress).then(function(value) { emblContentHubGrabTheContent(targetLink,position,value); if (position+1 == emblContentHubLinks.length) { emblContentHubSignalFinished(); } }); } // Generate a unique ID for the target element on the page function emblContentHubGenerateID(position) { return "contentDbItem" + ("0000" + position).slice(-5); } // Show the remote content function emblContentHubGrabTheContent(targetLink,position,exportedContent) { // pickup the "meat" of the exported content exportedContent = exportedContent || targetLink.import.querySelector(".vf-content-hub-html"); // make sure we have something if (!exportedContent) { console.log("No content found for this import, exiting. The import may have already been preformed.", targetLink); return; } // if there is just one child element and it is a div, use that // (this helps with css grid layout) if (exportedContent.childElementCount === 1 && exportedContent.firstElementChild.innerHTML.trimLeft().substr(0,4) === "