deprecated
2 weeks ago
block.json
2 weeks ago
component.js
2 weeks ago
edit.js
2 weeks ago
icon.svg
3 months ago
index.js
2 months ago
index.php
3 months ago
save.js
2 weeks ago
style.scss
2 months ago
transforms.js
3 months ago
component.js
221 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 | const linkToCustomField = this.props.lbLinkToCustomField; |
| 20 | // 投稿リンク or カスタムフィールドURL のいずれかなら、href はサーバー側で差し替える動的リンク。 |
| 21 | const isDynamicLink = linkToPost || linkToCustomField; |
| 22 | let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore; |
| 23 | let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter; |
| 24 | if (fontAwesomeIconBefore) { |
| 25 | fontAwesomeIconBefore = fixBrokenUnicode(fontAwesomeIconBefore); |
| 26 | } |
| 27 | if (fontAwesomeIconAfter) { |
| 28 | fontAwesomeIconAfter = fixBrokenUnicode(fontAwesomeIconAfter); |
| 29 | } |
| 30 | const iconSizeBefore = this.props.lbIconSizeBefore; |
| 31 | const iconSizeAfter = this.props.lbIconSizeAfter; |
| 32 | const richText = this.props.lbRichtext; |
| 33 | const subCaption = this.props.lbsubCaption; |
| 34 | const lbsubCaptionRichText = this.props.lbsubCaptionRichText; |
| 35 | const inlineStyle = this.props.inlineStyle; |
| 36 | const borderRadius = this.props.borderRadius; |
| 37 | // 任意指定の文字サイズ（単位込み CSS 値。例: 18px / 1.2em / 1rem）。 |
| 38 | // 値があるときはサイズプリセット(btn-*)を付けず、インライン font-size で指定する。 |
| 39 | // Optional font size as a CSS value with unit (e.g. 18px / 1.2em / 1rem). |
| 40 | // When set, the size preset (btn-*) is omitted and the font size is applied inline instead. |
| 41 | const fontSizeValue = this.props.lbFontSizeValue; |
| 42 | let aClass = ''; |
| 43 | let iconBefore = ''; |
| 44 | let iconAfter = ''; |
| 45 | |
| 46 | aClass = `vk_button_link`; |
| 47 | |
| 48 | // 塗り |
| 49 | if (buttonType === '0' || buttonType === null) { |
| 50 | // 規定カラーの場合 |
| 51 | if (buttonColor !== 'custom' && buttonColorCustom === undefined) { |
| 52 | aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`; |
| 53 | } else { |
| 54 | aClass += ` btn has-background`; |
| 55 | // カスタムパレットカラーの場合 |
| 56 | if (!isHexColor(buttonColorCustom)) { |
| 57 | aClass += ` has-${sanitizeSlug(buttonColorCustom)}-background-color`; |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | // 文字色 |
| 62 | if ( |
| 63 | buttonColor === 'custom' && |
| 64 | buttonTextColorCustom !== undefined |
| 65 | ) { |
| 66 | aClass += ` btn has-text-color`; |
| 67 | // カスタムパレットカラーの場合 |
| 68 | if (!isHexColor(buttonTextColorCustom)) { |
| 69 | aClass += ` has-${sanitizeSlug(buttonTextColorCustom)}-color`; |
| 70 | } |
| 71 | } |
| 72 | // 塗りなし |
| 73 | } else if (buttonType === '1') { |
| 74 | // 規定カラーの場合 |
| 75 | if (buttonColor !== 'custom' && buttonColorCustom === undefined) { |
| 76 | aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`; |
| 77 | } else { |
| 78 | aClass += ` btn has-text-color is-style-outline`; |
| 79 | // カスタムパレットカラーの場合 |
| 80 | if (!isHexColor(buttonColorCustom)) { |
| 81 | aClass += ` has-${sanitizeSlug(buttonColorCustom)}-color`; |
| 82 | } |
| 83 | } |
| 84 | // テキストのみ |
| 85 | } else if (buttonType === '2') { |
| 86 | // 規定カラーの場合 |
| 87 | if (buttonColor !== 'custom' && buttonColorCustom === undefined) { |
| 88 | aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`; |
| 89 | } else { |
| 90 | aClass += ` has-text-color vk_button_link-type-text`; |
| 91 | // カスタムパレットカラーの場合 |
| 92 | if (!isHexColor(buttonColorCustom)) { |
| 93 | aClass += ` has-${sanitizeSlug(buttonColorCustom)}-color`; |
| 94 | } |
| 95 | } |
| 96 | } |
| 97 | |
| 98 | // 文字色がカスタムカラーの場合 |
| 99 | /* |
| 100 | if ( |
| 101 | buttonTextColorCustom !== undefined && |
| 102 | isHexColor(buttonTextColorCustom) && |
| 103 | isSelected |
| 104 | ) { |
| 105 | aStyle = { |
| 106 | // 編集画面対策 |
| 107 | color: `${buttonTextColorCustom}`, |
| 108 | }; |
| 109 | } |
| 110 | */ |
| 111 | |
| 112 | // 任意の文字サイズ(fontSizeValue)が指定されている時は、サイズプリセット(btn-*)を |
| 113 | // 付与しない（プリセットと数値指定を出力レベルで排他にする）。 |
| 114 | // 未指定（＝既存データを含む大多数）の時は従来どおり btn-{buttonSize} を付与するため、 |
| 115 | // 既存の保存済み HTML はバイト単位で不変になる。 |
| 116 | // When a font size value is set, do not add the size preset (btn-*) so the preset |
| 117 | // and the numeric size are mutually exclusive at output level. When it is unset |
| 118 | // (including existing data), btn-{buttonSize} is added as before, keeping the |
| 119 | // saved HTML byte-identical for legacy blocks. |
| 120 | if (!fontSizeValue) { |
| 121 | aClass = `${aClass} btn-${buttonSize}`; |
| 122 | } |
| 123 | |
| 124 | if (buttonAlign === 'block') { |
| 125 | aClass = `${aClass} btn-block`; |
| 126 | } |
| 127 | |
| 128 | //過去バージョンをリカバリーした時にiconを正常に表示する |
| 129 | if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) { |
| 130 | fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`; |
| 131 | } |
| 132 | if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) { |
| 133 | fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`; |
| 134 | } |
| 135 | |
| 136 | if (fontAwesomeIconBefore) { |
| 137 | let fontAwesomeIconBeforeClassName = |
| 138 | fontAwesomeIconBefore.match(/class="(.*?)"/)?.[1] ?? ''; |
| 139 | fontAwesomeIconBeforeClassName += ` vk_button_link_before`; |
| 140 | const styleBefore = iconSizeBefore |
| 141 | ? ` style='font-size: ${iconSizeBefore}'` |
| 142 | : ''; |
| 143 | iconBefore = `<i class="${fontAwesomeIconBeforeClassName}"${styleBefore}></i>`; |
| 144 | } |
| 145 | if (fontAwesomeIconAfter) { |
| 146 | let fontAwesomeIconAfterClassName = |
| 147 | fontAwesomeIconAfter.match(/class="(.*?)"/)?.[1] ?? ''; |
| 148 | fontAwesomeIconAfterClassName += ` vk_button_link_after`; |
| 149 | const styleAfter = iconSizeAfter |
| 150 | ? ` style='font-size: ${iconSizeAfter}'` |
| 151 | : ''; |
| 152 | iconAfter = `<i class="${fontAwesomeIconAfterClassName}"${styleAfter}></i>`; |
| 153 | } |
| 154 | |
| 155 | // inlineStyleからborderRadius・任意文字サイズを含む新しいスタイルオブジェクトを構築 |
| 156 | const btnInlineStyle = { ...inlineStyle }; |
| 157 | if (borderRadius) { |
| 158 | btnInlineStyle.borderRadius = borderRadius; |
| 159 | } |
| 160 | // 任意の文字サイズが指定されている時だけインライン font-size を出力する。 |
| 161 | // 未指定の時は何も足さないので既存の保存済み HTML は不変。 |
| 162 | // Output an inline font-size only when a font size value is set; nothing is added |
| 163 | // otherwise so the saved HTML stays unchanged for legacy blocks. |
| 164 | if (fontSizeValue) { |
| 165 | btnInlineStyle.fontSize = fontSizeValue; |
| 166 | } |
| 167 | |
| 168 | // rel属性の設定 |
| 169 | let relValue = 'noopener'; |
| 170 | if (relAttribute) { |
| 171 | relValue = relAttribute.includes('noopener') |
| 172 | ? relAttribute |
| 173 | : `${relAttribute} noopener`; |
| 174 | } |
| 175 | |
| 176 | return ( |
| 177 | /* eslint react/jsx-no-target-blank: 0 */ |
| 178 | /* eslint-disable-next-line jsx-a11y/anchor-is-valid -- linkToPost / linkToCustomField: href replaced server-side (permalink or custom field URL) */ |
| 179 | <a |
| 180 | href={isDynamicLink ? '#' : buttonUrl} |
| 181 | style={btnInlineStyle} |
| 182 | className={aClass} |
| 183 | role={'button'} |
| 184 | aria-pressed={true} |
| 185 | target={buttonTarget ? '_blank' : null} |
| 186 | rel={relValue} |
| 187 | {...(linkToPost ? { 'data-vk-link-to-post': '1' } : {})} |
| 188 | {...(linkToCustomField && !linkToPost |
| 189 | ? { 'data-vk-link-to-custom-field-url': '1' } |
| 190 | : {})} |
| 191 | > |
| 192 | <div className={'vk_button_link_caption'}> |
| 193 | {parse(iconBefore)} |
| 194 | {richText} |
| 195 | {parse(iconAfter)} |
| 196 | </div> |
| 197 | {/*サブキャプションが� |
| 198 | �力された時のみ表示*/} |
| 199 | {lbsubCaptionRichText ? ( |
| 200 | <p className={'vk_button_link_subCaption'}> |
| 201 | {lbsubCaptionRichText} |
| 202 | </p> |
| 203 | ) : ( |
| 204 | subCaption && ( |
| 205 | <p |
| 206 | className={'vk_button_link_subCaption'} |
| 207 | dangerouslySetInnerHTML={{ |
| 208 | __html: subCaption |
| 209 | .replace(/&/g, '&') |
| 210 | .replace(/</g, '<') |
| 211 | .replace(/>/g, '>') |
| 212 | .replace(/<br\s*\/?>/gi, '<br>'), |
| 213 | }} |
| 214 | /> |
| 215 | ) |
| 216 | )} |
| 217 | </a> |
| 218 | ); |
| 219 | } |
| 220 | } |
| 221 |