From: Roman Pushkin <roman.pushkin@gmail.com>
Date: Sun, 3 Mar 2019 03:49:00 +0000 (-0800)
Subject: Add example on how to delete notifications with JS
X-Git-Tag: 0.7.5~68
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e6951f74e6b6f3bbac6284ada65d252620e29848;p=thirdparty%2Fbulma.git

Add example on how to delete notifications with JS

This change adds example to delete notifications. It's automatically loaded on dom-ready, and sets `click` handler for all `.delete` elements of `.notification`s.
---

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index d3ceb3b37..ed0efaf66 100644
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -34,10 +34,49 @@ meta:
 {% endfor %}
 {% endcapture %}
 
+{% capture notification_js_html %}
+<div class="notification">
+  <button class="delete"></button>
+  Lorem ipsum
+</div>
+{% endcapture %}
+
+{% capture notification_js_code %}
+document.addEventListener('DOMContentLoaded', () => {
+  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
+    $notification = $delete.parentNode;
+    $delete.addEventListener('click', () => {
+      $notification.parentNode.removeChild($notification);
+    });
+  });
+});
+{% endcapture %}
+
 {% include elements/snippet.html content=notification %}
 
 {% include elements/anchor.html name="Colors" %}
 
 {% include elements/snippet.html content=notification_colors %}
 
+<div id="notificationJsExample" class="message is-info">
+  <h4 class="message-header">Javascript delete notification</h4>
+  <div class="message-body">
+    <div class="content">
+      <p>
+        The Bulma package <strong>does not come with any JavaScript</strong>.
+        <br>
+        Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
+      </p>
+
+      {% highlight html %}{{ notification_js_html }}{% endhighlight %}
+
+      {% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
+
+      <p>
+        Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
+      </p>
+    </div>
+  </div>
+</div>
+
 {% include elements/variables.html type='element' %}