frontblocks-advanced-option.js
8 months ago
frontblocks-advanced-option.jsx
9 months ago
frontblocks-carousel.css
9 months ago
frontblocks-carousel.js
9 months ago
glide.min.js
8 months ago
frontblocks-advanced-option.js
156 lines
| 1 | "use strict"; |
| 2 | |
| 3 | // Add custom controls to the Advanced panel of GenerateBlocks Grid block |
| 4 | var addFilter = wp.hooks.addFilter; |
| 5 | var Fragment = wp.element.Fragment; |
| 6 | var _wp$blockEditor = wp.blockEditor, |
| 7 | InspectorControls = _wp$blockEditor.InspectorControls, |
| 8 | PanelColorSettings = _wp$blockEditor.PanelColorSettings; |
| 9 | var _wp$components = wp.components, |
| 10 | SelectControl = _wp$components.SelectControl, |
| 11 | TextControl = _wp$components.TextControl, |
| 12 | PanelBody = _wp$components.PanelBody, |
| 13 | ToggleControl = _wp$components.ToggleControl; |
| 14 | var __ = wp.i18n.__; |
| 15 | function addCustomCarouselPanel(BlockEdit) { |
| 16 | return function (props) { |
| 17 | // Support both grid blocks and element blocks with grid display |
| 18 | if (props.name !== 'generateblocks/grid' && props.name !== 'generateblocks/element') { |
| 19 | return /*#__PURE__*/React.createElement(BlockEdit, props); |
| 20 | } |
| 21 | |
| 22 | // For element blocks, only show carousel options if it has grid display |
| 23 | if (props.name === 'generateblocks/element') { |
| 24 | var styles = props.attributes.styles || {}; |
| 25 | if (styles.display !== 'grid') { |
| 26 | return /*#__PURE__*/React.createElement(BlockEdit, props); |
| 27 | } |
| 28 | } |
| 29 | var _props$attributes = props.attributes, |
| 30 | _props$attributes$frb = _props$attributes.frblGridOption, |
| 31 | frblGridOption = _props$attributes$frb === void 0 ? 'none' : _props$attributes$frb, |
| 32 | _props$attributes$frb2 = _props$attributes.frblItemsToView, |
| 33 | frblItemsToView = _props$attributes$frb2 === void 0 ? '4' : _props$attributes$frb2, |
| 34 | _props$attributes$frb3 = _props$attributes.frblResponsiveToView, |
| 35 | frblResponsiveToView = _props$attributes$frb3 === void 0 ? '1' : _props$attributes$frb3, |
| 36 | _props$attributes$frb4 = _props$attributes.frblAutoplay, |
| 37 | frblAutoplay = _props$attributes$frb4 === void 0 ? '' : _props$attributes$frb4, |
| 38 | _props$attributes$frb5 = _props$attributes.frblButtons, |
| 39 | frblButtons = _props$attributes$frb5 === void 0 ? 'arrows' : _props$attributes$frb5, |
| 40 | _props$attributes$frb6 = _props$attributes.frblRewind, |
| 41 | frblRewind = _props$attributes$frb6 === void 0 ? true : _props$attributes$frb6, |
| 42 | frblButtonColor = _props$attributes.frblButtonColor, |
| 43 | frblButtonBgColor = _props$attributes.frblButtonBgColor, |
| 44 | _props$attributes$frb7 = _props$attributes.frblButtonsPosition, |
| 45 | frblButtonsPosition = _props$attributes$frb7 === void 0 ? 'side' : _props$attributes$frb7; |
| 46 | return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 47 | title: __('Carousel Settings', 'frontblocks'), |
| 48 | initialOpen: true |
| 49 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 50 | label: __('FrontBlocks Grid Option', 'frontblocks'), |
| 51 | value: frblGridOption, |
| 52 | options: [{ |
| 53 | label: __('None', 'frontblocks'), |
| 54 | value: 'none' |
| 55 | }, { |
| 56 | label: __('Carousel', 'frontblocks'), |
| 57 | value: 'carousel' |
| 58 | }, { |
| 59 | label: __('Slider', 'frontblocks'), |
| 60 | value: 'slider' |
| 61 | }], |
| 62 | onChange: function onChange(value) { |
| 63 | props.setAttributes({ |
| 64 | frblGridOption: value |
| 65 | }); |
| 66 | }, |
| 67 | help: __('This option gives the option to make carousel in your grid block.', 'frontblocks') |
| 68 | }), frblGridOption !== 'none' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextControl, { |
| 69 | label: __('Items to view', 'frontblocks'), |
| 70 | value: frblItemsToView, |
| 71 | onChange: function onChange(value) { |
| 72 | return props.setAttributes({ |
| 73 | frblItemsToView: value |
| 74 | }); |
| 75 | } |
| 76 | }), /*#__PURE__*/React.createElement(TextControl, { |
| 77 | label: __('Responsive to view', 'frontblocks'), |
| 78 | value: frblResponsiveToView, |
| 79 | onChange: function onChange(value) { |
| 80 | return props.setAttributes({ |
| 81 | frblResponsiveToView: value |
| 82 | }); |
| 83 | } |
| 84 | }), /*#__PURE__*/React.createElement(TextControl, { |
| 85 | label: __('Autoplay (seconds)', 'frontblocks'), |
| 86 | value: frblAutoplay, |
| 87 | onChange: function onChange(value) { |
| 88 | return props.setAttributes({ |
| 89 | frblAutoplay: value |
| 90 | }); |
| 91 | } |
| 92 | }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleControl, { |
| 93 | label: __('Rewind', 'frontblocks'), |
| 94 | checked: frblRewind, |
| 95 | onChange: function onChange(value) { |
| 96 | return props.setAttributes({ |
| 97 | frblRewind: value |
| 98 | }); |
| 99 | } |
| 100 | })), /*#__PURE__*/React.createElement(SelectControl, { |
| 101 | label: __('Buttons', 'frontblocks'), |
| 102 | value: frblButtons, |
| 103 | options: [{ |
| 104 | label: __('None', 'frontblocks'), |
| 105 | value: 'none' |
| 106 | }, { |
| 107 | label: __('Bullets', 'frontblocks'), |
| 108 | value: 'bullets' |
| 109 | }, { |
| 110 | label: __('Arrows', 'frontblocks'), |
| 111 | value: 'arrows' |
| 112 | }], |
| 113 | onChange: function onChange(value) { |
| 114 | return props.setAttributes({ |
| 115 | frblButtons: value |
| 116 | }); |
| 117 | } |
| 118 | }), frblButtons === 'arrows' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectControl, { |
| 119 | label: __('Buttons Position', 'frontblocks'), |
| 120 | value: frblButtonsPosition, |
| 121 | options: [{ |
| 122 | label: __('Side', 'frontblocks'), |
| 123 | value: 'side' |
| 124 | }, { |
| 125 | label: __('Bottom', 'frontblocks'), |
| 126 | value: 'bottom' |
| 127 | }], |
| 128 | onChange: function onChange(value) { |
| 129 | return props.setAttributes({ |
| 130 | frblButtonsPosition: value |
| 131 | }); |
| 132 | } |
| 133 | })), /*#__PURE__*/React.createElement(PanelColorSettings, { |
| 134 | title: __('Button Colors', 'frontblocks'), |
| 135 | colorSettings: [{ |
| 136 | value: frblButtonColor, |
| 137 | onChange: function onChange(color) { |
| 138 | return props.setAttributes({ |
| 139 | frblButtonColor: color |
| 140 | }); |
| 141 | }, |
| 142 | label: __('Color button', 'frontblocks') |
| 143 | }, { |
| 144 | value: frblButtonBgColor, |
| 145 | onChange: function onChange(color) { |
| 146 | return props.setAttributes({ |
| 147 | frblButtonBgColor: color |
| 148 | }); |
| 149 | }, |
| 150 | label: __('Color background button', 'frontblocks') |
| 151 | }] |
| 152 | }))))); |
| 153 | }; |
| 154 | } |
| 155 | addFilter('editor.BlockEdit', 'frontblocks/gb-grid-carousel-panel', addCustomCarouselPanel); |
| 156 |