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