store
3 months ago
GenerateBgImage.js
3 months ago
block-duplicate-helper.js
3 months ago
capitalize.js
3 months ago
color-code-to-class.js
3 months ago
color-slug-to-color-code.js
3 months ago
common.scss
2 weeks ago
convert-to-grid.js
3 months ago
default-color-palette.js
3 months ago
delete-from-array.js
3 months ago
depModules.js
3 months ago
disable-links.js
2 months ago
empty-string-to-undefined.js
3 months ago
example-data.js
3 months ago
fixBrokenUnicode.js
3 months ago
font-awesome-new.js
2 months ago
font-awesome-version.js
3 months ago
font-awesome.js
3 months ago
formatNumCol.js
3 months ago
gradient-slug-to-gradient-code.js
3 months ago
heading-level-utils.js
3 months ago
hex-to-rgba.js
3 months ago
horizontal-scroll-controls.js
3 months ago
icon-label.js
2 months ago
is-excludes-blocks.js
3 months ago
is-gradient-style.js
3 months ago
is-hex-color.js
3 months ago
is-not-json.js
3 months ago
is-parent-reusable-block.js
1 month ago
merge-colors.js
3 months ago
multi-array-flaten.js
3 months ago
removeProperty.js
3 months ago
replaceClientId.js
3 months ago
sanitizeSlug.js
3 months ago
settings-page-url.js
2 months ago
strip-html.js
3 months ago
taxonomy-utils.js
3 months ago
to-number.js
3 months ago
to-preset-spacing-var.js
3 months ago
unit-options.js
3 months ago
wrap-unwrap.js
3 months ago
font-awesome-new.js
519 lines
| 1 | /* global vkFontAwesome */ |
| 2 | /** |
| 3 | * WordPress dependencies |
| 4 | */ |
| 5 | import { __ } from '@wordpress/i18n'; |
| 6 | import { |
| 7 | BaseControl, |
| 8 | ToggleControl, |
| 9 | TextControl, |
| 10 | SelectControl, |
| 11 | Button, |
| 12 | ExternalLink, |
| 13 | } from '@wordpress/components'; |
| 14 | import { useState, useEffect } from '@wordpress/element'; |
| 15 | import apiFetch from '@wordpress/api-fetch'; |
| 16 | import { useSelect, useDispatch } from '@wordpress/data'; |
| 17 | import { chevronLeft, chevronRight, closeSmall } from '@wordpress/icons'; |
| 18 | import { store as coreStore } from '@wordpress/core-data'; |
| 19 | |
| 20 | /** |
| 21 | * External dependencies |
| 22 | */ |
| 23 | import parse from 'html-react-parser'; |
| 24 | |
| 25 | /** |
| 26 | * Internal dependencies |
| 27 | */ |
| 28 | import AdvancedPopOverControl from '@vkblocks/components/advanced-popover-control'; |
| 29 | import { STORE_NAME } from '@vkblocks/utils/store/constants'; |
| 30 | import { updateOptions } from '@vkblocks/utils/store'; |
| 31 | import { |
| 32 | getFontAwesomeVersionValue, |
| 33 | normalizeFontAwesomeConfig, |
| 34 | updateFontAwesomeCompatibility, |
| 35 | updateFontAwesomeVersion, |
| 36 | isFontAwesomeConfigChanged, |
| 37 | serializeFontAwesomeConfig, |
| 38 | } from '@vkblocks/utils/font-awesome-version'; |
| 39 | import { iconLabel } from '@vkblocks/utils/icon-label'; |
| 40 | |
| 41 | const FontAwesomeIconList = [ |
| 42 | '<i class="fa-solid fa-arrow-right"></i>', |
| 43 | '<i class="fa-solid fa-arrow-down"></i>', |
| 44 | '<i class="fa-solid fa-arrow-left"></i>', |
| 45 | '<i class="fa-solid fa-circle-right"></i>', |
| 46 | '<i class="fa-solid fa-circle-down"></i>', |
| 47 | '<i class="fa-solid fa-circle-left"></i>', |
| 48 | '<i class="fa-regular fa-circle-right"></i>', |
| 49 | '<i class="fa-regular fa-circle-down"></i>', |
| 50 | '<i class="fa-regular fa-circle-left"></i>', |
| 51 | '<i class="fa-solid fa-square-up-right"></i>', |
| 52 | '<i class="fa-solid fa-up-right-from-square"></i>', |
| 53 | '<i class="fa-solid fa-download"></i>', |
| 54 | '<i class="fa-solid fa-triangle-exclamation"></i>', |
| 55 | '<i class="fa-solid fa-circle-exclamation"></i>', |
| 56 | '<i class="fa-solid fa-exclamation"></i>', |
| 57 | '<i class="fa-solid fa-question"></i>', |
| 58 | '<i class="fa-solid fa-circle-question"></i>', |
| 59 | '<i class="fa-solid fa-circle-info"></i>', |
| 60 | '<i class="fa-solid fa-info"></i>', |
| 61 | '<i class="fa-solid fa-check"></i>', |
| 62 | '<i class="fa-solid fa-square-check"></i>', |
| 63 | '<i class="fa-solid fa-circle-check"></i>', |
| 64 | '<i class="fa-solid fa-phone"></i>', |
| 65 | '<i class="fa-solid fa-square-phone"></i>', |
| 66 | '<i class="fa-solid fa-mobile-screen-button"></i>', |
| 67 | '<i class="fa-regular fa-envelope"></i>', |
| 68 | '<i class="fa-solid fa-user"></i>', |
| 69 | '<i class="fa-solid fa-users"></i>', |
| 70 | '<i class="fa-regular fa-file-lines"></i>', |
| 71 | '<i class="fa-solid fa-file-lines"></i>', |
| 72 | '<i class="fa-solid fa-file"></i>', |
| 73 | '<i class="fa-solid fa-file-pdf"></i>', |
| 74 | '<i class="fa-solid fa-building"></i>', |
| 75 | '<i class="fa-brands fa-square-x-twitter"></i>', |
| 76 | '<i class="fa-brands fa-square-facebook"></i>', |
| 77 | '<i class="fa-brands fa-line"></i>', |
| 78 | ]; |
| 79 | |
| 80 | export const FontAwesome = (props) => { |
| 81 | const { |
| 82 | attributeName, |
| 83 | attributes, |
| 84 | setAttributes, |
| 85 | modeClass = false, |
| 86 | } = props; |
| 87 | |
| 88 | const hasVkFontAwesome = |
| 89 | typeof vkFontAwesome !== 'undefined' && vkFontAwesome; |
| 90 | |
| 91 | const iconsUrl = hasVkFontAwesome ? vkFontAwesome.iconsUrl : ''; |
| 92 | |
| 93 | const versions = hasVkFontAwesome ? vkFontAwesome.versions : []; |
| 94 | |
| 95 | const currentVersion = hasVkFontAwesome |
| 96 | ? vkFontAwesome.currentVersion |
| 97 | : undefined; |
| 98 | const REST_API_ROUTE = '/vk-blocks/v1/options/vk_font_awesome_version/'; |
| 99 | const [isWaiting, setIsWaiting] = useState(false); |
| 100 | const [version, setVersion] = useState(); |
| 101 | const [isEditMode, setIsEditMode] = useState(false); |
| 102 | |
| 103 | // クラス名を抽出する関数 |
| 104 | const extractIconClass = (htmlString) => { |
| 105 | const match = htmlString.match(/class="([^"]+)"/); |
| 106 | return match ? match[1] : htmlString; |
| 107 | }; |
| 108 | |
| 109 | const handleIconSelect = (iconPreset) => { |
| 110 | const value = modeClass ? extractIconClass(iconPreset) : iconPreset; |
| 111 | setAttributes({ |
| 112 | [attributeName]: value, |
| 113 | }); |
| 114 | }; |
| 115 | |
| 116 | const handleTextControlChange = (value) => { |
| 117 | const extractedClass = extractIconClass(value); |
| 118 | setAttributes({ [attributeName]: extractedClass }); |
| 119 | }; |
| 120 | |
| 121 | const { canUserEdit, optionObj } = useSelect((select) => { |
| 122 | const { canUser } = select(coreStore); |
| 123 | const canEdit = canUser('update', 'settings'); |
| 124 | |
| 125 | const { getOptions } = select(STORE_NAME); |
| 126 | return { |
| 127 | canUserEdit: canEdit, |
| 128 | optionObj: getOptions(), |
| 129 | }; |
| 130 | }, []); |
| 131 | |
| 132 | const { setOptions } = useDispatch(STORE_NAME); |
| 133 | |
| 134 | const updateSettings = (value) => { |
| 135 | optionObj?.vkBlocksOption.icon_custom_lists?.unshift(value); |
| 136 | const newObj = { |
| 137 | ...optionObj, |
| 138 | vkBlocksOption: { |
| 139 | ...optionObj.vkBlocksOption, |
| 140 | }, |
| 141 | }; |
| 142 | setOptions(newObj); |
| 143 | updateOptions(newObj); |
| 144 | }; |
| 145 | |
| 146 | const deleteSettings = (value) => { |
| 147 | const index = optionObj.vkBlocksOption.icon_custom_lists.indexOf(value); |
| 148 | optionObj.vkBlocksOption.icon_custom_lists.splice(index, 1); |
| 149 | const newObj = { |
| 150 | ...optionObj, |
| 151 | vkBlocksOption: { |
| 152 | ...optionObj.vkBlocksOption, |
| 153 | }, |
| 154 | }; |
| 155 | setOptions(newObj); |
| 156 | updateOptions(newObj); |
| 157 | if (newObj.vkBlocksOption.icon_custom_lists.length === 0) { |
| 158 | setIsEditMode(false); |
| 159 | } |
| 160 | }; |
| 161 | |
| 162 | // Set options to state. |
| 163 | useEffect(() => { |
| 164 | setVersion(currentVersion); |
| 165 | }, []); |
| 166 | |
| 167 | // Update options. |
| 168 | const handleUpdateOptions = () => { |
| 169 | setIsWaiting(true); |
| 170 | |
| 171 | apiFetch({ |
| 172 | path: REST_API_ROUTE, |
| 173 | method: 'POST', |
| 174 | data: serializeFontAwesomeConfig(version), |
| 175 | }) |
| 176 | .then(() => { |
| 177 | setIsWaiting(false); |
| 178 | window.location.reload(); |
| 179 | }) |
| 180 | .catch(() => { |
| 181 | setIsWaiting(false); |
| 182 | }); |
| 183 | }; |
| 184 | |
| 185 | const canAddIconPreset = |
| 186 | attributes[attributeName] && |
| 187 | !optionObj?.vkBlocksOption?.icon_custom_lists.some( |
| 188 | (list) => list === attributes[attributeName] |
| 189 | ); |
| 190 | |
| 191 | const existsIconPreset = |
| 192 | optionObj?.vkBlocksOption?.icon_custom_lists.length !== 0; |
| 193 | |
| 194 | const showIconPresetArrow = |
| 195 | isEditMode && optionObj?.vkBlocksOption?.icon_custom_lists.length !== 1; |
| 196 | |
| 197 | const render = ( |
| 198 | <> |
| 199 | <BaseControl |
| 200 | className={'components-base-control__label'} |
| 201 | id={`vk_fa_icon_list`} |
| 202 | label={iconLabel(__('Icon', 'vk-blocks'))} |
| 203 | > |
| 204 | <div className="vk_icon_list_wrap"> |
| 205 | {existsIconPreset && ( |
| 206 | <div className="vk_icon_list_my_list"> |
| 207 | <p className="vk_icon_list_title"> |
| 208 | {__('Custom list', 'vk-blocks')} |
| 209 | </p> |
| 210 | <div className="vk_icon_list"> |
| 211 | {optionObj?.vkBlocksOption?.icon_custom_lists && |
| 212 | Object.keys( |
| 213 | optionObj?.vkBlocksOption |
| 214 | ?.icon_custom_lists |
| 215 | ).map((key, index) => { |
| 216 | const iconPreset = |
| 217 | optionObj.vkBlocksOption |
| 218 | .icon_custom_lists[key]; |
| 219 | return ( |
| 220 | <div |
| 221 | className="vk_icon_area" |
| 222 | key={index} |
| 223 | > |
| 224 | <div className="vk_icon_button_icon_area"> |
| 225 | <Button |
| 226 | className="vk_icon_button" |
| 227 | variant="secondary" |
| 228 | onClick={() => |
| 229 | handleIconSelect( |
| 230 | iconPreset |
| 231 | ) |
| 232 | } |
| 233 | > |
| 234 | {iconPreset && |
| 235 | parse( |
| 236 | `${iconPreset}` |
| 237 | )} |
| 238 | </Button> |
| 239 | {isEditMode && ( |
| 240 | <Button |
| 241 | className="vk_icon_button_closeSmall" |
| 242 | icon={closeSmall} |
| 243 | onClick={() => |
| 244 | deleteSettings( |
| 245 | iconPreset |
| 246 | ) |
| 247 | } |
| 248 | isDestructive |
| 249 | /> |
| 250 | )} |
| 251 | </div> |
| 252 | {showIconPresetArrow && ( |
| 253 | <div className="vk_icon_button_button_area"> |
| 254 | <Button |
| 255 | className="vk_icon_button_chevronLeft" |
| 256 | icon={chevronLeft} |
| 257 | disabled={ |
| 258 | index === 0 |
| 259 | } |
| 260 | onClick={() => { |
| 261 | const newItems = |
| 262 | [ |
| 263 | ...optionObj |
| 264 | .vkBlocksOption |
| 265 | .icon_custom_lists, |
| 266 | ]; |
| 267 | newItems[ |
| 268 | index - 1 |
| 269 | ] = |
| 270 | optionObj.vkBlocksOption.icon_custom_lists[ |
| 271 | index |
| 272 | ]; |
| 273 | newItems[ |
| 274 | index |
| 275 | ] = |
| 276 | optionObj.vkBlocksOption.icon_custom_lists[ |
| 277 | index - |
| 278 | 1 |
| 279 | ]; |
| 280 | const newObj = { |
| 281 | ...optionObj, |
| 282 | vkBlocksOption: |
| 283 | { |
| 284 | ...optionObj.vkBlocksOption, |
| 285 | icon_custom_lists: |
| 286 | [ |
| 287 | ...newItems, |
| 288 | ], |
| 289 | }, |
| 290 | }; |
| 291 | setOptions( |
| 292 | newObj |
| 293 | ); |
| 294 | updateOptions( |
| 295 | newObj |
| 296 | ); |
| 297 | }} |
| 298 | /> |
| 299 | <Button |
| 300 | className="vk_icon_button_chevronRight" |
| 301 | icon={chevronRight} |
| 302 | disabled={ |
| 303 | index === |
| 304 | optionObj |
| 305 | .vkBlocksOption |
| 306 | .icon_custom_lists |
| 307 | .length - |
| 308 | 1 |
| 309 | } |
| 310 | onClick={() => { |
| 311 | const newItems = |
| 312 | [ |
| 313 | ...optionObj |
| 314 | .vkBlocksOption |
| 315 | .icon_custom_lists, |
| 316 | ]; |
| 317 | newItems[ |
| 318 | index + 1 |
| 319 | ] = |
| 320 | optionObj.vkBlocksOption.icon_custom_lists[ |
| 321 | index |
| 322 | ]; |
| 323 | newItems[ |
| 324 | index |
| 325 | ] = |
| 326 | optionObj.vkBlocksOption.icon_custom_lists[ |
| 327 | index + |
| 328 | 1 |
| 329 | ]; |
| 330 | const newObj = { |
| 331 | ...optionObj, |
| 332 | vkBlocksOption: |
| 333 | { |
| 334 | ...optionObj.vkBlocksOption, |
| 335 | icon_custom_lists: |
| 336 | [ |
| 337 | ...newItems, |
| 338 | ], |
| 339 | }, |
| 340 | }; |
| 341 | setOptions( |
| 342 | newObj |
| 343 | ); |
| 344 | updateOptions( |
| 345 | newObj |
| 346 | ); |
| 347 | }} |
| 348 | /> |
| 349 | </div> |
| 350 | )} |
| 351 | </div> |
| 352 | ); |
| 353 | })} |
| 354 | </div> |
| 355 | </div> |
| 356 | )} |
| 357 | <div className="vk_icon_list_preset"> |
| 358 | {existsIconPreset && ( |
| 359 | <p className="vk_icon_list_title"> |
| 360 | {__('Preset', 'vk-blocks')} |
| 361 | </p> |
| 362 | )} |
| 363 | <div className="vk_icon_list"> |
| 364 | {Object.keys(FontAwesomeIconList).map( |
| 365 | (key, index) => { |
| 366 | const iconPreset = FontAwesomeIconList[key]; |
| 367 | return ( |
| 368 | <div |
| 369 | className="vk_icon_area" |
| 370 | key={index} |
| 371 | > |
| 372 | <div className="vk_icon_button_icon_area"> |
| 373 | <Button |
| 374 | className="vk_icon_button" |
| 375 | variant="secondary" |
| 376 | onClick={() => |
| 377 | handleIconSelect( |
| 378 | iconPreset |
| 379 | ) |
| 380 | } |
| 381 | > |
| 382 | {iconPreset && |
| 383 | parse(`${iconPreset}`)} |
| 384 | </Button> |
| 385 | </div> |
| 386 | </div> |
| 387 | ); |
| 388 | } |
| 389 | )} |
| 390 | </div> |
| 391 | </div> |
| 392 | </div> |
| 393 | </BaseControl> |
| 394 | <hr /> |
| 395 | <ExternalLink |
| 396 | href={iconsUrl} |
| 397 | className="components-button is-primary mt-1" |
| 398 | > |
| 399 | {__('Font Awesome icon list', 'vk-blocks')} |
| 400 | </ExternalLink> |
| 401 | <p className="mt-1"> |
| 402 | {__( |
| 403 | "If you want to use an icon other than the ones listed above, you can use any of the icons from Font Awesome's icon list Please select a tag and enter it.", |
| 404 | 'vk-blocks' |
| 405 | )} |
| 406 | <br /> |
| 407 | {__('Ex)', 'vk-blocks')} |
| 408 | {'<i class="fa-solid fa-circle-right"></i>'} |
| 409 | </p> |
| 410 | {canUserEdit && ( |
| 411 | <> |
| 412 | {(canAddIconPreset || existsIconPreset) && <hr />} |
| 413 | <Button |
| 414 | className="vk_icon_add_my_list_button" |
| 415 | variant="primary" |
| 416 | disabled={!canAddIconPreset} |
| 417 | onClick={() => |
| 418 | updateSettings(attributes[attributeName]) |
| 419 | } |
| 420 | > |
| 421 | {__('Add selected icon to custom list', 'vk-blocks')} |
| 422 | </Button> |
| 423 | {existsIconPreset && ( |
| 424 | <ToggleControl |
| 425 | className="mt-1" |
| 426 | label={__('Delete/Sort mode', 'vk-blocks')} |
| 427 | checked={isEditMode} |
| 428 | onChange={() => setIsEditMode(!isEditMode)} |
| 429 | /> |
| 430 | )} |
| 431 | <hr /> |
| 432 | <SelectControl |
| 433 | label="Font Awesome Version" |
| 434 | value={getFontAwesomeVersionValue(version)} |
| 435 | options={versions} |
| 436 | onChange={(value) => |
| 437 | setVersion((prev) => |
| 438 | updateFontAwesomeVersion(prev, value) |
| 439 | ) |
| 440 | } |
| 441 | className="mt-1" |
| 442 | /> |
| 443 | <ToggleControl |
| 444 | className="mt-1" |
| 445 | label={__('Compatibility mode 4', 'vk-blocks')} |
| 446 | checked={ |
| 447 | normalizeFontAwesomeConfig(version).compatibility.v4 |
| 448 | } |
| 449 | onChange={(checked) => |
| 450 | setVersion((prev) => |
| 451 | updateFontAwesomeCompatibility( |
| 452 | prev, |
| 453 | 'v4', |
| 454 | checked |
| 455 | ) |
| 456 | ) |
| 457 | } |
| 458 | /> |
| 459 | <ToggleControl |
| 460 | className="mt-1" |
| 461 | label={__('Compatibility mode 5', 'vk-blocks')} |
| 462 | checked={ |
| 463 | normalizeFontAwesomeConfig(version).compatibility.v5 |
| 464 | } |
| 465 | onChange={(checked) => |
| 466 | setVersion((prev) => |
| 467 | updateFontAwesomeCompatibility( |
| 468 | prev, |
| 469 | 'v5', |
| 470 | checked |
| 471 | ) |
| 472 | ) |
| 473 | } |
| 474 | /> |
| 475 | {isFontAwesomeConfigChanged(version, currentVersion) && ( |
| 476 | <> |
| 477 | <p className="mt-1"> |
| 478 | {__( |
| 479 | 'When you click save button, the window will be reloaded and this setting will be applied.', |
| 480 | 'vk-blocks' |
| 481 | )} |
| 482 | </p> |
| 483 | <Button |
| 484 | isPrimary |
| 485 | disabled={isWaiting} |
| 486 | onClick={handleUpdateOptions} |
| 487 | > |
| 488 | {__('Save', 'vk-blocks')} |
| 489 | </Button> |
| 490 | </> |
| 491 | )} |
| 492 | </> |
| 493 | )} |
| 494 | </> |
| 495 | ); |
| 496 | |
| 497 | return ( |
| 498 | <> |
| 499 | <TextControl |
| 500 | value={attributes[attributeName]} |
| 501 | onChange={(value) => { |
| 502 | if (modeClass) { |
| 503 | handleTextControlChange(value); |
| 504 | } else { |
| 505 | setAttributes({ [attributeName]: value }); |
| 506 | } |
| 507 | }} |
| 508 | placeholder={'<i class="fa-solid fa-circle-right"></i>'} |
| 509 | className="mb-0" |
| 510 | /> |
| 511 | <AdvancedPopOverControl |
| 512 | label={__('Select Icon', 'vk-blocks')} |
| 513 | renderComp={render} |
| 514 | setAttributes={setAttributes} |
| 515 | /> |
| 516 | </> |
| 517 | ); |
| 518 | }; |
| 519 |