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

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

864 lines 33.1 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Icons_Manager;
9	use Elementor\Plugin;
10	use Elementor\Widget_Base;
11
12	if (!defined('ABSPATH')) {
13	exit; // Exit if accessed directly.
14	}
15
16
17
18	class Video_Popup extends Widget_Base
19	{
20
21
22	public function get_name(): string
23	{
24	return 'king-addons-video-popup';
25	}
26
27	public function get_title(): string
28	{
29	return esc_html__('Video Popup', 'king-addons');
30	}
31
32	public function get_icon(): string
33	{
34	/** @noinspection SpellCheckingInspection */
35	return 'king-addons-icon king-addons-video-popup';
36	}
37
38	public function get_style_depends(): array
39	{
40	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-video-popup-style'];
41	}
42
43	public function get_categories(): array
44	{
45	return ['king-addons'];
46	}
47
48	public function get_keywords(): array
49	{
50	return ['off', 'canvas', 'offcanvas', 'ofcavas', 'off-canvas', 'content', 'button', 'sidebar', 'side', 'bar',
51	'menu', 'popup', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link', 'left',
52	'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture',
53	'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons', 'mouseover', 'page', 'center',
54	'kingaddons', 'king-addons', 'off canvas', 'pop up', 'popup', 'lightbox', 'box', 'modal', 'window', 'tab',
55	'appear', 'show', 'hide', 'up', 'video', 'play', 'player', 'frame', 'iframe', 'embed', 'file', 'mp4', 'url',
56	'youtube', 'vimeo', 'dailymotion', 'videopress', 'hosted', 'source', 'external', 'internal', 'hosting'];
57	}
58
59	public function get_custom_help_url()
60	{
61	return 'mailto:[email protected]?subject=Bug Report - King Addons&body=Please describe the issue';
62	}
63
64	protected function register_controls(): void
65	{
66	/** START TAB: CONTENT ===================== */
67	/** SECTION: General ===================== */
68	$this->start_controls_section(
69	'kng_video_popup_section_general',
70	[
71	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
72	]
73	);
74
75	/** VIDEO */
76
77	$this->add_control(
78	'kng_video_popup_video_type',
79	[
80	'label' => '<b>' . esc_html__('Source', 'king-addons') . '</b>',
81	'type' => Controls_Manager::SELECT,
82	'default' => 'youtube',
83	'options' => [
84	'youtube' => esc_html__('YouTube', 'king-addons'),
85	'vimeo' => esc_html__('Vimeo', 'king-addons'),
86	'hosted' => esc_html__('Self Hosted', 'king-addons'),
87	'external-hosted' => esc_html__('External Hosted', 'king-addons'),
88	],
89	]
90	);
91
92	$this->add_control(
93	'kng_video_popup_youtube_url_notice',
94	[
95	'type' => Controls_Manager::NOTICE,
96	'notice_type' => 'warning',
97	'dismissible' => false,
98	'heading' => esc_html__( 'Link code of the video', 'king-addons' ),
99	'content' => esc_html__( 'For example for https://www.youtube.com/watch?v=XHOmBV4js_E it will be XHOmBV4js_E', 'king-addons' ),
100	'condition' => [
101	'kng_video_popup_video_type' => 'youtube',
102	],
103	]
104	);
105
106	$this->add_control(
107	'kng_video_popup_youtube_url',
108	[
109	'label' => '<b>' . esc_html__('Link code of the video', 'king-addons') . '</b>',
110	'type' => Controls_Manager::TEXT,
111	'placeholder' => esc_html__('Enter your video code', 'king-addons') . ' (YouTube)',
112	'default' => 'XHOmBV4js_E',
113	'label_block' => false,
114	'condition' => [
115	'kng_video_popup_video_type' => 'youtube',
116	],
117	'ai' => [
118	'active' => false,
119	],
120	]
121	);
122
123	$this->add_control(
124	'kng_video_popup_vimeo_url_notice',
125	[
126	'type' => Controls_Manager::NOTICE,
127	'notice_type' => 'warning',
128	'dismissible' => false,
129	'heading' => esc_html__( 'Link code of the video', 'king-addons' ),
130	'content' => esc_html__( 'For example for https://vimeo.com/235215203 it will be 235215203', 'king-addons' ),
131	'condition' => [
132	'kng_video_popup_video_type' => 'vimeo',
133	],
134	]
135	);
136
137	$this->add_control(
138	'kng_video_popup_vimeo_url',
139	[
140	'label' => '<b>' . esc_html__('Link code of the video', 'king-addons') . '</b>',
141	'type' => Controls_Manager::TEXT,
142	'placeholder' => esc_html__('Enter your video code', 'king-addons') . ' (Vimeo)',
143	'default' => '235215203',
144	'label_block' => false,
145	'condition' => [
146	'kng_video_popup_video_type' => 'vimeo',
147	],
148	'ai' => [
149	'active' => false,
150	],
151	]
152	);
153
154	$this->add_control(
155	'kng_video_popup_hosted_url',
156	[
157	'label' => esc_html__('Choose Video File', 'king-addons'),
158	'type' => Controls_Manager::MEDIA,
159	'media_types' => [
160	'video',
161	],
162	'condition' => [
163	'kng_video_popup_video_type' => 'hosted',
164	],
165	]
166	);
167
168	$this->add_control(
169	'kng_video_popup_external_url',
170	[
171	'label' => esc_html__('URL', 'king-addons'),
172	'type' => Controls_Manager::URL,
173	'label_block' => true,
174	'placeholder' => esc_html__('Enter your URL', 'king-addons'),
175	'condition' => [
176	'kng_video_popup_video_type' => 'external-hosted',
177	],
178	]
179	);
180
181	$this->add_control(
182	'kng_video_popup_start_time',
183	[
184	'label' => esc_html__('Start Time', 'king-addons'),
185	'type' => Controls_Manager::NUMBER,
186	'description' => esc_html__('Specify a start time (in seconds)', 'king-addons'),
187	'condition' => [
188	'kng_video_popup_video_type' => 'youtube',
189	],
190	'separator' => 'before',
191	]
192	);
193
194	/** END: VIDEO */
195
196	$this->add_control(
197	'kng_video_popup_box_position',
198	[
199	'label' => esc_html__('Box Animation Direction', 'king-addons'),
200	'type' => Controls_Manager::CHOOSE,
201	'default' => 'bottom',
202	'options' => [
203	'top' => [
204	'title' => esc_html__('Top', 'king-addons'),
205	'icon' => 'eicon-v-align-bottom',
206	],
207	'right' => [
208	'title' => esc_html__('Right', 'king-addons'),
209	'icon' => 'eicon-h-align-left',
210	],
211	'bottom' => [
212	'title' => esc_html__('Bottom', 'king-addons'),
213	'icon' => 'eicon-v-align-top',
214	],
215	'left' => [
216	'title' => esc_html__('Left', 'king-addons'),
217	'icon' => 'eicon-h-align-right',
218	],
219	],
220	'separator' => 'before',
221	]
222	);
223
224	$this->add_control(
225	'kng_video_popup_box_max_width_switcher',
226	[
227	'label' => esc_html__('Set Maximum Width of popup box', 'king-addons'),
228	'type' => Controls_Manager::SWITCHER,
229	'separator' => 'before'
230	]
231	);
232
233	$this->add_responsive_control(
234	'kng_video_popup_box_max_width',
235	[
236	'label' => esc_html__('Maximum Width (px)', 'king-addons'),
237	'type' => Controls_Manager::NUMBER,
238	'min' => 0,
239	'step' => 1,
240	'default' => '',
241	'selectors' => [
242	'.king-addons-video-popup-{{ID}}' => 'max-width: {{VALUE}}px;',
243	],
244	'condition' => [
245	'kng_video_popup_box_max_width_switcher!' => '',
246	]
247	]
248	);
249
250	$this->add_control(
251	'kng_video_popup_box_max_height_switcher',
252	[
253	'label' => esc_html__('Set Maximum Height of popup box', 'king-addons'),
254	'type' => Controls_Manager::SWITCHER
255	]
256	);
257
258	$this->add_responsive_control(
259	'kng_video_popup_box_max_height',
260	[
261	'label' => esc_html__('Maximum Height (px)', 'king-addons'),
262	'type' => Controls_Manager::NUMBER,
263	'min' => 0,
264	'step' => 1,
265	'default' => '',
266	'selectors' => [
267	'.king-addons-video-popup-{{ID}}' => 'max-height: {{VALUE}}px;',
268	],
269	'condition' => [
270	'kng_video_popup_box_max_height_switcher!' => '',
271	]
272	]
273	);
274
275	$this->add_control(
276	'kng_video_popup_disable_btn',
277	[
278	'label' => esc_html__('Disable Button', 'king-addons'),
279	'type' => Controls_Manager::SWITCHER,
280	'description' => esc_html__('This is a useful feature if there is a need to set a custom element as the trigger instead of the default button.', 'king-addons'),
281	'separator' => 'before'
282	]
283	);
284
285	$this->add_control(
286	'kng_video_popup_class',
287	[
288	'label' => esc_html__('CSS Class of trigger element (optional)', 'king-addons'),
289	'description' => esc_html__('Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the Popup will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode.', 'king-addons'),
290	'type' => Controls_Manager::TEXT,
291	'placeholder' => esc_html__('Type your class here', 'king-addons'),
292	'label_block' => true,
293	'ai' => [
294	'active' => false,
295	],
296	]
297	);
298
299	$this->end_controls_section();
300	/** END SECTION: General ===================== */
301	/** END TAB: CONTENT ===================== */
302
303	/** TAB: STYLE ===================== */
304	/** SECTION: Button ===================== */
305	$this->start_controls_section(
306	'kng_video_popup_section_style_btn',
307	[
308	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
309	'tab' => Controls_Manager::TAB_STYLE,
310	]
311	);
312
313	$this->add_control(
314	'kng_video_popup_btn_icon',
315	[
316	'label' => esc_html__('Select Icon', 'king-addons'),
317	'type' => Controls_Manager::ICONS,
318	'skin' => 'inline',
319	'label_block' => false,
320	'exclude_inline_options' => ['svg'],
321	'default' => [
322	'value' => 'fas fa-play',
323	'library' => 'fa-solid',
324	],
325	]
326	);
327
328	$this->add_responsive_control(
329	'kng_video_popup_btn_h_position',
330	[
331	'label' => esc_html__('Button Horizontal Position', 'king-addons'),
332	'type' => Controls_Manager::CHOOSE,
333	'default' => 'center',
334	'options' => [
335	'left' => [
336	'title' => esc_html__('Left', 'king-addons'),
337	'icon' => 'eicon-h-align-left',
338	],
339	'center' => [
340	'title' => esc_html__('Center', 'king-addons'),
341	'icon' => 'eicon-h-align-center',
342	],
343	'right' => [
344	'title' => esc_html__('Right', 'king-addons'),
345	'icon' => 'eicon-h-align-right',
346	],
347	],
348	'selectors' => [
349	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
350	],
351	]
352	);
353
354	$this->add_responsive_control(
355	'kng_video_popup_btn_icon_size',
356	[
357	'label' => esc_html__('Icon Size', 'king-addons'),
358	'type' => Controls_Manager::NUMBER,
359	'step' => 1,
360	'min' => 0,
361	'default' => 20,
362	'selectors' => [
363	'{{WRAPPER}} .king-addons-video-popup-button i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
364	'{{WRAPPER}} .king-addons-video-popup-button img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
365	'{{WRAPPER}} .king-addons-video-popup-button svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
366	],
367	]
368	);
369
370	$this->add_responsive_control(
371	'kng_video_popup_btn_transition_icon',
372	[
373	'label' => esc_html__('Transition duration for icon on hover (ms)', 'king-addons'),
374	'type' => Controls_Manager::NUMBER,
375	'min' => 0,
376	'step' => 10,
377	'default' => 300,
378	'selectors' => [
379	'{{WRAPPER}} .king-addons-video-popup-button i' => 'transition: all {{SIZE}}ms;',
380	'{{WRAPPER}} .king-addons-video-popup-button img' => 'transition: all {{SIZE}}ms;',
381	'{{WRAPPER}} .king-addons-video-popup-button svg' => 'transition: all {{SIZE}}ms;',
382	'{{WRAPPER}} .king-addons-video-popup-button-wrap .king-addons-video-popup-button' => 'transition: all {{SIZE}}ms;',
383	],
384	]
385	);
386
387	$this->add_control(
388	'kng_video_popup_btn_scale_switcher',
389	[
390	'label' => esc_html__('Scale button on hover', 'king-addons'),
391	'type' => Controls_Manager::SWITCHER,
392	'default' => 'yes',
393	]
394	);
395
396	$this->add_responsive_control(
397	'kng_video_popup_btn_scale_hover',
398	[
399	'label' => esc_html__('Scale on hover', 'king-addons'),
400	'type' => Controls_Manager::NUMBER,
401	'min' => 0,
402	'step' => 0.01,
403	'default' => 1.1,
404	'selectors' => [
405	'{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button' => 'transform: scale({{SIZE}});'
406	],
407	'condition' => [
408	'kng_video_popup_btn_scale_switcher' => 'yes',
409	]
410	]
411	);
412
413	$this->add_control(
414	'kng_video_popup_btn_effect_type',
415	[
416	'label' => esc_html__('Button Effect', 'king-addons'),
417	'type' => Controls_Manager::SELECT,
418	'default' => 'ripple',
419	'options' => [
420	'none' => esc_html__('None', 'king-addons'),
421	'ripple' => esc_html__('Ripple', 'king-addons'),
422	],
423	'separator' => 'before',
424	]
425	);
426
427	$this->add_control(
428	'kng_video_popup_btn_effect_ripple_color',
429	[
430	'label' => esc_html__('Ripple Color', 'king-addons'),
431	'type' => Controls_Manager::COLOR,
432	'default' => '#000000',
433	'selectors' => [
434	'{{WRAPPER}} .king-addons-video-popup-button.king-addons-video-popup-button-effect-ripple:before' => 'border: 1px solid {{VALUE}};',
435	],
436	'condition' => [
437	'kng_video_popup_btn_effect_type' => 'ripple',
438	],
439	]
440	);
441
442	$this->add_responsive_control(
443	'kng_video_popup_btn_padding',
444	[
445	'label' => esc_html__('Padding', 'king-addons'),
446	'type' => Controls_Manager::DIMENSIONS,
447	'size_units' => ['px'],
448	'default' => [
449	'top' => 30,
450	'right' => 30,
451	'bottom' => 30,
452	'left' => 30,
453	],
454	'selectors' => [
455	'{{WRAPPER}} .king-addons-video-popup-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
456	],
457	'separator' => 'before',
458	]
459	);
460
461	$this->add_responsive_control(
462	'kng_video_popup_btn_margin',
463	[
464	'label' => esc_html__('Margin', 'king-addons'),
465	'type' => Controls_Manager::DIMENSIONS,
466	'size_units' => ['px'],
467	'default' => [
468	'top' => 30,
469	'right' => 30,
470	'bottom' => 30,
471	'left' => 30,
472	],
473	'selectors' => [
474	'{{WRAPPER}} .king-addons-video-popup-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
475	]
476	]
477	);
478
479	$this->add_control(
480	'kng_video_popup_btn_tabs_title',
481	[
482	'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
483	'type' => Controls_Manager::RAW_HTML,
484	'separator' => 'before'
485	]
486	);
487
488	$this->start_controls_tabs('kng_video_popup_btn_tabs');
489
490	$this->start_controls_tab(
491	'kng_video_popup_btn_tab_normal',
492	[
493	'label' => esc_html__('Normal', 'king-addons'),
494	]
495	);
496
497	$this->add_control(
498	'kng_video_popup_btn_txt_color',
499	[
500	'label' => esc_html__('Icon Color', 'king-addons'),
501	'type' => Controls_Manager::COLOR,
502	'default' => '#000000',
503	'selectors' => [
504	'{{WRAPPER}} .king-addons-video-popup-button i' => 'color: {{VALUE}}',
505	'{{WRAPPER}} .king-addons-video-popup-button svg' => 'fill: {{VALUE}}',
506	],
507	]
508	);
509
510	$this->add_control(
511	'kng_video_popup_btn_bg_color',
512	[
513	'label' => esc_html__('Background Color', 'king-addons'),
514	'type' => Controls_Manager::COLOR,
515	'default' => '#ededed',
516	'selectors' => [
517	'{{WRAPPER}} .king-addons-video-popup-button' => 'background-color: {{VALUE}}',
518	],
519	]
520	);
521
522	$this->add_group_control(
523	Group_Control_Box_Shadow::get_type(),
524	[
525	'name' => 'kng_video_popup_btn_box_shadow',
526	'selector' => '{{WRAPPER}} .king-addons-video-popup-button',
527	]
528	);
529
530	$this->add_group_control(
531	Group_Control_Border::get_type(),
532	[
533	'name' => 'kng_video_popup_btn_border',
534	'selector' => '{{WRAPPER}} .king-addons-video-popup-button',
535	'fields_options' => [
536	'border' => [
537	'default' => 'none',
538	],
539	],
540	]
541	);
542
543	$this->add_responsive_control(
544	'kng_video_popup_btn_border_radius',
545	[
546	'label' => esc_html__('Border Radius', 'king-addons'),
547	'type' => Controls_Manager::DIMENSIONS,
548	'size_units' => ['px', '%'],
549	'default' => [
550	'top' => 100,
551	'right' => 100,
552	'bottom' => 100,
553	'left' => 100,
554	'unit' => '%',
555	],
556	'selectors' => [
557	'{{WRAPPER}} .king-addons-video-popup-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
558	]
559	]
560	);
561
562	$this->end_controls_tab();
563
564	$this->start_controls_tab(
565	'kng_video_popup_btn_tab_hover',
566	[
567	'label' => esc_html__('Hover', 'king-addons'),
568	]
569	);
570
571	$this->add_control(
572	'kng_video_popup_btn_txt_color_hover',
573	[
574	'label' => esc_html__('Icon Color', 'king-addons'),
575	'type' => Controls_Manager::COLOR,
576	'selectors' => [
577	'{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button i' => 'color: {{VALUE}}',
578	'{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button svg' => 'fill: {{VALUE}}',
579	],
580	]
581	);
582
583	$this->add_control(
584	'kng_video_popup_btn_bg_color_hover',
585	[
586	'label' => esc_html__('Background Color', 'king-addons'),
587	'type' => Controls_Manager::COLOR,
588	'selectors' => [
589	'{{WRAPPER}} .king-addons-video-popup-button:hover' => 'background-color: {{VALUE}}',
590	],
591	]
592	);
593
594	$this->add_group_control(
595	Group_Control_Box_Shadow::get_type(),
596	[
597	'name' => 'kng_video_popup_btn_box_shadow_hover',
598	'selector' => '{{WRAPPER}} .king-addons-video-popup-button:hover',
599	]
600	);
601
602	$this->add_group_control(
603	Group_Control_Border::get_type(),
604	[
605	'name' => 'kng_video_popup_btn_border_hover',
606	'selector' => '{{WRAPPER}} .king-addons-video-popup-button:hover',
607	]
608	);
609
610	$this->add_responsive_control(
611	'kng_video_popup_btn_border_radius_hover',
612	[
613	'label' => esc_html__('Border Radius', 'king-addons'),
614	'type' => Controls_Manager::DIMENSIONS,
615	'size_units' => ['px', '%'],
616	'selectors' => [
617	'{{WRAPPER}} .king-addons-video-popup-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
618	]
619	]
620	);
621
622	$this->end_controls_tab();
623
624	$this->end_controls_tabs();
625
626	$this->end_controls_section();
627	/** END SECTION: Button ===================== */
628
629	/** SECTION: Popup box ===================== */
630	$this->start_controls_section(
631	'kng_video_popup_section_style_off_canvas_box',
632	[
633	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Popup box', 'king-addons'),
634	'tab' => Controls_Manager::TAB_STYLE,
635	]
636	);
637
638	$this->add_control(
639	'kng_video_popup_box_bg_color',
640	[
641	'label' => esc_html__('Background Color', 'king-addons'),
642	'type' => Controls_Manager::COLOR,
643	'default' => '',
644	'selectors' => [
645	'.king-addons-video-popup-{{ID}}' => 'background-color: {{VALUE}};',
646	],
647	]
648	);
649
650	$this->add_responsive_control(
651	'kkng_video_popup_box_padding',
652	[
653	'label' => esc_html__('Padding', 'king-addons'),
654	'type' => Controls_Manager::DIMENSIONS,
655	'size_units' => ['px', '%'],
656	'default' => [
657	'top' => 0,
658	'right' => 0,
659	'bottom' => 0,
660	'left' => 0,
661	'unit' => 'px',
662	],
663	'selectors' => [
664	'.king-addons-video-popup-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
665	]
666	]
667	);
668
669	$this->add_group_control(
670	Group_Control_Box_Shadow::get_type(),
671	[
672	'name' => 'kng_video_popup_box_box_shadow',
673	'selector' => '.king-addons-video-popup-{{ID}}',
674	]
675	);
676
677	$this->add_group_control(
678	Group_Control_Border::get_type(),
679	[
680	'name' => 'kng_video_popup_box_border',
681	'selector' => '.king-addons-video-popup-{{ID}}',
682	'fields_options' => [
683	'border' => [
684	'default' => 'none',
685	],
686	],
687	]
688	);
689
690	$this->add_responsive_control(
691	'kng_video_popup_box_border_radius',
692	[
693	'label' => esc_html__('Border Radius', 'king-addons'),
694	'type' => Controls_Manager::DIMENSIONS,
695	'size_units' => ['px', '%'],
696	'default' => [
697	'top' => 0,
698	'right' => 0,
699	'bottom' => 0,
700	'left' => 0,
701	'unit' => 'px',
702	],
703	'selectors' => [
704	'.king-addons-video-popup-{{ID}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
705	]
706	]
707	);
708
709	$this->add_control(
710	'kng_video_popup_box_z_index',
711	[
712	'label' => esc_html__('Z-Index of Popup box (optional)', 'king-addons'),
713	'description' => esc_html__('Note: The Popup box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Popup box will display properly over all elements on the live website. Please check it there.', 'king-addons'),
714	'type' => Controls_Manager::NUMBER,
715	'step' => 1,
716	'default' => 999999,
717	'separator' => 'before',
718	'selectors' => [
719	'.king-addons-video-popup-{{ID}}' => 'z-index: {{VALUE}};',
720	'.king-addons-video-popup-overlay-{{ID}}' => 'z-index: calc({{VALUE}} - 1);',
721	],
722	]
723	);
724
725	$this->end_controls_section();
726	/** END SECTION: Popup box ===================== */
727
728	/** SECTION: Overlay ===================== */
729	$this->start_controls_section(
730	'kng_video_popup_overlay',
731	[
732	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
733	'tab' => Controls_Manager::TAB_STYLE,
734	]
735	);
736
737	$this->add_control(
738	'kng_video_popup_overlay_color',
739	[
740	'label' => esc_html__('Overlay Background Color', 'king-addons'),
741	'type' => Controls_Manager::COLOR,
742	'default' => 'rgba(0, 0, 0, 0.85)',
743	'selectors' => [
744	'.king-addons-video-popup-overlay-{{ID}}' => 'background-color: {{VALUE}};',
745	],
746	]
747	);
748
749	$this->end_controls_section();
750	/** END SECTION: Overlay ===================== */
751	/** END TAB: STYLE ===================== */
752	}
753
754	protected function render(): void
755	{
756	$settings = $this->get_settings_for_display();
757	$this_ID = $this->get_id();
758	$class_ID = 'king-addons-video-popup-' . $this_ID;
759	$overlay_ID = 'king-addons-video-popup-overlay-' . $this_ID;
760
761	$class_selector_js = esc_attr(wp_json_encode('.' . $class_ID));
762	$overlay_selector_js = esc_attr(wp_json_encode('.' . $overlay_ID));
763
764	// Overlay
765	echo '<div class="king-addons-video-popup-overlay ' .
766	esc_attr($overlay_ID) . '" onclick="';
767	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-video-popup-active'); document.querySelector(" . $overlay_selector_js . ").style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.display = 'none'; document.body.style.pointerEvents = '';}, 500);";
768	echo '"></div>';
769
770	// START: Popup box
771	echo '<div class="king-addons-video-popup ' .
772	esc_attr($class_ID) . ' king-addons-video-popup-position-' .
773	esc_attr($settings['kng_video_popup_box_position']) . ' king-addons-video-popup-animation-slide"';
774	if (!Plugin::$instance->editor->is_edit_mode()) {
775	echo ' style="display: none;"';
776	}
777	echo '>';
778
779	/** VIDEO */
780	echo '<div class="king-addons-video-popup-container">';
781
782	// YouTube
783	if ('youtube' === $settings['kng_video_popup_video_type']) {
784	echo '<iframe src="https://www.youtube.com/embed/' . esc_html($settings['kng_video_popup_youtube_url']) . (('' !== $settings['kng_video_popup_start_time']) ? '?start=' . esc_html($settings['kng_video_popup_start_time']) : '') . '" frameborder="0" allowfullscreen></iframe>';
785	}
786
787	// Vimeo
788	if ('vimeo' === $settings['kng_video_popup_video_type']) {
789	echo '<iframe src="https://player.vimeo.com/video/' . esc_html($settings['kng_video_popup_vimeo_url']) . '" frameborder="0" allowfullscreen ></iframe>';
790	}
791
792	// Hosted
793	if ('hosted' === $settings['kng_video_popup_video_type']) {
794	echo '<video src="' . esc_url($settings['kng_video_popup_hosted_url']['url']) . '" controls></video>';
795	}
796
797	// External Hosted
798	if ('external-hosted' === $settings['kng_video_popup_video_type']) {
799	echo '<video src="' . esc_url($settings['kng_video_popup_external_url']['url']) . '" controls></video>';
800	}
801
802	echo '</div>';
803	/** END: VIDEO */
804
805	// END: Popup box
806	echo '</div>';
807
808	if ('' == $settings['kng_video_popup_disable_btn']) {
809
810	echo '<div class="king-addons-video-popup-button-wrap">';
811
812	echo '<button class="king-addons-video-popup-button king-addons-video-popup-button-' .
813	esc_attr($this_ID) . ' king-addons-video-popup-button-effect-' . esc_attr($settings['kng_video_popup_btn_effect_type']) . '" onclick="';
814	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-video-popup-active'); document.querySelector(" . $overlay_selector_js . ").style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 500);";
815	echo '">';
816
817	Icons_Manager::render_icon($settings['kng_video_popup_btn_icon']);
818
819	echo '</button>';
820
821	echo '</div>';
822
823	}
824
825	$inline_js_1 = "
826	document.addEventListener('DOMContentLoaded', function () {
827
828	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
829	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
830
831	// Moves all Popupes to right after the <body> opens
832	document.body.insertBefore(overlay, document.body.firstChild);
833	document.body.insertBefore(offCanvas, document.body.firstChild);
834
835	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
836	offCanvas.style.display = 'block';";
837
838	$inline_js_2 = "";
839	if ('' != $settings['kng_video_popup_class']) {
840	$inline_js_2 = "
841	// Adds click listener for custom triggers that have the custom class
842	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
843	customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
844	offCanvas.classList.toggle('king-addons-video-popup-active');
845	document.body.style.pointerEvents = 'none';
846	if (offCanvas.classList.contains('king-addons-video-popup-active')) {
847	overlay.style.display = 'block';
848	setTimeout(function () {
849	overlay.style.opacity = '1';
850	}, 1);
851	}
852	setTimeout(function () {
853	document.body.style.pointerEvents = '';
854	}, 500);
855	}));
856	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
857	}
858
859	$inline_js_3 = "});";
860
861	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
862	wp_print_inline_script_tag($inline_js);
863	}
864	}