feat: trigger warning added (CollectionBuilder#48)

* feat: trigger warning added

* fix: add trigger warnings for browse

* fix: more consitent layout

Author: maehr

_data/theme.yml

@@ -19,6 +19,12 @@ home-banner-image-position: center # Default is top
 #
 # see _data/metadata-config.csv to define the metadata fields that will display.
 browse-buttons: true # true / false, adds previous/next arrows to items, but increases build time
+trigger-warning: true # true / false, adds trigger warning to item pages
+trigger-warning-text: "This collection may contain sensitive content." # optional, if you want to override the default trigger warning text
+trigger-warning-text-item: "This item may contain sensitive content." # optional, if you want to override the default trigger warning text for individual items
+trigger-field: "subject" # field to trigger warning, e.g. "subject"
+trigger-terms: "Success,violence,sexuality,racism,discrimination" # set of subjects separated by , that will trigger warning, e.g. violence,sexuality,racism,discrimination
+
 
 ##########
 # SUBJECTS PAGE

_includes/item/trigger-warning.html

@@ -0,0 +1,31 @@
+{% comment %}
+    Adds Bootstrap styled trigger warning to page.
+    By default the trigger warning is: "This item contains sensitive content."
+    The trigger warning can be customized in the site.data.theme file.
+{% endcomment %}
+
+{% if site.data.theme.trigger-warning %}
+    {% assign trigger_field = site.data.theme.trigger-field | default: "subject" %}
+    {% assign trigger_terms = site.data.theme.trigger-terms | split: "," %}
+    {% assign terms = page[trigger_field] | split: ";" %}
+
+    <div class="alert alert-danger" role="alert" id="trigger-warning" style="display: none;">
+        {{ site.data.theme.trigger-warning-text-item | default: "This item may contain sensitive content." }}
+    </div>
+
+    <script>
+        var triggerTerms = {{ trigger_terms | jsonify }};
+        var terms = {{ terms | jsonify }};
+        // strip whitespace from terms
+        terms = terms.map(function(x) { return x.trim(); });
+
+        function doTwoArraysShareElement(arr1, arr2) {
+            return arr1.some(item => arr2.includes(item));
+        }
+
+        // Check if the arrays share an element and show the warning if they do
+        if (doTwoArraysShareElement(terms, triggerTerms)) {
+            document.getElementById("trigger-warning").style.display = "block";
+        }
+    </script>
+{% endif %}

_layouts/browse.html

@@ -6,6 +6,12 @@
 
 {{ content }}
 
+{% if site.data.theme.trigger-warning %}
+<div class="alert alert-danger" role="alert" id="trigger-warning">
+    {{ site.data.theme.trigger-warning-text | default: "This collection may contain sensitive content." }}
+</div>
+{% endif %}
+
 <div class="row mb-3 justify-content-center">
     <div class="col-md-8 text-center">
         <form role="search" id="lunrSearch" onsubmit="submitFilter(); return false;">
@@ -31,7 +37,6 @@
                 {% endfor %}
             </div>
         </div>
-    </div>
 </div>
 
 <div id="loadingIcon" class="text-center">

_layouts/item/item-page-base.html

@@ -1,13 +1,14 @@
 ---
 # base layout for other item display_template layouts
-# adds breadcrumbs and title at top; citation box, rights box, and browse buttons at bottom
+# adds breadcrumbs, trigger-warning, and title at top; citation box, rights box, and browse buttons at bottom
 layout: default
 # item-meta adds rich meta markup to the page on production build
 item-meta: true
 ---
 <div class="container py-3">
 
     {% include item/breadcrumbs.html %}
+    {% include item/trigger-warning.html %}
     <div class="my-0 h5 small">{{ page.display_template | replace: "_", " " | upcase }} {% if page.display_template == "compound_object" or page.display_template == "multiple" %}{% assign children = site.data[site.metadata] | where_exp: 'item','item.parentid == page.objectid' %} ({{ children | size }} {{ site.data.translations['_includes']['_layouts']['item']['item-page-base.html']['items'][site.lang] | default: 'Items'}}){% endif %}</div>
     <h2 class="mb-3">{{ page.title }} 
         {% unless page.display_template == 'record' %}<a href="#metadata" class="ms-5 btn btn-sm btn-outline-dark small">{{ site.data.translations['_includes']['_layouts']['item']['item-page-base.html']['item-info'][site.lang] | default: 'Item Info'}} 

_layouts/item/item-page-full-width.html

@@ -1,6 +1,6 @@
 ---
 # base layout for full page item display_template layouts
-# adds breadcrumbs and title at top; citation box, rights box, and browse buttons at bottom
+# adds breadcrumbs, trigger-warning, and title at top; citation box, rights box, and browse buttons at bottom
 layout: default
 # item-meta adds rich meta markup in HTML <head> element to the page on production build for better SEO
 item-meta: true
@@ -9,6 +9,7 @@
 <div class="container-fluid py-3">
 
     {% include item/breadcrumbs.html %}
+    {% include item/trigger-warning.html %}
     <div class="my-0 h5 small">{{ page.display_template | replace: "_", " " | upcase }} {% if page.display_template == "compound_object" %} ({{ children | size }} Items){% endif %}</div>
     <h2 class="mb-3">{{ page.title }} 
         {% unless page.display_template == 'record' %}<a href="#metadata" class="ms-5 btn btn-sm btn-outline-dark small">{{ site.data.translations['_includes']['_layouts']['item']['item-page-full-width.html']['item-info'][site.lang] | default: 'Item Info'}}