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

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

867 lines 33.0 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:bug@kingaddons.com?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	// Overlay
762	echo '<div class="king-addons-video-popup-overlay ' .
763	esc_attr($overlay_ID) . '" onclick="';
764	echo "document.querySelector('." .
765	esc_attr($class_ID) . "').classList.toggle('king-addons-video-popup-active'); document.querySelector('." .
766	esc_attr($overlay_ID) . "').style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
767	esc_attr($overlay_ID) . "').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('." .
815	esc_attr($class_ID) . "').classList.toggle('king-addons-video-popup-active'); document.querySelector('." .
816	esc_attr($overlay_ID) . "').style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
817	esc_attr($overlay_ID) . "').style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 500);";
818	echo '">';
819
820	Icons_Manager::render_icon($settings['kng_video_popup_btn_icon']);
821
822	echo '</button>';
823
824	echo '</div>';
825
826	}
827
828	$inline_js_1 = "
829	document.addEventListener('DOMContentLoaded', function () {
830
831	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
832	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
833
834	// Moves all Popupes to right after the <body> opens
835	document.body.insertBefore(overlay, document.body.firstChild);
836	document.body.insertBefore(offCanvas, document.body.firstChild);
837
838	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
839	offCanvas.style.display = 'block';";
840
841	$inline_js_2 = "";
842	if ('' != $settings['kng_video_popup_class']) {
843	$inline_js_2 = "
844	// Adds click listener for custom triggers that have the custom class
845	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
846	customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
847	offCanvas.classList.toggle('king-addons-video-popup-active');
848	document.body.style.pointerEvents = 'none';
849	if (offCanvas.classList.contains('king-addons-video-popup-active')) {
850	overlay.style.display = 'block';
851	setTimeout(function () {
852	overlay.style.opacity = '1';
853	}, 1);
854	}
855	setTimeout(function () {
856	document.body.style.pointerEvents = '';
857	}, 500);
858	}));
859	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
860	}
861
862	$inline_js_3 = "});";
863
864	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
865	wp_print_inline_script_tag($inline_js);
866	}
867	}