deprecated
2 months ago
block.json
1 month ago
edit.js
2 weeks ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
save.js
2 weeks ago
style.scss
1 month ago
save.js
314 lines
| 1 | import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor'; |
| 2 | import { isHexColor } from '@vkblocks/utils/is-hex-color'; |
| 3 | import { sanitizeSlug } from '@vkblocks/utils/sanitizeSlug'; |
| 4 | |
| 5 | export default function save({ attributes }) { |
| 6 | const { |
| 7 | balloonName, |
| 8 | balloonType, |
| 9 | balloonBorder, |
| 10 | balloonFullWidth, |
| 11 | balloonIconDisplay, |
| 12 | balloonImageBorder, |
| 13 | balloonBorderColor, |
| 14 | balloonBgColor, |
| 15 | balloonAlign, |
| 16 | IconImage, |
| 17 | balloonImageType, |
| 18 | balloonAnimation, |
| 19 | } = attributes; |
| 20 | |
| 21 | let contentBorderClass = ''; |
| 22 | let iconImageBorderClass = ''; |
| 23 | let contentBackgroundClass = ''; |
| 24 | let iconImageColorStyle = {}; |
| 25 | let contentColorStyle = {}; |
| 26 | let triangleBorderColorBeforeClass = ''; |
| 27 | let triangleBorderColorAfterClass = ''; |
| 28 | let triangleBorderColorBeforeStyle = {}; |
| 29 | let triangleBorderColorAfterStyle = {}; |
| 30 | |
| 31 | // 後方互換 (カスタムカラー選択時 インラインcssをcontentとiconに分ける) |
| 32 | const colorStyle = {}; |
| 33 | if (colorStyle) { |
| 34 | contentColorStyle = colorStyle; |
| 35 | iconImageColorStyle = colorStyle; |
| 36 | } |
| 37 | if ('background' in iconImageColorStyle) { |
| 38 | delete iconImageColorStyle.background; |
| 39 | } |
| 40 | |
| 41 | const defaultAvatar = |
| 42 | typeof img_path !== 'undefined' && !!img_path.full_path // eslint-disable-line no-undef |
| 43 | ? img_path.full_path // eslint-disable-line no-undef |
| 44 | : ''; |
| 45 | |
| 46 | //吹き出しに枠線を追加オン |
| 47 | if (balloonBorder === true) { |
| 48 | contentBorderClass += 'vk_balloon_content-border-true'; |
| 49 | |
| 50 | if (balloonImageBorder === true) { |
| 51 | iconImageBorderClass += 'vk_balloon_icon_image-border-true'; |
| 52 | } else { |
| 53 | iconImageBorderClass = ''; |
| 54 | } |
| 55 | |
| 56 | //iconImageBorderClass |
| 57 | //contentBorderClass |
| 58 | if (balloonBorderColor !== undefined) { |
| 59 | iconImageBorderClass += ` has-text-color`; |
| 60 | contentBorderClass += ` has-text-color`; |
| 61 | //カラーパレットの時 |
| 62 | if (!isHexColor(balloonBorderColor)) { |
| 63 | iconImageBorderClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 64 | contentBorderClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 65 | } |
| 66 | } |
| 67 | |
| 68 | //colorStyle |
| 69 | //カスタム*パレット |
| 70 | if (isHexColor(balloonBorderColor) && !isHexColor(balloonBgColor)) { |
| 71 | contentColorStyle = { |
| 72 | borderColor: `${balloonBorderColor}`, |
| 73 | }; |
| 74 | iconImageColorStyle = { |
| 75 | borderColor: `${balloonBorderColor}`, |
| 76 | }; |
| 77 | //パレット*カスタム |
| 78 | } else if ( |
| 79 | !isHexColor(balloonBorderColor) && |
| 80 | isHexColor(balloonBgColor) |
| 81 | ) { |
| 82 | contentColorStyle = { |
| 83 | background: `${balloonBgColor}`, |
| 84 | }; |
| 85 | //カスタム*カスタム |
| 86 | } else if ( |
| 87 | isHexColor(balloonBorderColor) && |
| 88 | isHexColor(balloonBgColor) |
| 89 | ) { |
| 90 | contentColorStyle = { |
| 91 | borderColor: `${balloonBorderColor}`, |
| 92 | background: `${balloonBgColor}`, |
| 93 | }; |
| 94 | iconImageColorStyle = { |
| 95 | borderColor: `${balloonBorderColor}`, |
| 96 | }; |
| 97 | } |
| 98 | |
| 99 | // 吹き出しの� |
| 100 | �置 左 |
| 101 | if (balloonAlign === 'position-left') { |
| 102 | // 吹き出しの矢印 Class |
| 103 | // カラーパレットの時 |
| 104 | // 吹き出しの時 |
| 105 | if ('type-speech' === balloonType) { |
| 106 | if (balloonBgColor !== undefined) { |
| 107 | triangleBorderColorBeforeClass += ` has-text-color`; |
| 108 | if (!isHexColor(balloonBgColor)) { |
| 109 | triangleBorderColorBeforeClass += ` has-${sanitizeSlug(balloonBgColor)}-color`; |
| 110 | } |
| 111 | } |
| 112 | if (balloonBorderColor !== undefined) { |
| 113 | triangleBorderColorAfterClass += ` has-text-color`; |
| 114 | if (!isHexColor(balloonBorderColor)) { |
| 115 | triangleBorderColorAfterClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 116 | } |
| 117 | } |
| 118 | //もくもくの時 |
| 119 | } else if ('type-think' === balloonType) { |
| 120 | if (balloonBorderColor !== undefined) { |
| 121 | triangleBorderColorBeforeClass += ` has-text-color`; |
| 122 | if (!isHexColor(balloonBorderColor)) { |
| 123 | triangleBorderColorBeforeClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 124 | } |
| 125 | } |
| 126 | if (balloonBorderColor !== undefined) { |
| 127 | triangleBorderColorAfterClass += ` has-text-color`; |
| 128 | if (!isHexColor(balloonBorderColor)) { |
| 129 | triangleBorderColorAfterClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 130 | } |
| 131 | } |
| 132 | } |
| 133 | |
| 134 | //吹き出しの矢印 Style |
| 135 | //カスタムカラーの時 |
| 136 | if (isHexColor(balloonBorderColor)) { |
| 137 | triangleBorderColorAfterStyle = { |
| 138 | borderColor: `transparent transparent transparent ${balloonBgColor}`, |
| 139 | }; |
| 140 | } |
| 141 | if (isHexColor(balloonBgColor)) { |
| 142 | triangleBorderColorBeforeStyle = { |
| 143 | borderColor: `transparent ${balloonBgColor} transparent transparent`, |
| 144 | }; |
| 145 | } |
| 146 | |
| 147 | // 吹き出しの� |
| 148 | �置 右 |
| 149 | } else if (balloonAlign === 'position-right') { |
| 150 | // 吹き出しの時 |
| 151 | // カラーパレットの時 |
| 152 | if ('type-speech' === balloonType) { |
| 153 | if (balloonBgColor !== undefined) { |
| 154 | triangleBorderColorBeforeClass += ` has-text-color`; |
| 155 | if (!isHexColor(balloonBgColor)) { |
| 156 | triangleBorderColorBeforeClass += ` has-${sanitizeSlug(balloonBgColor)}-color`; |
| 157 | } |
| 158 | } |
| 159 | if (balloonBorderColor !== undefined) { |
| 160 | triangleBorderColorAfterClass += ` has-text-color`; |
| 161 | if (!isHexColor(balloonBorderColor)) { |
| 162 | triangleBorderColorAfterClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 163 | } |
| 164 | } |
| 165 | // もくもくの時 |
| 166 | // カラーパレットの時 |
| 167 | } else if ('type-think' === balloonType) { |
| 168 | if (balloonBorderColor !== undefined) { |
| 169 | triangleBorderColorBeforeClass += ` has-text-color`; |
| 170 | triangleBorderColorAfterClass += ` has-text-color`; |
| 171 | if (!isHexColor(balloonBorderColor)) { |
| 172 | triangleBorderColorBeforeClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 173 | triangleBorderColorAfterClass += ` has-${sanitizeSlug(balloonBorderColor)}-color`; |
| 174 | } |
| 175 | } |
| 176 | } |
| 177 | |
| 178 | //吹き出しの矢印 Style |
| 179 | //カスタムカラーの時 |
| 180 | if (isHexColor(balloonBorderColor)) { |
| 181 | triangleBorderColorAfterStyle = { |
| 182 | borderColor: `transparent ${balloonBorderColor} transparent transparent`, |
| 183 | }; |
| 184 | } |
| 185 | if (isHexColor(balloonBgColor)) { |
| 186 | triangleBorderColorBeforeStyle = { |
| 187 | borderColor: `transparent transparent transparent ${balloonBgColor}`, |
| 188 | }; |
| 189 | } |
| 190 | } |
| 191 | |
| 192 | //吹き出しに枠線を追加オフ |
| 193 | } else if (balloonBgColor !== undefined) { |
| 194 | iconImageBorderClass = ''; |
| 195 | |
| 196 | // 吹き出しの背景色 Style |
| 197 | if (balloonBgColor !== undefined) { |
| 198 | //カスタムカラーの時 |
| 199 | if (isHexColor(balloonBgColor)) { |
| 200 | contentColorStyle = { |
| 201 | background: `${balloonBgColor}`, |
| 202 | }; |
| 203 | } |
| 204 | } |
| 205 | |
| 206 | if (balloonAlign === 'position-left') { |
| 207 | // 吹き出しの矢印 Class |
| 208 | // カラーパレットの時 |
| 209 | // 吹き出しの時 |
| 210 | if ('type-speech' === balloonType) { |
| 211 | if (balloonBgColor !== undefined) { |
| 212 | triangleBorderColorBeforeClass += ` has-text-color`; |
| 213 | if (!isHexColor(balloonBgColor)) { |
| 214 | triangleBorderColorBeforeClass += ` has-${sanitizeSlug(balloonBgColor)}-color`; |
| 215 | } |
| 216 | } |
| 217 | } |
| 218 | |
| 219 | //吹き出しの矢印 Style |
| 220 | //カスタムカラーの時 |
| 221 | if (isHexColor(balloonBorderColor)) { |
| 222 | triangleBorderColorAfterStyle = { |
| 223 | borderColor: `transparent transparent transparent ${balloonBgColor}`, |
| 224 | }; |
| 225 | } |
| 226 | if (isHexColor(balloonBgColor)) { |
| 227 | triangleBorderColorBeforeStyle = { |
| 228 | borderColor: `transparent ${balloonBgColor} transparent transparent`, |
| 229 | }; |
| 230 | } |
| 231 | } else if (balloonAlign === 'position-right') { |
| 232 | // 吹き出しの矢印 Class |
| 233 | // カラーパレットの時 |
| 234 | // 吹き出しの時 |
| 235 | if ('type-speech' === balloonType) { |
| 236 | if (balloonBgColor !== undefined) { |
| 237 | triangleBorderColorBeforeClass += ` has-text-color`; |
| 238 | if (!isHexColor(balloonBgColor)) { |
| 239 | triangleBorderColorBeforeClass += ` has-${sanitizeSlug(balloonBgColor)}-color`; |
| 240 | } |
| 241 | } |
| 242 | } |
| 243 | |
| 244 | //吹き出しの矢印 Style |
| 245 | //カスタムカラーの時 |
| 246 | if (isHexColor(balloonBgColor)) { |
| 247 | triangleBorderColorBeforeStyle = { |
| 248 | borderColor: `transparent transparent transparent ${balloonBgColor}`, |
| 249 | }; |
| 250 | } |
| 251 | } |
| 252 | } |
| 253 | |
| 254 | // 吹き出しの背景色 Class |
| 255 | if (balloonBgColor !== undefined) { |
| 256 | contentBackgroundClass += ` has-background-color`; |
| 257 | //カラーパレットの時 |
| 258 | if (!isHexColor(balloonBgColor)) { |
| 259 | contentBackgroundClass += ` has-${sanitizeSlug(balloonBgColor)}-background-color`; |
| 260 | } |
| 261 | } |
| 262 | |
| 263 | // 吹き出しの� |
| 264 | Class |
| 265 | if (!!balloonFullWidth) { |
| 266 | contentBorderClass += ` vk_balloon_content_fullwidth`; |
| 267 | } |
| 268 | |
| 269 | const blockProps = useBlockProps.save({ |
| 270 | className: `vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`, |
| 271 | }); |
| 272 | |
| 273 | return ( |
| 274 | <div {...blockProps}> |
| 275 | <div className={`vk_balloon_icon`}> |
| 276 | {balloonIconDisplay || |
| 277 | (balloonIconDisplay === 'undefined' && IconImage) ? ( |
| 278 | <figure> |
| 279 | <img |
| 280 | className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`} |
| 281 | style={iconImageColorStyle} |
| 282 | src={IconImage ? IconImage : defaultAvatar} |
| 283 | alt="" |
| 284 | /> |
| 285 | <RichText.Content |
| 286 | tagName="figcaption" |
| 287 | className={'vk_balloon_icon_name'} |
| 288 | value={balloonName} |
| 289 | /> |
| 290 | </figure> |
| 291 | ) : ( |
| 292 | '' |
| 293 | )} |
| 294 | </div> |
| 295 | <div className={`vk_balloon_content_outer`}> |
| 296 | <div |
| 297 | className={`vk_balloon_content ${contentBackgroundClass} ${contentBorderClass}`} |
| 298 | style={contentColorStyle} |
| 299 | > |
| 300 | <span |
| 301 | className={`vk_balloon_content_before ${triangleBorderColorBeforeClass}`} |
| 302 | style={triangleBorderColorBeforeStyle} |
| 303 | ></span> |
| 304 | <span |
| 305 | className={`vk_balloon_content_after ${triangleBorderColorAfterClass}`} |
| 306 | style={triangleBorderColorAfterStyle} |
| 307 | ></span> |
| 308 | <InnerBlocks.Content /> |
| 309 | </div> |
| 310 | </div> |
| 311 | </div> |
| 312 | ); |
| 313 | } |
| 314 |