deprecated
4 months ago
block.json
4 months ago
component.js
4 months ago
edit.js
4 months ago
icon.svg
4 months ago
index.js
4 months ago
index.php
4 months ago
save.js
4 months ago
style.scss
4 months ago
transforms.js
4 months ago
component.js
177 lines
| 1 | import { Component } from '@wordpress/element'; |
| 2 | import parse from 'html-react-parser'; |
| 3 | import { isHexColor } from '@vkblocks/utils/is-hex-color'; |
| 4 | import { sanitizeSlug } from '@vkblocks/utils/sanitizeSlug'; |
| 5 | import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode'; |
| 6 | |
| 7 | export class VKBButton extends Component { |
| 8 | render() { |
| 9 | const buttonTextColorCustom = this.props.lbTextColorCustom; |
| 10 | const buttonColorCustom = this.props.lbColorCustom; |
| 11 | const buttonColor = this.props.lbColor; |
| 12 | const buttonType = this.props.lbType; |
| 13 | const buttonAlign = this.props.lbAlign; |
| 14 | const buttonSize = this.props.lbSize; |
| 15 | const buttonUrl = this.props.lbUrl; |
| 16 | const buttonTarget = this.props.lbTarget; |
| 17 | const relAttribute = this.props.lbRelAttribute; |
| 18 | const linkToPost = this.props.lbLinkToPost; |
| 19 | let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore; |
| 20 | let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter; |
| 21 | if (fontAwesomeIconBefore) { |
| 22 | fontAwesomeIconBefore = fixBrokenUnicode(fontAwesomeIconBefore); |
| 23 | } |
| 24 | if (fontAwesomeIconAfter) { |
| 25 | fontAwesomeIconAfter = fixBrokenUnicode(fontAwesomeIconAfter); |
| 26 | } |
| 27 | const iconSizeBefore = this.props.lbIconSizeBefore; |
| 28 | const iconSizeAfter = this.props.lbIconSizeAfter; |
| 29 | const richText = this.props.lbRichtext; |
| 30 | const subCaption = this.props.lbsubCaption; |
| 31 | const inlineStyle = this.props.inlineStyle; |
| 32 | const borderRadius = this.props.borderRadius; |
| 33 | let aClass = ''; |
| 34 | let iconBefore = ''; |
| 35 | let iconAfter = ''; |
| 36 | |
| 37 | aClass = `vk_button_link`; |
| 38 | |
| 39 | // 塗り |
| 40 | if (buttonType === '0' || buttonType === null) { |
| 41 | // 規定カラーの場合 |
| 42 | if (buttonColor !== 'custom' && buttonColorCustom === undefined) { |
| 43 | aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`; |
| 44 | } else { |
| 45 | aClass += ` btn has-background`; |
| 46 | // カスタムパレットカラーの場合 |
| 47 | if (!isHexColor(buttonColorCustom)) { |
| 48 | aClass += ` has-${sanitizeSlug(buttonColorCustom)}-background-color`; |
| 49 | } |
| 50 | } |
| 51 | |
| 52 | // 文字色 |
| 53 | if ( |
| 54 | buttonColor === 'custom' && |
| 55 | buttonTextColorCustom !== undefined |
| 56 | ) { |
| 57 | aClass += ` btn has-text-color`; |
| 58 | // カスタムパレットカラーの場合 |
| 59 | if (!isHexColor(buttonTextColorCustom)) { |
| 60 | aClass += ` has-${sanitizeSlug(buttonTextColorCustom)}-color`; |
| 61 | } |
| 62 | } |
| 63 | // 塗りなし |
| 64 | } else if (buttonType === '1') { |
| 65 | // 規定カラーの場合 |
| 66 | if (buttonColor !== 'custom' && buttonColorCustom === undefined) { |
| 67 | aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`; |
| 68 | } else { |
| 69 | aClass += ` btn has-text-color is-style-outline`; |
| 70 | // カスタムパレットカラーの場合 |
| 71 | if (!isHexColor(buttonColorCustom)) { |
| 72 | aClass += ` has-${sanitizeSlug(buttonColorCustom)}-color`; |
| 73 | } |
| 74 | } |
| 75 | // テキストのみ |
| 76 | } else if (buttonType === '2') { |
| 77 | // 規定カラーの場合 |
| 78 | if (buttonColor !== 'custom' && buttonColorCustom === undefined) { |
| 79 | aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`; |
| 80 | } else { |
| 81 | aClass += ` has-text-color vk_button_link-type-text`; |
| 82 | // カスタムパレットカラーの場合 |
| 83 | if (!isHexColor(buttonColorCustom)) { |
| 84 | aClass += ` has-${sanitizeSlug(buttonColorCustom)}-color`; |
| 85 | } |
| 86 | } |
| 87 | } |
| 88 | |
| 89 | // 文字色がカスタムカラーの場合 |
| 90 | /* |
| 91 | if ( |
| 92 | buttonTextColorCustom !== undefined && |
| 93 | isHexColor(buttonTextColorCustom) && |
| 94 | isSelected |
| 95 | ) { |
| 96 | aStyle = { |
| 97 | // 編集画面対策 |
| 98 | color: `${buttonTextColorCustom}`, |
| 99 | }; |
| 100 | } |
| 101 | */ |
| 102 | |
| 103 | aClass = `${aClass} btn-${buttonSize}`; |
| 104 | |
| 105 | if (buttonAlign === 'block') { |
| 106 | aClass = `${aClass} btn-block`; |
| 107 | } |
| 108 | |
| 109 | //過去バージョンをリカバリーした時にiconを正常に表示する |
| 110 | if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) { |
| 111 | fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`; |
| 112 | } |
| 113 | if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) { |
| 114 | fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`; |
| 115 | } |
| 116 | |
| 117 | if (fontAwesomeIconBefore) { |
| 118 | let fontAwesomeIconBeforeClassName = |
| 119 | fontAwesomeIconBefore.match(/class="(.*?)"/)[1]; |
| 120 | fontAwesomeIconBeforeClassName += ` vk_button_link_before`; |
| 121 | const styleBefore = iconSizeBefore |
| 122 | ? ` style='font-size: ${iconSizeBefore}'` |
| 123 | : ''; |
| 124 | iconBefore = `<i class="${fontAwesomeIconBeforeClassName}"${styleBefore}></i>`; |
| 125 | } |
| 126 | if (fontAwesomeIconAfter) { |
| 127 | let fontAwesomeIconAfterClassName = |
| 128 | fontAwesomeIconAfter.match(/class="(.*?)"/)[1]; |
| 129 | fontAwesomeIconAfterClassName += ` vk_button_link_after`; |
| 130 | const styleAfter = iconSizeAfter |
| 131 | ? ` style='font-size: ${iconSizeAfter}'` |
| 132 | : ''; |
| 133 | iconAfter = `<i class="${fontAwesomeIconAfterClassName}"${styleAfter}></i>`; |
| 134 | } |
| 135 | |
| 136 | // inlineStyleからborderRadiusを含む新しいスタイルオブジェクトを構築 |
| 137 | const btnInlineStyle = { ...inlineStyle }; |
| 138 | if (borderRadius) { |
| 139 | btnInlineStyle.borderRadius = borderRadius; |
| 140 | } |
| 141 | |
| 142 | // rel属性の設定 |
| 143 | let relValue = 'noopener'; |
| 144 | if (relAttribute) { |
| 145 | relValue = relAttribute.includes('noopener') |
| 146 | ? relAttribute |
| 147 | : `${relAttribute} noopener`; |
| 148 | } |
| 149 | |
| 150 | return ( |
| 151 | /* eslint react/jsx-no-target-blank: 0 */ |
| 152 | /* eslint-disable-next-line jsx-a11y/anchor-is-valid -- linkToPost: href replaced server-side with permalink */ |
| 153 | <a |
| 154 | href={linkToPost ? '#' : buttonUrl} |
| 155 | style={btnInlineStyle} |
| 156 | className={aClass} |
| 157 | role={'button'} |
| 158 | aria-pressed={true} |
| 159 | target={buttonTarget ? '_blank' : null} |
| 160 | rel={relValue} |
| 161 | {...(linkToPost ? { 'data-vk-link-to-post': '1' } : {})} |
| 162 | > |
| 163 | <div className={'vk_button_link_caption'}> |
| 164 | {parse(iconBefore)} |
| 165 | {richText} |
| 166 | {parse(iconAfter)} |
| 167 | </div> |
| 168 | {/*サブキャプションが� |
| 169 | �力された時のみ表示*/} |
| 170 | {subCaption && ( |
| 171 | <p className={'vk_button_link_subCaption'}>{subCaption}</p> |
| 172 | )} |
| 173 | </a> |
| 174 | ); |
| 175 | } |
| 176 | } |
| 177 |