frontblocks-headline-marquee.js
4 months ago
frontblocks-headline-option.jsx
1 month ago
frontblocks-headline.css
4 months ago
frontblocks-headline.js
1 month ago
frontblocks-headline.js
202 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 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; } |
| 5 | 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; } |
| 6 | 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; } |
| 7 | function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; } |
| 8 | 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); } |
| 9 | var createHigherOrderComponent = wp.compose.createHigherOrderComponent; |
| 10 | var Fragment = wp.element.Fragment; |
| 11 | var InspectorControls = wp.blockEditor.InspectorControls; |
| 12 | var _wp$components = wp.components, |
| 13 | PanelBody = _wp$components.PanelBody, |
| 14 | SelectControl = _wp$components.SelectControl, |
| 15 | ToggleControl = _wp$components.ToggleControl; |
| 16 | var _wp$i18n = wp.i18n, |
| 17 | __ = _wp$i18n.__, |
| 18 | sprintf = _wp$i18n.sprintf; |
| 19 | var LINE_CLASS_PREFIX = 'gb-line-effect-'; |
| 20 | var MARQUEE_CLASS = 'gb-marquee-infinite-scroll'; |
| 21 | var MARQUEE_SPEED_ATTR = 'frblMarqueeSpeed'; |
| 22 | var GB_BLOCK = 'generateblocks/text'; |
| 23 | var NATIVE_BLOCKS = ['core/paragraph', 'core/heading']; |
| 24 | var ALL_MARQUEE_BLOCKS = [GB_BLOCK].concat(NATIVE_BLOCKS); |
| 25 | |
| 26 | // Marquee speed presets |
| 27 | var MARQUEE_SPEEDS = { |
| 28 | fast: 10, |
| 29 | // 10 seconds - fast |
| 30 | medium: 20, |
| 31 | // 20 seconds - medium |
| 32 | slow: 40 // 40 seconds - slow |
| 33 | }; |
| 34 | |
| 35 | // Register marquee speed attribute for all supported blocks |
| 36 | wp.hooks.addFilter('blocks.registerBlockType', 'frontblocks/add-marquee-attribute', function (settings, name) { |
| 37 | if (ALL_MARQUEE_BLOCKS.includes(name)) { |
| 38 | settings.attributes = Object.assign(settings.attributes || {}, _defineProperty({}, MARQUEE_SPEED_ATTR, { |
| 39 | type: 'string', |
| 40 | default: '' |
| 41 | })); |
| 42 | } |
| 43 | return settings; |
| 44 | }); |
| 45 | var withHeadlineLineControl = createHigherOrderComponent(function (BlockEdit) { |
| 46 | return function (props) { |
| 47 | if (!ALL_MARQUEE_BLOCKS.includes(props.name)) { |
| 48 | return /*#__PURE__*/React.createElement(BlockEdit, props); |
| 49 | } |
| 50 | var attributes = props.attributes, |
| 51 | setAttributes = props.setAttributes; |
| 52 | var existingClasses = attributes.className || ''; |
| 53 | var htmlAttributes = attributes.htmlAttributes || {}; |
| 54 | var marqueeSpeed = attributes[MARQUEE_SPEED_ATTR] || 'medium'; |
| 55 | var isGBBlock = props.name === GB_BLOCK; |
| 56 | var cleanExistingLineClasses = function cleanExistingLineClasses(classes) { |
| 57 | return classes.split(' ').filter(function (cls) { |
| 58 | return !cls.startsWith(LINE_CLASS_PREFIX); |
| 59 | }).join(' ').replace(/\s{2,}/g, ' ').trim(); |
| 60 | }; |
| 61 | var cleanMarqueeClass = function cleanMarqueeClass(classes) { |
| 62 | return classes.split(' ').filter(function (cls) { |
| 63 | return cls !== MARQUEE_CLASS; |
| 64 | }).join(' ').replace(/\s{2,}/g, ' ').trim(); |
| 65 | }; |
| 66 | var currentLineStyle = 'none'; |
| 67 | if (isGBBlock) { |
| 68 | if (existingClasses.includes(LINE_CLASS_PREFIX + 'vertical')) { |
| 69 | currentLineStyle = 'vertical'; |
| 70 | } else if (existingClasses.includes(LINE_CLASS_PREFIX + 'horizontal')) { |
| 71 | currentLineStyle = 'horizontal'; |
| 72 | } |
| 73 | } |
| 74 | var isMarqueeEnabled = existingClasses.includes(MARQUEE_CLASS); |
| 75 | var setLineStyle = function setLineStyle(newStyle) { |
| 76 | var newClasses = cleanExistingLineClasses(existingClasses); |
| 77 | if (newStyle !== 'none') { |
| 78 | var classToAdd = LINE_CLASS_PREFIX + newStyle; |
| 79 | newClasses = (newClasses + ' ' + classToAdd).trim(); |
| 80 | } |
| 81 | |
| 82 | // Preserve marquee class if enabled |
| 83 | if (isMarqueeEnabled) { |
| 84 | newClasses = (newClasses + ' ' + MARQUEE_CLASS).trim(); |
| 85 | } |
| 86 | setAttributes({ |
| 87 | className: newClasses |
| 88 | }); |
| 89 | }; |
| 90 | var setMarqueeEnabled = function setMarqueeEnabled(enabled) { |
| 91 | var newClasses = cleanMarqueeClass(existingClasses); |
| 92 | var newAttributes = { |
| 93 | className: newClasses |
| 94 | }; |
| 95 | if (enabled) { |
| 96 | newClasses = (newClasses + ' ' + MARQUEE_CLASS).trim(); |
| 97 | newAttributes.className = newClasses; |
| 98 | var currentSpeed = attributes[MARQUEE_SPEED_ATTR] || 'medium'; |
| 99 | newAttributes[MARQUEE_SPEED_ATTR] = currentSpeed; |
| 100 | |
| 101 | // GB blocks store speed in htmlAttributes for direct rendering. |
| 102 | if (isGBBlock) { |
| 103 | var updatedHtmlAttributes = _objectSpread({}, htmlAttributes); |
| 104 | updatedHtmlAttributes['data-marquee-speed'] = MARQUEE_SPEEDS[currentSpeed] || MARQUEE_SPEEDS.medium; |
| 105 | newAttributes.htmlAttributes = updatedHtmlAttributes; |
| 106 | } |
| 107 | } else { |
| 108 | newAttributes[MARQUEE_SPEED_ATTR] = ''; |
| 109 | if (isGBBlock) { |
| 110 | var _updatedHtmlAttributes = _objectSpread({}, htmlAttributes); |
| 111 | delete _updatedHtmlAttributes['data-marquee-speed']; |
| 112 | newAttributes.htmlAttributes = _updatedHtmlAttributes; |
| 113 | } |
| 114 | } |
| 115 | setAttributes(newAttributes); |
| 116 | }; |
| 117 | var setMarqueeSpeed = function setMarqueeSpeed(speedPreset) { |
| 118 | var speedValue = MARQUEE_SPEEDS[speedPreset] || MARQUEE_SPEEDS.medium; |
| 119 | var newAttributes = _defineProperty({}, MARQUEE_SPEED_ATTR, speedPreset); |
| 120 | if (isGBBlock) { |
| 121 | var updatedHtmlAttributes = _objectSpread({}, htmlAttributes); |
| 122 | updatedHtmlAttributes['data-marquee-speed'] = speedValue; |
| 123 | newAttributes.htmlAttributes = updatedHtmlAttributes; |
| 124 | } |
| 125 | setAttributes(newAttributes); |
| 126 | |
| 127 | // Update marquee wrapper directly for immediate preview |
| 128 | setTimeout(function () { |
| 129 | var blockElement = document.querySelector('[data-block="' + props.clientId + '"]'); |
| 130 | if (blockElement) { |
| 131 | var marqueeElement = blockElement.querySelector('.gb-marquee-infinite-scroll'); |
| 132 | if (marqueeElement) { |
| 133 | var wrapper = marqueeElement.querySelector('.gb-marquee-wrapper'); |
| 134 | if (wrapper && typeof wrapper.updateMarqueeSpeed === 'function') { |
| 135 | wrapper.updateMarqueeSpeed(speedValue); |
| 136 | } else if (wrapper) { |
| 137 | // Fallback: update directly |
| 138 | wrapper.setAttribute('data-marquee-speed', speedValue); |
| 139 | wrapper.style.setProperty('--marquee-speed', speedValue + 's'); |
| 140 | // Force animation update |
| 141 | var currentAnimation = wrapper.style.animation; |
| 142 | if (currentAnimation) { |
| 143 | var match = currentAnimation.match(/marquee-scroll-[\w-]+/); |
| 144 | if (match) { |
| 145 | var styleId = match[0].replace('marquee-scroll-', ''); |
| 146 | wrapper.style.animation = 'marquee-scroll-' + styleId + ' ' + speedValue + 's linear infinite'; |
| 147 | wrapper.style.animationDuration = speedValue + 's'; |
| 148 | } |
| 149 | } |
| 150 | } |
| 151 | } |
| 152 | } |
| 153 | }, 50); |
| 154 | }; |
| 155 | return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 156 | title: __('FrontBlocks - Visual Effects', 'frontblocks'), |
| 157 | initialOpen: false |
| 158 | }, /*#__PURE__*/React.createElement("p", { |
| 159 | style: { |
| 160 | marginTop: 0, |
| 161 | marginBottom: '10px' |
| 162 | } |
| 163 | }, /*#__PURE__*/React.createElement("small", null, __('FrontBlocks visual effect settings.', 'frontblocks'))), isGBBlock && /*#__PURE__*/React.createElement(SelectControl, { |
| 164 | label: __('Decorative Line Style', 'frontblocks'), |
| 165 | value: currentLineStyle, |
| 166 | options: [{ |
| 167 | label: __('None', 'frontblocks'), |
| 168 | value: 'none' |
| 169 | }, { |
| 170 | label: __('Vertical Line (Right)', 'frontblocks'), |
| 171 | value: 'vertical' |
| 172 | }, { |
| 173 | label: __('Horizontal Line (Right)', 'frontblocks'), |
| 174 | value: 'horizontal' |
| 175 | }], |
| 176 | onChange: setLineStyle, |
| 177 | help: currentLineStyle === 'none' ? __('Select a line style to add a decorative element.', 'frontblocks') : sprintf(__('Current style: %s.', 'frontblocks'), currentLineStyle.charAt(0).toUpperCase() + currentLineStyle.slice(1)) |
| 178 | }), /*#__PURE__*/React.createElement(ToggleControl, { |
| 179 | label: __('Infinite Scrolling Marquee', 'frontblocks'), |
| 180 | checked: isMarqueeEnabled, |
| 181 | onChange: setMarqueeEnabled, |
| 182 | help: isMarqueeEnabled ? __('Marquee effect is active. Text will scroll infinitely.', 'frontblocks') : __('Enable infinite scrolling marquee effect for the text.', 'frontblocks') |
| 183 | }), isMarqueeEnabled && /*#__PURE__*/React.createElement(SelectControl, { |
| 184 | label: __('Marquee Speed', 'frontblocks'), |
| 185 | value: marqueeSpeed, |
| 186 | onChange: setMarqueeSpeed, |
| 187 | options: [{ |
| 188 | label: __('Fast', 'frontblocks'), |
| 189 | value: 'fast' |
| 190 | }, { |
| 191 | label: __('Medium', 'frontblocks'), |
| 192 | value: 'medium' |
| 193 | }, { |
| 194 | label: __('Slow', 'frontblocks'), |
| 195 | value: 'slow' |
| 196 | }], |
| 197 | help: __('Select the scrolling speed for the marquee effect.', 'frontblocks') |
| 198 | })))); |
| 199 | }; |
| 200 | }, 'withHeadlineLineControl'); |
| 201 | wp.hooks.addFilter('editor.BlockEdit', 'frontblocks/headline-line-control', withHeadlineLineControl); |
| 202 |