frontblocks-advanced-option.js
10 months ago
frontblocks-animation-option.js
11 months ago
frontblocks-animations-min.js
11 months ago
frontblocks-animations.css
11 months ago
frontblocks-animations.js
11 months ago
frontblocks-carousel-min.js
11 months ago
frontblocks-carousel.css
11 months ago
frontblocks-carousel.js
11 months ago
frontblocks-gallery-min.js
11 months ago
frontblocks-gallery-option.js
11 months ago
frontblocks-gallery.css
11 months ago
frontblocks-gallery.js
11 months ago
frontblocks-insert-post-option.js
11 months ago
frontblocks-insert-post.css
11 months ago
frontblocks-sticky-column-min.js
11 months ago
frontblocks-sticky-column-option.js
11 months ago
frontblocks-sticky-column.css
11 months ago
frontblocks-sticky-column.js
11 months ago
glide.min.js
1 year ago
masonry.min.js
11 months ago
frontblocks-animation-option.js
624 lines
| 1 | "use strict"; |
| 2 | |
| 3 | function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; } |
| 4 | 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; } } |
| 5 | 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; } |
| 6 | // Add custom animation controls to any block based on Animate.css |
| 7 | var addFilter = wp.hooks.addFilter; |
| 8 | var _wp$element = wp.element, |
| 9 | Fragment = _wp$element.Fragment, |
| 10 | useEffect = _wp$element.useEffect, |
| 11 | useRef = _wp$element.useRef; |
| 12 | var InspectorControls = wp.blockEditor.InspectorControls; |
| 13 | var _wp$components = wp.components, |
| 14 | SelectControl = _wp$components.SelectControl, |
| 15 | RangeControl = _wp$components.RangeControl, |
| 16 | ToggleControl = _wp$components.ToggleControl, |
| 17 | PanelBody = _wp$components.PanelBody, |
| 18 | Placeholder = _wp$components.Placeholder, |
| 19 | Disabled = _wp$components.Disabled, |
| 20 | Button = _wp$components.Button; |
| 21 | var __ = wp.i18n.__; |
| 22 | |
| 23 | // Organizar las animaciones por categorías |
| 24 | var animationOptions = [{ |
| 25 | label: __('None', 'frontblocks'), |
| 26 | value: '' |
| 27 | }, { |
| 28 | label: __('Attention Seekers', 'frontblocks'), |
| 29 | options: [{ |
| 30 | label: 'bounce', |
| 31 | value: 'bounce' |
| 32 | }, { |
| 33 | label: 'flash', |
| 34 | value: 'flash' |
| 35 | }, { |
| 36 | label: 'pulse', |
| 37 | value: 'pulse' |
| 38 | }, { |
| 39 | label: 'rubberBand', |
| 40 | value: 'rubberBand' |
| 41 | }, { |
| 42 | label: 'shakeX', |
| 43 | value: 'shakeX' |
| 44 | }, { |
| 45 | label: 'shakeY', |
| 46 | value: 'shakeY' |
| 47 | }, { |
| 48 | label: 'headShake', |
| 49 | value: 'headShake' |
| 50 | }, { |
| 51 | label: 'swing', |
| 52 | value: 'swing' |
| 53 | }, { |
| 54 | label: 'tada', |
| 55 | value: 'tada' |
| 56 | }, { |
| 57 | label: 'wobble', |
| 58 | value: 'wobble' |
| 59 | }, { |
| 60 | label: 'jello', |
| 61 | value: 'jello' |
| 62 | }, { |
| 63 | label: 'heartBeat', |
| 64 | value: 'heartBeat' |
| 65 | }] |
| 66 | }, { |
| 67 | label: __('Back Entrances', 'frontblocks'), |
| 68 | options: [{ |
| 69 | label: 'backInDown', |
| 70 | value: 'backInDown' |
| 71 | }, { |
| 72 | label: 'backInLeft', |
| 73 | value: 'backInLeft' |
| 74 | }, { |
| 75 | label: 'backInRight', |
| 76 | value: 'backInRight' |
| 77 | }, { |
| 78 | label: 'backInUp', |
| 79 | value: 'backInUp' |
| 80 | }] |
| 81 | }, { |
| 82 | label: __('Back Exits', 'frontblocks'), |
| 83 | options: [{ |
| 84 | label: 'backOutDown', |
| 85 | value: 'backOutDown' |
| 86 | }, { |
| 87 | label: 'backOutLeft', |
| 88 | value: 'backOutLeft' |
| 89 | }, { |
| 90 | label: 'backOutRight', |
| 91 | value: 'backOutRight' |
| 92 | }, { |
| 93 | label: 'backOutUp', |
| 94 | value: 'backOutUp' |
| 95 | }] |
| 96 | }, { |
| 97 | label: __('Bouncing Entrances', 'frontblocks'), |
| 98 | options: [{ |
| 99 | label: 'bounceIn', |
| 100 | value: 'bounceIn' |
| 101 | }, { |
| 102 | label: 'bounceInDown', |
| 103 | value: 'bounceInDown' |
| 104 | }, { |
| 105 | label: 'bounceInLeft', |
| 106 | value: 'bounceInLeft' |
| 107 | }, { |
| 108 | label: 'bounceInRight', |
| 109 | value: 'bounceInRight' |
| 110 | }, { |
| 111 | label: 'bounceInUp', |
| 112 | value: 'bounceInUp' |
| 113 | }] |
| 114 | }, { |
| 115 | label: __('Bouncing Exits', 'frontblocks'), |
| 116 | options: [{ |
| 117 | label: 'bounceOut', |
| 118 | value: 'bounceOut' |
| 119 | }, { |
| 120 | label: 'bounceOutDown', |
| 121 | value: 'bounceOutDown' |
| 122 | }, { |
| 123 | label: 'bounceOutLeft', |
| 124 | value: 'bounceOutLeft' |
| 125 | }, { |
| 126 | label: 'bounceOutRight', |
| 127 | value: 'bounceOutRight' |
| 128 | }, { |
| 129 | label: 'bounceOutUp', |
| 130 | value: 'bounceOutUp' |
| 131 | }] |
| 132 | }, { |
| 133 | label: __('Fading Entrances', 'frontblocks'), |
| 134 | options: [{ |
| 135 | label: 'fadeIn', |
| 136 | value: 'fadeIn' |
| 137 | }, { |
| 138 | label: 'fadeInDown', |
| 139 | value: 'fadeInDown' |
| 140 | }, { |
| 141 | label: 'fadeInDownBig', |
| 142 | value: 'fadeInDownBig' |
| 143 | }, { |
| 144 | label: 'fadeInLeft', |
| 145 | value: 'fadeInLeft' |
| 146 | }, { |
| 147 | label: 'fadeInLeftBig', |
| 148 | value: 'fadeInLeftBig' |
| 149 | }, { |
| 150 | label: 'fadeInRight', |
| 151 | value: 'fadeInRight' |
| 152 | }, { |
| 153 | label: 'fadeInRightBig', |
| 154 | value: 'fadeInRightBig' |
| 155 | }, { |
| 156 | label: 'fadeInUp', |
| 157 | value: 'fadeInUp' |
| 158 | }, { |
| 159 | label: 'fadeInUpBig', |
| 160 | value: 'fadeInUpBig' |
| 161 | }, { |
| 162 | label: 'fadeInTopLeft', |
| 163 | value: 'fadeInTopLeft' |
| 164 | }, { |
| 165 | label: 'fadeInTopRight', |
| 166 | value: 'fadeInTopRight' |
| 167 | }, { |
| 168 | label: 'fadeInBottomLeft', |
| 169 | value: 'fadeInBottomLeft' |
| 170 | }, { |
| 171 | label: 'fadeInBottomRight', |
| 172 | value: 'fadeInBottomRight' |
| 173 | }] |
| 174 | }, { |
| 175 | label: __('Fading Exits', 'frontblocks'), |
| 176 | options: [{ |
| 177 | label: 'fadeOut', |
| 178 | value: 'fadeOut' |
| 179 | }, { |
| 180 | label: 'fadeOutDown', |
| 181 | value: 'fadeOutDown' |
| 182 | }, { |
| 183 | label: 'fadeOutDownBig', |
| 184 | value: 'fadeOutDownBig' |
| 185 | }, { |
| 186 | label: 'fadeOutLeft', |
| 187 | value: 'fadeOutLeft' |
| 188 | }, { |
| 189 | label: 'fadeOutLeftBig', |
| 190 | value: 'fadeOutLeftBig' |
| 191 | }, { |
| 192 | label: 'fadeOutRight', |
| 193 | value: 'fadeOutRight' |
| 194 | }, { |
| 195 | label: 'fadeOutRightBig', |
| 196 | value: 'fadeOutRightBig' |
| 197 | }, { |
| 198 | label: 'fadeOutUp', |
| 199 | value: 'fadeOutUp' |
| 200 | }, { |
| 201 | label: 'fadeOutUpBig', |
| 202 | value: 'fadeOutUpBig' |
| 203 | }, { |
| 204 | label: 'fadeOutTopLeft', |
| 205 | value: 'fadeOutTopLeft' |
| 206 | }, { |
| 207 | label: 'fadeOutTopRight', |
| 208 | value: 'fadeOutTopRight' |
| 209 | }, { |
| 210 | label: 'fadeOutBottomRight', |
| 211 | value: 'fadeOutBottomRight' |
| 212 | }, { |
| 213 | label: 'fadeOutBottomLeft', |
| 214 | value: 'fadeOutBottomLeft' |
| 215 | }] |
| 216 | }, { |
| 217 | label: __('Flippers', 'frontblocks'), |
| 218 | options: [{ |
| 219 | label: 'flip', |
| 220 | value: 'flip' |
| 221 | }, { |
| 222 | label: 'flipInX', |
| 223 | value: 'flipInX' |
| 224 | }, { |
| 225 | label: 'flipInY', |
| 226 | value: 'flipInY' |
| 227 | }, { |
| 228 | label: 'flipOutX', |
| 229 | value: 'flipOutX' |
| 230 | }, { |
| 231 | label: 'flipOutY', |
| 232 | value: 'flipOutY' |
| 233 | }] |
| 234 | }, { |
| 235 | label: __('Lightspeed', 'frontblocks'), |
| 236 | options: [{ |
| 237 | label: 'lightSpeedInRight', |
| 238 | value: 'lightSpeedInRight' |
| 239 | }, { |
| 240 | label: 'lightSpeedInLeft', |
| 241 | value: 'lightSpeedInLeft' |
| 242 | }, { |
| 243 | label: 'lightSpeedOutRight', |
| 244 | value: 'lightSpeedOutRight' |
| 245 | }, { |
| 246 | label: 'lightSpeedOutLeft', |
| 247 | value: 'lightSpeedOutLeft' |
| 248 | }] |
| 249 | }, { |
| 250 | label: __('Rotating Entrances', 'frontblocks'), |
| 251 | options: [{ |
| 252 | label: 'rotateIn', |
| 253 | value: 'rotateIn' |
| 254 | }, { |
| 255 | label: 'rotateInDownLeft', |
| 256 | value: 'rotateInDownLeft' |
| 257 | }, { |
| 258 | label: 'rotateInDownRight', |
| 259 | value: 'rotateInDownRight' |
| 260 | }, { |
| 261 | label: 'rotateInUpLeft', |
| 262 | value: 'rotateInUpLeft' |
| 263 | }, { |
| 264 | label: 'rotateInUpRight', |
| 265 | value: 'rotateInUpRight' |
| 266 | }] |
| 267 | }, { |
| 268 | label: __('Rotating Exits', 'frontblocks'), |
| 269 | options: [{ |
| 270 | label: 'rotateOut', |
| 271 | value: 'rotateOut' |
| 272 | }, { |
| 273 | label: 'rotateOutDownLeft', |
| 274 | value: 'rotateOutDownLeft' |
| 275 | }, { |
| 276 | label: 'rotateOutDownRight', |
| 277 | value: 'rotateOutDownRight' |
| 278 | }, { |
| 279 | label: 'rotateOutUpLeft', |
| 280 | value: 'rotateOutUpLeft' |
| 281 | }, { |
| 282 | label: 'rotateOutUpRight', |
| 283 | value: 'rotateOutUpRight' |
| 284 | }] |
| 285 | }, { |
| 286 | label: __('Specials', 'frontblocks'), |
| 287 | options: [{ |
| 288 | label: 'hinge', |
| 289 | value: 'hinge' |
| 290 | }, { |
| 291 | label: 'jackInTheBox', |
| 292 | value: 'jackInTheBox' |
| 293 | }, { |
| 294 | label: 'rollIn', |
| 295 | value: 'rollIn' |
| 296 | }, { |
| 297 | label: 'rollOut', |
| 298 | value: 'rollOut' |
| 299 | }] |
| 300 | }, { |
| 301 | label: __('Zooming Entrances', 'frontblocks'), |
| 302 | options: [{ |
| 303 | label: 'zoomIn', |
| 304 | value: 'zoomIn' |
| 305 | }, { |
| 306 | label: 'zoomInDown', |
| 307 | value: 'zoomInDown' |
| 308 | }, { |
| 309 | label: 'zoomInLeft', |
| 310 | value: 'zoomInLeft' |
| 311 | }, { |
| 312 | label: 'zoomInRight', |
| 313 | value: 'zoomInRight' |
| 314 | }, { |
| 315 | label: 'zoomInUp', |
| 316 | value: 'zoomInUp' |
| 317 | }] |
| 318 | }, { |
| 319 | label: __('Zooming Exits', 'frontblocks'), |
| 320 | options: [{ |
| 321 | label: 'zoomOut', |
| 322 | value: 'zoomOut' |
| 323 | }, { |
| 324 | label: 'zoomOutDown', |
| 325 | value: 'zoomOutDown' |
| 326 | }, { |
| 327 | label: 'zoomOutLeft', |
| 328 | value: 'zoomOutLeft' |
| 329 | }, { |
| 330 | label: 'zoomOutRight', |
| 331 | value: 'zoomOutRight' |
| 332 | }, { |
| 333 | label: 'zoomOutUp', |
| 334 | value: 'zoomOutUp' |
| 335 | }] |
| 336 | }, { |
| 337 | label: __('Sliding Entrances', 'frontblocks'), |
| 338 | options: [{ |
| 339 | label: 'slideInDown', |
| 340 | value: 'slideInDown' |
| 341 | }, { |
| 342 | label: 'slideInLeft', |
| 343 | value: 'slideInLeft' |
| 344 | }, { |
| 345 | label: 'slideInRight', |
| 346 | value: 'slideInRight' |
| 347 | }, { |
| 348 | label: 'slideInUp', |
| 349 | value: 'slideInUp' |
| 350 | }] |
| 351 | }, { |
| 352 | label: __('Sliding Exits', 'frontblocks'), |
| 353 | options: [{ |
| 354 | label: 'slideOutDown', |
| 355 | value: 'slideOutDown' |
| 356 | }, { |
| 357 | label: 'slideOutLeft', |
| 358 | value: 'slideOutLeft' |
| 359 | }, { |
| 360 | label: 'slideOutRight', |
| 361 | value: 'slideOutRight' |
| 362 | }, { |
| 363 | label: 'slideOutUp', |
| 364 | value: 'slideOutUp' |
| 365 | }] |
| 366 | }]; |
| 367 | |
| 368 | // Create flattened options with group labels for SelectControl |
| 369 | var createFlattenedOptions = function createFlattenedOptions() { |
| 370 | var flattenedOptions = []; |
| 371 | animationOptions.forEach(function (category) { |
| 372 | if (category.options) { |
| 373 | // Add group header |
| 374 | flattenedOptions.push({ |
| 375 | label: "\u2501\u2501\u2501 ".concat(category.label, " \u2501\u2501\u2501"), |
| 376 | value: '', |
| 377 | disabled: true |
| 378 | }); |
| 379 | // Add options under this group |
| 380 | category.options.forEach(function (option) { |
| 381 | flattenedOptions.push({ |
| 382 | label: " ".concat(option.label), |
| 383 | value: option.value |
| 384 | }); |
| 385 | }); |
| 386 | } else if (category.value !== undefined) { |
| 387 | // Single option (like "None") |
| 388 | flattenedOptions.push(category); |
| 389 | } |
| 390 | }); |
| 391 | return flattenedOptions; |
| 392 | }; |
| 393 | function addAnimationControls(BlockEdit) { |
| 394 | return function (props) { |
| 395 | // Extract animation attributes with default values |
| 396 | var _props$attributes = props.attributes, |
| 397 | _props$attributes$frb = _props$attributes.frblAnimation, |
| 398 | frblAnimation = _props$attributes$frb === void 0 ? '' : _props$attributes$frb, |
| 399 | _props$attributes$frb2 = _props$attributes.frblAnimationDelay, |
| 400 | frblAnimationDelay = _props$attributes$frb2 === void 0 ? 0 : _props$attributes$frb2, |
| 401 | _props$attributes$frb3 = _props$attributes.frblAnimationDuration, |
| 402 | frblAnimationDuration = _props$attributes$frb3 === void 0 ? 1 : _props$attributes$frb3, |
| 403 | _props$attributes$frb4 = _props$attributes.frblAnimationRepeat, |
| 404 | frblAnimationRepeat = _props$attributes$frb4 === void 0 ? false : _props$attributes$frb4, |
| 405 | _props$attributes$frb5 = _props$attributes.frblAnimationInfinite, |
| 406 | frblAnimationInfinite = _props$attributes$frb5 === void 0 ? false : _props$attributes$frb5; |
| 407 | |
| 408 | // Create flattened options for the SelectControl |
| 409 | var flattenedOptions = createFlattenedOptions(); |
| 410 | |
| 411 | // Function to trigger animation preview |
| 412 | var triggerAnimationPreview = function triggerAnimationPreview() { |
| 413 | if (!frblAnimation) return; |
| 414 | |
| 415 | // --- IFRAME SUPPORT --- |
| 416 | // Try to get the editor-canvas iframe (site editor or block editor) |
| 417 | var doc = document; |
| 418 | var iframe = document.querySelector('iframe[name="editor-canvas"], iframe#editor-canvas'); |
| 419 | if (iframe && iframe.contentDocument) { |
| 420 | doc = iframe.contentDocument; |
| 421 | console.log('Using iframe document for block search'); |
| 422 | } else { |
| 423 | console.log('Using main document for block search'); |
| 424 | } |
| 425 | |
| 426 | // Try multiple selectors to find the block element |
| 427 | var blockElement = doc.querySelector("[data-block=\"".concat(props.clientId, "\"]")); |
| 428 | if (!blockElement) { |
| 429 | blockElement = doc.querySelector("[data-block-id=\"".concat(props.clientId, "\"]")); |
| 430 | } |
| 431 | if (!blockElement) { |
| 432 | blockElement = doc.querySelector(".wp-block[data-block=\"".concat(props.clientId, "\"]")); |
| 433 | } |
| 434 | if (!blockElement) { |
| 435 | blockElement = doc.querySelector(".block-editor-block-list__block[data-block=\"".concat(props.clientId, "\"]")); |
| 436 | } |
| 437 | |
| 438 | // Fallback: search for any element whose outerHTML contains the clientId |
| 439 | if (!blockElement) { |
| 440 | var allElements = doc.querySelectorAll('*'); |
| 441 | var _iterator = _createForOfIteratorHelper(allElements), |
| 442 | _step; |
| 443 | try { |
| 444 | for (_iterator.s(); !(_step = _iterator.n()).done;) { |
| 445 | var el = _step.value; |
| 446 | if (el.outerHTML && el.outerHTML.includes(props.clientId)) { |
| 447 | blockElement = el; |
| 448 | console.log('Found block element by outerHTML containing clientId:', el); |
| 449 | break; |
| 450 | } |
| 451 | } |
| 452 | } catch (err) { |
| 453 | _iterator.e(err); |
| 454 | } finally { |
| 455 | _iterator.f(); |
| 456 | } |
| 457 | } |
| 458 | |
| 459 | // Find the first element with the animation classes |
| 460 | var animatedElement = blockElement.querySelector('.animate__animated') || blockElement; |
| 461 | // Remove existing animation classes and styles |
| 462 | animatedElement.classList.remove('animate__animated'); |
| 463 | animationOptions.forEach(function (category) { |
| 464 | if (category.options) { |
| 465 | category.options.forEach(function (option) { |
| 466 | animatedElement.classList.remove("animate__".concat(option.value)); |
| 467 | }); |
| 468 | } |
| 469 | }); |
| 470 | animatedElement.style.removeProperty('--animate-duration'); |
| 471 | animatedElement.style.removeProperty('--animate-delay'); |
| 472 | animatedElement.style.removeProperty('--animate-repeat'); |
| 473 | animatedElement.style.removeProperty('animation-iteration-count'); |
| 474 | |
| 475 | // Force reflow and re-add classes in the next frame |
| 476 | void animatedElement.offsetWidth; // This is a more reliable reflow trigger |
| 477 | |
| 478 | // Function to apply animation |
| 479 | var applyAnimation = function applyAnimation() { |
| 480 | animatedElement.classList.add('animate__animated', "animate__".concat(frblAnimation)); |
| 481 | if (frblAnimationDuration !== 1) { |
| 482 | animatedElement.style.setProperty('--animate-duration', "".concat(frblAnimationDuration, "s")); |
| 483 | } |
| 484 | if (frblAnimationDelay > 0) { |
| 485 | animatedElement.style.setProperty('--animate-delay', "".concat(frblAnimationDelay, "s")); |
| 486 | } |
| 487 | if (frblAnimationInfinite) { |
| 488 | animatedElement.style.setProperty('--animate-repeat', 'infinite'); |
| 489 | animatedElement.style.setProperty('animation-iteration-count', 'infinite'); |
| 490 | } else if (frblAnimationRepeat) { |
| 491 | animatedElement.style.setProperty('--animate-repeat', '2'); |
| 492 | animatedElement.style.setProperty('animation-iteration-count', '2'); |
| 493 | } |
| 494 | }; |
| 495 | |
| 496 | // Wait for Animate.css to be available |
| 497 | var waitForAnimateCSS = function waitForAnimateCSS() { |
| 498 | var testElem = doc.createElement('div'); |
| 499 | testElem.className = 'animate__animated animate__bounce'; |
| 500 | testElem.style.position = 'absolute'; |
| 501 | testElem.style.left = '-9999px'; |
| 502 | doc.body.appendChild(testElem); |
| 503 | var checkAnimation = function checkAnimation() { |
| 504 | var computed = doc.defaultView.getComputedStyle(testElem); |
| 505 | var hasAnimation = computed.animationName && computed.animationName !== 'none'; |
| 506 | doc.body.removeChild(testElem); |
| 507 | if (hasAnimation) { |
| 508 | console.log('Animate.css is ready, applying animation'); |
| 509 | applyAnimation(); |
| 510 | } else { |
| 511 | console.error('Animate.css failed to load, loading statically...'); |
| 512 | // Fallback: load Animate.css dynamically |
| 513 | var link = doc.createElement('link'); |
| 514 | link.rel = 'stylesheet'; |
| 515 | link.href = frontblocksAnimationData.customCss; |
| 516 | link.onload = function () { |
| 517 | setTimeout(applyAnimation, 50); |
| 518 | }; |
| 519 | doc.head.appendChild(link); |
| 520 | } |
| 521 | }; |
| 522 | setTimeout(checkAnimation, 50); |
| 523 | }; |
| 524 | waitForAnimateCSS(); |
| 525 | }; |
| 526 | return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 527 | title: __('Animations', 'frontblocks'), |
| 528 | initialOpen: false |
| 529 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 530 | label: __('Animation Type', 'frontblocks'), |
| 531 | value: frblAnimation, |
| 532 | options: flattenedOptions, |
| 533 | onChange: function onChange(value) { |
| 534 | props.setAttributes({ |
| 535 | frblAnimation: value |
| 536 | }); |
| 537 | } |
| 538 | }), frblAnimation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RangeControl, { |
| 539 | label: __('Delay (seconds)', 'frontblocks'), |
| 540 | value: frblAnimationDelay, |
| 541 | onChange: function onChange(value) { |
| 542 | return props.setAttributes({ |
| 543 | frblAnimationDelay: value |
| 544 | }); |
| 545 | }, |
| 546 | min: 0, |
| 547 | max: 10, |
| 548 | step: 0.1 |
| 549 | }), /*#__PURE__*/React.createElement(RangeControl, { |
| 550 | label: __('Duration (seconds)', 'frontblocks'), |
| 551 | value: frblAnimationDuration, |
| 552 | onChange: function onChange(value) { |
| 553 | return props.setAttributes({ |
| 554 | frblAnimationDuration: value |
| 555 | }); |
| 556 | }, |
| 557 | min: 0.1, |
| 558 | max: 10, |
| 559 | step: 0.1 |
| 560 | }), /*#__PURE__*/React.createElement(ToggleControl, { |
| 561 | label: __('Repeat animation', 'frontblocks'), |
| 562 | checked: frblAnimationRepeat, |
| 563 | onChange: function onChange(value) { |
| 564 | return props.setAttributes({ |
| 565 | frblAnimationRepeat: value |
| 566 | }); |
| 567 | } |
| 568 | }), frblAnimationRepeat && /*#__PURE__*/React.createElement(ToggleControl, { |
| 569 | label: __('Infinite repeat', 'frontblocks'), |
| 570 | checked: frblAnimationInfinite, |
| 571 | onChange: function onChange(value) { |
| 572 | return props.setAttributes({ |
| 573 | frblAnimationInfinite: value |
| 574 | }); |
| 575 | } |
| 576 | }), /*#__PURE__*/React.createElement("div", { |
| 577 | style: { |
| 578 | marginTop: '16px' |
| 579 | } |
| 580 | }, /*#__PURE__*/React.createElement(Button, { |
| 581 | isPrimary: true, |
| 582 | onClick: triggerAnimationPreview, |
| 583 | style: { |
| 584 | width: '100%' |
| 585 | } |
| 586 | }, __('Preview Animation', 'frontblocks'))))))); |
| 587 | }; |
| 588 | } |
| 589 | |
| 590 | // Add the animation controls to all blocks |
| 591 | addFilter('editor.BlockEdit', 'frontblocks/animation-controls', addAnimationControls); |
| 592 | |
| 593 | // Add custom class to blocks with animations |
| 594 | addFilter('blocks.getSaveContent.extraProps', 'frontblocks/apply-animations', function (props, blockType, attributes) { |
| 595 | var frblAnimation = attributes.frblAnimation, |
| 596 | frblAnimationDelay = attributes.frblAnimationDelay, |
| 597 | frblAnimationDuration = attributes.frblAnimationDuration, |
| 598 | frblAnimationRepeat = attributes.frblAnimationRepeat, |
| 599 | frblAnimationInfinite = attributes.frblAnimationInfinite; |
| 600 | if (frblAnimation) { |
| 601 | // Add animate.css base class and the specific animation |
| 602 | props.className = props.className ? "".concat(props.className, " animate__animated animate__").concat(frblAnimation) : "animate__animated animate__".concat(frblAnimation); |
| 603 | |
| 604 | // Add style attribute if needed |
| 605 | if (!props.style) { |
| 606 | props.style = {}; |
| 607 | } |
| 608 | |
| 609 | // Set animation properties as inline styles |
| 610 | if (frblAnimationDuration) { |
| 611 | props.style['--animate-duration'] = "".concat(frblAnimationDuration, "s"); |
| 612 | } |
| 613 | if (frblAnimationDelay) { |
| 614 | props.style['--animate-delay'] = "".concat(frblAnimationDelay, "s"); |
| 615 | } |
| 616 | if (frblAnimationInfinite) { |
| 617 | props.style['--animate-repeat'] = 'infinite'; |
| 618 | } else if (frblAnimationRepeat) { |
| 619 | props.style['--animate-repeat'] = '2'; |
| 620 | } |
| 621 | } |
| 622 | return props; |
| 623 | }); |
| 624 |