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

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

ghostkit / gutenberg / blocks / image-compare / frontend.js

frontend.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.3.2, at gutenberg/blocks/image-compare/frontend.js

184 lines 3.2 KB

Raw Download Zip

1	/**
2	* Block Image Compare
3	*/
4	const {
5	GHOSTKIT: { events },
6	} = window;
7
8	let $currentImageCompare = false;
9	let $currentImageCompareWrapper = false;
10	let blockOrientation = '';
11	let disabledTransition = false;
12	let clientX = 0;
13	let clientY = 0;
14
15	function movePosition() {
16	if ($currentImageCompare && $currentImageCompareWrapper) {
17	const rect = $currentImageCompareWrapper.getBoundingClientRect();
18
19	let move = 0;
20
21	if (blockOrientation === 'vertical') {
22	move = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
23	} else {
24	move = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
25	}
26
27	const result = Math.round(10000 * move) / 100;
28
29	$currentImageCompare.style.setProperty(
30	'--gkt-image-compare__position',
31	`${result}%`
32	);
33
34	events.trigger($currentImageCompare, 'move.imageCompare.gkt', {
35	originalEvent: { clientX, clientY },
36	});
37	}
38	}
39
40	function init($block) {
41	$currentImageCompare = $block;
42	$currentImageCompareWrapper = $block.querySelector(
43	'.ghostkit-image-compare-images'
44	);
45
46	blockOrientation = $block.classList.contains(
47	'ghostkit-image-compare-vertical'
48	)
49	? 'vertical'
50	: 'horizontal';
51	}
52
53	function destroy() {
54	movePosition();
55
56	$currentImageCompare.style.removeProperty(
57	'--gkt-image-compare__transition-duration'
58	);
59
60	$currentImageCompare = false;
61	$currentImageCompareWrapper = false;
62	disabledTransition = false;
63	}
64
65	// Trigger - Click.
66	events.on(
67	document,
68	'mousedown touchstart',
69	'.ghostkit-image-compare:not(.ghostkit-image-compare-trigger-hover)',
70	(e) => {
71	if (
72	e.targetTouches &&
73	!e.target.classList.contains(
74	'ghostkit-image-compare-images-divider'
75	)
76	) {
77	return;
78	}
79	if (!e.targetTouches) {
80	e.preventDefault();
81	}
82
83	init(e.delegateTarget);
84	}
85	);
86
87	// Trigger - Hover.
88	events.on(
89	document,
90	'mouseover touchstart',
91	'.ghostkit-image-compare-trigger-hover',
92	(e) => {
93	if ($currentImageCompare) {
94	return;
95	}
96	if (
97	e.targetTouches &&
98	!e.target.classList.contains(
99	'ghostkit-image-compare-images-divider'
100	)
101	) {
102	return;
103	}
104	if (!e.targetTouches) {
105	e.preventDefault();
106	}
107
108	init(e.delegateTarget);
109	}
110	);
111	events.on(
112	document,
113	'mouseout touchend',
114	'.ghostkit-image-compare-trigger-hover',
115	(e) => {
116	if (!$currentImageCompare) {
117	return;
118	}
119
120	if (!e.targetTouches) {
121	clientX = e.clientX;
122	clientY = e.clientY;
123	}
124
125	destroy();
126	}
127	);
128
129	events.on(document, 'mouseup touchend', (e) => {
130	if (!$currentImageCompare) {
131	return;
132	}
133
134	if (!e.targetTouches) {
135	clientX = e.clientX;
136	clientY = e.clientY;
137	}
138
139	destroy();
140	});
141
142	events.on(document, 'mousemove touchmove', (e) => {
143	if (!$currentImageCompare) {
144	return;
145	}
146	if (!e.targetTouches) {
147	e.preventDefault();
148	}
149
150	clientX = e.targetTouches?.[0].clientX \|\| e.clientX;
151	clientY = e.targetTouches?.[0].clientY \|\| e.clientY;
152
153	if (!disabledTransition) {
154	$currentImageCompare.style.setProperty(
155	'--gkt-image-compare__transition-duration',
156	'0s'
157	);
158
159	disabledTransition = true;
160	}
161
162	movePosition();
163	});
164
165	// Disable scroll mobile when touching the block.
166	window.addEventListener(
167	'touchstart',
168	function (e) {
169	if (!$currentImageCompare) {
170	return;
171	}
172	if (
173	!e.target.classList.contains(
174	'ghostkit-image-compare-images-divider'
175	)
176	) {
177	return;
178	}
179
180	e.preventDefault();
181	},
182	{ passive: false }
183	);
184