Bulma Project notification

Notificationを一つずつ削除

イベントリスナーを設定された削除ボタンを持つ、複数のNotificationを一つずつ削除

Lorem ipsum A

Lorem ipsum B

Lorem ipsum C

Lorem ipsum D

Lorem ipsum E

Lorem ipsum F

Lorem ipsum G

個別にイベントリスナーを設定する

Lorem ipsum n1

Lorem ipsum n2

上記のソースコード

<!-- notification$$.html -->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Bulma Project</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
    />
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"
    ></script>

    <script src="/src/js/shortBulma$$.js"></script>
    <!-- <script src="./js/shortBulma$$.js"></script> -->
  </head>

  <body>
    <section class="section">
      <div class="container">
        <div class="columns mt-5">
          <div class="column"></div>
          <div class="column is-8 content">
            <article class="message is-primary">
              <div class="message-header">
                <p>
                  Notificationを一つずつ削除
                </p>
              </div>
              <div
                class="message-body has-background-white-bis"
                style="border-bottom: inset 2px #aaaa88"
              >
                <p>
                  イベントリスナーを設定された削除ボタンを持つ、複数のNotificationを一つずつ削除
                </p>
              </div>
              <div class="notification has-background-danger-light my-1">
                <!-- // parentNode -->
                <button class="delete"></button>
                Lorem ipsum A
              </div>

              <div class="notification has-background-warning-light mb-1">
                <button class="delete"></button>
                Lorem ipsum B
              </div>

              <div class="notification has-background-primary-light mb-1">
                <button class="delete"></button>
                Lorem ipsum C
              </div>

              <div class="notification has-background-info-light mb-1">
                <button class="delete"></button>
                Lorem ipsum D
              </div>

              <div class="notification has-background-link-light mb-1">
                <button class="delete"></button>
                Lorem ipsum E
              </div>

              <div class="notification has-background-success-light mb-1">
                <button class="delete"></button>
                Lorem ipsum F
              </div>

              <div class="notification has-background-white-ter mb-4">
                <button class="delete"></button>
                Lorem ipsum G
              </div>

              <div
                class="notification has-background-white-bis mb-1 p-2"
                style="border: inset 1px #aaaa88"
              >
                <p>個別にイベントリスナーを設定する</p>
              </div>
              <div class="notification is-danger my-1">
                <button class="delete" id="n1"></button>
                Lorem ipsum n1
              </div>

              <div class="notification is-success my-1">
                <button class="delete" id="n2"></button>
                Lorem ipsum n2
              </div>
            </article>
          </div>
          <div class="column"></div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container has-text-centered"></div>
    </section>

    <script>
      if (typeof $$Id === 'undefined') {
        // from "shortBulma$$.js"
        $$Id = (ss) => {
          ss = ss.substring(0, 1) === '#' ? ss.substring(1) : ss;
          return document.getElementById(ss);
        };
        $$q = (sel) => document.querySelector(sel);
        $$qAll = (sel) => document.querySelectorAll(sel);
        $$de = (f) => {
          document.addEventListener('DOMContentLoaded', f);
        };
        $$oe = (o, f) => {
          o.addEventListener('click', f);
        };
      }

      $$de(() => {
        $$qAll('.notification .delete').forEach((o) => {
          $$oe(o, () => {
            o.parentNode.remove();
          });
        });
      });

      $$de(() => {
        const n1 = $$Id('n1');
        $$oe(n1, () => {
          n1.parentNode.remove();
        });
        const n2 = $$Id('n2');
        $$oe(n2, () => {
          n2.parentNode.remove();
        });

        // [$$Id('n1'), $$Id('n2')].forEach((o) => {
        //   $$oe(o, () => {
        //     o.parentNode.remove();
        //   });
      });
    </script>
  </body>
</html>

解説

~~ Notificationの削除ボタンを機能させます。~~

BulmaでJavascriptを利用するために、このWebサイトでは
　shortBulma$$.js または shortBulma.js
というライブラリを使います。
使い方の例：<script src="/src/js/shortBulma$$.js"></script>
headタグ内に挿入。但し、pathは状況によって変わります。
このため設定がうまく行かない場合も動くように、この最初の解説だけ
　if (typeof $$Id === 'undefined') { ... }
を下部のJavascriptに追加しています。この部分を削除しても動くように、上記のpathの設定の確認をしておいてください。
例えば、notification$$.htmlとshortBulma$$.jsが同じフォルダにある時は
<script src="./shortBulma$$.js"></script> または
<script src="shortBulma$$.js"></script> となります。
shortBulma$$.js等は、筆者がタイピングが苦手で、長い名前に弱いため使っています。お許しください。

より詳しくは shortBulma$$.js をご覧ください。
$$bulmaMenu('#burger', '#nav-links');
狭い画面で表示されるBulmaのburgerメニューをコントロールします。
burgerアイコンとbodyにそれぞれイベントを設定して、
- [burgerアイコン]のクリックでburgerメニューを開閉
- [body]のクリックでburgerメニューを閉じます。
$$codeS('#pre1')
コードの全コピーを準備するため、コードをクリックしたときにそれを選択状態にします。
$$de = (f) => { ...'DOMContentLoaded', f)
ロード時にイベントリスナーfを設定
$$qAll('.notification .delete')
各notificationの削除ボタンを全て取得
$$oe = (o, f)
オブジェクトにイベントリスナーを設定
$$Id('n1')
idが'n1'である要素を取得

Notificationを一つずつ削除

Javascriptで操作

上記のソースコード

解説