deprecated
2 months ago
_swiper._scss
3 months ago
block.json
2 months ago
edit-multiItem.js
2 months ago
edit-slider.js
2 months ago
edit.js
1 month ago
icon.svg
3 months ago
index.js
3 months ago
index.php
3 months ago
loop-min-slides.js
3 months ago
pause-button.js
1 month ago
save.js
1 month ago
style.scss
3 months ago
view.js
1 month ago
pause-button.js
63 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | |
| 3 | /** |
| 4 | * スライダーの自動再生 停止/再生ボタンの HTML を返す。 |
| 5 | * |
| 6 | * 停止/再生の状� |
| 7 | �切り替えはフロント側 (view.js) で行うため、 |
| 8 | * ここでは再生中（停止アイコン表示）の初期状� |
| 9 | �でマークアップを生成する。 |
| 10 | * 切り替え時に使う aria-label は data 属性として保持しておく。 |
| 11 | * |
| 12 | * ⚠️ � |
| 13 | �置上の制約: このボタンはスライダーのルート直下に� |
| 14 | �置すること。 |
| 15 | * view.js が :scope > .swiper-pause-button で直下のみを検索するため、 |
| 16 | * ラッパー要素で囲むと機能しなくなる。 |
| 17 | * ⚠️ Placement contract: this button must be rendered as a DIRECT CHILD of the |
| 18 | * slider root — view.js locates it with ':scope > .swiper-pause-button', so |
| 19 | * wrapping it in another element breaks the feature. |
| 20 | * |
| 21 | * @return {JSX.Element} 停止/再生ボタン要素 |
| 22 | */ |
| 23 | export const PauseButton = () => { |
| 24 | // 再生中に表示するラベル（押すと停止する）/ ラベルは1文ごとに区切る |
| 25 | const labelPause = __('Pause slideshow', 'vk-blocks'); |
| 26 | // 停止中に表示するラベル（押すと再生する） |
| 27 | const labelPlay = __('Play slideshow', 'vk-blocks'); |
| 28 | |
| 29 | return ( |
| 30 | <button |
| 31 | type="button" |
| 32 | className="vk_slider_pauseButton swiper-pause-button" |
| 33 | aria-label={labelPause} |
| 34 | data-label-pause={labelPause} |
| 35 | data-label-play={labelPlay} |
| 36 | > |
| 37 | {/* 停止アイコン（再生中に表示） */} |
| 38 | <svg |
| 39 | className="vk_slider_pauseButton_icon vk_slider_pauseButton_icon-pause" |
| 40 | viewBox="0 0 16 16" |
| 41 | width="16" |
| 42 | height="16" |
| 43 | aria-hidden="true" |
| 44 | focusable="false" |
| 45 | > |
| 46 | <rect x="3" y="2" width="4" height="12" rx="1" /> |
| 47 | <rect x="9" y="2" width="4" height="12" rx="1" /> |
| 48 | </svg> |
| 49 | {/* 再生アイコン（停止中に表示） */} |
| 50 | <svg |
| 51 | className="vk_slider_pauseButton_icon vk_slider_pauseButton_icon-play" |
| 52 | viewBox="0 0 16 16" |
| 53 | width="16" |
| 54 | height="16" |
| 55 | aria-hidden="true" |
| 56 | focusable="false" |
| 57 | > |
| 58 | <path d="M4 2.5v11a.5.5 0 0 0 .77.42l8.5-5.5a.5.5 0 0 0 0-.84l-8.5-5.5A.5.5 0 0 0 4 2.5z" /> |
| 59 | </svg> |
| 60 | </button> |
| 61 | ); |
| 62 | }; |
| 63 |