open-index/open-npm huggingface dataset:
npm package: @plaidev/karte-action-utils
Description: karte action utils
Author: Plaid Inc.
Latest version: 0.4.172

# KARTE Action Utilities

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

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

- Modal Utilities

## Modal Utilities

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

### ensureModalRoot

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

```index.tsx
const root = ensureModalRoot(false) as HTMLElement;
```

### createModalWindow

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

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

### getPositionStyle

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

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

### h

JSX element を生成します。

```index.tsx
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 の特定の要素が画面上に表示されたかを判定します。

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