166 lines
12 KiB
HTML
166 lines
12 KiB
HTML
{% comment %}
|
|
|
|
Creates a gallery of thumbnails images or icons for each child item in a compound object. The thumb defaults to image_thumb or image_small, otherwise an icon is added based on the display_template or format of the child item.
|
|
|
|
Each child item is given a popup modal with full display and metadata information. The display is chosen based on the display_template of the child item.
|
|
|
|
This include requires the Liquid object "child" to be present! The item display requires the compound object item includes in "item/child/".
|
|
|
|
{% endcomment %}
|
|
<div class="row row-cols-2 row-cols-lg-4 g-2">
|
|
{% for child in children %}
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<div class="my-auto">
|
|
<div class="card-body text-center" id="{{ child.objectid }}Card">
|
|
|
|
{% if child.title %}<div class="small text-dark mb-2">{{ child.title | truncatewords: 4 }}</div>{% endif %}
|
|
|
|
<div class="mb-2">
|
|
{% if child.image_thumb or child.image_small %}
|
|
<img class="img-thumbnail compound-thumb" src="{{ child.image_thumb | default: child.image_small | relative_url }}" alt="{{ child.image_alt_text | default: child.description | default: child.title | escape }}">
|
|
{% else %}
|
|
<svg class="bi text-body compound-thumb" fill="currentColor" aria-hidden="true">
|
|
{%- assign icon_template = child.display_template | default: item.format -%}
|
|
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#{% if icon_template contains 'image' %}icon-image{% elsif icon_template contains 'pdf' %}icon-pdf{% elsif icon_template contains 'audio' %}icon-audio{% elsif icon_template contains 'video' %}icon-video{% else %}icon-default{% endif %}" />
|
|
</svg>
|
|
<span class="visually-hidden">{{ child.title | escape }} - {{ child.format }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- child object modal button -->
|
|
<a id="item-{{ forloop.index }}"
|
|
role="button"
|
|
data-bs-toggle="modal"
|
|
href="#{{ child.objectid }}"
|
|
onclick="window.location.hash='{{ child.objectid }}'"
|
|
class="btn btn-sm btn-outline-secondary small stretched-link">
|
|
{{ child.display_template | upcase | default: "Item" }} <svg class="bi icon-sprite" fill="currentColor" aria-hidden="true"><use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-{{ child.display_template | default: 'file'}}"/></svg>
|
|
</a>
|
|
|
|
<!-- child object modal -->
|
|
<div class="modal fade" id="{{ child.objectid }}" tabindex="-1"role="dialog" aria-labelledby="{{ child.objectid }}Label"aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
|
|
|
|
<div class="modal-dialog modal-xxl">
|
|
<div class="modal-content text-start">
|
|
|
|
<div class="modal-header ">
|
|
<div class="modal-title w-100" id="{{ child.objectid }}ModalLabel">
|
|
<div class="row">
|
|
{% capture stopMedia %}{% if child.display_template == 'video' %}{% if child.object_location contains 'vimeo' %}vimeo{% elsif child.object_location contains 'youtu' %}youtube{% else %}video{% endif %}{% elsif child.display_template == 'audio' %}audio{% else %}{% endif %}{% endcapture %}
|
|
<div class="col-12 text-end">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
|
onclick="{% if stopMedia != '' %}stopMedia('{{ child.objectid }}','{{ stopMedia }}');{% endif %}history.pushState('', '', window.location.pathname)"></button>
|
|
</div>
|
|
{% capture next_index %}{% if forloop.index == forloop.length %}0{% else %}{{ forloop.index0 | plus: 1 }}{% endif %}{% endcapture %}
|
|
{% assign next_index = next_index | times: 1 %}
|
|
{% capture prev_index %}{% if forloop.index0 == 0 %}{{ forloop.length | minus: 1 }}{% else %}{{ forloop.index0 | minus: 1 }}{% endif %}{% endcapture %}
|
|
{% assign prev_index = prev_index | times: 1 %}
|
|
{% capture next_item_id %}{{ children[next_index].objectid }}{% endcapture %}
|
|
{% capture prev_item_id %}{{ children[prev_index].objectid }}{% endcapture %}
|
|
<div class="col-1 col-md-2">
|
|
<button data-bs-target="#{{ prev_item_id }}" data-bs-toggle="modal" onclick="{% if stopMedia != '' %}stopMedia('{{ child.objectid }}','{{ stopMedia }}');{% endif %}window.location.hash='{{ prev_item_id }}'" class="btn btn-outline-dark btn-sm prev-child-button" >
|
|
<svg class="bi icon-sprite" role="img" aria-label="Previous Item">
|
|
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#arrow-left"/>
|
|
</svg>
|
|
<span class="d-none d-md-inline">Previous Item</span>
|
|
</button>
|
|
</div>
|
|
<div class="col-9 col-md-8 text-center">
|
|
<h3 class="h5">{{ page.title }}
|
|
<span class="d-none d-md-inline">-</span><span class="d-md-none"><br></span>
|
|
Item {{ forloop.index }} of {{ children | size }}
|
|
</h3>
|
|
</div>
|
|
<div class="col-1 col-md-2 text-end">
|
|
<button data-bs-target="#{{ next_item_id }}" data-bs-toggle="modal" onclick="{% if stopMedia != '' %}stopMedia('{{ child.objectid }}','{{ stopMedia }}');{% endif %}window.location.hash='{{ next_item_id }}'" class="ms-md-5 btn btn-outline-dark btn-sm next-child-button">
|
|
<span class="d-none d-md-inline">Next Item</span>
|
|
<svg class="bi icon-sprite" role="img" aria-label="Next Item">
|
|
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#arrow-right"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card mb-4 text-center">
|
|
<div class="m-2">
|
|
{% if child.display_template == 'image' %}
|
|
{% include item/child/image-gallery.html %}
|
|
{% elsif child.display_template == 'video' %}
|
|
{% if child.object_location contains 'vimeo' or child.object_location contains 'youtu' %}
|
|
{% include item/child/video-embed.html %}
|
|
{% else %}
|
|
{% include item/child/video-player.html %}
|
|
{% endif %}
|
|
{% elsif child.display_template == 'audio' %}
|
|
<div class="my-auto">
|
|
{% include item/child/audio-player.html %}
|
|
</div>
|
|
{% elsif child.display_template == 'panorama' %}
|
|
{% include item/child/panorama.html %}
|
|
{% else %}
|
|
{% include item/child/item-thumb.html %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="my-2">
|
|
{% include item/child/download-buttons.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
{% include item/child/metadata.html %}
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mt-4">
|
|
<div class="col-md-5 py-4">
|
|
{% include item/child/citation-box.html %}
|
|
</div>
|
|
{% if child.rights or child.rightsstatement %}
|
|
<div class="col-md-5 py-4">
|
|
{% include item/child/rights-box.html %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end child modal -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
function stopMedia(objectid, type) {
|
|
// stop media based on type
|
|
if (type == "audio") {
|
|
const mediaElement = document.querySelector(`#${ objectid } audio`);
|
|
mediaElement.pause();
|
|
//mediaElement.currentTime = 0;
|
|
}
|
|
if (type == "video") {
|
|
const mediaElement = document.querySelector(`#${ objectid } video`);
|
|
mediaElement.pause();
|
|
//mediaElement.currentTime = 0;
|
|
}
|
|
if (type == "youtube") {
|
|
const mediaElement = document.querySelector(`#${ objectid } iframe`);
|
|
const message = JSON.stringify({ event: 'command', func: 'pauseVideo', args: '' });
|
|
mediaElement.contentWindow.postMessage(message, '*');
|
|
}
|
|
if (type == "vimeo") {
|
|
const mediaElement = document.querySelector(`#${ objectid } iframe`);
|
|
mediaElement.contentWindow.postMessage('{"method":"pause"}', '*');
|
|
}
|
|
}
|
|
</script> |