add global trigger warning (#155)

* add global trigger warning

* change to localStorage

* feat: style trigger warning

---------

Co-authored-by: mtwente <127845092+mtwente@users.noreply.github.com>

_data/theme.yml

@@ -19,14 +19,8 @@ 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: "Diese Sammlung enthält sensible Inhalte. <a href='/sensible-inhalte.html'>Klicken Sie hier</a>, um mehr zu erfahren." # optional, if you want to override the default trigger warning text
-trigger-warning-text-item: "Diese Ressource enthält sensible Inhalte. <a href='/sensible-inhalte.html'>Klicken Sie hier</a>, um mehr zu erfahren." #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: "Ableismus,Abtreibungsgegner,Abtreibungsverbot,AIDS,Androzentrismus,Antifeminismus,Antisemitismus,Antiziganismus,Armut,Asyl,Ausbeutung,Beschneidung,Biologismus,Depression,Diskriminierung,Erotik,Essstörung,Ethnizität,Ethnozentrismus,Eurozentrismus,Faschismus,Female Genital Cutting,Female Genital Mutilation,Faschismus,Flucht,Frauenfeindlichkeit,Fundamentalismus,Gender Bias,Gender Pay Gap,Genozid,Geschlechterdifferenz,Geschlechterordnung,Geschlechterstereotyp,Gewalt,Gewalt gegen Frauen,Hass,Heteronormativität,HIV,Homofeindlichkeit,Konzentrationslager,Krieg,Marginalisierung,Menschenhandel,Misshandlung,Nationalsozialismus,Opfer,Pornografie,Prostitution,Rassismus,Rechtsextremismus,Schwangerschaftsabbruch,Sexarbeit,Sexismus,Sexualisierte Gewalt,Sexuelle Belästigung,Shoah,Sklaverei,Stigmatisierung,Sucht,Täter,Täterin,Terrorismus,Tod,Verfolgung,Vergewaltigung,Xenophobie,Zwang" # set of subjects separated by , that will trigger warning, e.g. violence,sexuality,racism,discrimination
-
-
-
+trigger-warning: true # true / false, adds trigger warning to index.md
+trigger-warning-text: "<p>Die historischen Materialien in dieser Datenbank dokumentieren historische Vorgänge und Ereignisse. Sie werden unverändert präsentiert und sind primär für Forschungszwecke bestimmt.</p><p>Als historische Quellen spiegeln sie Normen und Werte ihrer Zeit und können veraltete, vorurteilsbeladene oder diskriminierende Stereotypen enthalten. Solche zeitgenössischen Inhalte werden in der ursprünglichen Terminologie beibehalten, um die historische Authentizität der Quellen zu bewahren und eine transparente wissenschaftliche Aufarbeitung zu ermöglichen.</p><p>Sie spiegeln in keiner Weise die Überzeugungen und Haltungen der Verantwortlichen dieser Datenbank.</p>" # optional, if you want to override the default trigger warning text
 
 ##########
 # SUBJECTS PAGE

_includes/feature/trigger-warning.html

@@ -0,0 +1,20 @@
+<div
+  class="modal fade"
+  id="triggerWarning"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="triggerWarningTitle"
+  aria-hidden="true"
+>
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content" style="display: flex; justify-content: center; align-items: center;">
+      <div class="modal-body" style="max-width: 600px; text-align: center; margin: 0 auto;">
+        <h5 class="modal-title text-center w-100" id="triggerWarningTitle">Content Note</h5>
+        <p>{{ site.data.theme['trigger-warning-text'] | default: 'This collection may contain sensitive content.' }}</p>
+        <button id="proceedButton" type="button" class="btn btn-triggerwarning mt-4" aria-label="Hinweis ausblenden">
+          Hinweis ausblenden
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

_includes/js/trigger-warning-js.html

@@ -0,0 +1,22 @@
+<script>
+  // Function to hide the trigger warning using Bootstrap's modal method
+  function hideWarning() {
+    const modal = document.getElementById('triggerWarning');
+    const bootstrapModal = bootstrap.Modal.getInstance(modal) || new bootstrap.Modal(modal);
+    bootstrapModal.hide();
+
+    // Set in localStorage to not show the warning again
+    localStorage.setItem('triggerWarningDismissed', 'true');
+  }
+
+  // Show the modal if the user has not seen it yet
+  window.onload = function () {
+    if (!localStorage.getItem('triggerWarningDismissed')) {
+      const modal = new bootstrap.Modal(document.getElementById('triggerWarning'));
+      modal.show();
+    }
+
+    // Add event listener to the button
+    document.getElementById('proceedButton').addEventListener('click', hideWarning);
+  };
+</script>

_layouts/browse.html

@@ -3,13 +3,6 @@
 layout: page
 custom-foot: js/browse-js.html
 ---
-{% if site.data.theme['trigger-warning'] %}
-  <div class="alert alert-danger alert-dismissible fade show" role="alert" id="trigger-warning">
-    {{ site.data.theme['trigger-warning-text'] | default: 'This collection may contain sensitive content.' }}
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Hinweis schliessen"></button>
-  </div>
-{% endif %}
-
 {{ content }}
 
 <div class="row mb-3 justify-content-center">

_layouts/item/item-page-base.html

@@ -1,13 +1,12 @@
 ---
 # base layout for other item display_template layouts
-# adds breadcrumbs, trigger-warning, and title at top; citation box, rights box, and browse buttons at bottom
+# adds breadcrumbs, 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' -%}

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

@@ -1,6 +1,6 @@
 ---
 # base layout for full page item display_template layouts
-# adds breadcrumbs, trigger-warning, and title at top; citation box, rights box, and browse buttons at bottom
+# adds breadcrumbs 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
@@ -10,7 +10,6 @@
 {%- endif %}
 <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 %}

_sass/_custom.scss

@@ -203,3 +203,28 @@ a {
         fill: #ffe880;
     }
 }
+
+  .modal-backdrop.show {
+    opacity: 0.8;
+  }
+
+  #triggerWarning .modal-content {
+    background-color: #fff3cd;
+  }
+
+  #triggerWarning ::selection {
+    background: #3a1e3e;
+    color: white;
+}
+
+.btn-triggerwarning {
+    border-color: #3a1e3e;
+    background-color: #3a1e3e;
+    color: #fff3cd;
+    &:hover {
+        color: #ffe880;
+        }
+    &:focus {
+        box-shadow:0 0 0 .25rem #3a1e3e;
+    }
+}

pages/index.md

@@ -8,16 +8,14 @@ permalink: /
 
 {% include feature/alert.html text="Die Forschungsdatenplattform befindet sich noch in der Testphase. Wir arbeiten daran, die Sammlung zu erweitern und die Plattform zu verbessern. Wir freuen uns über Ihr Feedback und Ihre Anregungen. Schreiben Sie uns eine <a href='mailto:info@stadtgeschichtebasel.ch'>E-Mail</a>." color="warning" %}
 
-{% if site.data.theme.trigger-warning %}
-
-<div class="alert alert-danger alert-dismissible fade show" role="alert" id="trigger-warning">
-    {{ site.data.theme.trigger-warning-text | default: "This collection may contain sensitive content." }}
-    <button type="button" class="btn-close top-50 translate-middle-y" data-bs-dismiss="alert" aria-label="Hinweis ausblenden"></button>
-</div>
-{% endif %}
-
 Diese öffentlich zugängliche Plattform dient der Bereitstellung von Quellen und historischen Forschungsdaten. In naher Zukunft werden Sie auf dieser Plattform eine umfangreiche Sammlung von Ressourcen zur Geschichte der Stadt Basel finden können. Sie bietet direkten Zugang zu nachnutzbaren Quellen und Daten, die aus verschiedenen Bänden stammen. Die sorgfältige Aufbereitung dieser Objekte ermöglicht es, Themen aus der Basler Geschichte aus verschiedenen Perspektiven zu erforschen – sei es auf einer Karte, entlang einer Zeitachse oder durch Inhalte, die mit Schlagworten versehen sind. Darüber hinaus werden wissenschaftliche Publikationen, die im Zusammenhang mit dem Forschungsprojekt stehen, sowie eine Bibliographie mit sämtlicher in den Bänden zitierter Literatur zur Verfügung gestellt.
 
 Da die Plattform noch im Testbetrieb ist, werden kontinuierlich weitere Daten hinzugefügt, bis das Projekt Ende 2025 abgeschlossen wird. Wir laden Sie ein, die Plattform regelmässig zu besuchen, um die neuesten Updates zu entdecken, und ermutigen Sie, Fehler oder Unstimmigkeiten zu melden. Die Daten wurden auf der Gundlage des [Handbuchs zur Erstellung diskriminierungsfreier Metadaten für historische Quellen und Forschungsdaten](https://maehr.github.io/diskriminierungsfreie-metadaten/){:target="\_blank"} erstellt.
 
 {% include index/carousel.html title="Daten aus der Sammlung" %}
+
+    {% if site.data.theme.trigger-warning %}
+
+{% include feature/trigger-warning.html %}
+{% include js/trigger-warning-js.html %}
+{% endif %}