Item-with-metadata in a modal

megtrip3 · April 22, 2024, 8:26pm

Hello all. I’ve posted about this before, but was put on a different task before it was finished.

What I would like to do:

(In an HTML block)

1. Pull up a list of items using a shortcode
2. From this list of items, find the item numbers
3. Add two buttons for every item:
–one that opens the 1st Modal (Learn)
–one that opens the 2nd Modal (Map)
4. Add two modals for every item:
–one that is filled with the item and its metadata.
–one that is filled with the item’s html media

I tried incorporating some PHP into the HTML block, but even with HTML Purifier turned off, it wouldn’t accept it.

I’ve tried fetching the API, but something is not working.
This is my code thus far:

<div class="preview-block clearfix">[items item_set=109 num=0 sort=foaf:lastName]</div>
<!-- Learn Modal  -->

<div class="modal modal-content" id="learnModal" style="display:none;"><span class="close">&times;</span>

<p class="item-learn-content">INSERT ITEM INFO HERE</p>
</div>
<!-- Map Modal -->

<div class="modal modal-content" id="mapModal" style="display:none;"><span class="close">&times;</span>

<div class="html-media" height="100%" id="item-html" src="" width="100%">&nbsp;</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('.resource.item');
    
    items.forEach(function(item) {
        // Extract the item ID from the title link
        const idMatch = item.querySelector('h4 a').getAttribute('href').match(/\/item\/(\d+)/);
        const itemID = idMatch ? idMatch[1] : null;
		var itemData;
		var values;

        // Create clones of the modals
        const learnModalClone = document.getElementById("learnModal").cloneNode(true);
        learnModalClone.id = 'learnModal' + itemID;
        const mapModalClone = document.getElementById("mapModal").cloneNode(true);
        mapModalClone.id = 'mapModal' + itemID;
        
        // Insert the cloned modals into the DOM
        item.appendChild(learnModalClone);
        item.appendChild(mapModalClone);

        // Button Learn
        const buttonLearn = document.createElement('a');
        buttonLearn.innerHTML = '<img src="https://www.andrewwyattmaginn.org/Digital_Humanities/files/asset/889b2c4047cc3e527d23e28ea0c5c1ce5e5cf040.png" alt="Learn Modal Button">';
        buttonLearn.addEventListener('click', function() {
            learnModalClone.style.display = "block";
			// Construct the API endpoint URL using the provided item ID
			const apiItem = '/Digital_Humanities/api/items/' + itemID;
             // Use Fetch API to retrieve the item details
			fetch(apiItem)
                .then(response => {
					if (!response.ok) {
						throw new Error('Could not fetch item.');
					}
					return response.json();
				})
				.catch(error => {
					console.error('There has been a problem with your fetch operation:', error);
				});
		 });
		
        // Button Map
        const buttonMap = document.createElement('a');
        buttonMap.innerHTML = '<img src="https://www.andrewwyattmaginn.org/Digital_Humanities/files/asset/1d1a43687f7f93dc180a5c90eb396967a0938cc3.png" alt="Map Modal Button">';
        buttonMap.addEventListener('click', function() {
            mapModalClone.style.display = "block";
            // Request the HTML source URL for the item
			const apiMedia = '/Digital_Humanities/api/media' + '?' + 'item_id=' + itemID;
            fetch(apiMedia)
                .then(response => response.json())
                .then(mediaItems => {
                    const htmlItem = mediaItems.find(m => m['o:ingester'] === 'html');
                    if (htmlItem) {
                        // Assuming 'data' contains the HTML
                        mapModalClone.querySelector('#item-html').innerHTML = htmlItem['data'];                        
                    }
                });
				
        });
	

        // Append buttons to the item
        item.appendChild(buttonLearn);
        item.appendChild(buttonMap);

        // Add close event handlers
        learnModalClone.querySelector('.close').addEventListener('click', function() {
            learnModalClone.style.display = "none";
        });

        mapModalClone.querySelector('.close').addEventListener('click', function() {
            mapModalClone.style.display = "none";
        });
    });
})

</script>

I was able to kind’ve get it to work by copy/pasting the HTML from an actual item-with-metadata block, but then I can’t figure out how to specify the items to fill in the blanks. What that looks like added to my code:

<div class="preview-block clearfix">[items item_set=109 num=0 sort=foaf:lastName]</div>
<!-- The Modal Template for Learn -->

<div class="modal modal-content" id="learnModalTemplate" style="display:none;"><span class="close">&times;</span>

<p class="item-learn-content">&nbsp;</p>

<div class="item-with-metadata">
<div class="item-with-metadata__container"><!-- Header -->
<div class="item-with-metadata__header">
<div class="resource-tags">
<div class="resource-tag" style="background-color: hsl(4108050209, 100%, 87.5%);">Item</div>

<div class="resource-tag" style="background-color: hsl(3596227959, 100%, 87.5%);">Agent</div>
</div>

<h3 class="item-with-metadata__heading">1Ignore Me (I&#39;m a test)</h3>
</div>
<!-- Content -->

<div class="item-with-metadata__content"><!-- Thumbnail -->
<div class="item-with-metadata__thumbnail "><img alt="story map" class="item-thumbnail" src="https://www.andrewwyattmaginn.org/Digital_Humanities/application/asset/thumbnails/default.png" /></div>
<!-- Metadata -->

<div class="metadata">
<div class="property">
<dl>
	<dt>Summary Label</dt>
	<dd class="value" lang=""><span class="value-content">For testing purposes</span></dd>
</dl>
</div>

<div class="property">
<dl>
	<dt>Title</dt>
	<dd class="value" lang=""><span class="value-content">1Ignore Me (I&#39;m a test)</span></dd>
</dl>
</div>

<div class="property">
<dl>
	<dt>lastName</dt>
	<dd class="value" lang=""><span class="value-content">1</span></dd>
</dl>
</div>

<dl>
</dl>

<div class="property">
<dl>
	<dt>Item sets</dt>
	<dd class="value"><a href="/Digital_Humanities/s/mapping-migration/item-set/109">Sandbox Items</a></dd>
</dl>
</div>

<dl class="item-sets">
</dl>

<div class="property">
<dl>
	<dt>Media</dt>
	<dd class="value "><a class="resource-link" href="/Digital_Humanities/s/mapping-migration/media/108"><img alt="story map" src="https://www.andrewwyattmaginn.org/Digital_Humanities/application/asset/thumbnails/default.png" /><span class="resource-name">Sample Map HTML</span></a></dd>
</dl>
</div>

<dl class="media-list">
</dl>
</div>
</div>
</div>
</div>

<p>&nbsp;</p>
</div>
<!-- The Modal Template for Map -->

<div class="modal modal-content" id="mapModalTemplate" style="display:none;"><span class="close">&times;</span>

<div class="html-media" height="100%" id="item-html" src="" width="100%">&nbsp;</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('.resource.item');
    
    items.forEach(function(item) {
        // Extract the item ID from the title link
        const idMatch = item.querySelector('h4 a').getAttribute('href').match(/\/item\/(\d+)/);
        const itemID = idMatch ? idMatch[1] : null;
		var itemData;
		var values;

        // Create clones of the modal templates
        const learnModalClone = document.getElementById("learnModalTemplate").cloneNode(true);
        learnModalClone.id = 'learnModal' + itemID;
        const mapModalClone = document.getElementById("mapModalTemplate").cloneNode(true);
        mapModalClone.id = 'mapModal' + itemID;
        
        // Insert the cloned modals into the DOM
        item.appendChild(learnModalClone);
        item.appendChild(mapModalClone);

        // Button Learn
        const buttonLearn = document.createElement('a');
        buttonLearn.innerHTML = '<img src="https://www.andrewwyattmaginn.org/Digital_Humanities/files/asset/889b2c4047cc3e527d23e28ea0c5c1ce5e5cf040.png" alt="Learn Modal">';
        buttonLearn.addEventListener('click', function() {
            learnModalClone.style.display = "block";
			// Construct the API endpoint URL using the provided item ID
			const apiItem = '/Digital_Humanities/api/items/' + itemID;
             // Use Fetch API to retrieve the item details
			fetch(apiItem)
                .then(response => {
					if (!response.ok) {
						throw new Error('Could not fetch item.');
					}
					return response.json();
				})
				.catch(error => {
					console.error('There has been a problem with your fetch operation:', error);
				});
		 });
		
        // Button Map
        const buttonMap = document.createElement('a');
        buttonMap.innerHTML = '<img src="https://www.andrewwyattmaginn.org/Digital_Humanities/files/asset/1d1a43687f7f93dc180a5c90eb396967a0938cc3.png" alt="Map Modal">';
        buttonMap.addEventListener('click', function() {
            mapModalClone.style.display = "block";
            // Request the HTML source URL for the item
			const apiMedia = '/Digital_Humanities/api/media' + '?' + 'item_id=' + itemID;
            fetch(apiMedia)
                .then(response => response.json())
                .then(mediaItems => {
                    const htmlItem = mediaItems.find(m => m['o:ingester'] === 'html');
                    if (htmlItem) {
                        // Assuming 'data' contains the HTML
                        mapModalClone.querySelector('#item-html').innerHTML = htmlItem['data'];                        
                    }
                });
				
        });
	

        // Append buttons to the item
        item.appendChild(buttonLearn);
        item.appendChild(buttonMap);

        // Add close event handlers
        learnModalClone.querySelector('.close').addEventListener('click', function() {
            learnModalClone.style.display = "none";
        });

        mapModalClone.querySelector('.close').addEventListener('click', function() {
            mapModalClone.style.display = "none";
        });
    });
})

</script>