king-addons / includes / widgets / Spotlight_Reveal / Spotlight_Reveal.php

Spotlight_Reveal.php in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.86, at includes/widgets/Spotlight_Reveal/Spotlight_Reveal.php

1,308 lines 42.9 KB

Raw Download Zip

1	<?php
2	/**
3	* Spotlight Reveal Widget (Free).
4	*
5	* @package King_Addons
6	*/
7
8	namespace King_Addons;
9
10	use Elementor\Controls_Manager;
11	use Elementor\Group_Control_Background;
12	use Elementor\Group_Control_Border;
13	use Elementor\Group_Control_Box_Shadow;
14	use Elementor\Group_Control_Css_Filter;
15	use Elementor\Group_Control_Typography;
16	use Elementor\Widget_Base;
17
18	if (!defined('ABSPATH')) {
19	exit;
20	}
21
22	/**
23	* Spotlight Reveal widget.
24	*/
25	class Spotlight_Reveal extends Widget_Base
26	{
27	/**
28	* Widget slug.
29	*
30	* @return string
31	*/
32	public function get_name(): string
33	{
34	return 'king-addons-spotlight-reveal';
35	}
36
37	/**
38	* Widget title.
39	*
40	* @return string
41	*/
42	public function get_title(): string
43	{
44	return esc_html__('Spotlight Reveal', 'king-addons');
45	}
46
47	/**
48	* Widget icon.
49	*
50	* @return string
51	*/
52	public function get_icon(): string
53	{
54	return 'king-addons-icon king-addons-spotlight-reveal';
55	}
56
57	/**
58	* Style dependencies.
59	*
60	* @return array<int, string>
61	*/
62	public function get_style_depends(): array
63	{
64	return [
65	KING_ADDONS_ASSETS_UNIQUE_KEY . '-spotlight-reveal-style',
66	];
67	}
68
69	/**
70	* Script dependencies.
71	*
72	* @return array<int, string>
73	*/
74	public function get_script_depends(): array
75	{
76	return [
77	KING_ADDONS_ASSETS_UNIQUE_KEY . '-spotlight-reveal-script',
78	];
79	}
80
81	/**
82	* Categories.
83	*
84	* @return array<int, string>
85	*/
86	public function get_categories(): array
87	{
88	return ['king-addons'];
89	}
90
91	/**
92	* Keywords.
93	*
94	* @return array<int, string>
95	*/
96	public function get_keywords(): array
97	{
98	return ['spotlight', 'reveal', 'mask', 'hover', 'scroll', 'interactive'];
99	}
100
101	public function get_custom_help_url()
102	{
103	return 'mailto:[email protected]?subject=Bug Report - King Addons&body=Please describe the issue';
104	}
105
106	/**
107	* Register controls.
108	*
109	* @return void
110	*/
111	public function register_controls(): void
112	{
113	$this->register_content_controls();
114	$this->register_mask_controls();
115	$this->register_trigger_controls();
116	$this->register_style_controls();
117	$this->register_pro_notice_controls();
118	}
119
120	/**
121	* Render widget output.
122	*
123	* @return void
124	*/
125	public function render(): void
126	{
127	$settings = $this->get_settings_for_display();
128
129	$trigger = $this->sanitize_trigger($settings['kng_trigger'] ?? 'cursor');
130	$fallback = $this->sanitize_fallback($settings['kng_fallback_mode'] ?? 'static');
131	$interaction_layer = $this->sanitize_interaction_layer($settings['kng_interaction_layer'] ?? 'base');
132	$dim_base = ($settings['kng_dim_base'] ?? '') === 'yes';
133	$show_reveal_in_editor = ($settings['kng_editor_show_reveal'] ?? 'yes') === 'yes';
134
135	$start_position = $settings['kng_start_position'] ?? 'center';
136	$start_x = (float) ($settings['kng_start_x']['size'] ?? 50);
137	$start_y = (float) ($settings['kng_start_y']['size'] ?? 50);
138
139	if ('custom' !== $start_position) {
140	$start_x = 50;
141	$start_y = 50;
142	}
143
144	$options = [
145	'trigger' => $trigger,
146	'smoothing' => (float) ($settings['kng_cursor_smoothing'] ?? 0.2),
147	'hoverOnly' => ($settings['kng_cursor_hover_only'] ?? 'yes') === 'yes',
148	'constrain' => ($settings['kng_mask_constrain'] ?? 'yes') === 'yes',
149	'startX' => $start_x,
150	'startY' => $start_y,
151	'scrollStart' => (float) ($settings['kng_scroll_start'] ?? 0),
152	'scrollEnd' => (float) ($settings['kng_scroll_end'] ?? 0),
153	];
154
155	$wrapper_classes = [
156	'king-addons-spotlight-reveal',
157	'king-addons-spotlight-reveal--trigger-' . $trigger,
158	'king-addons-spotlight-reveal--fallback-' . $fallback,
159	'king-addons-spotlight-reveal--interaction-' . $interaction_layer,
160	];
161	if ($dim_base) {
162	$wrapper_classes[] = 'king-addons-spotlight-reveal--dim-base';
163	}
164	if (!$show_reveal_in_editor) {
165	$wrapper_classes[] = 'king-addons-spotlight-reveal--editor-hide';
166	}
167
168	$this->add_render_attribute('wrapper', [
169	'class' => $wrapper_classes,
170	'data-options' => wp_json_encode($options),
171	'style' => sprintf('--ka-spotlight-x: %s%%; --ka-spotlight-y: %s%%;', $start_x, $start_y),
172	]);
173
174	$base_title = (string) ($settings['kng_base_title'] ?? '');
175	$base_description = (string) ($settings['kng_base_description'] ?? '');
176	$reveal_title = (string) ($settings['kng_reveal_title'] ?? '');
177	$reveal_description = (string) ($settings['kng_reveal_description'] ?? '');
178
179	$has_base_text = ('' !== trim($base_title)) \|\| ('' !== trim($base_description));
180	$has_reveal_text = ('' !== trim($reveal_title)) \|\| ('' !== trim($reveal_description));
181
182	$reveal_hidden = ($settings['kng_reveal_aria_hidden'] ?? 'yes') === 'yes' && 'base' === $interaction_layer;
183	$reveal_attrs = $reveal_hidden ? ' aria-hidden="true" inert' : '';
184
185	echo '<div ' . $this->get_render_attribute_string('wrapper') . '>';
186	echo '<div class="king-addons-spotlight-reveal__layer king-addons-spotlight-reveal__layer--base">';
187	if ($has_base_text) {
188	echo '<div class="king-addons-spotlight-reveal__content">';
189	echo '<div class="king-addons-spotlight-reveal__text">';
190	if ('' !== trim($base_title)) {
191	echo '<h3 class="king-addons-spotlight-reveal__title">' . esc_html($base_title) . '</h3>';
192	}
193	if ('' !== trim($base_description)) {
194	echo '<div class="king-addons-spotlight-reveal__description">' . wp_kses_post(wpautop($base_description)) . '</div>';
195	}
196	echo '</div>';
197	echo '</div>';
198	}
199	echo '</div>';
200	echo '<div class="king-addons-spotlight-reveal__layer king-addons-spotlight-reveal__layer--reveal"' . $reveal_attrs . '>';
201	if ($has_reveal_text) {
202	echo '<div class="king-addons-spotlight-reveal__content">';
203	echo '<div class="king-addons-spotlight-reveal__text">';
204	if ('' !== trim($reveal_title)) {
205	echo '<h3 class="king-addons-spotlight-reveal__title">' . esc_html($reveal_title) . '</h3>';
206	}
207	if ('' !== trim($reveal_description)) {
208	echo '<div class="king-addons-spotlight-reveal__description">' . wp_kses_post(wpautop($reveal_description)) . '</div>';
209	}
210	echo '</div>';
211	echo '</div>';
212	}
213	echo '</div>';
214	echo '<div class="king-addons-spotlight-reveal__overlay" aria-hidden="true"></div>';
215	echo '</div>';
216	}
217
218	/**
219	* Content controls.
220	*
221	* @return void
222	*/
223	protected function register_content_controls(): void
224	{
225	$this->start_controls_section(
226	'kng_content_section',
227	[
228	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
229	'tab' => Controls_Manager::TAB_CONTENT,
230	]
231	);
232
233	$this->add_control(
234	'kng_base_title',
235	[
236	'label' => esc_html__('Base Title', 'king-addons'),
237	'type' => Controls_Manager::TEXT,
238	'default' => esc_html__('Base Layer', 'king-addons'),
239	'dynamic' => [
240	'active' => true,
241	],
242	]
243	);
244
245	$this->add_control(
246	'kng_base_description',
247	[
248	'label' => esc_html__('Base Description', 'king-addons'),
249	'type' => Controls_Manager::TEXTAREA,
250	'default' => esc_html__('Use this content as the always-visible layer.', 'king-addons'),
251	'dynamic' => [
252	'active' => true,
253	],
254	]
255	);
256
257	$this->add_control(
258	'kng_reveal_title',
259	[
260	'label' => esc_html__('Reveal Title', 'king-addons'),
261	'type' => Controls_Manager::TEXT,
262	'default' => esc_html__('Reveal Layer', 'king-addons'),
263	'dynamic' => [
264	'active' => true,
265	],
266	]
267	);
268
269	$this->add_control(
270	'kng_reveal_description',
271	[
272	'label' => esc_html__('Reveal Description', 'king-addons'),
273	'type' => Controls_Manager::TEXTAREA,
274	'default' => esc_html__('The spotlight reveals this content.', 'king-addons'),
275	'dynamic' => [
276	'active' => true,
277	],
278	]
279	);
280
281	$this->add_control(
282	'kng_interaction_layer',
283	[
284	'label' => esc_html__('Interactive Layer', 'king-addons'),
285	'type' => Controls_Manager::SELECT,
286	'default' => 'base',
287	'options' => [
288	'base' => esc_html__('Base Layer', 'king-addons'),
289	'reveal' => esc_html__('Reveal Layer', 'king-addons'),
290	],
291	'description' => esc_html__('Choose which layer receives pointer interactions.', 'king-addons'),
292	'separator' => 'before',
293	]
294	);
295
296	$this->add_control(
297	'kng_reveal_aria_hidden',
298	[
299	'label' => esc_html__('Hide Reveal Layer From Screen Readers', 'king-addons'),
300	'type' => Controls_Manager::SWITCHER,
301	'return_value' => 'yes',
302	'default' => 'yes',
303	'condition' => [
304	'kng_interaction_layer' => 'base',
305	],
306	]
307	);
308
309	$this->add_control(
310	'kng_base_background_heading',
311	[
312	'label' => esc_html__('Base Background', 'king-addons'),
313	'type' => Controls_Manager::HEADING,
314	'separator' => 'before',
315	]
316	);
317
318	$this->add_group_control(
319	Group_Control_Background::get_type(),
320	[
321	'name' => 'kng_base_background',
322	'types' => ['classic', 'gradient'],
323	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--base',
324	]
325	);
326
327	$this->add_control(
328	'kng_reveal_background_heading',
329	[
330	'label' => esc_html__('Reveal Background', 'king-addons'),
331	'type' => Controls_Manager::HEADING,
332	'separator' => 'before',
333	]
334	);
335
336	$this->add_group_control(
337	Group_Control_Background::get_type(),
338	[
339	'name' => 'kng_reveal_background',
340	'types' => ['classic', 'gradient'],
341	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal',
342	]
343	);
344
345	$this->end_controls_section();
346	}
347
348	/**
349	* Mask controls.
350	*
351	* @return void
352	*/
353	protected function register_mask_controls(): void
354	{
355	$this->start_controls_section(
356	'kng_mask_section',
357	[
358	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Mask', 'king-addons'),
359	'tab' => Controls_Manager::TAB_CONTENT,
360	]
361	);
362
363	$this->add_responsive_control(
364	'kng_mask_size',
365	[
366	'label' => esc_html__('Mask Size', 'king-addons'),
367	'type' => Controls_Manager::SLIDER,
368	'size_units' => ['px', 'vw'],
369	'range' => [
370	'px' => [
371	'min' => 60,
372	'max' => 600,
373	],
374	'vw' => [
375	'min' => 10,
376	'max' => 80,
377	],
378	],
379	'default' => [
380	'size' => 260,
381	'unit' => 'px',
382	],
383	'selectors' => [
384	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-size: {{SIZE}}{{UNIT}};',
385	],
386	]
387	);
388
389	$this->add_control(
390	'kng_mask_softness',
391	[
392	'label' => esc_html__('Edge Softness', 'king-addons'),
393	'type' => Controls_Manager::SLIDER,
394	'size_units' => ['px'],
395	'range' => [
396	'px' => [
397	'min' => 0,
398	'max' => 200,
399	],
400	],
401	'default' => [
402	'size' => 32,
403	'unit' => 'px',
404	],
405	'selectors' => [
406	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-softness: {{SIZE}}{{UNIT}};',
407	],
408	]
409	);
410
411	$this->add_control(
412	'kng_start_position',
413	[
414	'label' => esc_html__('Start Position', 'king-addons'),
415	'type' => Controls_Manager::SELECT,
416	'default' => 'center',
417	'options' => [
418	'center' => esc_html__('Center', 'king-addons'),
419	'custom' => esc_html__('Custom', 'king-addons'),
420	],
421	'separator' => 'before',
422	]
423	);
424
425	$this->add_control(
426	'kng_start_x',
427	[
428	'label' => esc_html__('Start X (%)', 'king-addons'),
429	'type' => Controls_Manager::SLIDER,
430	'size_units' => ['%'],
431	'range' => [
432	'%' => [
433	'min' => 0,
434	'max' => 100,
435	],
436	],
437	'default' => [
438	'size' => 50,
439	'unit' => '%',
440	],
441	'condition' => [
442	'kng_start_position' => 'custom',
443	],
444	]
445	);
446
447	$this->add_control(
448	'kng_start_y',
449	[
450	'label' => esc_html__('Start Y (%)', 'king-addons'),
451	'type' => Controls_Manager::SLIDER,
452	'size_units' => ['%'],
453	'range' => [
454	'%' => [
455	'min' => 0,
456	'max' => 100,
457	],
458	],
459	'default' => [
460	'size' => 50,
461	'unit' => '%',
462	],
463	'condition' => [
464	'kng_start_position' => 'custom',
465	],
466	]
467	);
468
469	$this->add_control(
470	'kng_mask_constrain',
471	[
472	'label' => esc_html__('Constrain Within Container', 'king-addons'),
473	'type' => Controls_Manager::SWITCHER,
474	'return_value' => 'yes',
475	'default' => 'yes',
476	'separator' => 'before',
477	]
478	);
479
480	$this->end_controls_section();
481	}
482
483	/**
484	* Trigger controls.
485	*
486	* @return void
487	*/
488	protected function register_trigger_controls(): void
489	{
490	$this->start_controls_section(
491	'kng_trigger_section',
492	[
493	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Trigger', 'king-addons'),
494	'tab' => Controls_Manager::TAB_CONTENT,
495	]
496	);
497
498	$this->add_control(
499	'kng_trigger',
500	[
501	'label' => esc_html__('Reveal Trigger', 'king-addons'),
502	'type' => Controls_Manager::SELECT,
503	'default' => 'cursor',
504	'options' => [
505	'cursor' => esc_html__('Follow Cursor', 'king-addons'),
506	'scroll' => esc_html__('Scroll Progress', 'king-addons'),
507	],
508	]
509	);
510
511	$this->add_control(
512	'kng_cursor_heading',
513	[
514	'label' => esc_html__('Cursor Follow', 'king-addons'),
515	'type' => Controls_Manager::HEADING,
516	'separator' => 'before',
517	'condition' => [
518	'kng_trigger' => 'cursor',
519	],
520	]
521	);
522
523	$this->add_control(
524	'kng_cursor_smoothing',
525	[
526	'label' => esc_html__('Smoothing', 'king-addons'),
527	'type' => Controls_Manager::NUMBER,
528	'min' => 0,
529	'max' => 1,
530	'step' => 0.05,
531	'default' => 0.2,
532	'condition' => [
533	'kng_trigger' => 'cursor',
534	],
535	]
536	);
537
538	$this->add_control(
539	'kng_cursor_hover_only',
540	[
541	'label' => esc_html__('Activate on Hover Only', 'king-addons'),
542	'type' => Controls_Manager::SWITCHER,
543	'return_value' => 'yes',
544	'default' => 'yes',
545	'condition' => [
546	'kng_trigger' => 'cursor',
547	],
548	]
549	);
550
551	$this->add_control(
552	'kng_scroll_heading',
553	[
554	'label' => esc_html__('Scroll Progress', 'king-addons'),
555	'type' => Controls_Manager::HEADING,
556	'separator' => 'before',
557	'condition' => [
558	'kng_trigger' => 'scroll',
559	],
560	]
561	);
562
563	$this->add_control(
564	'kng_scroll_start',
565	[
566	'label' => esc_html__('Start Offset (%)', 'king-addons'),
567	'type' => Controls_Manager::NUMBER,
568	'min' => 0,
569	'max' => 100,
570	'step' => 1,
571	'default' => 0,
572	'condition' => [
573	'kng_trigger' => 'scroll',
574	],
575	'description' => esc_html__('Viewport offset before the reveal starts.', 'king-addons'),
576	]
577	);
578
579	$this->add_control(
580	'kng_scroll_end',
581	[
582	'label' => esc_html__('End Offset (%)', 'king-addons'),
583	'type' => Controls_Manager::NUMBER,
584	'min' => 0,
585	'max' => 100,
586	'step' => 1,
587	'default' => 0,
588	'condition' => [
589	'kng_trigger' => 'scroll',
590	],
591	'description' => esc_html__('Viewport offset after the reveal ends.', 'king-addons'),
592	]
593	);
594
595	$this->add_control(
596	'kng_editor_show_reveal',
597	[
598	'label' => esc_html__('Show Reveal Layer in Editor', 'king-addons'),
599	'type' => Controls_Manager::SWITCHER,
600	'return_value' => 'yes',
601	'default' => 'yes',
602	'separator' => 'before',
603	]
604	);
605
606	$this->add_control(
607	'kng_fallback_mode',
608	[
609	'label' => esc_html__('Fallback When JS Is Disabled', 'king-addons'),
610	'type' => Controls_Manager::SELECT,
611	'default' => 'static',
612	'options' => [
613	'static' => esc_html__('Static Spotlight', 'king-addons'),
614	'visible' => esc_html__('Reveal Fully Visible', 'king-addons'),
615	],
616	'separator' => 'before',
617	]
618	);
619
620	$this->end_controls_section();
621	}
622
623	/**
624	* Style controls.
625	*
626	* @return void
627	*/
628	protected function register_style_controls(): void
629	{
630	$this->start_controls_section(
631	'kng_style_container_section',
632	[
633	'label' => esc_html__('Container', 'king-addons'),
634	'tab' => Controls_Manager::TAB_STYLE,
635	]
636	);
637
638	$this->add_responsive_control(
639	'kng_container_min_height',
640	[
641	'label' => esc_html__('Min Height', 'king-addons'),
642	'type' => Controls_Manager::SLIDER,
643	'size_units' => ['px', 'vh'],
644	'range' => [
645	'px' => [
646	'min' => 120,
647	'max' => 1000,
648	],
649	'vh' => [
650	'min' => 20,
651	'max' => 100,
652	],
653	],
654	'default' => [
655	'size' => 320,
656	'unit' => 'px',
657	],
658	'selectors' => [
659	'{{WRAPPER}} .king-addons-spotlight-reveal' => 'min-height: {{SIZE}}{{UNIT}};',
660	],
661	]
662	);
663
664	$this->add_control(
665	'kng_container_radius',
666	[
667	'label' => esc_html__('Border Radius', 'king-addons'),
668	'type' => Controls_Manager::SLIDER,
669	'size_units' => ['px', '%'],
670	'range' => [
671	'px' => [
672	'min' => 0,
673	'max' => 80,
674	],
675	'%' => [
676	'min' => 0,
677	'max' => 50,
678	],
679	],
680	'selectors' => [
681	'{{WRAPPER}} .king-addons-spotlight-reveal' => 'border-radius: {{SIZE}}{{UNIT}};',
682	],
683	]
684	);
685
686	$this->add_group_control(
687	Group_Control_Border::get_type(),
688	[
689	'name' => 'kng_container_border',
690	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal',
691	]
692	);
693
694	$this->add_group_control(
695	Group_Control_Box_Shadow::get_type(),
696	[
697	'name' => 'kng_container_shadow',
698	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal',
699	]
700	);
701
702	$this->end_controls_section();
703
704	$this->start_controls_section(
705	'kng_style_base_section',
706	[
707	'label' => esc_html__('Base Layer', 'king-addons'),
708	'tab' => Controls_Manager::TAB_STYLE,
709	]
710	);
711
712	$this->add_control(
713	'kng_base_opacity',
714	[
715	'label' => esc_html__('Opacity', 'king-addons'),
716	'type' => Controls_Manager::NUMBER,
717	'min' => 0,
718	'max' => 1,
719	'step' => 0.05,
720	'default' => 1,
721	'selectors' => [
722	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-opacity: {{VALUE}};',
723	],
724	]
725	);
726
727	$this->add_control(
728	'kng_base_title_heading',
729	[
730	'label' => esc_html__('Title', 'king-addons'),
731	'type' => Controls_Manager::HEADING,
732	'separator' => 'before',
733	]
734	);
735
736	$this->add_control(
737	'kng_base_title_color',
738	[
739	'label' => esc_html__('Color', 'king-addons'),
740	'type' => Controls_Manager::COLOR,
741	'default' => '#ffffff',
742	'selectors' => [
743	'{{WRAPPER}} .king-addons-spotlight-reveal__layer--base .king-addons-spotlight-reveal__title' => 'color: {{VALUE}};',
744	],
745	]
746	);
747
748	$this->add_group_control(
749	Group_Control_Typography::get_type(),
750	[
751	'name' => 'kng_base_title_typography',
752	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--base .king-addons-spotlight-reveal__title',
753	]
754	);
755
756	$this->add_responsive_control(
757	'kng_base_content_width',
758	[
759	'label' => esc_html__('Content Width', 'king-addons'),
760	'type' => Controls_Manager::SLIDER,
761	'size_units' => ['px', '%', 'vw'],
762	'range' => [
763	'px' => [
764	'min' => 120,
765	'max' => 1200,
766	],
767	'%' => [
768	'min' => 20,
769	'max' => 100,
770	],
771	'vw' => [
772	'min' => 20,
773	'max' => 100,
774	],
775	],
776	'selectors' => [
777	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-content-width: {{SIZE}}{{UNIT}};',
778	],
779	]
780	);
781
782	$this->add_control(
783	'kng_base_description_heading',
784	[
785	'label' => esc_html__('Description', 'king-addons'),
786	'type' => Controls_Manager::HEADING,
787	'separator' => 'before',
788	]
789	);
790
791	$this->add_control(
792	'kng_base_description_color',
793	[
794	'label' => esc_html__('Color', 'king-addons'),
795	'type' => Controls_Manager::COLOR,
796	'selectors' => [
797	'{{WRAPPER}} .king-addons-spotlight-reveal__layer--base .king-addons-spotlight-reveal__description' => 'color: {{VALUE}};',
798	],
799	]
800	);
801
802	$this->add_group_control(
803	Group_Control_Typography::get_type(),
804	[
805	'name' => 'kng_base_description_typography',
806	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--base .king-addons-spotlight-reveal__description',
807	]
808	);
809
810	$this->add_responsive_control(
811	'kng_base_title_description_gap',
812	[
813	'label' => esc_html__('Title/Description Spacing', 'king-addons'),
814	'type' => Controls_Manager::SLIDER,
815	'size_units' => ['px', 'em', 'rem'],
816	'range' => [
817	'px' => [
818	'min' => 0,
819	'max' => 120,
820	],
821	'em' => [
822	'min' => 0,
823	'max' => 10,
824	],
825	'rem' => [
826	'min' => 0,
827	'max' => 10,
828	],
829	],
830	'selectors' => [
831	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-gap: {{SIZE}}{{UNIT}};',
832	],
833	]
834	);
835
836	$this->add_responsive_control(
837	'kng_base_padding',
838	[
839	'label' => esc_html__('Padding', 'king-addons'),
840	'type' => Controls_Manager::DIMENSIONS,
841	'size_units' => ['px', '%', 'em', 'rem'],
842	'selectors' => [
843	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
844	],
845	]
846	);
847
848	$this->add_control(
849	'kng_base_text_align',
850	[
851	'label' => esc_html__('Text Alignment', 'king-addons'),
852	'type' => Controls_Manager::CHOOSE,
853	'toggle' => true,
854	'default' => 'center',
855	'options' => [
856	'left' => [
857	'title' => esc_html__('Left', 'king-addons'),
858	'icon' => 'eicon-text-align-left',
859	],
860	'center' => [
861	'title' => esc_html__('Center', 'king-addons'),
862	'icon' => 'eicon-text-align-center',
863	],
864	'right' => [
865	'title' => esc_html__('Right', 'king-addons'),
866	'icon' => 'eicon-text-align-right',
867	],
868	],
869	'selectors' => [
870	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-text-align: {{VALUE}};',
871	],
872	]
873	);
874
875	$this->add_control(
876	'kng_base_horizontal_align',
877	[
878	'label' => esc_html__('Horizontal Position', 'king-addons'),
879	'type' => Controls_Manager::CHOOSE,
880	'toggle' => true,
881	'default' => 'center',
882	'options' => [
883	'left' => [
884	'title' => esc_html__('Left', 'king-addons'),
885	'icon' => 'eicon-h-align-left',
886	],
887	'center' => [
888	'title' => esc_html__('Center', 'king-addons'),
889	'icon' => 'eicon-h-align-center',
890	],
891	'right' => [
892	'title' => esc_html__('Right', 'king-addons'),
893	'icon' => 'eicon-h-align-right',
894	],
895	],
896	'selectors_dictionary' => [
897	'left' => 'flex-start',
898	'center' => 'center',
899	'right' => 'flex-end',
900	],
901	'selectors' => [
902	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-justify: {{VALUE}};',
903	],
904	]
905	);
906
907	$this->add_control(
908	'kng_base_vertical_align',
909	[
910	'label' => esc_html__('Vertical Position', 'king-addons'),
911	'type' => Controls_Manager::CHOOSE,
912	'toggle' => true,
913	'default' => 'middle',
914	'options' => [
915	'top' => [
916	'title' => esc_html__('Top', 'king-addons'),
917	'icon' => 'eicon-v-align-top',
918	],
919	'middle' => [
920	'title' => esc_html__('Middle', 'king-addons'),
921	'icon' => 'eicon-v-align-middle',
922	],
923	'bottom' => [
924	'title' => esc_html__('Bottom', 'king-addons'),
925	'icon' => 'eicon-v-align-bottom',
926	],
927	],
928	'selectors_dictionary' => [
929	'top' => 'flex-start',
930	'middle' => 'center',
931	'bottom' => 'flex-end',
932	],
933	'selectors' => [
934	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-align: {{VALUE}};',
935	],
936	]
937	);
938
939	$this->add_control(
940	'kng_dim_base',
941	[
942	'label' => esc_html__('Dim Base On Reveal', 'king-addons'),
943	'type' => Controls_Manager::SWITCHER,
944	'return_value' => 'yes',
945	'default' => '',
946	'separator' => 'before',
947	]
948	);
949
950	$this->add_control(
951	'kng_dim_base_opacity',
952	[
953	'label' => esc_html__('Dim Opacity', 'king-addons'),
954	'type' => Controls_Manager::NUMBER,
955	'min' => 0,
956	'max' => 1,
957	'step' => 0.05,
958	'default' => 0.6,
959	'selectors' => [
960	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-base-dim-opacity: {{VALUE}};',
961	],
962	'condition' => [
963	'kng_dim_base' => 'yes',
964	],
965	]
966	);
967
968	$this->end_controls_section();
969
970	$this->start_controls_section(
971	'kng_style_reveal_section',
972	[
973	'label' => esc_html__('Reveal Layer', 'king-addons'),
974	'tab' => Controls_Manager::TAB_STYLE,
975	]
976	);
977
978	$this->add_control(
979	'kng_reveal_opacity',
980	[
981	'label' => esc_html__('Opacity', 'king-addons'),
982	'type' => Controls_Manager::NUMBER,
983	'min' => 0,
984	'max' => 1,
985	'step' => 0.05,
986	'default' => 1,
987	'selectors' => [
988	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-opacity: {{VALUE}};',
989	],
990	]
991	);
992
993	$this->add_control(
994	'kng_reveal_title_heading',
995	[
996	'label' => esc_html__('Title', 'king-addons'),
997	'type' => Controls_Manager::HEADING,
998	'separator' => 'before',
999	]
1000	);
1001
1002	$this->add_control(
1003	'kng_reveal_title_color',
1004	[
1005	'label' => esc_html__('Color', 'king-addons'),
1006	'type' => Controls_Manager::COLOR,
1007	'selectors' => [
1008	'{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal .king-addons-spotlight-reveal__title' => 'color: {{VALUE}};',
1009	],
1010	]
1011	);
1012
1013	$this->add_group_control(
1014	Group_Control_Typography::get_type(),
1015	[
1016	'name' => 'kng_reveal_title_typography',
1017	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal .king-addons-spotlight-reveal__title',
1018	]
1019	);
1020
1021	$this->add_responsive_control(
1022	'kng_reveal_content_width',
1023	[
1024	'label' => esc_html__('Content Width', 'king-addons'),
1025	'type' => Controls_Manager::SLIDER,
1026	'size_units' => ['px', '%', 'vw'],
1027	'range' => [
1028	'px' => [
1029	'min' => 120,
1030	'max' => 1200,
1031	],
1032	'%' => [
1033	'min' => 20,
1034	'max' => 100,
1035	],
1036	'vw' => [
1037	'min' => 20,
1038	'max' => 100,
1039	],
1040	],
1041	'selectors' => [
1042	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-content-width: {{SIZE}}{{UNIT}};',
1043	],
1044	]
1045	);
1046
1047	$this->add_control(
1048	'kng_reveal_description_heading',
1049	[
1050	'label' => esc_html__('Description', 'king-addons'),
1051	'type' => Controls_Manager::HEADING,
1052	'separator' => 'before',
1053	]
1054	);
1055
1056	$this->add_control(
1057	'kng_reveal_description_color',
1058	[
1059	'label' => esc_html__('Color', 'king-addons'),
1060	'type' => Controls_Manager::COLOR,
1061	'selectors' => [
1062	'{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal .king-addons-spotlight-reveal__description' => 'color: {{VALUE}};',
1063	],
1064	]
1065	);
1066
1067	$this->add_group_control(
1068	Group_Control_Typography::get_type(),
1069	[
1070	'name' => 'kng_reveal_description_typography',
1071	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal .king-addons-spotlight-reveal__description',
1072	]
1073	);
1074
1075	$this->add_responsive_control(
1076	'kng_reveal_title_description_gap',
1077	[
1078	'label' => esc_html__('Title/Description Spacing', 'king-addons'),
1079	'type' => Controls_Manager::SLIDER,
1080	'size_units' => ['px', 'em', 'rem'],
1081	'range' => [
1082	'px' => [
1083	'min' => 0,
1084	'max' => 120,
1085	],
1086	'em' => [
1087	'min' => 0,
1088	'max' => 10,
1089	],
1090	'rem' => [
1091	'min' => 0,
1092	'max' => 10,
1093	],
1094	],
1095	'selectors' => [
1096	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-gap: {{SIZE}}{{UNIT}};',
1097	],
1098	]
1099	);
1100
1101	$this->add_group_control(
1102	Group_Control_Css_Filter::get_type(),
1103	[
1104	'name' => 'kng_reveal_filters',
1105	'selector' => '{{WRAPPER}} .king-addons-spotlight-reveal__layer--reveal',
1106	]
1107	);
1108
1109	$this->add_responsive_control(
1110	'kng_reveal_padding',
1111	[
1112	'label' => esc_html__('Padding', 'king-addons'),
1113	'type' => Controls_Manager::DIMENSIONS,
1114	'size_units' => ['px', '%', 'em', 'rem'],
1115	'selectors' => [
1116	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1117	],
1118	]
1119	);
1120
1121	$this->add_control(
1122	'kng_reveal_text_align',
1123	[
1124	'label' => esc_html__('Text Alignment', 'king-addons'),
1125	'type' => Controls_Manager::CHOOSE,
1126	'toggle' => true,
1127	'default' => 'center',
1128	'options' => [
1129	'left' => [
1130	'title' => esc_html__('Left', 'king-addons'),
1131	'icon' => 'eicon-text-align-left',
1132	],
1133	'center' => [
1134	'title' => esc_html__('Center', 'king-addons'),
1135	'icon' => 'eicon-text-align-center',
1136	],
1137	'right' => [
1138	'title' => esc_html__('Right', 'king-addons'),
1139	'icon' => 'eicon-text-align-right',
1140	],
1141	],
1142	'selectors' => [
1143	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-text-align: {{VALUE}};',
1144	],
1145	]
1146	);
1147
1148	$this->add_control(
1149	'kng_reveal_horizontal_align',
1150	[
1151	'label' => esc_html__('Horizontal Position', 'king-addons'),
1152	'type' => Controls_Manager::CHOOSE,
1153	'toggle' => true,
1154	'default' => 'center',
1155	'options' => [
1156	'left' => [
1157	'title' => esc_html__('Left', 'king-addons'),
1158	'icon' => 'eicon-h-align-left',
1159	],
1160	'center' => [
1161	'title' => esc_html__('Center', 'king-addons'),
1162	'icon' => 'eicon-h-align-center',
1163	],
1164	'right' => [
1165	'title' => esc_html__('Right', 'king-addons'),
1166	'icon' => 'eicon-h-align-right',
1167	],
1168	],
1169	'selectors_dictionary' => [
1170	'left' => 'flex-start',
1171	'center' => 'center',
1172	'right' => 'flex-end',
1173	],
1174	'selectors' => [
1175	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-justify: {{VALUE}};',
1176	],
1177	]
1178	);
1179
1180	$this->add_control(
1181	'kng_reveal_vertical_align',
1182	[
1183	'label' => esc_html__('Vertical Position', 'king-addons'),
1184	'type' => Controls_Manager::CHOOSE,
1185	'toggle' => true,
1186	'default' => 'middle',
1187	'options' => [
1188	'top' => [
1189	'title' => esc_html__('Top', 'king-addons'),
1190	'icon' => 'eicon-v-align-top',
1191	],
1192	'middle' => [
1193	'title' => esc_html__('Middle', 'king-addons'),
1194	'icon' => 'eicon-v-align-middle',
1195	],
1196	'bottom' => [
1197	'title' => esc_html__('Bottom', 'king-addons'),
1198	'icon' => 'eicon-v-align-bottom',
1199	],
1200	],
1201	'selectors_dictionary' => [
1202	'top' => 'flex-start',
1203	'middle' => 'center',
1204	'bottom' => 'flex-end',
1205	],
1206	'selectors' => [
1207	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-reveal-align: {{VALUE}};',
1208	],
1209	]
1210	);
1211
1212	$this->end_controls_section();
1213
1214	$this->start_controls_section(
1215	'kng_style_overlay_section',
1216	[
1217	'label' => esc_html__('Overlay', 'king-addons'),
1218	'tab' => Controls_Manager::TAB_STYLE,
1219	]
1220	);
1221
1222	$this->add_control(
1223	'kng_overlay_color',
1224	[
1225	'label' => esc_html__('Tint Color', 'king-addons'),
1226	'type' => Controls_Manager::COLOR,
1227	'selectors' => [
1228	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-overlay-color: {{VALUE}};',
1229	],
1230	]
1231	);
1232
1233	$this->add_control(
1234	'kng_overlay_opacity',
1235	[
1236	'label' => esc_html__('Opacity', 'king-addons'),
1237	'type' => Controls_Manager::NUMBER,
1238	'min' => 0,
1239	'max' => 1,
1240	'step' => 0.05,
1241	'default' => 0.65,
1242	'selectors' => [
1243	'{{WRAPPER}} .king-addons-spotlight-reveal' => '--ka-spotlight-overlay-opacity: {{VALUE}};',
1244	],
1245	]
1246	);
1247
1248	$this->end_controls_section();
1249	}
1250
1251	/**
1252	* Register Pro notice controls.
1253	*
1254	* @return void
1255	*/
1256	public function register_pro_notice_controls(): void
1257	{
1258	if (!king_addons_can_use_pro()) {
1259	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'spotlight-reveal', [
1260	'Ellipse, rectangle, beam, and SVG mask shapes',
1261	'Blur inside/outside mask and edge blur controls',
1262	'Blend modes, reveal intensity, and noise overlays',
1263	'Touch drag spotlight and swipe-to-reveal modes',
1264	'Advanced scroll paths, snaps, and template reveals',
1265	]);
1266	}
1267	}
1268
1269	/**
1270	* Sanitize trigger value.
1271	*
1272	* @param string $value Trigger value.
1273	*
1274	* @return string
1275	*/
1276	protected function sanitize_trigger(string $value): string
1277	{
1278	$allowed = ['cursor', 'scroll'];
1279	return in_array($value, $allowed, true) ? $value : 'cursor';
1280	}
1281
1282	/**
1283	* Sanitize fallback value.
1284	*
1285	* @param string $value Fallback value.
1286	*
1287	* @return string
1288	*/
1289	protected function sanitize_fallback(string $value): string
1290	{
1291	$allowed = ['static', 'visible'];
1292	return in_array($value, $allowed, true) ? $value : 'static';
1293	}
1294
1295	/**
1296	* Sanitize interaction layer.
1297	*
1298	* @param string $value Interaction layer.
1299	*
1300	* @return string
1301	*/
1302	protected function sanitize_interaction_layer(string $value): string
1303	{
1304	$allowed = ['base', 'reveal'];
1305	return in_array($value, $allowed, true) ? $value : 'base';
1306	}
1307	}
1308