animations
3 months ago
frontblocks-text-animation-frontend.js
3 months ago
frontblocks-text-animation-option.jsx
2 months ago
frontblocks-text-animation.css
3 months ago
frontblocks-text-animation.js
2 months ago
frontblocks-text-animation.js
2133 lines
| 1 | "use strict"; |
| 2 | |
| 3 | function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } |
| 4 | function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } |
| 5 | function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); } |
| 6 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } |
| 7 | function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); } |
| 8 | function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); } |
| 9 | function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); } |
| 10 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } |
| 11 | function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } |
| 12 | function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } |
| 13 | function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } |
| 14 | function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } |
| 15 | function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } |
| 16 | function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } |
| 17 | function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } |
| 18 | function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; } |
| 19 | function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } |
| 20 | var registerBlockType = wp.blocks.registerBlockType; |
| 21 | var _wp$element = wp.element, |
| 22 | Fragment = _wp$element.Fragment, |
| 23 | useState = _wp$element.useState; |
| 24 | var useSelect = wp.data.useSelect; |
| 25 | var _wp$blockEditor = wp.blockEditor, |
| 26 | InspectorControls = _wp$blockEditor.InspectorControls, |
| 27 | useBlockProps = _wp$blockEditor.useBlockProps, |
| 28 | RichText = _wp$blockEditor.RichText, |
| 29 | PanelColorSettings = _wp$blockEditor.PanelColorSettings; |
| 30 | var _wp$components = wp.components, |
| 31 | PanelBody = _wp$components.PanelBody, |
| 32 | SelectControl = _wp$components.SelectControl, |
| 33 | RangeControl = _wp$components.RangeControl, |
| 34 | Button = _wp$components.Button, |
| 35 | ToggleControl = _wp$components.ToggleControl, |
| 36 | NumberControl = _wp$components.__experimentalNumberControl, |
| 37 | ToggleGroupControl = _wp$components.__experimentalToggleGroupControl, |
| 38 | ToggleGroupControlOptionIcon = _wp$components.__experimentalToggleGroupControlOptionIcon; |
| 39 | var __ = wp.i18n.__; |
| 40 | var FONT_SIZE_UNITS = [{ |
| 41 | label: 'px', |
| 42 | value: 'px' |
| 43 | }, { |
| 44 | label: 'rem', |
| 45 | value: 'rem' |
| 46 | }, { |
| 47 | label: 'em', |
| 48 | value: 'em' |
| 49 | }, { |
| 50 | label: 'vw', |
| 51 | value: 'vw' |
| 52 | }]; |
| 53 | var TAG_OPTIONS = [{ |
| 54 | label: 'h1', |
| 55 | value: 'h1' |
| 56 | }, { |
| 57 | label: 'h2', |
| 58 | value: 'h2' |
| 59 | }, { |
| 60 | label: 'h3', |
| 61 | value: 'h3' |
| 62 | }, { |
| 63 | label: 'h4', |
| 64 | value: 'h4' |
| 65 | }, { |
| 66 | label: 'h5', |
| 67 | value: 'h5' |
| 68 | }, { |
| 69 | label: 'h6', |
| 70 | value: 'h6' |
| 71 | }, { |
| 72 | label: 'p', |
| 73 | value: 'p' |
| 74 | }, { |
| 75 | label: 'span (inline)', |
| 76 | value: 'span' |
| 77 | }]; |
| 78 | var FONT_WEIGHT_OPTIONS = [{ |
| 79 | label: __('Thin (100)', 'frontblocks'), |
| 80 | value: '100' |
| 81 | }, { |
| 82 | label: __('Extra Light (200)', 'frontblocks'), |
| 83 | value: '200' |
| 84 | }, { |
| 85 | label: __('Light (300)', 'frontblocks'), |
| 86 | value: '300' |
| 87 | }, { |
| 88 | label: __('Normal (400)', 'frontblocks'), |
| 89 | value: '400' |
| 90 | }, { |
| 91 | label: __('Medium (500)', 'frontblocks'), |
| 92 | value: '500' |
| 93 | }, { |
| 94 | label: __('Semi Bold (600)', 'frontblocks'), |
| 95 | value: '600' |
| 96 | }, { |
| 97 | label: __('Bold (700)', 'frontblocks'), |
| 98 | value: '700' |
| 99 | }, { |
| 100 | label: __('Extra Bold (800)', 'frontblocks'), |
| 101 | value: '800' |
| 102 | }, { |
| 103 | label: __('Black (900)', 'frontblocks'), |
| 104 | value: '900' |
| 105 | }]; |
| 106 | var ALIGN_LEFT_ICON = /*#__PURE__*/React.createElement("svg", { |
| 107 | xmlns: "http://www.w3.org/2000/svg", |
| 108 | width: "20", |
| 109 | height: "20", |
| 110 | viewBox: "0 0 24 24", |
| 111 | "aria-hidden": "true" |
| 112 | }, /*#__PURE__*/React.createElement("path", { |
| 113 | d: "M13 15H3v2h10v-2zm0-8H3v2h10V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" |
| 114 | })); |
| 115 | var ALIGN_CENTER_ICON = /*#__PURE__*/React.createElement("svg", { |
| 116 | xmlns: "http://www.w3.org/2000/svg", |
| 117 | width: "20", |
| 118 | height: "20", |
| 119 | viewBox: "0 0 24 24", |
| 120 | "aria-hidden": "true" |
| 121 | }, /*#__PURE__*/React.createElement("path", { |
| 122 | d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" |
| 123 | })); |
| 124 | var ALIGN_RIGHT_ICON = /*#__PURE__*/React.createElement("svg", { |
| 125 | xmlns: "http://www.w3.org/2000/svg", |
| 126 | width: "20", |
| 127 | height: "20", |
| 128 | viewBox: "0 0 24 24", |
| 129 | "aria-hidden": "true" |
| 130 | }, /*#__PURE__*/React.createElement("path", { |
| 131 | d: "M3 21h18v-2H3v2zm8-4h10v-2H11v2zm-8-4h18v-2H3v2zm8-4h10V7H11v2zM3 3v2h18V3H3z" |
| 132 | })); |
| 133 | var ALIGN_JUSTIFY_ICON = /*#__PURE__*/React.createElement("svg", { |
| 134 | xmlns: "http://www.w3.org/2000/svg", |
| 135 | width: "20", |
| 136 | height: "20", |
| 137 | viewBox: "0 0 24 24", |
| 138 | "aria-hidden": "true" |
| 139 | }, /*#__PURE__*/React.createElement("path", { |
| 140 | d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z" |
| 141 | })); |
| 142 | var TRANSFORM_NONE_ICON = /*#__PURE__*/React.createElement("svg", { |
| 143 | xmlns: "http://www.w3.org/2000/svg", |
| 144 | width: "20", |
| 145 | height: "20", |
| 146 | viewBox: "0 0 24 24", |
| 147 | "aria-hidden": "true" |
| 148 | }, /*#__PURE__*/React.createElement("text", { |
| 149 | x: "4", |
| 150 | y: "17", |
| 151 | fontFamily: "serif", |
| 152 | fontSize: "14", |
| 153 | fontWeight: "bold", |
| 154 | fill: "currentColor" |
| 155 | }, "Ag"), /*#__PURE__*/React.createElement("line", { |
| 156 | x1: "3", |
| 157 | y1: "21", |
| 158 | x2: "21", |
| 159 | y2: "3", |
| 160 | stroke: "currentColor", |
| 161 | strokeWidth: "1.5" |
| 162 | })); |
| 163 | var TRANSFORM_UPPERCASE_ICON = /*#__PURE__*/React.createElement("svg", { |
| 164 | xmlns: "http://www.w3.org/2000/svg", |
| 165 | width: "20", |
| 166 | height: "20", |
| 167 | viewBox: "0 0 24 24", |
| 168 | "aria-hidden": "true" |
| 169 | }, /*#__PURE__*/React.createElement("text", { |
| 170 | x: "2", |
| 171 | y: "17", |
| 172 | fontFamily: "serif", |
| 173 | fontSize: "15", |
| 174 | fontWeight: "bold", |
| 175 | fill: "currentColor" |
| 176 | }, "AA")); |
| 177 | var TRANSFORM_LOWERCASE_ICON = /*#__PURE__*/React.createElement("svg", { |
| 178 | xmlns: "http://www.w3.org/2000/svg", |
| 179 | width: "20", |
| 180 | height: "20", |
| 181 | viewBox: "0 0 24 24", |
| 182 | "aria-hidden": "true" |
| 183 | }, /*#__PURE__*/React.createElement("text", { |
| 184 | x: "2", |
| 185 | y: "17", |
| 186 | fontFamily: "serif", |
| 187 | fontSize: "15", |
| 188 | fill: "currentColor" |
| 189 | }, "aa")); |
| 190 | var TRANSFORM_CAPITALIZE_ICON = /*#__PURE__*/React.createElement("svg", { |
| 191 | xmlns: "http://www.w3.org/2000/svg", |
| 192 | width: "20", |
| 193 | height: "20", |
| 194 | viewBox: "0 0 24 24", |
| 195 | "aria-hidden": "true" |
| 196 | }, /*#__PURE__*/React.createElement("text", { |
| 197 | x: "2", |
| 198 | y: "17", |
| 199 | fontFamily: "serif", |
| 200 | fontSize: "15", |
| 201 | fill: "currentColor" |
| 202 | }, "Aa")); |
| 203 | var FONT_STYLE_OPTIONS = [{ |
| 204 | label: __('Normal', 'frontblocks'), |
| 205 | value: 'normal' |
| 206 | }, { |
| 207 | label: __('Italic', 'frontblocks'), |
| 208 | value: 'italic' |
| 209 | }]; |
| 210 | var ANIMATION_OPTIONS = [{ |
| 211 | label: __('None', 'frontblocks'), |
| 212 | value: 'none' |
| 213 | }, { |
| 214 | label: __('Fade In', 'frontblocks'), |
| 215 | value: 'fade-in' |
| 216 | }, { |
| 217 | label: __('Typewriter', 'frontblocks'), |
| 218 | value: 'typewriter' |
| 219 | }, { |
| 220 | label: __('Shuffle Text', 'frontblocks'), |
| 221 | value: 'shuffle-text' |
| 222 | }, { |
| 223 | label: __('Slide Up', 'frontblocks'), |
| 224 | value: 'slide-up' |
| 225 | }, { |
| 226 | label: __('Slide Down', 'frontblocks'), |
| 227 | value: 'slide-down' |
| 228 | }, { |
| 229 | label: __('Slide Left', 'frontblocks'), |
| 230 | value: 'slide-left' |
| 231 | }, { |
| 232 | label: __('Slide Right', 'frontblocks'), |
| 233 | value: 'slide-right' |
| 234 | }, { |
| 235 | label: __('Drop In', 'frontblocks'), |
| 236 | value: 'drop-in' |
| 237 | }, { |
| 238 | label: __('Swing', 'frontblocks'), |
| 239 | value: 'swing' |
| 240 | }, { |
| 241 | label: __('Pulse', 'frontblocks'), |
| 242 | value: 'pulse' |
| 243 | }, { |
| 244 | label: __('Flash', 'frontblocks'), |
| 245 | value: 'flash' |
| 246 | }, { |
| 247 | label: __('Rubber Band', 'frontblocks'), |
| 248 | value: 'rubber-band' |
| 249 | }, { |
| 250 | label: __('Wave', 'frontblocks'), |
| 251 | value: 'wave' |
| 252 | }, { |
| 253 | label: __('Stretch', 'frontblocks'), |
| 254 | value: 'stretch' |
| 255 | }, { |
| 256 | label: __('Squeeze', 'frontblocks'), |
| 257 | value: 'squeeze' |
| 258 | }, { |
| 259 | label: __('Roll In', 'frontblocks'), |
| 260 | value: 'roll-in' |
| 261 | }, { |
| 262 | label: __('Glitch', 'frontblocks'), |
| 263 | value: 'glitch' |
| 264 | }, { |
| 265 | label: __('Random Reveal', 'frontblocks'), |
| 266 | value: 'random-reveal' |
| 267 | }, { |
| 268 | label: __('Flicker', 'frontblocks'), |
| 269 | value: 'flicker' |
| 270 | }, { |
| 271 | label: __('Block Reveal', 'frontblocks'), |
| 272 | value: 'block-reveal' |
| 273 | }, { |
| 274 | label: __('Tracking Expand', 'frontblocks'), |
| 275 | value: 'tracking-expand' |
| 276 | }, { |
| 277 | label: __('Terminal Type', 'frontblocks'), |
| 278 | value: 'terminal-type' |
| 279 | }, { |
| 280 | label: __('Solid Outline', 'frontblocks'), |
| 281 | value: 'solid-outline' |
| 282 | }, { |
| 283 | label: __('Glitch RGB', 'frontblocks'), |
| 284 | value: 'glitch-rgb' |
| 285 | }, { |
| 286 | label: __('Water Drop', 'frontblocks'), |
| 287 | value: 'water-drop' |
| 288 | }, { |
| 289 | label: __('Pulse Neon', 'frontblocks'), |
| 290 | value: 'pulse-neon' |
| 291 | }, { |
| 292 | label: __('Shadow Pop', 'frontblocks'), |
| 293 | value: 'shadow-pop' |
| 294 | }, { |
| 295 | label: __('Scale In', 'frontblocks'), |
| 296 | value: 'scale-in' |
| 297 | }, { |
| 298 | label: __('Blur In', 'frontblocks'), |
| 299 | value: 'blur-in' |
| 300 | }, { |
| 301 | label: __('Glow In', 'frontblocks'), |
| 302 | value: 'glow-in' |
| 303 | }, { |
| 304 | label: __('Bounce In', 'frontblocks'), |
| 305 | value: 'bounce-in' |
| 306 | }, { |
| 307 | label: __('Flip In', 'frontblocks'), |
| 308 | value: 'flip-in' |
| 309 | }, { |
| 310 | label: __('Rotate In', 'frontblocks'), |
| 311 | value: 'rotate-in' |
| 312 | }]; |
| 313 | function stripHtml(html) { |
| 314 | return html ? html.replace(/<[^>]*>/g, '') : ''; |
| 315 | } |
| 316 | |
| 317 | /* ── Animation preview registry ───────────────────────────── |
| 318 | Each entry: { loop: bool, render( text, style, Tag, key ) → JSX } |
| 319 | Add a new entry for every new animation type. |
| 320 | ──────────────────────────────────────────────────────────── */ |
| 321 | var ANIMATION_PREVIEWS = { |
| 322 | 'fade-in': { |
| 323 | duration: function duration(text) { |
| 324 | return (text.length * 0.05 + 0.8) * 1000; |
| 325 | }, |
| 326 | render: function FadeInRender(_ref) { |
| 327 | var text = _ref.text, |
| 328 | style = _ref.style, |
| 329 | Tag = _ref.Tag, |
| 330 | animKey = _ref.animKey; |
| 331 | var CHAR_DURATION = 0.8; |
| 332 | var CHAR_DELAY = 0.05; |
| 333 | return /*#__PURE__*/React.createElement(Tag, { |
| 334 | style: style, |
| 335 | key: animKey |
| 336 | }, text.split('').map(function (char, i) { |
| 337 | return /*#__PURE__*/React.createElement("span", { |
| 338 | key: i, |
| 339 | style: { |
| 340 | display: 'inline-block', |
| 341 | whiteSpace: 'pre', |
| 342 | opacity: 0, |
| 343 | animation: "frblFadeIn ".concat(CHAR_DURATION, "s forwards"), |
| 344 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 345 | } |
| 346 | }, char); |
| 347 | })); |
| 348 | } |
| 349 | }, |
| 350 | 'rotate-in': { |
| 351 | duration: function duration(text) { |
| 352 | return (text.length * 0.05 + 0.5) * 1000; |
| 353 | }, |
| 354 | render: function RotateInRender(_ref2) { |
| 355 | var text = _ref2.text, |
| 356 | style = _ref2.style, |
| 357 | Tag = _ref2.Tag, |
| 358 | animKey = _ref2.animKey; |
| 359 | var CHAR_DURATION = 0.5; |
| 360 | var CHAR_DELAY = 0.05; |
| 361 | return /*#__PURE__*/React.createElement(Tag, { |
| 362 | style: style, |
| 363 | key: animKey |
| 364 | }, text.split('').map(function (char, i) { |
| 365 | return /*#__PURE__*/React.createElement("span", { |
| 366 | key: i, |
| 367 | style: { |
| 368 | display: 'inline-block', |
| 369 | whiteSpace: 'pre', |
| 370 | opacity: 0, |
| 371 | animation: "frblRotateIn ".concat(CHAR_DURATION, "s forwards"), |
| 372 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 373 | } |
| 374 | }, char); |
| 375 | })); |
| 376 | } |
| 377 | }, |
| 378 | 'flip-in': { |
| 379 | duration: function duration(text) { |
| 380 | return (text.length * 0.05 + 0.6) * 1000; |
| 381 | }, |
| 382 | render: function FlipInRender(_ref3) { |
| 383 | var text = _ref3.text, |
| 384 | style = _ref3.style, |
| 385 | Tag = _ref3.Tag, |
| 386 | animKey = _ref3.animKey; |
| 387 | var CHAR_DURATION = 0.6; |
| 388 | var CHAR_DELAY = 0.05; |
| 389 | return /*#__PURE__*/React.createElement(Tag, { |
| 390 | style: style, |
| 391 | key: animKey |
| 392 | }, text.split('').map(function (char, i) { |
| 393 | return /*#__PURE__*/React.createElement("span", { |
| 394 | key: i, |
| 395 | style: { |
| 396 | display: 'inline-block', |
| 397 | whiteSpace: 'pre', |
| 398 | opacity: 0, |
| 399 | animation: "frblFlipIn ".concat(CHAR_DURATION, "s forwards"), |
| 400 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 401 | } |
| 402 | }, char); |
| 403 | })); |
| 404 | } |
| 405 | }, |
| 406 | 'bounce-in': { |
| 407 | duration: function duration(text) { |
| 408 | return (text.length * 0.08 + 0.6) * 1000; |
| 409 | }, |
| 410 | render: function BounceInRender(_ref4) { |
| 411 | var text = _ref4.text, |
| 412 | style = _ref4.style, |
| 413 | Tag = _ref4.Tag, |
| 414 | animKey = _ref4.animKey; |
| 415 | var CHAR_DURATION = 0.6; |
| 416 | var CHAR_DELAY = 0.08; |
| 417 | return /*#__PURE__*/React.createElement(Tag, { |
| 418 | style: style, |
| 419 | key: animKey |
| 420 | }, text.split('').map(function (char, i) { |
| 421 | return /*#__PURE__*/React.createElement("span", { |
| 422 | key: i, |
| 423 | style: { |
| 424 | display: 'inline-block', |
| 425 | whiteSpace: 'pre', |
| 426 | opacity: 0, |
| 427 | animation: "frblBounceIn ".concat(CHAR_DURATION, "s forwards"), |
| 428 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 429 | } |
| 430 | }, char); |
| 431 | })); |
| 432 | } |
| 433 | }, |
| 434 | 'glow-in': { |
| 435 | duration: function duration(text) { |
| 436 | return (text.length * 0.05 + 1) * 1000; |
| 437 | }, |
| 438 | render: function GlowInRender(_ref5) { |
| 439 | var text = _ref5.text, |
| 440 | style = _ref5.style, |
| 441 | Tag = _ref5.Tag, |
| 442 | animKey = _ref5.animKey; |
| 443 | var CHAR_DURATION = 1; |
| 444 | var CHAR_DELAY = 0.05; |
| 445 | return /*#__PURE__*/React.createElement(Tag, { |
| 446 | style: style, |
| 447 | key: animKey |
| 448 | }, text.split('').map(function (char, i) { |
| 449 | return /*#__PURE__*/React.createElement("span", { |
| 450 | key: i, |
| 451 | style: { |
| 452 | display: 'inline-block', |
| 453 | whiteSpace: 'pre', |
| 454 | opacity: 0, |
| 455 | animation: "frblGlowIn ".concat(CHAR_DURATION, "s forwards"), |
| 456 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 457 | } |
| 458 | }, char); |
| 459 | })); |
| 460 | } |
| 461 | }, |
| 462 | 'blur-in': { |
| 463 | duration: function duration(text) { |
| 464 | return (text.length * 0.05 + 0.8) * 1000; |
| 465 | }, |
| 466 | render: function BlurInRender(_ref6) { |
| 467 | var text = _ref6.text, |
| 468 | style = _ref6.style, |
| 469 | Tag = _ref6.Tag, |
| 470 | animKey = _ref6.animKey; |
| 471 | var CHAR_DURATION = 0.8; |
| 472 | var CHAR_DELAY = 0.05; |
| 473 | return /*#__PURE__*/React.createElement(Tag, { |
| 474 | style: style, |
| 475 | key: animKey |
| 476 | }, text.split('').map(function (char, i) { |
| 477 | return /*#__PURE__*/React.createElement("span", { |
| 478 | key: i, |
| 479 | style: { |
| 480 | display: 'inline-block', |
| 481 | whiteSpace: 'pre', |
| 482 | opacity: 0, |
| 483 | animation: "frblBlurIn ".concat(CHAR_DURATION, "s forwards"), |
| 484 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 485 | } |
| 486 | }, char); |
| 487 | })); |
| 488 | } |
| 489 | }, |
| 490 | 'scale-in': { |
| 491 | duration: function duration(text) { |
| 492 | return (text.length * 0.05 + 0.5) * 1000; |
| 493 | }, |
| 494 | render: function ScaleInRender(_ref7) { |
| 495 | var text = _ref7.text, |
| 496 | style = _ref7.style, |
| 497 | Tag = _ref7.Tag, |
| 498 | animKey = _ref7.animKey; |
| 499 | var CHAR_DURATION = 0.5; |
| 500 | var CHAR_DELAY = 0.05; |
| 501 | return /*#__PURE__*/React.createElement(Tag, { |
| 502 | style: style, |
| 503 | key: animKey |
| 504 | }, text.split('').map(function (char, i) { |
| 505 | return /*#__PURE__*/React.createElement("span", { |
| 506 | key: i, |
| 507 | style: { |
| 508 | display: 'inline-block', |
| 509 | whiteSpace: 'pre', |
| 510 | opacity: 0, |
| 511 | animation: "frblScaleIn ".concat(CHAR_DURATION, "s forwards"), |
| 512 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 513 | } |
| 514 | }, char); |
| 515 | })); |
| 516 | } |
| 517 | }, |
| 518 | 'slide-up': { |
| 519 | duration: function duration(text) { |
| 520 | return (text.length * 0.05 + 0.5) * 1000; |
| 521 | }, |
| 522 | render: function SlideUpRender(_ref8) { |
| 523 | var text = _ref8.text, |
| 524 | style = _ref8.style, |
| 525 | Tag = _ref8.Tag, |
| 526 | animKey = _ref8.animKey; |
| 527 | var CHAR_DURATION = 0.5; |
| 528 | var CHAR_DELAY = 0.05; |
| 529 | return /*#__PURE__*/React.createElement(Tag, { |
| 530 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 531 | overflow: 'hidden' |
| 532 | }), |
| 533 | key: animKey |
| 534 | }, text.split('').map(function (char, i) { |
| 535 | return /*#__PURE__*/React.createElement("span", { |
| 536 | key: i, |
| 537 | style: { |
| 538 | display: 'inline-block', |
| 539 | whiteSpace: 'pre', |
| 540 | opacity: 0, |
| 541 | animation: "frblSlideUp ".concat(CHAR_DURATION, "s forwards"), |
| 542 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 543 | } |
| 544 | }, char); |
| 545 | })); |
| 546 | } |
| 547 | }, |
| 548 | 'shadow-pop': { |
| 549 | duration: function duration(text) { |
| 550 | return (text.length * 0.05 + 0.5) * 1000; |
| 551 | }, |
| 552 | render: function ShadowPopRender(_ref9) { |
| 553 | var text = _ref9.text, |
| 554 | style = _ref9.style, |
| 555 | Tag = _ref9.Tag, |
| 556 | animKey = _ref9.animKey; |
| 557 | var CHAR_DURATION = 0.5; |
| 558 | var CHAR_DELAY = 0.05; |
| 559 | return /*#__PURE__*/React.createElement(Tag, { |
| 560 | style: style, |
| 561 | key: animKey |
| 562 | }, text.split('').map(function (char, i) { |
| 563 | return /*#__PURE__*/React.createElement("span", { |
| 564 | key: i, |
| 565 | style: { |
| 566 | display: 'inline-block', |
| 567 | whiteSpace: 'pre', |
| 568 | opacity: 0, |
| 569 | animation: "frblShadowPop ".concat(CHAR_DURATION, "s forwards"), |
| 570 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 571 | } |
| 572 | }, char); |
| 573 | })); |
| 574 | } |
| 575 | }, |
| 576 | 'pulse-neon': { |
| 577 | duration: function duration(text) { |
| 578 | return (text.length * 0.05 + 1.5) * 1000; |
| 579 | }, |
| 580 | render: function PulseNeonRender(_ref0) { |
| 581 | var text = _ref0.text, |
| 582 | style = _ref0.style, |
| 583 | Tag = _ref0.Tag, |
| 584 | animKey = _ref0.animKey; |
| 585 | var CHAR_DURATION = 1.5; |
| 586 | var CHAR_DELAY = 0.05; |
| 587 | return /*#__PURE__*/React.createElement(Tag, { |
| 588 | style: style, |
| 589 | key: animKey |
| 590 | }, text.split('').map(function (char, i) { |
| 591 | return /*#__PURE__*/React.createElement("span", { |
| 592 | key: i, |
| 593 | style: { |
| 594 | display: 'inline-block', |
| 595 | whiteSpace: 'pre', |
| 596 | opacity: 0, |
| 597 | animation: "frblPulseNeon ".concat(CHAR_DURATION, "s forwards"), |
| 598 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 599 | } |
| 600 | }, char); |
| 601 | })); |
| 602 | } |
| 603 | }, |
| 604 | 'water-drop': { |
| 605 | duration: function duration(text) { |
| 606 | return (text.length * 0.05 + 0.6) * 1000; |
| 607 | }, |
| 608 | render: function WaterDropRender(_ref1) { |
| 609 | var text = _ref1.text, |
| 610 | style = _ref1.style, |
| 611 | Tag = _ref1.Tag, |
| 612 | animKey = _ref1.animKey; |
| 613 | var CHAR_DURATION = 0.6; |
| 614 | var CHAR_DELAY = 0.05; |
| 615 | return /*#__PURE__*/React.createElement(Tag, { |
| 616 | style: style, |
| 617 | key: animKey |
| 618 | }, text.split('').map(function (char, i) { |
| 619 | return /*#__PURE__*/React.createElement("span", { |
| 620 | key: i, |
| 621 | style: { |
| 622 | display: 'inline-block', |
| 623 | whiteSpace: 'pre', |
| 624 | opacity: 0, |
| 625 | animation: "frblWaterDrop ".concat(CHAR_DURATION, "s forwards"), |
| 626 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 627 | } |
| 628 | }, char); |
| 629 | })); |
| 630 | } |
| 631 | }, |
| 632 | 'glitch-rgb': { |
| 633 | duration: function duration(text) { |
| 634 | return (text.length * 0.1 + 0.4) * 1000; |
| 635 | }, |
| 636 | render: function GlitchRGBRender(_ref10) { |
| 637 | var text = _ref10.text, |
| 638 | style = _ref10.style, |
| 639 | Tag = _ref10.Tag, |
| 640 | animKey = _ref10.animKey; |
| 641 | var CHAR_DURATION = 0.4; |
| 642 | var CHAR_DELAY = 0.1; |
| 643 | return /*#__PURE__*/React.createElement(Tag, { |
| 644 | style: style, |
| 645 | key: animKey |
| 646 | }, text.split('').map(function (char, i) { |
| 647 | return /*#__PURE__*/React.createElement("span", { |
| 648 | key: i, |
| 649 | style: { |
| 650 | display: 'inline-block', |
| 651 | whiteSpace: 'pre', |
| 652 | opacity: 0, |
| 653 | animation: "frblGlitchRGB ".concat(CHAR_DURATION, "s forwards"), |
| 654 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 655 | } |
| 656 | }, char); |
| 657 | })); |
| 658 | } |
| 659 | }, |
| 660 | 'solid-outline': { |
| 661 | duration: function duration(text) { |
| 662 | return (text.length * 0.05 + 0.8) * 1000; |
| 663 | }, |
| 664 | render: function SolidOutlineRender(_ref11) { |
| 665 | var text = _ref11.text, |
| 666 | style = _ref11.style, |
| 667 | Tag = _ref11.Tag, |
| 668 | animKey = _ref11.animKey; |
| 669 | var CHAR_DURATION = 0.8; |
| 670 | var CHAR_DELAY = 0.05; |
| 671 | var strokeColor = style.color || 'currentColor'; |
| 672 | return /*#__PURE__*/React.createElement(Tag, { |
| 673 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 674 | '--frbl-stroke-color': strokeColor |
| 675 | }), |
| 676 | key: animKey |
| 677 | }, text.split('').map(function (char, i) { |
| 678 | return /*#__PURE__*/React.createElement("span", { |
| 679 | key: i, |
| 680 | style: { |
| 681 | display: 'inline-block', |
| 682 | whiteSpace: 'pre', |
| 683 | opacity: 0, |
| 684 | animation: "frblSolidOutline ".concat(CHAR_DURATION, "s forwards"), |
| 685 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 686 | } |
| 687 | }, char); |
| 688 | })); |
| 689 | } |
| 690 | }, |
| 691 | 'terminal-type': { |
| 692 | duration: function duration(text) { |
| 693 | return text.length * 100; |
| 694 | }, |
| 695 | render: function TerminalTypeRender(_ref12) { |
| 696 | var text = _ref12.text, |
| 697 | style = _ref12.style, |
| 698 | Tag = _ref12.Tag, |
| 699 | animKey = _ref12.animKey; |
| 700 | var _wp$element2 = wp.element, |
| 701 | useEffect = _wp$element2.useEffect, |
| 702 | useRef = _wp$element2.useRef; |
| 703 | var containerRef = useRef(null); |
| 704 | useEffect(function () { |
| 705 | var el = containerRef.current; |
| 706 | if (!el) return; |
| 707 | el.innerHTML = ''; |
| 708 | var textSpan = document.createElement('span'); |
| 709 | var cursor = document.createElement('span'); |
| 710 | cursor.style.cssText = 'display:inline-block;width:0.6em;height:1.1em;background:currentColor;margin-left:4px;vertical-align:middle;animation:frblBlinkCursor 1s infinite;'; |
| 711 | el.appendChild(textSpan); |
| 712 | el.appendChild(cursor); |
| 713 | var chars = text.split(''); |
| 714 | var i = 0; |
| 715 | var timer; |
| 716 | function type() { |
| 717 | if (i < chars.length) { |
| 718 | textSpan.textContent += chars[i]; |
| 719 | i++; |
| 720 | timer = setTimeout(type, 100); |
| 721 | } |
| 722 | } |
| 723 | type(); |
| 724 | return function () { |
| 725 | return clearTimeout(timer); |
| 726 | }; |
| 727 | }, [animKey, text]); |
| 728 | return /*#__PURE__*/React.createElement(Tag, { |
| 729 | ref: containerRef, |
| 730 | style: style, |
| 731 | key: animKey |
| 732 | }); |
| 733 | } |
| 734 | }, |
| 735 | 'tracking-expand': { |
| 736 | duration: function duration() { |
| 737 | return 1200; |
| 738 | }, |
| 739 | render: function TrackingExpandRender(_ref13) { |
| 740 | var text = _ref13.text, |
| 741 | style = _ref13.style, |
| 742 | Tag = _ref13.Tag, |
| 743 | animKey = _ref13.animKey; |
| 744 | return /*#__PURE__*/React.createElement(Tag, { |
| 745 | style: style, |
| 746 | key: animKey |
| 747 | }, /*#__PURE__*/React.createElement("span", { |
| 748 | style: { |
| 749 | display: 'inline-block', |
| 750 | opacity: 0, |
| 751 | animation: "frblTrackingExpand 1.2s forwards" |
| 752 | } |
| 753 | }, text)); |
| 754 | } |
| 755 | }, |
| 756 | 'block-reveal': { |
| 757 | duration: function duration() { |
| 758 | return 1200; |
| 759 | }, |
| 760 | render: function BlockRevealRender(_ref14) { |
| 761 | var text = _ref14.text, |
| 762 | style = _ref14.style, |
| 763 | Tag = _ref14.Tag, |
| 764 | animKey = _ref14.animKey; |
| 765 | var _wp$element3 = wp.element, |
| 766 | useEffect = _wp$element3.useEffect, |
| 767 | useRef = _wp$element3.useRef; |
| 768 | var containerRef = useRef(null); |
| 769 | useEffect(function () { |
| 770 | var el = containerRef.current; |
| 771 | if (!el) return; |
| 772 | el.style.position = 'relative'; |
| 773 | el.style.overflow = 'hidden'; |
| 774 | el.innerHTML = ''; |
| 775 | var textSpan = document.createElement('span'); |
| 776 | textSpan.textContent = text; |
| 777 | textSpan.style.cssText = 'display:inline-block;opacity:0;'; |
| 778 | var block = document.createElement('span'); |
| 779 | block.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform 0.5s cubic-bezier(0.86,0,0.07,1);'; |
| 780 | el.appendChild(textSpan); |
| 781 | el.appendChild(block); |
| 782 | var t1 = setTimeout(function () { |
| 783 | block.style.transform = 'scaleX(1)'; |
| 784 | }, 50); |
| 785 | var t2 = setTimeout(function () { |
| 786 | textSpan.style.opacity = '1'; |
| 787 | block.style.transformOrigin = 'right'; |
| 788 | block.style.transform = 'scaleX(0)'; |
| 789 | }, 550); |
| 790 | return function () { |
| 791 | clearTimeout(t1); |
| 792 | clearTimeout(t2); |
| 793 | }; |
| 794 | }, [animKey, text]); |
| 795 | return /*#__PURE__*/React.createElement(Tag, { |
| 796 | ref: containerRef, |
| 797 | style: style, |
| 798 | key: animKey |
| 799 | }); |
| 800 | } |
| 801 | }, |
| 802 | 'flicker': { |
| 803 | duration: function duration(text) { |
| 804 | return (text.length * 0.05 + 1.2) * 1000; |
| 805 | }, |
| 806 | render: function FlickerRender(_ref15) { |
| 807 | var text = _ref15.text, |
| 808 | style = _ref15.style, |
| 809 | Tag = _ref15.Tag, |
| 810 | animKey = _ref15.animKey; |
| 811 | var CHAR_DURATION = 1.2; |
| 812 | var CHAR_DELAY = 0.05; |
| 813 | return /*#__PURE__*/React.createElement(Tag, { |
| 814 | style: style, |
| 815 | key: animKey |
| 816 | }, text.split('').map(function (char, i) { |
| 817 | return /*#__PURE__*/React.createElement("span", { |
| 818 | key: i, |
| 819 | style: { |
| 820 | display: 'inline-block', |
| 821 | whiteSpace: 'pre', |
| 822 | opacity: 0, |
| 823 | animation: "frblFlicker ".concat(CHAR_DURATION, "s forwards"), |
| 824 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 825 | } |
| 826 | }, char); |
| 827 | })); |
| 828 | } |
| 829 | }, |
| 830 | 'random-reveal': { |
| 831 | duration: function duration(text) { |
| 832 | return text.replace(/ /g, '').length * 50; |
| 833 | }, |
| 834 | render: function RandomRevealRender(_ref16) { |
| 835 | var text = _ref16.text, |
| 836 | style = _ref16.style, |
| 837 | Tag = _ref16.Tag, |
| 838 | animKey = _ref16.animKey; |
| 839 | var _wp$element4 = wp.element, |
| 840 | useEffect = _wp$element4.useEffect, |
| 841 | useRef = _wp$element4.useRef; |
| 842 | var containerRef = useRef(null); |
| 843 | useEffect(function () { |
| 844 | var el = containerRef.current; |
| 845 | if (!el) return; |
| 846 | el.innerHTML = ''; |
| 847 | var chars = text.split(''); |
| 848 | var indices = chars.map(function (_, i) { |
| 849 | return i; |
| 850 | }).sort(function () { |
| 851 | return Math.random() - 0.5; |
| 852 | }); |
| 853 | var spanList = chars.map(function (char) { |
| 854 | var span = document.createElement('span'); |
| 855 | span.className = 'frbl-char'; |
| 856 | span.textContent = char; |
| 857 | span.style.cssText = 'display:inline-block;white-space:pre;opacity:0;'; |
| 858 | el.appendChild(span); |
| 859 | return span; |
| 860 | }); |
| 861 | var i = 0; |
| 862 | var timer; |
| 863 | function reveal() { |
| 864 | if (i < indices.length) { |
| 865 | spanList[indices[i]].style.opacity = '1'; |
| 866 | i++; |
| 867 | timer = setTimeout(reveal, 50); |
| 868 | } |
| 869 | } |
| 870 | reveal(); |
| 871 | return function () { |
| 872 | return clearTimeout(timer); |
| 873 | }; |
| 874 | }, [animKey, text]); |
| 875 | return /*#__PURE__*/React.createElement(Tag, { |
| 876 | ref: containerRef, |
| 877 | style: style, |
| 878 | key: animKey |
| 879 | }); |
| 880 | } |
| 881 | }, |
| 882 | 'glitch': { |
| 883 | duration: function duration(text) { |
| 884 | return (text.length * 0.1 + 0.4) * 1000; |
| 885 | }, |
| 886 | render: function GlitchRender(_ref17) { |
| 887 | var text = _ref17.text, |
| 888 | style = _ref17.style, |
| 889 | Tag = _ref17.Tag, |
| 890 | animKey = _ref17.animKey; |
| 891 | var CHAR_DURATION = 0.4; |
| 892 | var CHAR_DELAY = 0.1; |
| 893 | return /*#__PURE__*/React.createElement(Tag, { |
| 894 | style: style, |
| 895 | key: animKey |
| 896 | }, text.split('').map(function (char, i) { |
| 897 | return /*#__PURE__*/React.createElement("span", { |
| 898 | key: i, |
| 899 | style: { |
| 900 | display: 'inline-block', |
| 901 | whiteSpace: 'pre', |
| 902 | opacity: 0, |
| 903 | animation: "frblGlitch ".concat(CHAR_DURATION, "s forwards"), |
| 904 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 905 | } |
| 906 | }, char); |
| 907 | })); |
| 908 | } |
| 909 | }, |
| 910 | 'roll-in': { |
| 911 | duration: function duration(text) { |
| 912 | return (text.length * 0.05 + 0.6) * 1000; |
| 913 | }, |
| 914 | render: function RollInRender(_ref18) { |
| 915 | var text = _ref18.text, |
| 916 | style = _ref18.style, |
| 917 | Tag = _ref18.Tag, |
| 918 | animKey = _ref18.animKey; |
| 919 | var CHAR_DURATION = 0.6; |
| 920 | var CHAR_DELAY = 0.05; |
| 921 | return /*#__PURE__*/React.createElement(Tag, { |
| 922 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 923 | overflow: 'hidden' |
| 924 | }), |
| 925 | key: animKey |
| 926 | }, text.split('').map(function (char, i) { |
| 927 | return /*#__PURE__*/React.createElement("span", { |
| 928 | key: i, |
| 929 | style: { |
| 930 | display: 'inline-block', |
| 931 | whiteSpace: 'pre', |
| 932 | opacity: 0, |
| 933 | animation: "frblRollIn ".concat(CHAR_DURATION, "s forwards"), |
| 934 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 935 | } |
| 936 | }, char); |
| 937 | })); |
| 938 | } |
| 939 | }, |
| 940 | 'squeeze': { |
| 941 | duration: function duration(text) { |
| 942 | return (text.length * 0.05 + 0.5) * 1000; |
| 943 | }, |
| 944 | render: function SqueezeRender(_ref19) { |
| 945 | var text = _ref19.text, |
| 946 | style = _ref19.style, |
| 947 | Tag = _ref19.Tag, |
| 948 | animKey = _ref19.animKey; |
| 949 | var CHAR_DURATION = 0.5; |
| 950 | var CHAR_DELAY = 0.05; |
| 951 | return /*#__PURE__*/React.createElement(Tag, { |
| 952 | style: style, |
| 953 | key: animKey |
| 954 | }, text.split('').map(function (char, i) { |
| 955 | return /*#__PURE__*/React.createElement("span", { |
| 956 | key: i, |
| 957 | style: { |
| 958 | display: 'inline-block', |
| 959 | whiteSpace: 'pre', |
| 960 | opacity: 0, |
| 961 | animation: "frblSqueeze ".concat(CHAR_DURATION, "s forwards"), |
| 962 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 963 | } |
| 964 | }, char); |
| 965 | })); |
| 966 | } |
| 967 | }, |
| 968 | 'stretch': { |
| 969 | duration: function duration(text) { |
| 970 | return (text.length * 0.05 + 0.5) * 1000; |
| 971 | }, |
| 972 | render: function StretchRender(_ref20) { |
| 973 | var text = _ref20.text, |
| 974 | style = _ref20.style, |
| 975 | Tag = _ref20.Tag, |
| 976 | animKey = _ref20.animKey; |
| 977 | var CHAR_DURATION = 0.5; |
| 978 | var CHAR_DELAY = 0.05; |
| 979 | return /*#__PURE__*/React.createElement(Tag, { |
| 980 | style: style, |
| 981 | key: animKey |
| 982 | }, text.split('').map(function (char, i) { |
| 983 | return /*#__PURE__*/React.createElement("span", { |
| 984 | key: i, |
| 985 | style: { |
| 986 | display: 'inline-block', |
| 987 | whiteSpace: 'pre', |
| 988 | opacity: 0, |
| 989 | animation: "frblStretch ".concat(CHAR_DURATION, "s forwards"), |
| 990 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 991 | } |
| 992 | }, char); |
| 993 | })); |
| 994 | } |
| 995 | }, |
| 996 | 'wave': { |
| 997 | duration: function duration(text) { |
| 998 | return (text.length * 0.08 + 0.6) * 1000; |
| 999 | }, |
| 1000 | render: function WaveRender(_ref21) { |
| 1001 | var text = _ref21.text, |
| 1002 | style = _ref21.style, |
| 1003 | Tag = _ref21.Tag, |
| 1004 | animKey = _ref21.animKey; |
| 1005 | var CHAR_DURATION = 0.6; |
| 1006 | var CHAR_DELAY = 0.08; |
| 1007 | return /*#__PURE__*/React.createElement(Tag, { |
| 1008 | style: style, |
| 1009 | key: animKey |
| 1010 | }, text.split('').map(function (char, i) { |
| 1011 | return /*#__PURE__*/React.createElement("span", { |
| 1012 | key: i, |
| 1013 | style: { |
| 1014 | display: 'inline-block', |
| 1015 | whiteSpace: 'pre', |
| 1016 | opacity: 0, |
| 1017 | animation: "frblWave ".concat(CHAR_DURATION, "s forwards"), |
| 1018 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1019 | } |
| 1020 | }, char); |
| 1021 | })); |
| 1022 | } |
| 1023 | }, |
| 1024 | 'rubber-band': { |
| 1025 | duration: function duration(text) { |
| 1026 | return (text.length * 0.05 + 0.8) * 1000; |
| 1027 | }, |
| 1028 | render: function RubberBandRender(_ref22) { |
| 1029 | var text = _ref22.text, |
| 1030 | style = _ref22.style, |
| 1031 | Tag = _ref22.Tag, |
| 1032 | animKey = _ref22.animKey; |
| 1033 | var CHAR_DURATION = 0.8; |
| 1034 | var CHAR_DELAY = 0.05; |
| 1035 | return /*#__PURE__*/React.createElement(Tag, { |
| 1036 | style: style, |
| 1037 | key: animKey |
| 1038 | }, text.split('').map(function (char, i) { |
| 1039 | return /*#__PURE__*/React.createElement("span", { |
| 1040 | key: i, |
| 1041 | style: { |
| 1042 | display: 'inline-block', |
| 1043 | whiteSpace: 'pre', |
| 1044 | opacity: 0, |
| 1045 | animation: "frblRubberBand ".concat(CHAR_DURATION, "s forwards"), |
| 1046 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1047 | } |
| 1048 | }, char); |
| 1049 | })); |
| 1050 | } |
| 1051 | }, |
| 1052 | 'flash': { |
| 1053 | duration: function duration(text) { |
| 1054 | return (text.length * 0.05 + 1) * 1000; |
| 1055 | }, |
| 1056 | render: function FlashRender(_ref23) { |
| 1057 | var text = _ref23.text, |
| 1058 | style = _ref23.style, |
| 1059 | Tag = _ref23.Tag, |
| 1060 | animKey = _ref23.animKey; |
| 1061 | var CHAR_DURATION = 1; |
| 1062 | var CHAR_DELAY = 0.05; |
| 1063 | return /*#__PURE__*/React.createElement(Tag, { |
| 1064 | style: style, |
| 1065 | key: animKey |
| 1066 | }, text.split('').map(function (char, i) { |
| 1067 | return /*#__PURE__*/React.createElement("span", { |
| 1068 | key: i, |
| 1069 | style: { |
| 1070 | display: 'inline-block', |
| 1071 | whiteSpace: 'pre', |
| 1072 | opacity: 0, |
| 1073 | animation: "frblFlash ".concat(CHAR_DURATION, "s forwards"), |
| 1074 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1075 | } |
| 1076 | }, char); |
| 1077 | })); |
| 1078 | } |
| 1079 | }, |
| 1080 | 'pulse': { |
| 1081 | duration: function duration(text) { |
| 1082 | return (text.length * 0.05 + 0.5) * 1000; |
| 1083 | }, |
| 1084 | render: function PulseRender(_ref24) { |
| 1085 | var text = _ref24.text, |
| 1086 | style = _ref24.style, |
| 1087 | Tag = _ref24.Tag, |
| 1088 | animKey = _ref24.animKey; |
| 1089 | var CHAR_DURATION = 0.5; |
| 1090 | var CHAR_DELAY = 0.05; |
| 1091 | return /*#__PURE__*/React.createElement(Tag, { |
| 1092 | style: style, |
| 1093 | key: animKey |
| 1094 | }, text.split('').map(function (char, i) { |
| 1095 | return /*#__PURE__*/React.createElement("span", { |
| 1096 | key: i, |
| 1097 | style: { |
| 1098 | display: 'inline-block', |
| 1099 | whiteSpace: 'pre', |
| 1100 | opacity: 0, |
| 1101 | animation: "frblPulse ".concat(CHAR_DURATION, "s forwards"), |
| 1102 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1103 | } |
| 1104 | }, char); |
| 1105 | })); |
| 1106 | } |
| 1107 | }, |
| 1108 | 'swing': { |
| 1109 | duration: function duration(text) { |
| 1110 | return (text.length * 0.05 + 0.8) * 1000; |
| 1111 | }, |
| 1112 | render: function SwingRender(_ref25) { |
| 1113 | var text = _ref25.text, |
| 1114 | style = _ref25.style, |
| 1115 | Tag = _ref25.Tag, |
| 1116 | animKey = _ref25.animKey; |
| 1117 | var CHAR_DURATION = 0.8; |
| 1118 | var CHAR_DELAY = 0.05; |
| 1119 | return /*#__PURE__*/React.createElement(Tag, { |
| 1120 | style: style, |
| 1121 | key: animKey |
| 1122 | }, text.split('').map(function (char, i) { |
| 1123 | return /*#__PURE__*/React.createElement("span", { |
| 1124 | key: i, |
| 1125 | style: { |
| 1126 | display: 'inline-block', |
| 1127 | whiteSpace: 'pre', |
| 1128 | opacity: 0, |
| 1129 | transformOrigin: 'top center', |
| 1130 | animation: "frblSwing ".concat(CHAR_DURATION, "s forwards"), |
| 1131 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1132 | } |
| 1133 | }, char); |
| 1134 | })); |
| 1135 | } |
| 1136 | }, |
| 1137 | 'drop-in': { |
| 1138 | duration: function duration(text) { |
| 1139 | return (text.length * 0.06 + 0.6) * 1000; |
| 1140 | }, |
| 1141 | render: function DropInRender(_ref26) { |
| 1142 | var text = _ref26.text, |
| 1143 | style = _ref26.style, |
| 1144 | Tag = _ref26.Tag, |
| 1145 | animKey = _ref26.animKey; |
| 1146 | var CHAR_DURATION = 0.6; |
| 1147 | var CHAR_DELAY = 0.06; |
| 1148 | return /*#__PURE__*/React.createElement(Tag, { |
| 1149 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 1150 | overflow: 'hidden' |
| 1151 | }), |
| 1152 | key: animKey |
| 1153 | }, text.split('').map(function (char, i) { |
| 1154 | return /*#__PURE__*/React.createElement("span", { |
| 1155 | key: i, |
| 1156 | style: { |
| 1157 | display: 'inline-block', |
| 1158 | whiteSpace: 'pre', |
| 1159 | opacity: 0, |
| 1160 | animation: "frblDropIn ".concat(CHAR_DURATION, "s forwards"), |
| 1161 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1162 | } |
| 1163 | }, char); |
| 1164 | })); |
| 1165 | } |
| 1166 | }, |
| 1167 | 'slide-right': { |
| 1168 | duration: function duration(text) { |
| 1169 | return (text.length * 0.05 + 0.5) * 1000; |
| 1170 | }, |
| 1171 | render: function SlideRightRender(_ref27) { |
| 1172 | var text = _ref27.text, |
| 1173 | style = _ref27.style, |
| 1174 | Tag = _ref27.Tag, |
| 1175 | animKey = _ref27.animKey; |
| 1176 | var CHAR_DURATION = 0.5; |
| 1177 | var CHAR_DELAY = 0.05; |
| 1178 | return /*#__PURE__*/React.createElement(Tag, { |
| 1179 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 1180 | overflow: 'hidden' |
| 1181 | }), |
| 1182 | key: animKey |
| 1183 | }, text.split('').map(function (char, i) { |
| 1184 | return /*#__PURE__*/React.createElement("span", { |
| 1185 | key: i, |
| 1186 | style: { |
| 1187 | display: 'inline-block', |
| 1188 | whiteSpace: 'pre', |
| 1189 | opacity: 0, |
| 1190 | animation: "frblSlideRight ".concat(CHAR_DURATION, "s forwards"), |
| 1191 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1192 | } |
| 1193 | }, char); |
| 1194 | })); |
| 1195 | } |
| 1196 | }, |
| 1197 | 'slide-left': { |
| 1198 | duration: function duration(text) { |
| 1199 | return (text.length * 0.05 + 0.5) * 1000; |
| 1200 | }, |
| 1201 | render: function SlideLeftRender(_ref28) { |
| 1202 | var text = _ref28.text, |
| 1203 | style = _ref28.style, |
| 1204 | Tag = _ref28.Tag, |
| 1205 | animKey = _ref28.animKey; |
| 1206 | var CHAR_DURATION = 0.5; |
| 1207 | var CHAR_DELAY = 0.05; |
| 1208 | return /*#__PURE__*/React.createElement(Tag, { |
| 1209 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 1210 | overflow: 'hidden' |
| 1211 | }), |
| 1212 | key: animKey |
| 1213 | }, text.split('').map(function (char, i) { |
| 1214 | return /*#__PURE__*/React.createElement("span", { |
| 1215 | key: i, |
| 1216 | style: { |
| 1217 | display: 'inline-block', |
| 1218 | whiteSpace: 'pre', |
| 1219 | opacity: 0, |
| 1220 | animation: "frblSlideLeft ".concat(CHAR_DURATION, "s forwards"), |
| 1221 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1222 | } |
| 1223 | }, char); |
| 1224 | })); |
| 1225 | } |
| 1226 | }, |
| 1227 | 'slide-down': { |
| 1228 | duration: function duration(text) { |
| 1229 | return (text.length * 0.05 + 0.5) * 1000; |
| 1230 | }, |
| 1231 | render: function SlideDownRender(_ref29) { |
| 1232 | var text = _ref29.text, |
| 1233 | style = _ref29.style, |
| 1234 | Tag = _ref29.Tag, |
| 1235 | animKey = _ref29.animKey; |
| 1236 | var CHAR_DURATION = 0.5; |
| 1237 | var CHAR_DELAY = 0.05; |
| 1238 | return /*#__PURE__*/React.createElement(Tag, { |
| 1239 | style: _objectSpread(_objectSpread({}, style), {}, { |
| 1240 | overflow: 'hidden' |
| 1241 | }), |
| 1242 | key: animKey |
| 1243 | }, text.split('').map(function (char, i) { |
| 1244 | return /*#__PURE__*/React.createElement("span", { |
| 1245 | key: i, |
| 1246 | style: { |
| 1247 | display: 'inline-block', |
| 1248 | whiteSpace: 'pre', |
| 1249 | opacity: 0, |
| 1250 | animation: "frblSlideDown ".concat(CHAR_DURATION, "s forwards"), |
| 1251 | animationDelay: "".concat(i * CHAR_DELAY, "s") |
| 1252 | } |
| 1253 | }, char); |
| 1254 | })); |
| 1255 | } |
| 1256 | }, |
| 1257 | 'shuffle-text': { |
| 1258 | duration: function duration(text) { |
| 1259 | return (text.replace(/ /g, '').length * 2 + 15) * 30; |
| 1260 | }, |
| 1261 | render: function ShuffleTextRender(_ref30) { |
| 1262 | var text = _ref30.text, |
| 1263 | style = _ref30.style, |
| 1264 | Tag = _ref30.Tag, |
| 1265 | animKey = _ref30.animKey; |
| 1266 | var _wp$element5 = wp.element, |
| 1267 | useEffect = _wp$element5.useEffect, |
| 1268 | useRef = _wp$element5.useRef; |
| 1269 | var SYMBOLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()'; |
| 1270 | var containerRef = useRef(null); |
| 1271 | useEffect(function () { |
| 1272 | var el = containerRef.current; |
| 1273 | if (!el) return; |
| 1274 | el.innerHTML = ''; |
| 1275 | var chars = text.split(''); |
| 1276 | var spanList = chars.map(function (char) { |
| 1277 | var span = document.createElement('span'); |
| 1278 | span.className = 'frbl-char'; |
| 1279 | el.appendChild(span); |
| 1280 | return { |
| 1281 | el: span, |
| 1282 | char: char, |
| 1283 | isSpace: char === ' ' |
| 1284 | }; |
| 1285 | }); |
| 1286 | var frame = 0; |
| 1287 | var rafId; |
| 1288 | var timerId; |
| 1289 | function update() { |
| 1290 | var allDone = true; |
| 1291 | spanList.forEach(function (item, i) { |
| 1292 | if (item.isSpace) { |
| 1293 | item.el.textContent = ' '; |
| 1294 | return; |
| 1295 | } |
| 1296 | var startFrame = i * 2; |
| 1297 | var endFrame = startFrame + 15; |
| 1298 | if (frame < startFrame) { |
| 1299 | allDone = false; |
| 1300 | item.el.textContent = ''; |
| 1301 | } else if (frame < endFrame) { |
| 1302 | allDone = false; |
| 1303 | item.el.textContent = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]; |
| 1304 | } else { |
| 1305 | item.el.textContent = item.char; |
| 1306 | } |
| 1307 | }); |
| 1308 | frame++; |
| 1309 | if (!allDone) { |
| 1310 | timerId = setTimeout(function () { |
| 1311 | rafId = requestAnimationFrame(update); |
| 1312 | }, 30); |
| 1313 | } |
| 1314 | } |
| 1315 | rafId = requestAnimationFrame(update); |
| 1316 | return function () { |
| 1317 | cancelAnimationFrame(rafId); |
| 1318 | clearTimeout(timerId); |
| 1319 | }; |
| 1320 | }, [animKey, text]); |
| 1321 | return /*#__PURE__*/React.createElement(Tag, { |
| 1322 | ref: containerRef, |
| 1323 | style: style, |
| 1324 | key: animKey |
| 1325 | }); |
| 1326 | } |
| 1327 | }, |
| 1328 | 'typewriter': { |
| 1329 | duration: function duration(text) { |
| 1330 | return text.length * 80; |
| 1331 | }, |
| 1332 | render: function TypewriterRender(_ref31) { |
| 1333 | var text = _ref31.text, |
| 1334 | style = _ref31.style, |
| 1335 | Tag = _ref31.Tag, |
| 1336 | animKey = _ref31.animKey; |
| 1337 | var _wp$element6 = wp.element, |
| 1338 | useEffect = _wp$element6.useEffect, |
| 1339 | useRef = _wp$element6.useRef; |
| 1340 | var containerRef = useRef(null); |
| 1341 | useEffect(function () { |
| 1342 | var el = containerRef.current; |
| 1343 | if (!el) return; |
| 1344 | el.textContent = ''; |
| 1345 | var chars = text.split(''); |
| 1346 | var i = 0; |
| 1347 | var timer; |
| 1348 | function type() { |
| 1349 | if (i < chars.length) { |
| 1350 | el.textContent += chars[i]; |
| 1351 | i++; |
| 1352 | timer = setTimeout(type, 80); |
| 1353 | } |
| 1354 | } |
| 1355 | type(); |
| 1356 | return function () { |
| 1357 | return clearTimeout(timer); |
| 1358 | }; |
| 1359 | }, [animKey, text]); |
| 1360 | return /*#__PURE__*/React.createElement(Tag, { |
| 1361 | ref: containerRef, |
| 1362 | style: style, |
| 1363 | key: animKey |
| 1364 | }); |
| 1365 | } |
| 1366 | } |
| 1367 | }; |
| 1368 | function AnimationPreview(_ref32) { |
| 1369 | var animationType = _ref32.animationType, |
| 1370 | text = _ref32.text, |
| 1371 | style = _ref32.style, |
| 1372 | Tag = _ref32.Tag; |
| 1373 | var _useState = useState(0), |
| 1374 | _useState2 = _slicedToArray(_useState, 2), |
| 1375 | animKey = _useState2[0], |
| 1376 | setAnimKey = _useState2[1]; |
| 1377 | var entry = ANIMATION_PREVIEWS[animationType]; |
| 1378 | useState(function () { |
| 1379 | if (!entry) return; |
| 1380 | var ms = entry.duration(text); |
| 1381 | var t = setTimeout(function () { |
| 1382 | return setAnimKey(function (k) { |
| 1383 | return k + 1; |
| 1384 | }); |
| 1385 | }, ms); |
| 1386 | return function () { |
| 1387 | return clearTimeout(t); |
| 1388 | }; |
| 1389 | }); |
| 1390 | if (!entry) return null; |
| 1391 | return entry.render({ |
| 1392 | text: text, |
| 1393 | style: style, |
| 1394 | Tag: Tag, |
| 1395 | animKey: animKey |
| 1396 | }); |
| 1397 | } |
| 1398 | function TextAnimationEdit(props) { |
| 1399 | var attributes = props.attributes, |
| 1400 | setAttributes = props.setAttributes; |
| 1401 | var _useState3 = useState(false), |
| 1402 | _useState4 = _slicedToArray(_useState3, 2), |
| 1403 | isHovered = _useState4[0], |
| 1404 | setIsHovered = _useState4[1]; |
| 1405 | var _useState5 = useState(true), |
| 1406 | _useState6 = _slicedToArray(_useState5, 2), |
| 1407 | isEditMode = _useState6[0], |
| 1408 | setIsEditMode = _useState6[1]; |
| 1409 | var content = attributes.content, |
| 1410 | htmlTag = attributes.htmlTag, |
| 1411 | animationType = attributes.animationType, |
| 1412 | fontSize = attributes.fontSize, |
| 1413 | fontSizeUnit = attributes.fontSizeUnit, |
| 1414 | fontFamily = attributes.fontFamily, |
| 1415 | fontWeight = attributes.fontWeight, |
| 1416 | fontStyle = attributes.fontStyle, |
| 1417 | lineHeight = attributes.lineHeight, |
| 1418 | letterSpacing = attributes.letterSpacing, |
| 1419 | textAlign = attributes.textAlign, |
| 1420 | textTransform = attributes.textTransform, |
| 1421 | textColorCustom = attributes.textColorCustom, |
| 1422 | textColorHover = attributes.textColorHover, |
| 1423 | width = attributes.width, |
| 1424 | widthUnit = attributes.widthUnit, |
| 1425 | height = attributes.height, |
| 1426 | heightUnit = attributes.heightUnit; |
| 1427 | var fontFamilyOptions = useSelect(function (select) { |
| 1428 | try { |
| 1429 | var settings = select('core').getSettings(); |
| 1430 | var families = settings.fontFamilies || {}; |
| 1431 | var all = [].concat(_toConsumableArray(families.theme || []), _toConsumableArray(families.custom || []), _toConsumableArray(families.default || [])); |
| 1432 | var options = []; |
| 1433 | all.forEach(function (f) { |
| 1434 | if (f && f.name && f.fontFamily) { |
| 1435 | options.push({ |
| 1436 | label: f.name, |
| 1437 | value: f.fontFamily |
| 1438 | }); |
| 1439 | } |
| 1440 | }); |
| 1441 | return options; |
| 1442 | } catch (e) { |
| 1443 | return []; |
| 1444 | } |
| 1445 | }, []); |
| 1446 | var blockProps = useBlockProps({ |
| 1447 | className: 'frbl-text-animation', |
| 1448 | style: { |
| 1449 | fontSize: fontSize ? "".concat(fontSize).concat(fontSizeUnit || 'px') : undefined, |
| 1450 | fontFamily: fontFamily || undefined, |
| 1451 | fontWeight: fontWeight || undefined, |
| 1452 | fontStyle: fontStyle !== 'normal' ? fontStyle : undefined, |
| 1453 | lineHeight: lineHeight || undefined, |
| 1454 | letterSpacing: letterSpacing ? "".concat(letterSpacing, "em") : undefined, |
| 1455 | textAlign: textAlign !== 'left' ? textAlign : undefined, |
| 1456 | textTransform: textTransform !== 'none' ? textTransform : undefined, |
| 1457 | '--frbl-color': textColorCustom || undefined, |
| 1458 | '--frbl-color-hover': textColorHover || undefined, |
| 1459 | color: isHovered && textColorHover ? textColorHover : textColorCustom || undefined, |
| 1460 | transition: 'color 0.3s ease', |
| 1461 | width: width ? "".concat(width).concat(widthUnit || 'px') : undefined, |
| 1462 | height: height ? "".concat(height).concat(heightUnit || 'px') : undefined, |
| 1463 | marginLeft: 0, |
| 1464 | marginRight: 'auto' |
| 1465 | }, |
| 1466 | onMouseEnter: function onMouseEnter() { |
| 1467 | return setIsHovered(true); |
| 1468 | }, |
| 1469 | onMouseLeave: function onMouseLeave() { |
| 1470 | return setIsHovered(false); |
| 1471 | } |
| 1472 | }); |
| 1473 | var hasAnimation = animationType && animationType !== 'none'; |
| 1474 | var showPreview = hasAnimation && !isEditMode; |
| 1475 | var previewStyle = { |
| 1476 | fontSize: blockProps.style.fontSize, |
| 1477 | fontFamily: blockProps.style.fontFamily, |
| 1478 | fontWeight: blockProps.style.fontWeight, |
| 1479 | fontStyle: blockProps.style.fontStyle, |
| 1480 | lineHeight: blockProps.style.lineHeight, |
| 1481 | letterSpacing: blockProps.style.letterSpacing, |
| 1482 | textAlign: blockProps.style.textAlign, |
| 1483 | textTransform: blockProps.style.textTransform, |
| 1484 | color: blockProps.style.color || blockProps.style['--frbl-color'] || undefined, |
| 1485 | width: blockProps.style.width, |
| 1486 | height: blockProps.style.height, |
| 1487 | marginLeft: 0, |
| 1488 | marginRight: 'auto' |
| 1489 | }; |
| 1490 | return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 1491 | title: __('FrontBlocks Animation Text', 'frontblocks'), |
| 1492 | initialOpen: true |
| 1493 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 1494 | label: __('Animation Type', 'frontblocks'), |
| 1495 | value: animationType, |
| 1496 | options: ANIMATION_OPTIONS, |
| 1497 | onChange: function onChange(value) { |
| 1498 | setAttributes({ |
| 1499 | animationType: value |
| 1500 | }); |
| 1501 | if (value && value !== 'none') { |
| 1502 | var entry = ANIMATION_PREVIEWS[value]; |
| 1503 | var text = stripHtml(content) || __('Write your text here…', 'frontblocks'); |
| 1504 | var ms = entry ? entry.duration(text) : 2000; |
| 1505 | setIsEditMode(false); |
| 1506 | setTimeout(function () { |
| 1507 | return setIsEditMode(true); |
| 1508 | }, ms); |
| 1509 | } else { |
| 1510 | setIsEditMode(true); |
| 1511 | } |
| 1512 | } |
| 1513 | }), hasAnimation && /*#__PURE__*/React.createElement(Button, { |
| 1514 | variant: "secondary", |
| 1515 | size: "small", |
| 1516 | onClick: function onClick() { |
| 1517 | var entry = ANIMATION_PREVIEWS[animationType]; |
| 1518 | var text = stripHtml(content) || __('Write your text here…', 'frontblocks'); |
| 1519 | var ms = entry ? entry.duration(text) : 2000; |
| 1520 | setIsEditMode(false); |
| 1521 | setTimeout(function () { |
| 1522 | return setIsEditMode(true); |
| 1523 | }, ms); |
| 1524 | }, |
| 1525 | style: { |
| 1526 | marginTop: '8px', |
| 1527 | width: '100%', |
| 1528 | justifyContent: 'center' |
| 1529 | } |
| 1530 | }, __('▶ Preview animation', 'frontblocks'))), /*#__PURE__*/React.createElement(PanelBody, { |
| 1531 | title: __('Typography', 'frontblocks'), |
| 1532 | initialOpen: false |
| 1533 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 1534 | label: __('HTML Tag', 'frontblocks'), |
| 1535 | value: htmlTag, |
| 1536 | options: TAG_OPTIONS, |
| 1537 | onChange: function onChange(value) { |
| 1538 | return setAttributes({ |
| 1539 | htmlTag: value |
| 1540 | }); |
| 1541 | } |
| 1542 | }), fontFamilyOptions.length > 0 && /*#__PURE__*/React.createElement(SelectControl, { |
| 1543 | label: __('Font Family', 'frontblocks'), |
| 1544 | value: fontFamily, |
| 1545 | options: [{ |
| 1546 | label: __('Default', 'frontblocks'), |
| 1547 | value: '' |
| 1548 | }].concat(_toConsumableArray(fontFamilyOptions)), |
| 1549 | onChange: function onChange(value) { |
| 1550 | return setAttributes({ |
| 1551 | fontFamily: value |
| 1552 | }); |
| 1553 | } |
| 1554 | }), /*#__PURE__*/React.createElement("div", { |
| 1555 | style: { |
| 1556 | marginBottom: '16px' |
| 1557 | } |
| 1558 | }, /*#__PURE__*/React.createElement("p", { |
| 1559 | style: { |
| 1560 | marginTop: 0, |
| 1561 | marginBottom: '8px', |
| 1562 | fontSize: '11px', |
| 1563 | fontWeight: '500', |
| 1564 | textTransform: 'uppercase', |
| 1565 | color: 'rgb(117, 117, 117)' |
| 1566 | } |
| 1567 | }, __('Font Size', 'frontblocks')), /*#__PURE__*/React.createElement("div", { |
| 1568 | style: { |
| 1569 | display: 'flex', |
| 1570 | gap: '8px' |
| 1571 | } |
| 1572 | }, /*#__PURE__*/React.createElement("div", { |
| 1573 | style: { |
| 1574 | flex: 1, |
| 1575 | marginBottom: 0 |
| 1576 | } |
| 1577 | }, /*#__PURE__*/React.createElement(NumberControl, { |
| 1578 | value: fontSize || '', |
| 1579 | onChange: function onChange(value) { |
| 1580 | return setAttributes({ |
| 1581 | fontSize: value ? parseFloat(value) : undefined |
| 1582 | }); |
| 1583 | }, |
| 1584 | min: 1, |
| 1585 | step: 1, |
| 1586 | spinControls: "native", |
| 1587 | hideLabelFromVision: true, |
| 1588 | label: __('Font Size', 'frontblocks') |
| 1589 | })), /*#__PURE__*/React.createElement("div", { |
| 1590 | style: { |
| 1591 | width: '80px', |
| 1592 | flexShrink: 0, |
| 1593 | marginBottom: 0 |
| 1594 | } |
| 1595 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 1596 | value: fontSizeUnit, |
| 1597 | options: FONT_SIZE_UNITS, |
| 1598 | onChange: function onChange(value) { |
| 1599 | return setAttributes({ |
| 1600 | fontSizeUnit: value |
| 1601 | }); |
| 1602 | }, |
| 1603 | hideLabelFromVision: true, |
| 1604 | label: __('Unit', 'frontblocks'), |
| 1605 | __nextHasNoMarginBottom: true |
| 1606 | })))), /*#__PURE__*/React.createElement(SelectControl, { |
| 1607 | label: __('Font Weight', 'frontblocks'), |
| 1608 | value: fontWeight, |
| 1609 | options: [{ |
| 1610 | label: __('Default', 'frontblocks'), |
| 1611 | value: '' |
| 1612 | }].concat(FONT_WEIGHT_OPTIONS), |
| 1613 | onChange: function onChange(value) { |
| 1614 | return setAttributes({ |
| 1615 | fontWeight: value |
| 1616 | }); |
| 1617 | } |
| 1618 | }), /*#__PURE__*/React.createElement(SelectControl, { |
| 1619 | label: __('Font Style', 'frontblocks'), |
| 1620 | value: fontStyle, |
| 1621 | options: FONT_STYLE_OPTIONS, |
| 1622 | onChange: function onChange(value) { |
| 1623 | return setAttributes({ |
| 1624 | fontStyle: value |
| 1625 | }); |
| 1626 | } |
| 1627 | }), /*#__PURE__*/React.createElement(ToggleGroupControl, { |
| 1628 | label: __('Text Align', 'frontblocks'), |
| 1629 | value: textAlign, |
| 1630 | onChange: function onChange(value) { |
| 1631 | var newAlign = value || 'left'; |
| 1632 | var updates = { |
| 1633 | textAlign: newAlign |
| 1634 | }; |
| 1635 | if (newAlign !== 'left') { |
| 1636 | updates.width = 100; |
| 1637 | updates.widthUnit = '%'; |
| 1638 | } |
| 1639 | setAttributes(updates); |
| 1640 | }, |
| 1641 | isBlock: true |
| 1642 | }, /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1643 | value: "left", |
| 1644 | icon: ALIGN_LEFT_ICON, |
| 1645 | label: __('Left', 'frontblocks') |
| 1646 | }), /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1647 | value: "center", |
| 1648 | icon: ALIGN_CENTER_ICON, |
| 1649 | label: __('Center', 'frontblocks') |
| 1650 | }), /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1651 | value: "right", |
| 1652 | icon: ALIGN_RIGHT_ICON, |
| 1653 | label: __('Right', 'frontblocks') |
| 1654 | }), /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1655 | value: "justify", |
| 1656 | icon: ALIGN_JUSTIFY_ICON, |
| 1657 | label: __('Justify', 'frontblocks') |
| 1658 | })), /*#__PURE__*/React.createElement(ToggleGroupControl, { |
| 1659 | label: __('Text Transform', 'frontblocks'), |
| 1660 | value: textTransform, |
| 1661 | onChange: function onChange(value) { |
| 1662 | return setAttributes({ |
| 1663 | textTransform: value || 'none' |
| 1664 | }); |
| 1665 | }, |
| 1666 | isBlock: true |
| 1667 | }, /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1668 | value: "none", |
| 1669 | icon: TRANSFORM_NONE_ICON, |
| 1670 | label: __('None', 'frontblocks') |
| 1671 | }), /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1672 | value: "uppercase", |
| 1673 | icon: TRANSFORM_UPPERCASE_ICON, |
| 1674 | label: __('Uppercase', 'frontblocks') |
| 1675 | }), /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1676 | value: "lowercase", |
| 1677 | icon: TRANSFORM_LOWERCASE_ICON, |
| 1678 | label: __('Lowercase', 'frontblocks') |
| 1679 | }), /*#__PURE__*/React.createElement(ToggleGroupControlOptionIcon, { |
| 1680 | value: "capitalize", |
| 1681 | icon: TRANSFORM_CAPITALIZE_ICON, |
| 1682 | label: __('Capitalize', 'frontblocks') |
| 1683 | })), /*#__PURE__*/React.createElement(RangeControl, { |
| 1684 | label: __('Line Height', 'frontblocks'), |
| 1685 | value: lineHeight, |
| 1686 | onChange: function onChange(value) { |
| 1687 | return setAttributes({ |
| 1688 | lineHeight: value |
| 1689 | }); |
| 1690 | }, |
| 1691 | min: 0.5, |
| 1692 | max: 4, |
| 1693 | step: 0.05, |
| 1694 | initialPosition: 1.5, |
| 1695 | allowReset: true, |
| 1696 | resetFallbackValue: undefined |
| 1697 | }), /*#__PURE__*/React.createElement(RangeControl, { |
| 1698 | label: __('Letter Spacing (em)', 'frontblocks'), |
| 1699 | value: letterSpacing, |
| 1700 | onChange: function onChange(value) { |
| 1701 | return setAttributes({ |
| 1702 | letterSpacing: value |
| 1703 | }); |
| 1704 | }, |
| 1705 | min: -0.2, |
| 1706 | max: 1, |
| 1707 | step: 0.01, |
| 1708 | initialPosition: 0, |
| 1709 | allowReset: true, |
| 1710 | resetFallbackValue: undefined |
| 1711 | })), /*#__PURE__*/React.createElement(PanelBody, { |
| 1712 | title: __('Dimensions', 'frontblocks'), |
| 1713 | initialOpen: false |
| 1714 | }, /*#__PURE__*/React.createElement("div", { |
| 1715 | style: { |
| 1716 | marginBottom: '16px' |
| 1717 | } |
| 1718 | }, /*#__PURE__*/React.createElement("p", { |
| 1719 | style: { |
| 1720 | marginTop: 0, |
| 1721 | marginBottom: '8px', |
| 1722 | fontSize: '11px', |
| 1723 | fontWeight: '500', |
| 1724 | textTransform: 'uppercase', |
| 1725 | color: 'rgb(117, 117, 117)' |
| 1726 | } |
| 1727 | }, __('Width', 'frontblocks')), /*#__PURE__*/React.createElement("div", { |
| 1728 | style: { |
| 1729 | display: 'flex', |
| 1730 | gap: '8px' |
| 1731 | } |
| 1732 | }, /*#__PURE__*/React.createElement("div", { |
| 1733 | style: { |
| 1734 | flex: 1 |
| 1735 | } |
| 1736 | }, /*#__PURE__*/React.createElement(NumberControl, { |
| 1737 | value: width || '', |
| 1738 | onChange: function onChange(value) { |
| 1739 | return setAttributes({ |
| 1740 | width: value ? parseFloat(value) : undefined |
| 1741 | }); |
| 1742 | }, |
| 1743 | min: 0, |
| 1744 | step: 1, |
| 1745 | spinControls: "native", |
| 1746 | hideLabelFromVision: true, |
| 1747 | label: __('Width', 'frontblocks'), |
| 1748 | placeholder: "auto" |
| 1749 | })), /*#__PURE__*/React.createElement("div", { |
| 1750 | style: { |
| 1751 | width: '80px', |
| 1752 | flexShrink: 0 |
| 1753 | } |
| 1754 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 1755 | value: widthUnit, |
| 1756 | options: [{ |
| 1757 | label: 'px', |
| 1758 | value: 'px' |
| 1759 | }, { |
| 1760 | label: '%', |
| 1761 | value: '%' |
| 1762 | }, { |
| 1763 | label: 'rem', |
| 1764 | value: 'rem' |
| 1765 | }, { |
| 1766 | label: 'em', |
| 1767 | value: 'em' |
| 1768 | }, { |
| 1769 | label: 'vw', |
| 1770 | value: 'vw' |
| 1771 | }, { |
| 1772 | label: 'ch', |
| 1773 | value: 'ch' |
| 1774 | }], |
| 1775 | onChange: function onChange(value) { |
| 1776 | return setAttributes({ |
| 1777 | widthUnit: value |
| 1778 | }); |
| 1779 | }, |
| 1780 | hideLabelFromVision: true, |
| 1781 | label: __('Unit', 'frontblocks'), |
| 1782 | __nextHasNoMarginBottom: true |
| 1783 | })))), /*#__PURE__*/React.createElement("div", { |
| 1784 | style: { |
| 1785 | marginBottom: '8px' |
| 1786 | } |
| 1787 | }, /*#__PURE__*/React.createElement("p", { |
| 1788 | style: { |
| 1789 | marginTop: 0, |
| 1790 | marginBottom: '8px', |
| 1791 | fontSize: '11px', |
| 1792 | fontWeight: '500', |
| 1793 | textTransform: 'uppercase', |
| 1794 | color: 'rgb(117, 117, 117)' |
| 1795 | } |
| 1796 | }, __('Height', 'frontblocks')), /*#__PURE__*/React.createElement("div", { |
| 1797 | style: { |
| 1798 | display: 'flex', |
| 1799 | gap: '8px' |
| 1800 | } |
| 1801 | }, /*#__PURE__*/React.createElement("div", { |
| 1802 | style: { |
| 1803 | flex: 1 |
| 1804 | } |
| 1805 | }, /*#__PURE__*/React.createElement(NumberControl, { |
| 1806 | value: height || '', |
| 1807 | onChange: function onChange(value) { |
| 1808 | return setAttributes({ |
| 1809 | height: value ? parseFloat(value) : undefined |
| 1810 | }); |
| 1811 | }, |
| 1812 | min: 0, |
| 1813 | step: 1, |
| 1814 | spinControls: "native", |
| 1815 | hideLabelFromVision: true, |
| 1816 | label: __('Height', 'frontblocks'), |
| 1817 | placeholder: "auto" |
| 1818 | })), /*#__PURE__*/React.createElement("div", { |
| 1819 | style: { |
| 1820 | width: '80px', |
| 1821 | flexShrink: 0 |
| 1822 | } |
| 1823 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 1824 | value: heightUnit, |
| 1825 | options: [{ |
| 1826 | label: 'px', |
| 1827 | value: 'px' |
| 1828 | }, { |
| 1829 | label: '%', |
| 1830 | value: '%' |
| 1831 | }, { |
| 1832 | label: 'rem', |
| 1833 | value: 'rem' |
| 1834 | }, { |
| 1835 | label: 'em', |
| 1836 | value: 'em' |
| 1837 | }, { |
| 1838 | label: 'vh', |
| 1839 | value: 'vh' |
| 1840 | }], |
| 1841 | onChange: function onChange(value) { |
| 1842 | return setAttributes({ |
| 1843 | heightUnit: value |
| 1844 | }); |
| 1845 | }, |
| 1846 | hideLabelFromVision: true, |
| 1847 | label: __('Unit', 'frontblocks'), |
| 1848 | __nextHasNoMarginBottom: true |
| 1849 | }))))), /*#__PURE__*/React.createElement(PanelColorSettings, { |
| 1850 | title: __('Color', 'frontblocks'), |
| 1851 | initialOpen: false, |
| 1852 | colorSettings: [{ |
| 1853 | label: __('Text Color', 'frontblocks'), |
| 1854 | value: textColorCustom, |
| 1855 | onChange: function onChange(value) { |
| 1856 | return setAttributes({ |
| 1857 | textColorCustom: value || '' |
| 1858 | }); |
| 1859 | } |
| 1860 | }, { |
| 1861 | label: __('Text Color Hover', 'frontblocks'), |
| 1862 | value: textColorHover, |
| 1863 | onChange: function onChange(value) { |
| 1864 | return setAttributes({ |
| 1865 | textColorHover: value || '' |
| 1866 | }); |
| 1867 | } |
| 1868 | }] |
| 1869 | })), showPreview ? /*#__PURE__*/React.createElement(AnimationPreview, { |
| 1870 | animationType: animationType, |
| 1871 | text: stripHtml(content) || __('Write your text here…', 'frontblocks'), |
| 1872 | style: previewStyle, |
| 1873 | Tag: htmlTag |
| 1874 | }) : /*#__PURE__*/React.createElement(RichText, _extends({}, blockProps, { |
| 1875 | tagName: htmlTag, |
| 1876 | value: content, |
| 1877 | onChange: function onChange(value) { |
| 1878 | return setAttributes({ |
| 1879 | content: value |
| 1880 | }); |
| 1881 | }, |
| 1882 | placeholder: __('Write your text here…', 'frontblocks'), |
| 1883 | allowedFormats: ['core/bold', 'core/italic', 'core/link', 'core/underline', 'core/strikethrough', 'core/code'] |
| 1884 | }))); |
| 1885 | } |
| 1886 | registerBlockType('frontblocks/text-animation', { |
| 1887 | title: __('FrontBlocks - Text Animation', 'frontblocks'), |
| 1888 | description: __('Animated text block with typography controls. Add animation effects from the sidebar.', 'frontblocks'), |
| 1889 | category: 'text', |
| 1890 | icon: 'editor-textcolor', |
| 1891 | keywords: [__('text', 'frontblocks'), __('animation', 'frontblocks'), __('heading', 'frontblocks'), __('typography', 'frontblocks')], |
| 1892 | supports: { |
| 1893 | anchor: true, |
| 1894 | className: true, |
| 1895 | color: false, |
| 1896 | spacing: { |
| 1897 | margin: true, |
| 1898 | padding: true |
| 1899 | } |
| 1900 | }, |
| 1901 | attributes: { |
| 1902 | content: { |
| 1903 | type: 'string', |
| 1904 | source: 'html', |
| 1905 | selector: '.frbl-text-animation', |
| 1906 | default: '' |
| 1907 | }, |
| 1908 | htmlTag: { |
| 1909 | type: 'string', |
| 1910 | default: 'h2' |
| 1911 | }, |
| 1912 | animationType: { |
| 1913 | type: 'string', |
| 1914 | default: 'none' |
| 1915 | }, |
| 1916 | fontSize: { |
| 1917 | type: 'number', |
| 1918 | default: undefined |
| 1919 | }, |
| 1920 | fontSizeUnit: { |
| 1921 | type: 'string', |
| 1922 | default: 'px' |
| 1923 | }, |
| 1924 | fontFamily: { |
| 1925 | type: 'string', |
| 1926 | default: '' |
| 1927 | }, |
| 1928 | fontWeight: { |
| 1929 | type: 'string', |
| 1930 | default: '' |
| 1931 | }, |
| 1932 | fontStyle: { |
| 1933 | type: 'string', |
| 1934 | default: 'normal' |
| 1935 | }, |
| 1936 | lineHeight: { |
| 1937 | type: 'number', |
| 1938 | default: undefined |
| 1939 | }, |
| 1940 | letterSpacing: { |
| 1941 | type: 'number', |
| 1942 | default: undefined |
| 1943 | }, |
| 1944 | textAlign: { |
| 1945 | type: 'string', |
| 1946 | default: 'left' |
| 1947 | }, |
| 1948 | textTransform: { |
| 1949 | type: 'string', |
| 1950 | default: 'none' |
| 1951 | }, |
| 1952 | textColorCustom: { |
| 1953 | type: 'string', |
| 1954 | default: '' |
| 1955 | }, |
| 1956 | textColorHover: { |
| 1957 | type: 'string', |
| 1958 | default: '' |
| 1959 | }, |
| 1960 | width: { |
| 1961 | type: 'number', |
| 1962 | default: undefined |
| 1963 | }, |
| 1964 | widthUnit: { |
| 1965 | type: 'string', |
| 1966 | default: 'px' |
| 1967 | }, |
| 1968 | height: { |
| 1969 | type: 'number', |
| 1970 | default: undefined |
| 1971 | }, |
| 1972 | heightUnit: { |
| 1973 | type: 'string', |
| 1974 | default: 'px' |
| 1975 | } |
| 1976 | }, |
| 1977 | edit: TextAnimationEdit, |
| 1978 | save: function save(_ref33) { |
| 1979 | var attributes = _ref33.attributes; |
| 1980 | var content = attributes.content, |
| 1981 | Tag = attributes.htmlTag, |
| 1982 | animationType = attributes.animationType, |
| 1983 | fontSize = attributes.fontSize, |
| 1984 | fontSizeUnit = attributes.fontSizeUnit, |
| 1985 | fontFamily = attributes.fontFamily, |
| 1986 | fontWeight = attributes.fontWeight, |
| 1987 | fontStyle = attributes.fontStyle, |
| 1988 | lineHeight = attributes.lineHeight, |
| 1989 | letterSpacing = attributes.letterSpacing, |
| 1990 | textAlign = attributes.textAlign, |
| 1991 | textTransform = attributes.textTransform, |
| 1992 | textColorCustom = attributes.textColorCustom, |
| 1993 | textColorHover = attributes.textColorHover, |
| 1994 | width = attributes.width, |
| 1995 | widthUnit = attributes.widthUnit, |
| 1996 | height = attributes.height, |
| 1997 | heightUnit = attributes.heightUnit; |
| 1998 | var style = {}; |
| 1999 | if (fontSize) style.fontSize = "".concat(fontSize).concat(fontSizeUnit || 'px'); |
| 2000 | if (fontFamily) style.fontFamily = fontFamily; |
| 2001 | if (fontWeight) style.fontWeight = fontWeight; |
| 2002 | if (fontStyle && fontStyle !== 'normal') style.fontStyle = fontStyle; |
| 2003 | if (lineHeight) style.lineHeight = lineHeight; |
| 2004 | if (letterSpacing) style.letterSpacing = "".concat(letterSpacing, "em"); |
| 2005 | if (textAlign && textAlign !== 'left') style.textAlign = textAlign; |
| 2006 | if (textTransform && textTransform !== 'none') style.textTransform = textTransform; |
| 2007 | if (textColorCustom) style['--frbl-color'] = textColorCustom; |
| 2008 | if (textColorHover) style['--frbl-color-hover'] = textColorHover; |
| 2009 | if (width) style.width = "".concat(width).concat(widthUnit || 'px'); |
| 2010 | if (height) style.height = "".concat(height).concat(heightUnit || 'px'); |
| 2011 | var blockProps = wp.blockEditor.useBlockProps.save({ |
| 2012 | className: 'frbl-text-animation', |
| 2013 | style: style, |
| 2014 | 'data-animation': animationType && animationType !== 'none' ? animationType : undefined |
| 2015 | }); |
| 2016 | return /*#__PURE__*/React.createElement(Tag, blockProps, /*#__PURE__*/React.createElement(RichText.Content, { |
| 2017 | value: content |
| 2018 | })); |
| 2019 | } |
| 2020 | }); |
| 2021 | |
| 2022 | // ── Extend core/paragraph and core/heading with text animation panel ───────── |
| 2023 | |
| 2024 | var FRBL_TA_ATTR = { |
| 2025 | frblTextAnimation: { |
| 2026 | type: 'string', |
| 2027 | default: 'none' |
| 2028 | }, |
| 2029 | frblTextAnimationLoop: { |
| 2030 | type: 'boolean', |
| 2031 | default: false |
| 2032 | } |
| 2033 | }; |
| 2034 | |
| 2035 | // Filter for blocks registered after our script (future-proof). |
| 2036 | wp.hooks.addFilter('blocks.registerBlockType', 'frontblocks/text-animation-native-attrs', function (settings, name) { |
| 2037 | if ('core/paragraph' !== name && 'core/heading' !== name) { |
| 2038 | return settings; |
| 2039 | } |
| 2040 | settings.attributes = Object.assign({}, settings.attributes, FRBL_TA_ATTR); |
| 2041 | return settings; |
| 2042 | }); |
| 2043 | |
| 2044 | // Patch already-registered blocks: core blocks register before plugin scripts run, |
| 2045 | // so the filter above misses them. addBlockTypes merges into the existing block type |
| 2046 | // definition so the serializer includes frblTextAnimation when saving. |
| 2047 | wp.domReady(function () { |
| 2048 | ['core/paragraph', 'core/heading'].forEach(function (blockName) { |
| 2049 | try { |
| 2050 | var blockType = wp.data.select('core/blocks').getBlockType(blockName); |
| 2051 | if (blockType && !blockType.attributes.frblTextAnimation) { |
| 2052 | wp.data.dispatch('core/blocks').addBlockTypes(Object.assign({}, blockType, { |
| 2053 | attributes: Object.assign({}, blockType.attributes, FRBL_TA_ATTR) |
| 2054 | })); |
| 2055 | } |
| 2056 | } catch (e) {} |
| 2057 | }); |
| 2058 | }); |
| 2059 | function addTextAnimationPanelToNativeBlocks(BlockEdit) { |
| 2060 | return function (props) { |
| 2061 | if (props.name !== 'core/paragraph' && props.name !== 'core/heading') { |
| 2062 | return /*#__PURE__*/React.createElement(BlockEdit, props); |
| 2063 | } |
| 2064 | var _props$attributes = props.attributes, |
| 2065 | _props$attributes$frb = _props$attributes.frblTextAnimation, |
| 2066 | frblTextAnimation = _props$attributes$frb === void 0 ? 'none' : _props$attributes$frb, |
| 2067 | _props$attributes$frb2 = _props$attributes.frblTextAnimationLoop, |
| 2068 | frblTextAnimationLoop = _props$attributes$frb2 === void 0 ? false : _props$attributes$frb2; |
| 2069 | var _useState7 = useState(true), |
| 2070 | _useState8 = _slicedToArray(_useState7, 2), |
| 2071 | isEditMode = _useState8[0], |
| 2072 | setIsEditMode = _useState8[1]; |
| 2073 | var hasAnimation = frblTextAnimation && 'none' !== frblTextAnimation; |
| 2074 | var showPreview = hasAnimation && !isEditMode; |
| 2075 | var Tag = 'core/heading' === props.name ? 'h' + (props.attributes.level || 2) : 'p'; |
| 2076 | var rawText = stripHtml(props.attributes.content || '') || __('Write your text here…', 'frontblocks'); |
| 2077 | var playPreview = function playPreview(value) { |
| 2078 | var entry = ANIMATION_PREVIEWS[value]; |
| 2079 | var ms = entry ? entry.duration(rawText) : 2000; |
| 2080 | setIsEditMode(false); |
| 2081 | setTimeout(function () { |
| 2082 | return setIsEditMode(true); |
| 2083 | }, ms); |
| 2084 | }; |
| 2085 | return /*#__PURE__*/React.createElement(Fragment, null, showPreview ? /*#__PURE__*/React.createElement(AnimationPreview, { |
| 2086 | animationType: frblTextAnimation, |
| 2087 | text: rawText, |
| 2088 | style: {}, |
| 2089 | Tag: Tag |
| 2090 | }) : /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 2091 | title: __('FrontBlocks - Text Animation', 'frontblocks'), |
| 2092 | initialOpen: false |
| 2093 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 2094 | label: __('Animation Type', 'frontblocks'), |
| 2095 | value: frblTextAnimation, |
| 2096 | options: ANIMATION_OPTIONS, |
| 2097 | onChange: function onChange(value) { |
| 2098 | props.setAttributes({ |
| 2099 | frblTextAnimation: value |
| 2100 | }); |
| 2101 | if (value && 'none' !== value) { |
| 2102 | playPreview(value); |
| 2103 | } else { |
| 2104 | setIsEditMode(true); |
| 2105 | } |
| 2106 | } |
| 2107 | }), hasAnimation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleControl, { |
| 2108 | label: __('Loop animation', 'frontblocks'), |
| 2109 | checked: frblTextAnimationLoop, |
| 2110 | onChange: function onChange(value) { |
| 2111 | return props.setAttributes({ |
| 2112 | frblTextAnimationLoop: value |
| 2113 | }); |
| 2114 | }, |
| 2115 | style: { |
| 2116 | marginTop: '8px' |
| 2117 | } |
| 2118 | }), /*#__PURE__*/React.createElement(Button, { |
| 2119 | variant: "secondary", |
| 2120 | size: "small", |
| 2121 | onClick: function onClick() { |
| 2122 | return playPreview(frblTextAnimation); |
| 2123 | }, |
| 2124 | style: { |
| 2125 | marginTop: '4px', |
| 2126 | width: '100%', |
| 2127 | justifyContent: 'center' |
| 2128 | } |
| 2129 | }, __('▶ Preview animation', 'frontblocks')))))); |
| 2130 | }; |
| 2131 | } |
| 2132 | wp.hooks.addFilter('editor.BlockEdit', 'frontblocks/text-animation-native-panel', addTextAnimationPanelToNativeBlocks); |
| 2133 |