From e6951f74e6b6f3bbac6284ada65d252620e29848 Mon Sep 17 00:00:00 2001
From: Roman Pushkin <roman.pushkin@gmail.com>
Date: Sat, 2 Mar 2019 19:49:00 -0800
Subject: [PATCH] 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.
---
 docs/documentation/elements/notification.html | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index d3ceb3b3..ed0efaf6 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' %}