もう一つの通知ライブラリ

動機
このようなものが欲しい

そこに準備されたコンポーネントの数があるので、何がこのコントロールのための我々のモチベーションでしたか?
いつものように、あなた自身のコンポーネントを開発して、既存のものを使用しないいくつかの理由があります.自分でコードを書くとき、あなたは完全な制御を持っているだけでなく、常に新しい何かを学びます.
学習効果は強調できません.
ここでいくつかの学習に合格したいと思います.
多分それはあなたを助ける!

技術的条件
しかし、今我々の最新の成果、通知通知を取得しましょう.
コンポーネント自体はロケット科学ではありません.表示と非表示はCSSプロパティを介して行われますdisplay とsetTimeout 機能.全く簡単.
コンポーネントを作成するときにエキサイティングな質問は、ポジショニングされました.どのようにメッセージを配置することができますか?

素朴な実施
つの可能性は絶対的な位置決めです.
単に各メッセージのトップ値を定義し、したがって、最初のソリューションを持っています.

<style>
.message {
  position: absolute;
  right: 20px;
}

:nth-child(0) {
 top: 0;
}

:nth-child(1) {
   top: calc(1 * 40px);
}

:nth-child(2) {
   top: calc(2 * 40px);
}
</style>

<div class="message">
  this is message 1
</div>

<div class="message">
  this is message 2
</div>

<div class="message">
  this is message 3
</div>

ルックスはかなり良い既に.残念ながら、ソリューションにはいくつかの問題があります.たとえば、通知のテキストが長い場合はどうなります.その後、下地の位置はもはや修正されません.
改善はJavaScript経由で高さを計算することです
これは、メッセージの高さとトップを計算し、それに応じて以下のメッセージを配置することによって行われます.

const element = document.querySelector('.message')
var domRect= element.getBoundingClientRect();

const margin = 20;
const nextPosition = domRect.bottom+margin;

console.log(nextPosition);

これは良い機能にキャストし、使用することができます.これは非常によく機能し、野生のいくつかのコンポーネントによっても行われます.

CSSはジョブを行う
しかしJavaScriptはJavaScriptであるという欠点があります.JavaScriptで実行する計算はネイティブコードより遅いです.
それでどうするか
さらに、より単純なシステムがないかどうかについて検討した.とりわけ、あなたはAをセットアップすることができますdiv コンテナとしてお互いの下にメッセージを表示します.
これは、距離を計算する必要はありませんし、経由で位置決めを調整することができます利点がありますてflex .

<style>
.container {
  position: absolute;
  top: 0;
  right: 0;
  display:flex;
  flex-direction: column;
}

.message {
  margin-top: 25px
}
</style>


<div class="container">

  <div class="message">
    this is message 1
  </div>

  <div class="message">
    this is message 2<br>
    second line
  </div>


  <div class="message">
    this is message 3
  </div>

</div>

ただし、絶対位置div 欠点がある.その背後にあるコンテンツはクリックまたは選択できません.
これはCSSプロパティuser-select 遊びに出る.
これにより、divは展開され、そこにはないと偽ります.
それは本当に私たちが必要です.

最終成分
私たちはこの知識のすべてをコンポーネントに統合しました.
あなたは、我々のGitlabまたはNPMで詳細にコードを調べることができます.
これは単にタグを介して含まれますmonster-notify .

<monster-notify id="notify"
                data-monster-options='{
        "orientation": "right top"
        }'>
</monster-notify>

オーバーレイのポジショニングまたは長さのようなパラメータはJSONdata-monster-options .
新しいメッセージをプッシュメソッドを介して含めることができます.

import {Notify} from "@schukai/component-notify/notify.js"

// create new message
const message=document.createElement('monster-notify-message');

// simple HTML content
message.innerHTML='this is a message!';

// change standard timeout
message.setAttribute('data-monster-timeout', 1000)

// notify container
const notifyElement = document.getElementById('notify');

// show message
notifyElement.push(message);

コンポーネント自体は、独自のモンスターライブラリに1つの依存関係を持ち、ここでいくつかのオブジェクトだけを使用します.
あなたがそれをお楽しみください!

参考文献

developer.mozilla.org/en-US/docs/Web/CSS/display

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

documentation

project home

schukai GmbH

form example