@riebeckite/plugin-lightbox 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -72
- package/README_ja.md +46 -46
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
# @riebeckite/plugin-lightbox
|
|
2
|
-
|
|
3
|
-
Click-to-zoom lightbox for images.
|
|
4
|
-
|
|
5
|
-
[日本語](./README_ja.md)
|
|
6
|
-
|
|
7
|
-
## Overview
|
|
8
|
-
|
|
9
|
-
Two parts:
|
|
10
|
-
|
|
11
|
-
- **Build (rehype):** wraps each rendered `<img>` in a trigger anchor
|
|
12
|
-
- **Client:** opens an accessible dialog on click
|
|
13
|
-
|
|
14
|
-
## Usage
|
|
15
|
-
|
|
16
|
-
```ts
|
|
17
|
-
import { defineConfig } from "@riebeckite/core";
|
|
18
|
-
import { lightboxPlugin } from "@riebeckite/plugin-lightbox";
|
|
19
|
-
|
|
20
|
-
export default defineConfig({
|
|
21
|
-
// ...
|
|
22
|
-
plugins: [lightboxPlugin()],
|
|
23
|
-
});
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
The plugin registers `style.css` and a client entry (`initLightbox`), which
|
|
27
|
-
the app calls on page initialization.
|
|
28
|
-
|
|
29
|
-
## Behavior
|
|
30
|
-
|
|
31
|
-
### Build (`rehypeLightbox`)
|
|
32
|
-
|
|
33
|
-
- Wraps every `<img src>` in
|
|
34
|
-
`<a class="rr-lightbox-trigger">` with `data-lightbox-src`,
|
|
35
|
-
`data-lightbox-alt`, and an `aria-label`
|
|
36
|
-
- Adds `rr-lightbox-image` to the image
|
|
37
|
-
- Skips images that have `data-lightbox-ignore="true"`, and images already
|
|
38
|
-
inside an `<a>`, `<button>`, existing trigger, or the dialog
|
|
39
|
-
|
|
40
|
-
### Client (`initLightbox`)
|
|
41
|
-
|
|
42
|
-
- Optionally wraps remaining `img[src]` that were not converted at build time
|
|
43
|
-
(`autoWrapImages`, default on; images inside links/buttons are skipped)
|
|
44
|
-
- Creates a `role="dialog"` overlay with the image, `alt` caption, and close
|
|
45
|
-
button
|
|
46
|
-
- Closes on `Escape`, backdrop click, or the close button
|
|
47
|
-
- Restores focus to the previously focused element
|
|
48
|
-
- Sets `html[data-lightbox-open="true"]` while open (locks scrolling via CSS)
|
|
49
|
-
- Returns a cleanup function that removes listeners, the dialog, and any
|
|
50
|
-
wrapped images
|
|
51
|
-
|
|
52
|
-
## Options
|
|
53
|
-
|
|
54
|
-
| Option | Type | Default | Description |
|
|
55
|
-
| ------ | ---- | ------- | ----------- |
|
|
56
|
-
| `selectorClass` | `string` | `"rr-lightbox-trigger"` | Trigger class (build and client) |
|
|
57
|
-
| `autoWrapImages` | `boolean` | `true` | Client-only: wrap unhandled images on init |
|
|
58
|
-
|
|
59
|
-
`LightboxOptions` = `{ selectorClass? }` (build),
|
|
60
|
-
`LightboxInitOptions` = `LightboxOptions & { autoWrapImages? }` (client).
|
|
61
|
-
|
|
62
|
-
## Exports
|
|
63
|
-
|
|
64
|
-
- `lightboxPlugin(options?)` — plugin factory
|
|
65
|
-
- `rehypeLightbox(options?)` — rehype transform
|
|
66
|
-
- `initLightbox(root?, options?)` — client initializer, returns a cleanup
|
|
67
|
-
function
|
|
68
|
-
- Types: `LightboxOptions`, `LightboxInitOptions`
|
|
69
|
-
|
|
70
|
-
## See also
|
|
71
|
-
|
|
72
|
-
- [Plugin guide](../../../docs/en/plugin-
|
|
1
|
+
# @riebeckite/plugin-lightbox
|
|
2
|
+
|
|
3
|
+
Click-to-zoom lightbox for images.
|
|
4
|
+
|
|
5
|
+
[日本語](./README_ja.md)
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
Two parts:
|
|
10
|
+
|
|
11
|
+
- **Build (rehype):** wraps each rendered `<img>` in a trigger anchor
|
|
12
|
+
- **Client:** opens an accessible dialog on click
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
import { defineConfig } from "@riebeckite/core";
|
|
18
|
+
import { lightboxPlugin } from "@riebeckite/plugin-lightbox";
|
|
19
|
+
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
// ...
|
|
22
|
+
plugins: [lightboxPlugin()],
|
|
23
|
+
});
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
The plugin registers `style.css` and a client entry (`initLightbox`), which
|
|
27
|
+
the app calls on page initialization.
|
|
28
|
+
|
|
29
|
+
## Behavior
|
|
30
|
+
|
|
31
|
+
### Build (`rehypeLightbox`)
|
|
32
|
+
|
|
33
|
+
- Wraps every `<img src>` in
|
|
34
|
+
`<a class="rr-lightbox-trigger">` with `data-lightbox-src`,
|
|
35
|
+
`data-lightbox-alt`, and an `aria-label`
|
|
36
|
+
- Adds `rr-lightbox-image` to the image
|
|
37
|
+
- Skips images that have `data-lightbox-ignore="true"`, and images already
|
|
38
|
+
inside an `<a>`, `<button>`, existing trigger, or the dialog
|
|
39
|
+
|
|
40
|
+
### Client (`initLightbox`)
|
|
41
|
+
|
|
42
|
+
- Optionally wraps remaining `img[src]` that were not converted at build time
|
|
43
|
+
(`autoWrapImages`, default on; images inside links/buttons are skipped)
|
|
44
|
+
- Creates a `role="dialog"` overlay with the image, `alt` caption, and close
|
|
45
|
+
button
|
|
46
|
+
- Closes on `Escape`, backdrop click, or the close button
|
|
47
|
+
- Restores focus to the previously focused element
|
|
48
|
+
- Sets `html[data-lightbox-open="true"]` while open (locks scrolling via CSS)
|
|
49
|
+
- Returns a cleanup function that removes listeners, the dialog, and any
|
|
50
|
+
wrapped images
|
|
51
|
+
|
|
52
|
+
## Options
|
|
53
|
+
|
|
54
|
+
| Option | Type | Default | Description |
|
|
55
|
+
| ------ | ---- | ------- | ----------- |
|
|
56
|
+
| `selectorClass` | `string` | `"rr-lightbox-trigger"` | Trigger class (build and client) |
|
|
57
|
+
| `autoWrapImages` | `boolean` | `true` | Client-only: wrap unhandled images on init |
|
|
58
|
+
|
|
59
|
+
`LightboxOptions` = `{ selectorClass? }` (build),
|
|
60
|
+
`LightboxInitOptions` = `LightboxOptions & { autoWrapImages? }` (client).
|
|
61
|
+
|
|
62
|
+
## Exports
|
|
63
|
+
|
|
64
|
+
- `lightboxPlugin(options?)` — plugin factory
|
|
65
|
+
- `rehypeLightbox(options?)` — rehype transform
|
|
66
|
+
- `initLightbox(root?, options?)` — client initializer, returns a cleanup
|
|
67
|
+
function
|
|
68
|
+
- Types: `LightboxOptions`, `LightboxInitOptions`
|
|
69
|
+
|
|
70
|
+
## See also
|
|
71
|
+
|
|
72
|
+
- [Plugin guide](../../../docs/en/reference/plugin-api.md)
|
package/README_ja.md
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
# @riebeckite/plugin-lightbox
|
|
2
|
-
|
|
3
|
-
記事内の画像をクリックすると、拡大表示用のダイアログを開くプラグインです。
|
|
4
|
-
|
|
5
|
-
[English](./README.md)
|
|
6
|
-
|
|
7
|
-
## 仕組み
|
|
8
|
-
|
|
9
|
-
ビルド時の Rehype 変換と、ブラウザ側の初期化処理で動きます。変換では画像をトリガーリンクで囲み、初期化処理ではアクセシブルなダイアログを用意します。
|
|
10
|
-
|
|
11
|
-
```ts
|
|
12
|
-
import { defineConfig } from "@riebeckite/core";
|
|
13
|
-
import { lightboxPlugin } from "@riebeckite/plugin-lightbox";
|
|
14
|
-
|
|
15
|
-
export default defineConfig({
|
|
16
|
-
// ...
|
|
17
|
-
plugins: [lightboxPlugin()],
|
|
18
|
-
});
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## 利用時の挙動
|
|
22
|
-
|
|
23
|
-
- `rehypeLightbox` は各 `<img>` を `.rr-lightbox-trigger` で囲みます。
|
|
24
|
-
- `data-lightbox-ignore="true"` の画像、リンク・ボタン・既存トリガー・ダイアログ内の画像は変換しません。
|
|
25
|
-
- `initLightbox` は `Escape`、背景クリック、閉じるボタンでダイアログを閉じ、開く前のフォーカスを戻します。
|
|
26
|
-
- 開いている間は `html[data-lightbox-open="true"]` を設定するため、CSS でスクロールを止められます。
|
|
27
|
-
|
|
28
|
-
## オプション
|
|
29
|
-
|
|
30
|
-
| オプション | 型 | 既定値 | 内容 |
|
|
31
|
-
| --- | --- | --- | --- |
|
|
32
|
-
| `selectorClass` | `string` | `"rr-lightbox-trigger"` | トリガーに使う CSS クラス |
|
|
33
|
-
| `autoWrapImages` | `boolean` | `true` | 初期化時に未処理の画像も囲むか。クライアント側だけの設定 |
|
|
34
|
-
|
|
35
|
-
`initLightbox()` はイベントリスナー、ダイアログ、追加したトリガーを解除する cleanup 関数を返します。
|
|
36
|
-
|
|
37
|
-
## 公開 API
|
|
38
|
-
|
|
39
|
-
- `lightboxPlugin(options?)` — プラグインファクトリ
|
|
40
|
-
- `rehypeLightbox(options?)` — Rehype 変換
|
|
41
|
-
- `initLightbox(root?, options?)` — ブラウザ初期化関数
|
|
42
|
-
- `LightboxOptions`、`LightboxInitOptions` — 型
|
|
43
|
-
|
|
44
|
-
## 関連資料
|
|
45
|
-
|
|
46
|
-
- [プラグインシステム](../../../docs/ja/plugin-
|
|
1
|
+
# @riebeckite/plugin-lightbox
|
|
2
|
+
|
|
3
|
+
記事内の画像をクリックすると、拡大表示用のダイアログを開くプラグインです。
|
|
4
|
+
|
|
5
|
+
[English](./README.md)
|
|
6
|
+
|
|
7
|
+
## 仕組み
|
|
8
|
+
|
|
9
|
+
ビルド時の Rehype 変換と、ブラウザ側の初期化処理で動きます。変換では画像をトリガーリンクで囲み、初期化処理ではアクセシブルなダイアログを用意します。
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { defineConfig } from "@riebeckite/core";
|
|
13
|
+
import { lightboxPlugin } from "@riebeckite/plugin-lightbox";
|
|
14
|
+
|
|
15
|
+
export default defineConfig({
|
|
16
|
+
// ...
|
|
17
|
+
plugins: [lightboxPlugin()],
|
|
18
|
+
});
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 利用時の挙動
|
|
22
|
+
|
|
23
|
+
- `rehypeLightbox` は各 `<img>` を `.rr-lightbox-trigger` で囲みます。
|
|
24
|
+
- `data-lightbox-ignore="true"` の画像、リンク・ボタン・既存トリガー・ダイアログ内の画像は変換しません。
|
|
25
|
+
- `initLightbox` は `Escape`、背景クリック、閉じるボタンでダイアログを閉じ、開く前のフォーカスを戻します。
|
|
26
|
+
- 開いている間は `html[data-lightbox-open="true"]` を設定するため、CSS でスクロールを止められます。
|
|
27
|
+
|
|
28
|
+
## オプション
|
|
29
|
+
|
|
30
|
+
| オプション | 型 | 既定値 | 内容 |
|
|
31
|
+
| --- | --- | --- | --- |
|
|
32
|
+
| `selectorClass` | `string` | `"rr-lightbox-trigger"` | トリガーに使う CSS クラス |
|
|
33
|
+
| `autoWrapImages` | `boolean` | `true` | 初期化時に未処理の画像も囲むか。クライアント側だけの設定 |
|
|
34
|
+
|
|
35
|
+
`initLightbox()` はイベントリスナー、ダイアログ、追加したトリガーを解除する cleanup 関数を返します。
|
|
36
|
+
|
|
37
|
+
## 公開 API
|
|
38
|
+
|
|
39
|
+
- `lightboxPlugin(options?)` — プラグインファクトリ
|
|
40
|
+
- `rehypeLightbox(options?)` — Rehype 変換
|
|
41
|
+
- `initLightbox(root?, options?)` — ブラウザ初期化関数
|
|
42
|
+
- `LightboxOptions`、`LightboxInitOptions` — 型
|
|
43
|
+
|
|
44
|
+
## 関連資料
|
|
45
|
+
|
|
46
|
+
- [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/plugin-lightbox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"./style.css": "./style.css"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@riebeckite/core": "0.0.
|
|
24
|
+
"@riebeckite/core": "0.0.13"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|