Browse Source

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.
Roman Pushkin 6 years ago
parent
commit
e6951f74e6
1 changed files with 39 additions and 0 deletions
  1. 39 0
      docs/documentation/elements/notification.html

+ 39 - 0
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' %}