Block Animations, Motion & Scroll Effects – Ghost Kit / 3.4.1

Block Animations, Motion & Scroll Effects – Ghost Kit v3.4.1

ghostkit / gutenberg / blocks / progress / edit.js

edit.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.4.1, at gutenberg/blocks/progress/edit.js

312 lines 7.2 KB

Raw Download Zip

1	import classnames from 'classnames/dedupe';
2
3	import {
4	InspectorControls,
5	RichText,
6	useBlockProps,
7	} from '@wordpress/block-editor';
8	import {
9	PanelBody,
10	ResizableBox,
11	TabPanel,
12	TextControl,
13	ToggleControl,
14	} from '@wordpress/components';
15	import { applyFilters } from '@wordpress/hooks';
16	import { __ } from '@wordpress/i18n';
17
18	import ApplyFilters from '../../components/apply-filters';
19	import ColorIndicator from '../../components/color-indicator';
20	import ColorPicker from '../../components/color-picker';
21	import RangeControl from '../../components/range-control';
22
23	/**
24	* Block Edit Class.
25	*
26	* @param props
27	*/
28	export default function BlockEdit(props) {
29	const { attributes, setAttributes, isSelected, toggleSelection } = props;
30
31	let { className = '' } = props;
32
33	const {
34	caption,
35	height,
36	percent,
37	borderRadius,
38	striped,
39	animateInViewport,
40	showCount,
41	countPrefix,
42	countSuffix,
43	color,
44	backgroundColor,
45	hoverColor,
46	hoverBackgroundColor,
47	} = attributes;
48
49	className = classnames('ghostkit-progress', className);
50
51	className = applyFilters('ghostkit.editor.className', className, props);
52
53	const blockProps = useBlockProps({ className });
54
55	return (
56	<>
57	<InspectorControls>
58	<PanelBody>
59	<RangeControl
60	label={__('Height', 'ghostkit')}
61	value={height \|\| ''}
62	onChange={(value) => setAttributes({ height: value })}
63	min={1}
64	allowCustomMax
65	__next40pxDefaultSize
66	__nextHasNoMarginBottom
67	/>
68	<RangeControl
69	label={__('Percent', 'ghostkit')}
70	value={percent \|\| ''}
71	onChange={(value) => setAttributes({ percent: value })}
72	min={0}
73	max={100}
74	__next40pxDefaultSize
75	__nextHasNoMarginBottom
76	/>
77	<RangeControl
78	label={__('Corner Radius', 'ghostkit')}
79	value={borderRadius}
80	min={0}
81	max={10}
82	onChange={(value) =>
83	setAttributes({ borderRadius: value })
84	}
85	allowCustomMax
86	__next40pxDefaultSize
87	__nextHasNoMarginBottom
88	/>
89	</PanelBody>
90	<PanelBody>
91	<ToggleControl
92	label={__('Show Count', 'ghostkit')}
93	checked={!!showCount}
94	onChange={(val) => setAttributes({ showCount: val })}
95	__nextHasNoMarginBottom
96	/>
97	{showCount ? (
98	<>
99	<TextControl
100	label={__('Count Prefix', 'ghostkit')}
101	value={countPrefix}
102	onChange={(value) =>
103	setAttributes({ countPrefix: value })
104	}
105	__next40pxDefaultSize
106	__nextHasNoMarginBottom
107	/>
108	<TextControl
109	label={__('Count Suffix', 'ghostkit')}
110	value={countSuffix}
111	onChange={(value) =>
112	setAttributes({ countSuffix: value })
113	}
114	__next40pxDefaultSize
115	__nextHasNoMarginBottom
116	/>
117	</>
118	) : null}
119	<ToggleControl
120	label={__('Striped', 'ghostkit')}
121	checked={!!striped}
122	onChange={(val) => setAttributes({ striped: val })}
123	__nextHasNoMarginBottom
124	/>
125	<ToggleControl
126	label={__('Animate in viewport', 'ghostkit')}
127	checked={!!animateInViewport}
128	onChange={(val) =>
129	setAttributes({ animateInViewport: val })
130	}
131	__nextHasNoMarginBottom
132	/>
133	</PanelBody>
134	<PanelBody
135	title={
136	<>
137	{__('Colors', 'ghostkit')}
138	<ColorIndicator colorValue={color} />
139	<ColorIndicator colorValue={backgroundColor} />
140	</>
141	}
142	initialOpen={false}
143	>
144	<TabPanel
145	className="ghostkit-control-tabs ghostkit-control-tabs-wide"
146	tabs={[
147	{
148	name: 'normal',
149	title: __('Normal', 'ghostkit'),
150	className: 'ghostkit-control-tabs-tab',
151	},
152	{
153	name: 'hover',
154	title: __('Hover', 'ghostkit'),
155	className: 'ghostkit-control-tabs-tab',
156	},
157	]}
158	>
159	{(tabData) => {
160	const isHover = tabData.name === 'hover';
161	return (
162	<>
163	<ApplyFilters
164	name="ghostkit.editor.controls"
165	attribute={
166	isHover ? 'hoverColor' : 'color'
167	}
168	props={props}
169	>
170	<ColorPicker
171	label={__('Bar', 'ghostkit')}
172	value={isHover ? hoverColor : color}
173	onChange={(val) =>
174	setAttributes(
175	isHover
176	? { hoverColor: val }
177	: { color: val }
178	)
179	}
180	alpha
181	gradient
182	/>
183	</ApplyFilters>
184	<ApplyFilters
185	name="ghostkit.editor.controls"
186	attribute={
187	isHover
188	? 'hoverBackgroundColor'
189	: 'backgroundColor'
190	}
191	props={props}
192	>
193	<ColorPicker
194	label={__('Background', 'ghostkit')}
195	value={
196	isHover
197	? hoverBackgroundColor
198	: backgroundColor
199	}
200	onChange={(val) =>
201	setAttributes(
202	isHover
203	? {
204	hoverBackgroundColor:
205	val,
206	}
207	: {
208	backgroundColor:
209	val,
210	}
211	)
212	}
213	alpha
214	gradient
215	/>
216	</ApplyFilters>
217	</>
218	);
219	}}
220	</TabPanel>
221	</PanelBody>
222	</InspectorControls>
223	<div {...blockProps}>
224	{!RichText.isEmpty(caption) \|\| isSelected ? (
225	<RichText
226	inlineToolbar
227	tagName="div"
228	className="ghostkit-progress-caption"
229	placeholder={__('Write caption…', 'ghostkit')}
230	value={caption}
231	onChange={(newCaption) =>
232	setAttributes({ caption: newCaption })
233	}
234	/>
235	) : null}
236	{showCount ? (
237	<div
238	className="ghostkit-progress-bar-count"
239	style={{ width: `${percent}%` }}
240	>
241	<div>
242	{countPrefix}
243	{percent}
244	{countSuffix}
245	</div>
246	</div>
247	) : null}
248	<ResizableBox
249	className={classnames({ 'is-selected': isSelected })}
250	size={{
251	width: '100%',
252	height,
253	}}
254	minWidth="0%"
255	maxWidth="100%"
256	minHeight="1"
257	enable={{ bottom: true }}
258	onResizeStart={() => {
259	toggleSelection(false);
260	}}
261	onResizeStop={(event, direction, elt, delta) => {
262	setAttributes({
263	height: parseInt(height + delta.height, 10),
264	});
265	toggleSelection(true);
266	}}
267	>
268	<div
269	className={classnames({
270	'ghostkit-progress-wrap': true,
271	'ghostkit-progress-bar-striped': striped,
272	})}
273	>
274	<ResizableBox
275	className={classnames('ghostkit-progress-bar', {
276	'is-selected': isSelected,
277	})}
278	size={{ width: `${percent}%` }}
279	minWidth="0%"
280	maxWidth="100%"
281	minHeight="100%"
282	maxHeight="100%"
283	enable={{ right: true }}
284	onResizeStart={() => {
285	toggleSelection(false);
286	}}
287	onResizeStop={(event, direction, elt, delta) => {
288	setAttributes({
289	percent: Math.min(
290	100,
291	Math.max(
292	0,
293	percent +
294	parseInt(
295	(100 * delta.width) /
296	elt.parentNode.getBoundingClientRect()
297	.width,
298	10
299	)
300	)
301	),
302	});
303	toggleSelection(true);
304	}}
305	/>
306	</div>
307	</ResizableBox>
308	</div>
309	</>
310	);
311	}
312