PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.86
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.86
51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 All 40 releases
← All changes | includes/widgets/Video_Popup/Video_Popup.php +936 -0 51.1.2 → 51.1.86 View file →
@@ -1,0 +1,936 @@
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_hosted_autoplay',
183 + [
184 + 'label' => esc_html__('Autoplay on Open', 'king-addons'),
185 + 'type' => Controls_Manager::SWITCHER,
186 + 'label_on' => esc_html__('Yes', 'king-addons'),
187 + 'label_off' => esc_html__('No', 'king-addons'),
188 + 'return_value' => 'yes',
189 + 'default' => 'yes',
190 + 'description' => esc_html__('Start playback when the popup opens. Playback stops when the popup is closed.', 'king-addons'),
191 + 'condition' => [
192 + 'kng_video_popup_video_type' => ['hosted', 'external-hosted'],
193 + ],
194 + ]
195 + );
196 +
197 + $this->add_control(
198 + 'kng_video_popup_start_time',
199 + [
200 + 'label' => esc_html__('Start Time', 'king-addons'),
201 + 'type' => Controls_Manager::NUMBER,
202 + 'description' => esc_html__('Specify a start time (in seconds)', 'king-addons'),
203 + 'condition' => [
204 + 'kng_video_popup_video_type' => 'youtube',
205 + ],
206 + 'separator' => 'before',
207 + ]
208 + );
209 +
210 + /** END: VIDEO */
211 +
212 + $this->add_control(
213 + 'kng_video_popup_box_position',
214 + [
215 + 'label' => esc_html__('Box Animation Direction', 'king-addons'),
216 + 'type' => Controls_Manager::CHOOSE,
217 + 'default' => 'bottom',
218 + 'options' => [
219 + 'top' => [
220 + 'title' => esc_html__('Top', 'king-addons'),
221 + 'icon' => 'eicon-v-align-bottom',
222 + ],
223 + 'right' => [
224 + 'title' => esc_html__('Right', 'king-addons'),
225 + 'icon' => 'eicon-h-align-left',
226 + ],
227 + 'bottom' => [
228 + 'title' => esc_html__('Bottom', 'king-addons'),
229 + 'icon' => 'eicon-v-align-top',
230 + ],
231 + 'left' => [
232 + 'title' => esc_html__('Left', 'king-addons'),
233 + 'icon' => 'eicon-h-align-right',
234 + ],
235 + ],
236 + 'separator' => 'before',
237 + ]
238 + );
239 +
240 + $this->add_control(
241 + 'kng_video_popup_box_max_width_switcher',
242 + [
243 + 'label' => esc_html__('Set Maximum Width of popup box', 'king-addons'),
244 + 'type' => Controls_Manager::SWITCHER,
245 + 'separator' => 'before'
246 + ]
247 + );
248 +
249 + $this->add_responsive_control(
250 + 'kng_video_popup_box_max_width',
251 + [
252 + 'label' => esc_html__('Maximum Width (px)', 'king-addons'),
253 + 'type' => Controls_Manager::NUMBER,
254 + 'min' => 0,
255 + 'step' => 1,
256 + 'default' => '',
257 + 'selectors' => [
258 + '.king-addons-video-popup-{{ID}}' => 'max-width: {{VALUE}}px;',
259 + ],
260 + 'condition' => [
261 + 'kng_video_popup_box_max_width_switcher!' => '',
262 + ]
263 + ]
264 + );
265 +
266 + $this->add_control(
267 + 'kng_video_popup_box_max_height_switcher',
268 + [
269 + 'label' => esc_html__('Set Maximum Height of popup box', 'king-addons'),
270 + 'type' => Controls_Manager::SWITCHER
271 + ]
272 + );
273 +
274 + $this->add_responsive_control(
275 + 'kng_video_popup_box_max_height',
276 + [
277 + 'label' => esc_html__('Maximum Height (px)', 'king-addons'),
278 + 'type' => Controls_Manager::NUMBER,
279 + 'min' => 0,
280 + 'step' => 1,
281 + 'default' => '',
282 + 'selectors' => [
283 + '.king-addons-video-popup-{{ID}}' => 'max-height: {{VALUE}}px;',
284 + ],
285 + 'condition' => [
286 + 'kng_video_popup_box_max_height_switcher!' => '',
287 + ]
288 + ]
289 + );
290 +
291 + $this->add_control(
292 + 'kng_video_popup_disable_btn',
293 + [
294 + 'label' => esc_html__('Disable Button', 'king-addons'),
295 + 'type' => Controls_Manager::SWITCHER,
296 + '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'),
297 + 'separator' => 'before'
298 + ]
299 + );
300 +
301 + $this->add_control(
302 + 'kng_video_popup_class',
303 + [
304 + 'label' => esc_html__('CSS Class of trigger element (optional)', 'king-addons'),
305 + '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'),
306 + 'type' => Controls_Manager::TEXT,
307 + 'placeholder' => esc_html__('Type your class here', 'king-addons'),
308 + 'label_block' => true,
309 + 'ai' => [
310 + 'active' => false,
311 + ],
312 + ]
313 + );
314 +
315 + $this->end_controls_section();
316 + /** END SECTION: General ===================== */
317 + /** END TAB: CONTENT ===================== */
318 +
319 + /** TAB: STYLE ===================== */
320 + /** SECTION: Button ===================== */
321 + $this->start_controls_section(
322 + 'kng_video_popup_section_style_btn',
323 + [
324 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
325 + 'tab' => Controls_Manager::TAB_STYLE,
326 + ]
327 + );
328 +
329 + $this->add_control(
330 + 'kng_video_popup_btn_icon',
331 + [
332 + 'label' => esc_html__('Select Icon', 'king-addons'),
333 + 'type' => Controls_Manager::ICONS,
334 + 'skin' => 'inline',
335 + 'label_block' => false,
336 + 'exclude_inline_options' => ['svg'],
337 + 'default' => [
338 + 'value' => 'fas fa-play',
339 + 'library' => 'fa-solid',
340 + ],
341 + ]
342 + );
343 +
344 + $this->add_responsive_control(
345 + 'kng_video_popup_btn_h_position',
346 + [
347 + 'label' => esc_html__('Button Horizontal Position', 'king-addons'),
348 + 'type' => Controls_Manager::CHOOSE,
349 + 'default' => 'center',
350 + 'options' => [
351 + 'left' => [
352 + 'title' => esc_html__('Left', 'king-addons'),
353 + 'icon' => 'eicon-h-align-left',
354 + ],
355 + 'center' => [
356 + 'title' => esc_html__('Center', 'king-addons'),
357 + 'icon' => 'eicon-h-align-center',
358 + ],
359 + 'right' => [
360 + 'title' => esc_html__('Right', 'king-addons'),
361 + 'icon' => 'eicon-h-align-right',
362 + ],
363 + ],
364 + 'selectors' => [
365 + '{{WRAPPER}}' => 'text-align: {{VALUE}};',
366 + ],
367 + ]
368 + );
369 +
370 + $this->add_responsive_control(
371 + 'kng_video_popup_btn_icon_size',
372 + [
373 + 'label' => esc_html__('Icon Size', 'king-addons'),
374 + 'type' => Controls_Manager::NUMBER,
375 + 'step' => 1,
376 + 'min' => 0,
377 + 'default' => 20,
378 + 'selectors' => [
379 + '{{WRAPPER}} .king-addons-video-popup-button i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
380 + '{{WRAPPER}} .king-addons-video-popup-button img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
381 + '{{WRAPPER}} .king-addons-video-popup-button svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
382 + ],
383 + ]
384 + );
385 +
386 + $this->add_responsive_control(
387 + 'kng_video_popup_btn_transition_icon',
388 + [
389 + 'label' => esc_html__('Transition duration for icon on hover (ms)', 'king-addons'),
390 + 'type' => Controls_Manager::NUMBER,
391 + 'min' => 0,
392 + 'step' => 10,
393 + 'default' => 300,
394 + 'selectors' => [
395 + '{{WRAPPER}} .king-addons-video-popup-button i' => 'transition: all {{SIZE}}ms;',
396 + '{{WRAPPER}} .king-addons-video-popup-button img' => 'transition: all {{SIZE}}ms;',
397 + '{{WRAPPER}} .king-addons-video-popup-button svg' => 'transition: all {{SIZE}}ms;',
398 + '{{WRAPPER}} .king-addons-video-popup-button-wrap .king-addons-video-popup-button' => 'transition: all {{SIZE}}ms;',
399 + ],
400 + ]
401 + );
402 +
403 + $this->add_control(
404 + 'kng_video_popup_btn_scale_switcher',
405 + [
406 + 'label' => esc_html__('Scale button on hover', 'king-addons'),
407 + 'type' => Controls_Manager::SWITCHER,
408 + 'default' => 'yes',
409 + ]
410 + );
411 +
412 + $this->add_responsive_control(
413 + 'kng_video_popup_btn_scale_hover',
414 + [
415 + 'label' => esc_html__('Scale on hover', 'king-addons'),
416 + 'type' => Controls_Manager::NUMBER,
417 + 'min' => 0,
418 + 'step' => 0.01,
419 + 'default' => 1.1,
420 + 'selectors' => [
421 + '{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button' => 'transform: scale({{SIZE}});'
422 + ],
423 + 'condition' => [
424 + 'kng_video_popup_btn_scale_switcher' => 'yes',
425 + ]
426 + ]
427 + );
428 +
429 + $this->add_control(
430 + 'kng_video_popup_btn_effect_type',
431 + [
432 + 'label' => esc_html__('Button Effect', 'king-addons'),
433 + 'type' => Controls_Manager::SELECT,
434 + 'default' => 'ripple',
435 + 'options' => [
436 + 'none' => esc_html__('None', 'king-addons'),
437 + 'ripple' => esc_html__('Ripple', 'king-addons'),
438 + ],
439 + 'separator' => 'before',
440 + ]
441 + );
442 +
443 + $this->add_control(
444 + 'kng_video_popup_btn_effect_ripple_color',
445 + [
446 + 'label' => esc_html__('Ripple Color', 'king-addons'),
447 + 'type' => Controls_Manager::COLOR,
448 + 'default' => '#000000',
449 + 'selectors' => [
450 + '{{WRAPPER}} .king-addons-video-popup-button.king-addons-video-popup-button-effect-ripple:before' => 'border: 1px solid {{VALUE}};',
451 + ],
452 + 'condition' => [
453 + 'kng_video_popup_btn_effect_type' => 'ripple',
454 + ],
455 + ]
456 + );
457 +
458 + $this->add_responsive_control(
459 + 'kng_video_popup_btn_padding',
460 + [
461 + 'label' => esc_html__('Padding', 'king-addons'),
462 + 'type' => Controls_Manager::DIMENSIONS,
463 + 'size_units' => ['px'],
464 + 'default' => [
465 + 'top' => 30,
466 + 'right' => 30,
467 + 'bottom' => 30,
468 + 'left' => 30,
469 + ],
470 + 'selectors' => [
471 + '{{WRAPPER}} .king-addons-video-popup-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
472 + ],
473 + 'separator' => 'before',
474 + ]
475 + );
476 +
477 + $this->add_responsive_control(
478 + 'kng_video_popup_btn_margin',
479 + [
480 + 'label' => esc_html__('Margin', 'king-addons'),
481 + 'type' => Controls_Manager::DIMENSIONS,
482 + 'size_units' => ['px'],
483 + 'default' => [
484 + 'top' => 30,
485 + 'right' => 30,
486 + 'bottom' => 30,
487 + 'left' => 30,
488 + ],
489 + 'selectors' => [
490 + '{{WRAPPER}} .king-addons-video-popup-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
491 + ]
492 + ]
493 + );
494 +
495 + $this->add_control(
496 + 'kng_video_popup_btn_tabs_title',
497 + [
498 + 'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
499 + 'type' => Controls_Manager::RAW_HTML,
500 + 'separator' => 'before'
501 + ]
502 + );
503 +
504 + $this->start_controls_tabs('kng_video_popup_btn_tabs');
505 +
506 + $this->start_controls_tab(
507 + 'kng_video_popup_btn_tab_normal',
508 + [
509 + 'label' => esc_html__('Normal', 'king-addons'),
510 + ]
511 + );
512 +
513 + $this->add_control(
514 + 'kng_video_popup_btn_txt_color',
515 + [
516 + 'label' => esc_html__('Icon Color', 'king-addons'),
517 + 'type' => Controls_Manager::COLOR,
518 + 'default' => '#000000',
519 + 'selectors' => [
520 + '{{WRAPPER}} .king-addons-video-popup-button i' => 'color: {{VALUE}}',
521 + '{{WRAPPER}} .king-addons-video-popup-button svg' => 'fill: {{VALUE}}',
522 + ],
523 + ]
524 + );
525 +
526 + $this->add_control(
527 + 'kng_video_popup_btn_bg_color',
528 + [
529 + 'label' => esc_html__('Background Color', 'king-addons'),
530 + 'type' => Controls_Manager::COLOR,
531 + 'default' => '#ededed',
532 + 'selectors' => [
533 + '{{WRAPPER}} .king-addons-video-popup-button' => 'background-color: {{VALUE}}',
534 + ],
535 + ]
536 + );
537 +
538 + $this->add_group_control(
539 + Group_Control_Box_Shadow::get_type(),
540 + [
541 + 'name' => 'kng_video_popup_btn_box_shadow',
542 + 'selector' => '{{WRAPPER}} .king-addons-video-popup-button',
543 + ]
544 + );
545 +
546 + $this->add_group_control(
547 + Group_Control_Border::get_type(),
548 + [
549 + 'name' => 'kng_video_popup_btn_border',
550 + 'selector' => '{{WRAPPER}} .king-addons-video-popup-button',
551 + 'fields_options' => [
552 + 'border' => [
553 + 'default' => 'none',
554 + ],
555 + ],
556 + ]
557 + );
558 +
559 + $this->add_responsive_control(
560 + 'kng_video_popup_btn_border_radius',
561 + [
562 + 'label' => esc_html__('Border Radius', 'king-addons'),
563 + 'type' => Controls_Manager::DIMENSIONS,
564 + 'size_units' => ['px', '%'],
565 + 'default' => [
566 + 'top' => 100,
567 + 'right' => 100,
568 + 'bottom' => 100,
569 + 'left' => 100,
570 + 'unit' => '%',
571 + ],
572 + 'selectors' => [
573 + '{{WRAPPER}} .king-addons-video-popup-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
574 + ]
575 + ]
576 + );
577 +
578 + $this->end_controls_tab();
579 +
580 + $this->start_controls_tab(
581 + 'kng_video_popup_btn_tab_hover',
582 + [
583 + 'label' => esc_html__('Hover', 'king-addons'),
584 + ]
585 + );
586 +
587 + $this->add_control(
588 + 'kng_video_popup_btn_txt_color_hover',
589 + [
590 + 'label' => esc_html__('Icon Color', 'king-addons'),
591 + 'type' => Controls_Manager::COLOR,
592 + 'selectors' => [
593 + '{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button i' => 'color: {{VALUE}}',
594 + '{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button svg' => 'fill: {{VALUE}}',
595 + ],
596 + ]
597 + );
598 +
599 + $this->add_control(
600 + 'kng_video_popup_btn_bg_color_hover',
601 + [
602 + 'label' => esc_html__('Background Color', 'king-addons'),
603 + 'type' => Controls_Manager::COLOR,
604 + 'selectors' => [
605 + '{{WRAPPER}} .king-addons-video-popup-button:hover' => 'background-color: {{VALUE}}',
606 + ],
607 + ]
608 + );
609 +
610 + $this->add_group_control(
611 + Group_Control_Box_Shadow::get_type(),
612 + [
613 + 'name' => 'kng_video_popup_btn_box_shadow_hover',
614 + 'selector' => '{{WRAPPER}} .king-addons-video-popup-button:hover',
615 + ]
616 + );
617 +
618 + $this->add_group_control(
619 + Group_Control_Border::get_type(),
620 + [
621 + 'name' => 'kng_video_popup_btn_border_hover',
622 + 'selector' => '{{WRAPPER}} .king-addons-video-popup-button:hover',
623 + ]
624 + );
625 +
626 + $this->add_responsive_control(
627 + 'kng_video_popup_btn_border_radius_hover',
628 + [
629 + 'label' => esc_html__('Border Radius', 'king-addons'),
630 + 'type' => Controls_Manager::DIMENSIONS,
631 + 'size_units' => ['px', '%'],
632 + 'selectors' => [
633 + '{{WRAPPER}} .king-addons-video-popup-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
634 + ]
635 + ]
636 + );
637 +
638 + $this->end_controls_tab();
639 +
640 + $this->end_controls_tabs();
641 +
642 + $this->end_controls_section();
643 + /** END SECTION: Button ===================== */
644 +
645 + /** SECTION: Popup box ===================== */
646 + $this->start_controls_section(
647 + 'kng_video_popup_section_style_off_canvas_box',
648 + [
649 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Popup box', 'king-addons'),
650 + 'tab' => Controls_Manager::TAB_STYLE,
651 + ]
652 + );
653 +
654 + $this->add_control(
655 + 'kng_video_popup_box_bg_color',
656 + [
657 + 'label' => esc_html__('Background Color', 'king-addons'),
658 + 'type' => Controls_Manager::COLOR,
659 + 'default' => '',
660 + 'selectors' => [
661 + '.king-addons-video-popup-{{ID}}' => 'background-color: {{VALUE}};',
662 + ],
663 + ]
664 + );
665 +
666 + $this->add_responsive_control(
667 + 'kkng_video_popup_box_padding',
668 + [
669 + 'label' => esc_html__('Padding', 'king-addons'),
670 + 'type' => Controls_Manager::DIMENSIONS,
671 + 'size_units' => ['px', '%'],
672 + 'default' => [
673 + 'top' => 0,
674 + 'right' => 0,
675 + 'bottom' => 0,
676 + 'left' => 0,
677 + 'unit' => 'px',
678 + ],
679 + 'selectors' => [
680 + '.king-addons-video-popup-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
681 + ]
682 + ]
683 + );
684 +
685 + $this->add_group_control(
686 + Group_Control_Box_Shadow::get_type(),
687 + [
688 + 'name' => 'kng_video_popup_box_box_shadow',
689 + 'selector' => '.king-addons-video-popup-{{ID}}',
690 + ]
691 + );
692 +
693 + $this->add_group_control(
694 + Group_Control_Border::get_type(),
695 + [
696 + 'name' => 'kng_video_popup_box_border',
697 + 'selector' => '.king-addons-video-popup-{{ID}}',
698 + 'fields_options' => [
699 + 'border' => [
700 + 'default' => 'none',
701 + ],
702 + ],
703 + ]
704 + );
705 +
706 + $this->add_responsive_control(
707 + 'kng_video_popup_box_border_radius',
708 + [
709 + 'label' => esc_html__('Border Radius', 'king-addons'),
710 + 'type' => Controls_Manager::DIMENSIONS,
711 + 'size_units' => ['px', '%'],
712 + 'default' => [
713 + 'top' => 0,
714 + 'right' => 0,
715 + 'bottom' => 0,
716 + 'left' => 0,
717 + 'unit' => 'px',
718 + ],
719 + 'selectors' => [
720 + '.king-addons-video-popup-{{ID}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
721 + ]
722 + ]
723 + );
724 +
725 + $this->add_control(
726 + 'kng_video_popup_box_z_index',
727 + [
728 + 'label' => esc_html__('Z-Index of Popup box (optional)', 'king-addons'),
729 + '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'),
730 + 'type' => Controls_Manager::NUMBER,
731 + 'step' => 1,
732 + 'default' => 999999,
733 + 'separator' => 'before',
734 + 'selectors' => [
735 + '.king-addons-video-popup-{{ID}}' => 'z-index: {{VALUE}};',
736 + '.king-addons-video-popup-overlay-{{ID}}' => 'z-index: calc({{VALUE}} - 1);',
737 + ],
738 + ]
739 + );
740 +
741 + $this->end_controls_section();
742 + /** END SECTION: Popup box ===================== */
743 +
744 + /** SECTION: Overlay ===================== */
745 + $this->start_controls_section(
746 + 'kng_video_popup_overlay',
747 + [
748 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
749 + 'tab' => Controls_Manager::TAB_STYLE,
750 + ]
751 + );
752 +
753 + $this->add_control(
754 + 'kng_video_popup_overlay_color',
755 + [
756 + 'label' => esc_html__('Overlay Background Color', 'king-addons'),
757 + 'type' => Controls_Manager::COLOR,
758 + 'default' => 'rgba(0, 0, 0, 0.85)',
759 + 'selectors' => [
760 + '.king-addons-video-popup-overlay-{{ID}}' => 'background-color: {{VALUE}};',
761 + ],
762 + ]
763 + );
764 +
765 + $this->end_controls_section();
766 + /** END SECTION: Overlay ===================== */
767 + /** END TAB: STYLE ===================== */
768 + }
769 +
770 + protected function render(): void
771 + {
772 + $settings = $this->get_settings_for_display();
773 + $this_ID = $this->get_id();
774 + $class_ID = 'king-addons-video-popup-' . $this_ID;
775 + $overlay_ID = 'king-addons-video-popup-overlay-' . $this_ID;
776 +
777 + $is_hosted_video = in_array($settings['kng_video_popup_video_type'], ['hosted', 'external-hosted'], true);
778 + $hosted_autoplay = $is_hosted_video && ('yes' === ($settings['kng_video_popup_hosted_autoplay'] ?? 'yes'));
779 +
780 + // Overlay
781 + echo '<div class="king-addons-video-popup-overlay ' . esc_attr($overlay_ID) . '"></div>';
782 +
783 + // START: Popup box
784 + echo '<div class="king-addons-video-popup ' .
785 + esc_attr($class_ID) . ' king-addons-video-popup-position-' .
786 + esc_attr($settings['kng_video_popup_box_position']) . ' king-addons-video-popup-animation-slide"';
787 + if (!Plugin::$instance->editor->is_edit_mode()) {
788 + echo ' style="display: none;"';
789 + }
790 + echo '>';
791 +
792 + /** VIDEO */
793 + echo '<div class="king-addons-video-popup-container">';
794 +
795 + // YouTube
796 + if ('youtube' === $settings['kng_video_popup_video_type']) {
797 + 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>';
798 + }
799 +
800 + // Vimeo
801 + if ('vimeo' === $settings['kng_video_popup_video_type']) {
802 + echo '<iframe src="https://player.vimeo.com/video/' . esc_html($settings['kng_video_popup_vimeo_url']) . '" frameborder="0" allowfullscreen ></iframe>';
803 + }
804 +
805 + // Hosted
806 + if ('hosted' === $settings['kng_video_popup_video_type']) {
807 + echo '<video class="king-addons-video-popup-video" src="' . esc_url($settings['kng_video_popup_hosted_url']['url']) . '" controls playsinline></video>';
808 + }
809 +
810 + // External Hosted
811 + if ('external-hosted' === $settings['kng_video_popup_video_type']) {
812 + echo '<video class="king-addons-video-popup-video" src="' . esc_url($settings['kng_video_popup_external_url']['url']) . '" controls playsinline></video>';
813 + }
814 +
815 + echo '</div>';
816 + /** END: VIDEO */
817 +
818 + // END: Popup box
819 + echo '</div>';
820 +
821 + if ('' == $settings['kng_video_popup_disable_btn']) {
822 +
823 + echo '<div class="king-addons-video-popup-button-wrap">';
824 +
825 + echo '<button type="button" class="king-addons-video-popup-button king-addons-video-popup-button-' .
826 + esc_attr($this_ID) . ' king-addons-video-popup-button-effect-' . esc_attr($settings['kng_video_popup_btn_effect_type']) . '">';
827 +
828 + Icons_Manager::render_icon($settings['kng_video_popup_btn_icon']);
829 +
830 + echo '</button>';
831 +
832 + echo '</div>';
833 +
834 + }
835 +
836 + $hosted_autoplay_js = $hosted_autoplay ? 'true' : 'false';
837 +
838 + $inline_js_1 = "
839 + document.addEventListener('DOMContentLoaded', function () {
840 +
841 + const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
842 + const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
843 +
844 + // With no template picked the widget prints a placeholder instead of
845 + // the panel markup, so these lookups come back empty. Bail out rather
846 + // than throwing on insertBefore and losing the handlers below.
847 + if (!offCanvas || !overlay) {
848 + return;
849 + }
850 + const video = offCanvas ? offCanvas.querySelector('.king-addons-video-popup-video') : null;
851 + const autoplayEnabled = " . $hosted_autoplay_js . ";
852 + const popupButton = document.querySelector('.king-addons-video-popup-button-" . esc_js((string) $this_ID) . "');
853 +
854 + /**
855 + * Opens the video popup and optionally starts self-hosted video playback.
856 + *
857 + * @return {void}
858 + */
859 + function openPopup() {
860 + offCanvas.classList.add('king-addons-video-popup-active');
861 + overlay.style.display = 'block';
862 + document.body.style.pointerEvents = 'none';
863 + setTimeout(function () {
864 + overlay.style.opacity = '1';
865 + }, 1);
866 + setTimeout(function () {
867 + document.body.style.pointerEvents = '';
868 + }, 500);
869 +
870 + if (autoplayEnabled && video) {
871 + video.play().catch(function () {});
872 + }
873 + }
874 +
875 + /**
876 + * Closes the video popup and stops self-hosted video playback.
877 + *
878 + * @return {void}
879 + */
880 + function closePopup() {
881 + offCanvas.classList.remove('king-addons-video-popup-active');
882 + overlay.style.opacity = '0';
883 + document.body.style.pointerEvents = 'none';
884 +
885 + if (video) {
886 + video.pause();
887 + video.currentTime = 0;
888 + }
889 +
890 + setTimeout(function () {
891 + overlay.style.display = 'none';
892 + document.body.style.pointerEvents = '';
893 + }, 500);
894 + }
895 +
896 + /**
897 + * Toggles popup visibility based on the current active state.
898 + *
899 + * @return {void}
900 + */
901 + function togglePopup() {
902 + if (offCanvas.classList.contains('king-addons-video-popup-active')) {
903 + closePopup();
904 + } else {
905 + openPopup();
906 + }
907 + }
908 +
909 + // Moves all Popupes to right after the <body> opens
910 + document.body.insertBefore(overlay, document.body.firstChild);
911 + document.body.insertBefore(offCanvas, document.body.firstChild);
912 +
913 + // Change display from none to block to prevent dancing of the Popup before the DOM content loaded
914 + offCanvas.style.display = 'block';
915 +
916 + overlay.addEventListener('click', closePopup);
917 +
918 + if (popupButton) {
919 + popupButton.addEventListener('click', togglePopup);
920 + }";
921 +
922 + $inline_js_2 = "";
923 + if ('' != $settings['kng_video_popup_class']) {
924 + $inline_js_2 = "
925 + // Adds click listener for custom triggers that have the custom class
926 + const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
927 + customOffCanvasTrigger.forEach(element => element.addEventListener('click', togglePopup));
928 + customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
929 + }
930 +
931 + $inline_js_3 = "});";
932 +
933 + $inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
934 + wp_print_inline_script_tag($inline_js);
935 + }
936 +}