Skip to main content

 

OCLC Support

Embed EAD HTML

If you have loaded EAD Finding Aids using CONTENTdm’s EAD conversion process, the default behavior in the responsive website is to display as a clickable link to the HTML. EAD HTML is not always mobile friendly, both because it will not adapt to different screen sizes and the HTML documents can be extremely large and consume significant data when displaying. If you are not concerned about these issues with mobile devices, you can customize your site with JavaScript that pulls the HTML file directly into the page.

This JavaScript looks for the HTML file hyperlink in the compound object page and replaces it by displaying the HTML directly in an iframe so that it will display directly. If your EAD files have internal links to other sections or HTML files you may need to modify the way those links work to play well with this customization. The huge variation in how EAD files are constructed and the several options in CONTENTdm’s conversion to HTML make it impossible to create a generic customization that works in every case, but this JavaScript is a good baseline template to work from that will at least bring the HTML into the CONTENTdm responsive website’s EAD record pages.

(function () {
'use strict';

    // detects when the digital object is .html (e.g. converted EAD) and
    // displays it in an iframe instead of as a clickable download link

    function embedHtml() {
    const htmlLink = document.querySelector('[class*="itemFileLink"]>a');
    const wrapper = document.createElement('div');
    // if .html exists, create iframe containing .html
        if (htmlLink && htmlLink.href) {
            const iframe = document.createElement('iframe');
            iframe.width = '100%';
            iframe.height='500px';
            iframe.scrolling ='auto';
            iframe.frameBorder = '0';

            wrapper.appendChild(iframe);

            fetch(htmlLink.href)
            .then(function(response) {
                return response.text();
            })
            .then(function(html) {
                const doc = iframe.contentWindow.document;
                doc.open();
                doc.write(html);
                doc.close();
            });
    }

    // find parent container to add the new iframe
    const container = document.querySelector('[class*="itemFile"]');
    if (container && container.parentElement) {
        container.parentElement.insertBefore(wrapper, container);
    }

    // function for disposing of the iframe
    return function () {
        wrapper.parentElement && wrapper.parentElement.removeChild(wrapper);
    };
    }

    // helper function to determine parent ID and check for HTML link
    function getParent(item, collection) {
        // make GetParent API call and return as JSON
        return fetch('/digital/bl/dmwebservices/index.php?q=GetParent/' + collection + '/' + item + '/json')
        .then(function(response) {
          return response.json();
        })
        .then(function(json) {
            let parent = false;
            // parse JSON for 'parent' value; -1 indicates parent ID is the same as item ID
            if (json.parent === -1) {
                parent = item;
            } else {
                parent = json.parent;
            }
            return parent;
        })
        .then(function(parent) {
            // once parent is known, check if HTML link exists (Finding Aid records only)
            // CONTENTdm includes polyfill for fetch() to support IE
            return fetch('/utils/findingaidfull/collection/' + collection + '/id/' + parent)
            .then(function(response) {
                if (response.status !== 200) {
                    // if no HTML exists, return is 'false' so that button is not altered
                    parent = false;
                    console.log('No HTML download exists for this record.');
                    return parent;
                } else {
                    return parent;
                }
            })
        })
        .catch(function(error) {
            parent = false;
            console.log('Request failed: ' + error);
            return parent;
        })
    }

    // add option to Download button for full HTML file
    // remove this function if end users don't intend to download EAD as HTML
    function fullHtmlDownload(parent, collection) {
        const dlLinkMobile = document.querySelector('#downloadsizemenu-side-bar>li>a');
        const dlLinkDesktop = document.querySelector('#downloadsizemenu-top-bar>li>a');
        dlLinkMobile.href = '/utils/findingaidfull/collection/' + collection + '/id/' + parent;
        dlLinkDesktop.href = '/utils/findingaidfull/collection/' + collection + '/id/' + parent;
        dlLinkMobile.innerHTML = 'Download full HTML';
        dlLinkDesktop.innerHTML = 'Download full HTML';
        dlLinkDesktop.target = '_blank';
        dlLinkMobile.target = '_blank';
    }

    // remove HTML hyperlink that CONTENTdm puts in by default
    function hideFileLink() {
        const fileLinkContainers = document.querySelectorAll('.ItemFile-itemFile');
        for (let i = 0; i < fileLinkContainers.length; ++i) {
            fileLinkContainers[i].style.display = 'none';
        }
    }

    let dispose;

    // execute functions when item page DOM has loaded
    document.addEventListener('cdm-item-page:ready', function (e) {
        dispose = embedHtml();
        const item = e.detail.itemId;
    const collection = e.detail.collectionId;
        if (collection === 'p7001coll1') {
            getParent(item, collection)
            .then(function(response) {
                if (response === false) { return; } else {
                    fullHtmlDownload(response, collection);
                    hideFileLink();
                }
            });
        }
    });

    // execute again if user navigates to next item
    document.addEventListener('cdm-item-page:update', function (e) {
        dispose && dispose();
        dispose = embedHtml();
        const item = e.detail.itemId;
        const collection = e.detail.collectionId;
        if (collection === 'p7001coll1') {
            getParent(item, collection)
            .then(function(response) {
                if (response === false) { return; } else {
                    fullHtmlDownload(response, collection);
                    hideFileLink();
                }
            });
        }
    });

    // executes when user leaves the item page to clean up DOM changes
    document.addEventListener('cdm-item-page:leave', function (e) {
        dispose && dispose();
    });

})();

 

  • Was this article helpful?