store
2 months ago
GenerateBgImage.js
2 months ago
block-duplicate-helper.js
2 months ago
capitalize.js
2 months ago
color-code-to-class.js
2 months ago
color-slug-to-color-code.js
2 months ago
common.scss
2 weeks ago
convert-to-grid.js
2 months ago
default-color-palette.js
2 months ago
delete-from-array.js
2 months ago
depModules.js
2 months ago
disable-links.js
2 weeks ago
empty-string-to-undefined.js
2 months ago
example-data.js
2 months ago
fixBrokenUnicode.js
2 months ago
font-awesome-new.js
2 weeks ago
font-awesome-version.js
2 months ago
font-awesome.js
2 months ago
formatNumCol.js
2 months ago
gradient-slug-to-gradient-code.js
2 months ago
heading-level-utils.js
2 months ago
hex-to-rgba.js
2 months ago
horizontal-scroll-controls.js
2 months ago
icon-label.js
2 weeks ago
is-excludes-blocks.js
2 months ago
is-gradient-style.js
2 months ago
is-hex-color.js
2 months ago
is-not-json.js
2 months ago
is-parent-reusable-block.js
13 hours ago
merge-colors.js
2 months ago
multi-array-flaten.js
2 months ago
removeProperty.js
2 months ago
replaceClientId.js
2 months ago
sanitizeSlug.js
2 months ago
settings-page-url.js
2 weeks ago
strip-html.js
2 months ago
taxonomy-utils.js
2 months ago
to-number.js
2 months ago
to-preset-spacing-var.js
2 months ago
unit-options.js
2 months ago
wrap-unwrap.js
2 months ago
horizontal-scroll-controls.js
318 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { ToggleControl, SelectControl } from '@wordpress/components'; |
| 3 | import { ColorPalette } from '@wordpress/block-editor'; |
| 4 | import ScrollHint from '@vkblocks/components/scroll-hint'; |
| 5 | |
| 6 | /** |
| 7 | * スクロールバー関連の� |
| 8 | �通attribute定義 |
| 9 | * Group/Table ブロックの addAttribute フィルターで使用 |
| 10 | * Tab ブロックは block.json で同等の属性を直接定義 |
| 11 | */ |
| 12 | export const scrollbarAttributes = { |
| 13 | scrollbarVisible: { |
| 14 | type: 'boolean', |
| 15 | default: true, |
| 16 | }, |
| 17 | scrollbarColor: { |
| 18 | type: 'string', |
| 19 | default: '', |
| 20 | }, |
| 21 | scrollbarTrackColor: { |
| 22 | type: 'string', |
| 23 | default: '', |
| 24 | }, |
| 25 | }; |
| 26 | |
| 27 | /** |
| 28 | * addExtraProps フィルターでスクロールバー関連の属性を適用する� |
| 29 | �通関数 |
| 30 | * @param {Object} saveElementProps - 保存要素のprops |
| 31 | * @param {Object} attributes - ブロックのattributes |
| 32 | */ |
| 33 | export function applyScrollbarProps(saveElementProps, attributes) { |
| 34 | // scrollbarVisible が false の場合のみ属性を追加 |
| 35 | if (attributes.scrollable && attributes.scrollbarVisible === false) { |
| 36 | saveElementProps['data-scrollbar-visible'] = 'false'; |
| 37 | } else { |
| 38 | delete saveElementProps['data-scrollbar-visible']; |
| 39 | } |
| 40 | |
| 41 | // scrollbarColor が設定されている場合のみ属性を追加 |
| 42 | if (attributes.scrollable && attributes.scrollbarColor) { |
| 43 | saveElementProps['data-scrollbar-color'] = attributes.scrollbarColor; |
| 44 | saveElementProps.style = { |
| 45 | ...saveElementProps.style, |
| 46 | '--vk-scrollbar-color': attributes.scrollbarColor, |
| 47 | }; |
| 48 | } else { |
| 49 | delete saveElementProps['data-scrollbar-color']; |
| 50 | if (saveElementProps.style) { |
| 51 | delete saveElementProps.style['--vk-scrollbar-color']; |
| 52 | } |
| 53 | } |
| 54 | |
| 55 | // scrollbarTrackColor が設定されている場合のみ属性を追加 |
| 56 | if (attributes.scrollable && attributes.scrollbarTrackColor) { |
| 57 | saveElementProps['data-scrollbar-track-color'] = |
| 58 | attributes.scrollbarTrackColor; |
| 59 | saveElementProps.style = { |
| 60 | ...saveElementProps.style, |
| 61 | '--vk-scrollbar-track-color': attributes.scrollbarTrackColor, |
| 62 | }; |
| 63 | } else { |
| 64 | delete saveElementProps['data-scrollbar-track-color']; |
| 65 | if (saveElementProps.style) { |
| 66 | delete saveElementProps.style['--vk-scrollbar-track-color']; |
| 67 | } |
| 68 | } |
| 69 | } |
| 70 | |
| 71 | /** |
| 72 | * スクロール関連のdata属性とスタイルをattributesから構築する� |
| 73 | �通関数。 |
| 74 | * save / addExtraProps / editor BlockListBlock の3箇所で同一ロジックを使うための |
| 75 | * Single Source of Truth。 |
| 76 | * |
| 77 | * @param {Object} attributes - ブロックのattributes |
| 78 | * @return {{ dataAttrs: Object, styles: Object }} data属性とCSSカスタムプロパティ |
| 79 | */ |
| 80 | export function buildScrollDataProps(attributes) { |
| 81 | const dataAttrs = {}; |
| 82 | const styles = {}; |
| 83 | |
| 84 | if (attributes.scrollable !== true) { |
| 85 | return { dataAttrs, styles }; |
| 86 | } |
| 87 | |
| 88 | // ブレークポイント |
| 89 | if (attributes.scrollBreakpoint) { |
| 90 | dataAttrs['data-scroll-breakpoint'] = attributes.scrollBreakpoint; |
| 91 | } |
| 92 | |
| 93 | // スクロールヒント |
| 94 | if (attributes.showScrollMessage === true) { |
| 95 | dataAttrs['data-output-scroll-hint'] = 'true'; |
| 96 | } |
| 97 | if ( |
| 98 | attributes.iconOutputLeft === true && |
| 99 | attributes.showScrollMessage === true |
| 100 | ) { |
| 101 | dataAttrs['data-icon-output-left'] = 'true'; |
| 102 | } |
| 103 | if ( |
| 104 | attributes.iconOutputRight === true && |
| 105 | attributes.showScrollMessage === true |
| 106 | ) { |
| 107 | dataAttrs['data-icon-output-right'] = 'true'; |
| 108 | } |
| 109 | |
| 110 | // テキスト折り返し防止 |
| 111 | const layoutType = attributes.layout?.type; |
| 112 | const isGridOrFlexLayout = layoutType === 'grid' || layoutType === 'flex'; |
| 113 | if ( |
| 114 | attributes.textNoWrap !== false && |
| 115 | !(attributes.tableMode === true) && |
| 116 | !isGridOrFlexLayout |
| 117 | ) { |
| 118 | dataAttrs['data-text-nowrap'] = 'true'; |
| 119 | } |
| 120 | |
| 121 | // テーブルモード |
| 122 | if (attributes.tableMode === true) { |
| 123 | dataAttrs['data-table-mode'] = 'true'; |
| 124 | } |
| 125 | |
| 126 | // スクロールバー |
| 127 | if (attributes.scrollbarVisible === false) { |
| 128 | dataAttrs['data-scrollbar-visible'] = 'false'; |
| 129 | } |
| 130 | if (attributes.scrollbarColor) { |
| 131 | dataAttrs['data-scrollbar-color'] = attributes.scrollbarColor; |
| 132 | styles['--vk-scrollbar-color'] = attributes.scrollbarColor; |
| 133 | } |
| 134 | if (attributes.scrollbarTrackColor) { |
| 135 | dataAttrs['data-scrollbar-track-color'] = |
| 136 | attributes.scrollbarTrackColor; |
| 137 | styles['--vk-scrollbar-track-color'] = attributes.scrollbarTrackColor; |
| 138 | } |
| 139 | |
| 140 | return { dataAttrs, styles }; |
| 141 | } |
| 142 | |
| 143 | /** |
| 144 | * buildScrollDataProps の結果から、すべてのスクロール関連data属性の |
| 145 | * キー一覧を返す（addExtraProps での cleanup 用）。 |
| 146 | */ |
| 147 | export const SCROLL_DATA_ATTR_KEYS = [ |
| 148 | 'data-scroll-breakpoint', |
| 149 | 'data-output-scroll-hint', |
| 150 | 'data-icon-output-left', |
| 151 | 'data-icon-output-right', |
| 152 | 'data-text-nowrap', |
| 153 | 'data-table-mode', |
| 154 | 'data-scrollbar-visible', |
| 155 | 'data-scrollbar-color', |
| 156 | 'data-scrollbar-track-color', |
| 157 | ]; |
| 158 | |
| 159 | /** |
| 160 | * Scrollbar Controls Component |
| 161 | * |
| 162 | * スクロールバーの表示/非表示・カラー設定の� |
| 163 | �通UIコンポーネント |
| 164 | * Group / Table / Tab ブロックで� |
| 165 | �通使用 |
| 166 | * |
| 167 | * @param {Object} props |
| 168 | * @param {boolean} props.scrollbarVisible - スクロールバーの表示状� |
| 169 | � |
| 170 | * @param {string} props.scrollbarColor - スクロールバーの色 |
| 171 | * @param {string} props.scrollbarTrackColor - スクロールバートラックの色 |
| 172 | * @param {(checked: boolean) => void} props.onScrollbarVisibleChange - 表示切替ハンドラ |
| 173 | * @param {(color: string) => void} props.onScrollbarColorChange - カラー変更ハンドラ |
| 174 | * @param {(color: string) => void} props.onScrollbarTrackColorChange - トラックカラー変更ハンドラ |
| 175 | * @return {JSX.Element} Scrollbar Controls |
| 176 | */ |
| 177 | export const ScrollbarControls = ({ |
| 178 | scrollbarVisible, |
| 179 | scrollbarColor, |
| 180 | scrollbarTrackColor, |
| 181 | onScrollbarVisibleChange, |
| 182 | onScrollbarColorChange, |
| 183 | onScrollbarTrackColorChange, |
| 184 | }) => { |
| 185 | return ( |
| 186 | <> |
| 187 | <ToggleControl |
| 188 | label={__('Show Scrollbar', 'vk-blocks')} |
| 189 | checked={scrollbarVisible !== false} |
| 190 | onChange={onScrollbarVisibleChange} |
| 191 | help={ |
| 192 | scrollbarVisible === false |
| 193 | ? __( |
| 194 | 'The scrollbar is hidden on the front end. Users can still scroll by touch or mouse drag.', |
| 195 | 'vk-blocks' |
| 196 | ) |
| 197 | : __('The scrollbar is visible.', 'vk-blocks') |
| 198 | } |
| 199 | /> |
| 200 | {scrollbarVisible !== false && ( |
| 201 | <> |
| 202 | <p style={{ marginBottom: '8px' }}> |
| 203 | {__('Scrollbar Color', 'vk-blocks')} |
| 204 | </p> |
| 205 | <ColorPalette |
| 206 | value={scrollbarColor || undefined} |
| 207 | onChange={onScrollbarColorChange} |
| 208 | clearable={true} |
| 209 | /> |
| 210 | <p style={{ marginBottom: '8px' }}> |
| 211 | {__('Scrollbar Track Color', 'vk-blocks')} |
| 212 | </p> |
| 213 | <ColorPalette |
| 214 | value={scrollbarTrackColor || undefined} |
| 215 | onChange={onScrollbarTrackColorChange} |
| 216 | clearable={true} |
| 217 | /> |
| 218 | </> |
| 219 | )} |
| 220 | </> |
| 221 | ); |
| 222 | }; |
| 223 | |
| 224 | /** |
| 225 | * Horizontal Scroll Controls Component |
| 226 | * |
| 227 | * � |
| 228 | �通のHorizontal Scroll設定UIコンポーネント |
| 229 | * tableとgroupブロックで� |
| 230 | �通使用 |
| 231 | * |
| 232 | * @typedef {Object} HorizontalScrollControlsProps |
| 233 | * @property {boolean} scrollable - Scrollable状� |
| 234 | � |
| 235 | * @property {string} scrollBreakpoint - ブレークポイントの値 (例: 'table-scrollable-mobile', 'group-scrollable-pc') |
| 236 | * @property {(checked: boolean) => void} onScrollableChange - Scrollable変更ハンドラ |
| 237 | * @property {(value: string) => void} onBreakpointChange - ブレークポイント変更ハンドラ |
| 238 | * @property {string} [prefix='scrollable-'] - ブレークポイント値のプレフィックス |
| 239 | * @property {Object} [scrollHintProps] - ScrollHintコンポーネントに渡すprops |
| 240 | * @property {boolean} [scrollHintProps.showScrollMessage] - スクロールメッセージを表示するか |
| 241 | * @property {string} [scrollHintProps.scrollMessageText] - スクロールメッセージのテキスト |
| 242 | * @property {string} [scrollHintProps.scrollIconLeft] - 左側のアイコンクラス名 |
| 243 | * @property {string} [scrollHintProps.scrollIconRight] - 右側のアイコンクラス名 |
| 244 | * @property {boolean} [scrollHintProps.iconOutputLeft] - 左側のアイコンを表示するか |
| 245 | * @property {boolean} [scrollHintProps.iconOutputRight] - 右側のアイコンを表示するか |
| 246 | * @property {React.ReactNode} [children] - 追加のコントロール（groupブロックのtextNoWrapやtableModeなど） |
| 247 | * @property {React.ReactNode} [description] - 説明文（groupブロック用） |
| 248 | * |
| 249 | * @param {HorizontalScrollControlsProps} props - Component props |
| 250 | * @return {JSX.Element} Horizontal Scroll Controls |
| 251 | */ |
| 252 | const HorizontalScrollControls = ({ |
| 253 | scrollable, |
| 254 | scrollBreakpoint, |
| 255 | onScrollableChange, |
| 256 | onBreakpointChange, |
| 257 | prefix = 'scrollable-', |
| 258 | scrollHintProps, |
| 259 | scrollbarVisible, |
| 260 | scrollbarColor, |
| 261 | scrollbarTrackColor, |
| 262 | onScrollbarVisibleChange, |
| 263 | onScrollbarColorChange, |
| 264 | onScrollbarTrackColorChange, |
| 265 | children, |
| 266 | description, |
| 267 | }) => { |
| 268 | const breakpointOptions = [ |
| 269 | { |
| 270 | label: __('Mobile size', 'vk-blocks'), |
| 271 | value: `${prefix}mobile`, |
| 272 | }, |
| 273 | { |
| 274 | label: __('Tablet size', 'vk-blocks'), |
| 275 | value: `${prefix}tablet`, |
| 276 | }, |
| 277 | { |
| 278 | label: __('PC size', 'vk-blocks'), |
| 279 | value: `${prefix}pc`, |
| 280 | }, |
| 281 | ]; |
| 282 | |
| 283 | return ( |
| 284 | <> |
| 285 | {description && description} |
| 286 | <ToggleControl |
| 287 | label={__('Scrollable', 'vk-blocks')} |
| 288 | checked={scrollable} |
| 289 | onChange={onScrollableChange} |
| 290 | /> |
| 291 | {scrollable && ( |
| 292 | <> |
| 293 | <SelectControl |
| 294 | label={__('Horizontal Scroll Breakpoint', 'vk-blocks')} |
| 295 | value={scrollBreakpoint} |
| 296 | options={breakpointOptions} |
| 297 | onChange={onBreakpointChange} |
| 298 | /> |
| 299 | <ScrollbarControls |
| 300 | scrollbarVisible={scrollbarVisible} |
| 301 | scrollbarColor={scrollbarColor} |
| 302 | scrollbarTrackColor={scrollbarTrackColor} |
| 303 | onScrollbarVisibleChange={onScrollbarVisibleChange} |
| 304 | onScrollbarColorChange={onScrollbarColorChange} |
| 305 | onScrollbarTrackColorChange={ |
| 306 | onScrollbarTrackColorChange |
| 307 | } |
| 308 | /> |
| 309 | {children} |
| 310 | {scrollHintProps && <ScrollHint {...scrollHintProps} />} |
| 311 | </> |
| 312 | )} |
| 313 | </> |
| 314 | ); |
| 315 | }; |
| 316 | |
| 317 | export default HorizontalScrollControls; |
| 318 |