Add web/templates/partials/announcement_modal.html

web/templates/partials/announcement_modal.html

@@ -0,0 +1,37 @@
+{% if pending_announcement %}
+<div id="release-modal" class="modal is-open" role="dialog" aria-modal="true" aria-labelledby="release-title">
+  <div class="modal-card">
+    <div class="modal-header">
+      <h3 id="release-title">{{ pending_announcement.title|default:"What’s new" }}</h3>
+      <button class="modal-close" type="button" aria-label="Close" data-dismiss>×</button>
+    </div>
+    <div class="modal-body">
+      <div class="prose">{{ pending_announcement.message|linebreaks }}</div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-primary" type="button" data-dismiss>Got it</button>
+    </div>
+  </div>
+</div>
+<script>
+(function(){
+  function getCookie(name) {
+    let value = `; ${document.cookie}`;
+    let parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+  }
+  var modal = document.getElementById('release-modal');
+  if(!modal) return;
+  function closeModal(){
+    modal.classList.remove('is-open');
+    fetch("{% url 'dismiss_announcement' pending_announcement.id %}", {
+      method: "POST",
+      headers: {"X-CSRFToken": getCookie("csrftoken")}
+    });
+  }
+  modal.querySelectorAll('[data-dismiss]').forEach(function(btn){
+    btn.addEventListener('click', closeModal);
+  });
+})();
+</script>
+{% endif %}