frontblocks-counter-option.jsx
1 month ago
frontblocks-counter-runtime.js
4 months ago
frontblocks-counter.css
8 months ago
frontblocks-counter.js
1 month ago
frontblocks-counter.js
133 lines
| 1 | "use strict"; |
| 2 | |
| 3 | var createHigherOrderComponent = wp.compose.createHigherOrderComponent; |
| 4 | var _wp$element = wp.element, |
| 5 | Fragment = _wp$element.Fragment, |
| 6 | useEffect = _wp$element.useEffect; |
| 7 | var InspectorControls = wp.blockEditor.InspectorControls; |
| 8 | var _wp$components = wp.components, |
| 9 | PanelBody = _wp$components.PanelBody, |
| 10 | ToggleControl = _wp$components.ToggleControl, |
| 11 | TextControl = _wp$components.TextControl; |
| 12 | var _wp$data = wp.data, |
| 13 | select = _wp$data.select, |
| 14 | dispatch = _wp$data.dispatch; |
| 15 | var __ = wp.i18n.__; |
| 16 | var COUNTER_BLOCKS = ['generateblocks/text', 'generateblocks/headline', 'core/heading', 'core/paragraph']; |
| 17 | wp.hooks.addFilter('blocks.registerBlockType', 'frontblocks/add-counter-attribute', function (settings, name) { |
| 18 | if (!COUNTER_BLOCKS.includes(name)) { |
| 19 | return settings; |
| 20 | } |
| 21 | settings.attributes = Object.assign(settings.attributes, { |
| 22 | isCounterActive: { |
| 23 | type: 'boolean', |
| 24 | default: false |
| 25 | }, |
| 26 | animationDuration: { |
| 27 | type: 'number', |
| 28 | default: 2000 |
| 29 | }, |
| 30 | finalNumber: { |
| 31 | type: 'string', |
| 32 | default: '' |
| 33 | }, |
| 34 | numberPrefix: { |
| 35 | type: 'string', |
| 36 | default: '' |
| 37 | }, |
| 38 | numberSuffix: { |
| 39 | type: 'string', |
| 40 | default: '' |
| 41 | } |
| 42 | }); |
| 43 | return settings; |
| 44 | }); |
| 45 | var withCounterControl = createHigherOrderComponent(function (BlockEdit) { |
| 46 | return function (props) { |
| 47 | if (!COUNTER_BLOCKS.includes(props.name)) { |
| 48 | return /*#__PURE__*/React.createElement(BlockEdit, props); |
| 49 | } |
| 50 | var attributes = props.attributes, |
| 51 | setAttributes = props.setAttributes, |
| 52 | clientId = props.clientId; |
| 53 | var isCounterActive = attributes.isCounterActive, |
| 54 | animationDuration = attributes.animationDuration, |
| 55 | finalNumber = attributes.finalNumber, |
| 56 | numberPrefix = attributes.numberPrefix, |
| 57 | numberSuffix = attributes.numberSuffix; |
| 58 | var durationInSeconds = animationDuration / 1000; |
| 59 | useEffect(function () { |
| 60 | if (isCounterActive && finalNumber) { |
| 61 | var block = select('core/block-editor').getBlock(clientId); |
| 62 | if (!block) return; |
| 63 | var formattedNumber = "".concat(numberPrefix).concat(finalNumber).concat(numberSuffix); |
| 64 | if (block.attributes.content !== formattedNumber) { |
| 65 | dispatch('core/block-editor').updateBlockAttributes(clientId, { |
| 66 | content: formattedNumber |
| 67 | }); |
| 68 | } |
| 69 | } |
| 70 | }, [isCounterActive, finalNumber, numberPrefix, numberSuffix, clientId]); |
| 71 | return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 72 | title: __('FrontBlocks - Counter Effect', 'frontblocks'), |
| 73 | initialOpen: false |
| 74 | }, /*#__PURE__*/React.createElement(ToggleControl, { |
| 75 | label: __('Activate Counter Effect', 'frontblocks'), |
| 76 | help: isCounterActive ? __('The number will animate on scroll.', 'frontblocks') : __('Enable to activate counting animation.', 'frontblocks'), |
| 77 | checked: isCounterActive, |
| 78 | onChange: function onChange(val) { |
| 79 | return setAttributes({ |
| 80 | isCounterActive: val |
| 81 | }); |
| 82 | } |
| 83 | }), isCounterActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextControl, { |
| 84 | label: __('Final Number', 'frontblocks'), |
| 85 | value: finalNumber, |
| 86 | onChange: function onChange(val) { |
| 87 | return setAttributes({ |
| 88 | finalNumber: val |
| 89 | }); |
| 90 | }, |
| 91 | help: __('Number to count up to (e.g.: 100).', 'frontblocks') |
| 92 | }), /*#__PURE__*/React.createElement(TextControl, { |
| 93 | label: __('Number Prefix', 'frontblocks'), |
| 94 | value: numberPrefix, |
| 95 | onChange: function onChange(val) { |
| 96 | return setAttributes({ |
| 97 | numberPrefix: val |
| 98 | }); |
| 99 | }, |
| 100 | help: __('Text before the number (e.g.: $, €).', 'frontblocks') |
| 101 | }), /*#__PURE__*/React.createElement(TextControl, { |
| 102 | label: __('Number Suffix', 'frontblocks'), |
| 103 | value: numberSuffix, |
| 104 | onChange: function onChange(val) { |
| 105 | return setAttributes({ |
| 106 | numberSuffix: val |
| 107 | }); |
| 108 | }, |
| 109 | help: __('Text after the number (e.g.: %, +).', 'frontblocks') |
| 110 | }), /*#__PURE__*/React.createElement(TextControl, { |
| 111 | label: __('Animation Duration (seconds)', 'frontblocks'), |
| 112 | value: durationInSeconds, |
| 113 | onChange: function onChange(val) { |
| 114 | var seconds = parseFloat(val); |
| 115 | var milliseconds = isNaN(seconds) ? 0 : seconds * 1000; |
| 116 | setAttributes({ |
| 117 | animationDuration: milliseconds |
| 118 | }); |
| 119 | }, |
| 120 | type: "number", |
| 121 | step: "0.1", |
| 122 | help: __('Duration of the animation.', 'frontblocks') |
| 123 | })), /*#__PURE__*/React.createElement("p", { |
| 124 | style: { |
| 125 | marginTop: '10px', |
| 126 | fontSize: '12px', |
| 127 | color: '#777' |
| 128 | } |
| 129 | }, /*#__PURE__*/React.createElement("small", null, __("Text must begin with a number (e.g., '123', '+500', '€100').", 'frontblocks')))))); |
| 130 | }; |
| 131 | }, 'withCounterControl'); |
| 132 | wp.hooks.addFilter('editor.BlockEdit', 'frontblocks/counter-control', withCounterControl); |
| 133 |