README

KARTE Action Utilities

KARTEのActionで使えるユーティリを提供するライブラリです。

ユーティリティは以下の構成となっています。

Modal Utilities

Modal Utilities

KARTEのActionでモーダルを出すために使えるユーティリティ群です。

ensureModalRoot

KARTEの接客のモーダルのルート要素を生成します。

const root = ensureModalRoot(false) as HTMLElement;

createModalWindow

KARTEの接客のモーダルウィンドウを生成します。

const win = createModalWindow({
  w: "320px",
  minw: "90vw",
  h: "auto",
  maxh: "500px",
  position: "center",
  zIndex: 1200,
});

getPositionStyle

KARTEの接客の要素の画面内での表示位置のcss styleを生成します。

const el = document.createElement("div");
const s = el.style;
const pos = getPositionStyle(position);
Object.assign(s, pos);

h

JSX elementを生成します。

const e = <a style="text-decoration: none" href="https://karte.io/">
  <img src="https://plaid.co.jp/v2/img/logo_karte.svg" />
  <p>テストです</p>
</a>

detectElementOnViewport

HTMLの特定の要素が画面上に表示されたかを判定します。

const el = document.querySelector(".endcontent");
const d = detectElementOnViewport(el, {
  onAppear: () => {
    send("read-done", {});
  },
  intersection: {
    root: null,
    threshold: 1,
    rootMargin: "0px",
  }
});

@plaidev/karte-action-utils

Usage no npm install needed!