PluginProbe
Pixel Gallery Addons for Elementor – Easy Grid, Creative Gallery, Drag and Drop Grid, Custom Grid Layout, Portfolio Gallery / trunk
Pixel Gallery Addons for Elementor – Easy Grid, Creative Gallery, Drag and Drop Grid, Custom Grid Layout, Portfolio Gallery vtrunk
2.1.14 2.1.13 2.1.12 2.1.11 2.1.10 2.1.9 2.1.8 2.1.7 trunk 1.2.2 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.4.0 1.4.1 1.4.10 1.4.11 1.4.2 1.4.3 1.4.5 1.4.6 All 74 releases
pixel-gallery / modules / alien / widgets / alien.php

alien.php in Pixel Gallery Addons for Elementor – Easy Grid, Creative Gallery, Drag and Drop Grid, Custom Grid Layout, Portfolio Gallery trunk, at modules/alien/widgets/alien.php

542 lines 15.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace PixelGallery\Modules\Alien\Widgets;
4
5 use PixelGallery\Base\Module_Base;
6 use Elementor\Controls_Manager;
7 use Elementor\Group_Control_Border;
8 use Elementor\Group_Control_Typography;
9 use Elementor\Group_Control_Background;
10 use Elementor\Group_Control_Box_Shadow;
11 use Elementor\Group_Control_Image_Size;
12 use Elementor\Group_Control_Text_Shadow;
13 use Elementor\Icons_Manager;
14 use Elementor\Group_Control_Css_Filter;
15 use Elementor\Group_Control_Text_Stroke;
16 use Elementor\Repeater;
17 use PixelGallery\Utils;
18 use PixelGallery\Traits\Global_Widget_Controls;
19
20 if (!defined('ABSPATH')) exit; // Exit if accessed directly
21
22 class Alien extends Module_Base {
23
24 use Global_Widget_Controls;
25
26 public function get_name() {
27 return 'pg-alien';
28 }
29
30 public function get_title() {
31 return BDTPG . esc_html__('Alien', 'pixel-gallery');
32 }
33
34 public function get_icon() {
35 return 'pg-icon-alien';
36 }
37
38 public function get_categories() {
39 return ['pixel-gallery'];
40 }
41
42 public function get_keywords() {
43 return ['alien', 'grid', 'gallery'];
44 }
45
46 public function get_style_depends() {
47 return ['pg-alien'];
48 }
49
50 public function get_custom_help_url() {
51 return 'https://youtu.be/O4YS5LNJI2g';
52 }
53
54 public function has_widget_inner_wrapper(): bool {
55 return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
56 }
57 protected function is_dynamic_content(): bool {
58 return false;
59 }
60
61 protected function register_controls() {
62
63 $this->start_controls_section(
64 'section_layout',
65 [
66 'label' => __('Layout', 'pixel-gallery'),
67 'tab' => Controls_Manager::TAB_CONTENT,
68 ]
69 );
70
71 //Global
72 $this->register_grid_controls('alien');
73 $this->register_global_height_controls('alien');
74 $this->register_title_tag_controls();
75 $this->register_show_meta_controls();
76 $this->register_alignment_controls('alien');
77 $this->register_thumbnail_size_controls();
78
79 //Global Lightbox Controls
80 $this->register_lightbox_controls();
81 $this->register_link_target_controls();
82
83 $this->add_responsive_control(
84 'button_alignment',
85 [
86 'label' => esc_html__('Button Alignment', 'pixel-gallery') . BDTPG_NC,
87 'type' => Controls_Manager::CHOOSE,
88 'options' => [
89 'left' => [
90 'title' => esc_html__('Left', 'pixel-gallery'),
91 'icon' => 'eicon-text-align-left',
92 ],
93 'center' => [
94 'title' => esc_html__('Center', 'pixel-gallery'),
95 'icon' => 'eicon-text-align-center',
96 ],
97 'right' => [
98 'title' => esc_html__('Right', 'pixel-gallery'),
99 'icon' => 'eicon-text-align-right',
100 ],
101 ],
102 'devices' => ['desktop', 'tablet'],
103 'prefix_class' => 'button-align-%s',
104 'condition' => [
105 'link_to!' => 'none',
106 'link_target' => 'only_button',
107 ],
108 ]
109 );
110
111 $this->end_controls_section();
112
113 $this->start_controls_section(
114 'section_item_content',
115 [
116 'label' => __('Items', 'pixel-gallery'),
117 'tab' => Controls_Manager::TAB_CONTENT,
118 ]
119 );
120
121 $repeater = new Repeater();
122 $repeater->start_controls_tabs('tabs_item_content');
123 $repeater->start_controls_tab(
124 'tab_item_content',
125 [
126 'label' => esc_html__('Content', 'pixel-gallery'),
127 ]
128 );
129 $this->register_repeater_media_controls($repeater);
130 $this->register_repeater_title_controls($repeater);
131 $this->register_repeater_meta_controls($repeater);
132 $this->register_repeater_readmore_controls($repeater);
133 $this->register_repeater_custom_url_controls($repeater);
134 $this->register_repeater_hidden_item_controls($repeater);
135
136 $repeater->end_controls_tab();
137 $repeater->start_controls_tab(
138 'tab_item_grid',
139 [
140 'label' => esc_html__('Grid', 'pixel-gallery'),
141 ]
142 );
143 $this->register_repeater_grid_controls($repeater, 'alien');
144 $this->register_repeater_item_height_controls($repeater, 'alien');
145 $repeater->end_controls_tab();
146 $repeater->end_controls_tabs();
147 $this->register_repeater_items_controls($repeater);
148 $this->end_controls_section();
149
150 //Style
151 $this->start_controls_section(
152 'pg_section_style',
153 [
154 'label' => esc_html__('Items', 'pixel-gallery'),
155 'tab' => Controls_Manager::TAB_STYLE,
156 ]
157 );
158
159 $this->start_controls_tabs('tabs_item_style');
160
161 $this->start_controls_tab(
162 'tab_item_normal',
163 [
164 'label' => esc_html__('Normal', 'pixel-gallery'),
165 ]
166 );
167
168 $this->add_group_control(
169 Group_Control_Background::get_type(),
170 [
171 'name' => 'item_background',
172 'label' => esc_html__('Background', 'pixel-gallery'),
173 'types' => ['classic', 'gradient'],
174 // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
175 'exclude' => ['image'],
176 'selector' => '{{WRAPPER}} .pg-alien-item',
177 ]
178 );
179
180 $this->add_group_control(
181 Group_Control_Border::get_type(),
182 [
183 'name' => 'item_border',
184 'selector' => '{{WRAPPER}} .pg-alien-item',
185 'separator' => 'before',
186 ]
187 );
188
189 $this->add_responsive_control(
190 'item_border_radius',
191 [
192 'label' => esc_html__('Border Radius', 'pixel-gallery'),
193 'type' => Controls_Manager::DIMENSIONS,
194 'size_units' => ['px', 'em', '%'],
195 'selectors' => [
196 '{{WRAPPER}} .pg-alien-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
197 ],
198 ]
199 );
200
201 $this->add_responsive_control(
202 'item_padding',
203 [
204 'label' => esc_html__('Padding', 'pixel-gallery'),
205 'type' => Controls_Manager::DIMENSIONS,
206 'size_units' => ['px', 'em', '%'],
207 'selectors' => [
208 '{{WRAPPER}} .pg-alien-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
209 ],
210 ]
211 );
212
213
214 $this->add_responsive_control(
215 'item_margin',
216 [
217 'label' => esc_html__('Margin', 'pixel-gallery'),
218 'type' => Controls_Manager::DIMENSIONS,
219 'size_units' => ['px', 'em', '%'],
220 'selectors' => [
221 '{{WRAPPER}} .pg-alien-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
222 ],
223 ]
224 );
225
226 $this->add_group_control(
227 Group_Control_Box_Shadow::get_type(),
228 [
229 'name' => 'item_box_shadow',
230 'selector' => '{{WRAPPER}} .pg-alien-item',
231 ]
232 );
233
234 $this->end_controls_tab();
235
236 $this->start_controls_tab(
237 'tab_item_hover',
238 [
239 'label' => esc_html__('Hover', 'pixel-gallery'),
240 ]
241 );
242
243 $this->add_control(
244 'item_hover_border_color',
245 [
246 'label' => esc_html__('Border Color', 'pixel-gallery'),
247 'type' => Controls_Manager::COLOR,
248 'condition' => [
249 'item_border_border!' => '',
250 ],
251 'selectors' => [
252 '{{WRAPPER}} .pg-alien-item:hover' => 'border-color: {{VALUE}};',
253 ],
254 ]
255 );
256
257 $this->add_group_control(
258 Group_Control_Box_Shadow::get_type(),
259 [
260 'name' => 'item_hover_box_shadow',
261 'selector' => '{{WRAPPER}} .pg-alien-item:hover',
262 ]
263 );
264
265 $this->add_control(
266 'item_hover_title_style_color',
267 [
268 'label' => esc_html__('Title Style Color', 'pixel-gallery'),
269 'type' => Controls_Manager::COLOR,
270 'selectors' => [
271 '{{WRAPPER}} .pg-alien-title:after' => 'background-color: {{VALUE}};',
272 ],
273 'separator' => 'before'
274 ]
275 );
276
277 $this->end_controls_tab();
278
279 $this->end_controls_tabs();
280
281 $this->end_controls_section();
282
283 $this->start_controls_section(
284 'section_style_content',
285 [
286 'label' => esc_html__('Content', 'pixel-gallery'),
287 'tab' => Controls_Manager::TAB_STYLE,
288 ]
289 );
290
291 $this->add_group_control(
292 Group_Control_Background::get_type(),
293 [
294 'name' => 'content_background',
295 'label' => esc_html__('Background', 'pixel-gallery'),
296 'types' => ['classic', 'gradient'],
297 // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
298 'exclude' => ['image'],
299 'selector' => '{{WRAPPER}} .pg-alien-content',
300 'fields_options' => [
301 'background' => [
302 'default' => 'classic',
303 ],
304 'color' => [
305 'default' => '#fff',
306 ],
307 ],
308 ]
309 );
310
311 $this->add_group_control(
312 Group_Control_Border::get_type(),
313 [
314 'name' => 'content_border',
315 'selector' => '{{WRAPPER}} .pg-alien-content',
316 'separator' => 'before',
317 ]
318 );
319
320 $this->add_responsive_control(
321 'content_border_radius',
322 [
323 'label' => esc_html__('Border Radius', 'pixel-gallery'),
324 'type' => Controls_Manager::DIMENSIONS,
325 'size_units' => ['px', 'em', '%'],
326 'selectors' => [
327 '{{WRAPPER}} .pg-alien-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
328 ],
329 ]
330 );
331
332 $this->add_responsive_control(
333 'content_padding',
334 [
335 'label' => esc_html__('Padding', 'pixel-gallery'),
336 'type' => Controls_Manager::DIMENSIONS,
337 'size_units' => ['px', 'em', '%'],
338 'selectors' => [
339 '{{WRAPPER}} .pg-alien-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
340 ],
341 ]
342 );
343
344
345 $this->add_responsive_control(
346 'content_margin',
347 [
348 'label' => esc_html__('Margin', 'pixel-gallery'),
349 'type' => Controls_Manager::DIMENSIONS,
350 'size_units' => ['px', 'em', '%'],
351 'selectors' => [
352 '{{WRAPPER}} .pg-alien-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
353 ],
354 ]
355 );
356
357 $this->add_group_control(
358 Group_Control_Box_Shadow::get_type(),
359 [
360 'name' => 'content_box_shadow',
361 'selector' => '{{WRAPPER}} .pg-alien-content',
362 ]
363 );
364
365 $this->end_controls_section();
366
367 //Global Title Controls
368 $this->register_title_controls('alien');
369
370 //Global Meta Controls
371 $this->register_meta_controls('alien');
372 $this->register_readmore_controls('alien');
373
374 //Clip Path Controls
375 $this->register_clip_path_controls('alien');
376
377 }
378
379 protected function render_readmore($item, $index, $id, $name) {
380 $settings = $this->get_settings_for_display();
381 $link = $this->get_link_url($item);
382 if ($link) {
383 $this->add_link_attributes('link' . $index, $link, true);
384 $this->add_render_attribute('link' . $index, 'aria-label', esc_attr( $item['readmore_text'] . ' Button' ));
385
386 /**
387 * If the Video Added then No need Image Lightbox
388 * Condition added `media_type`
389 * @since 1.0.0
390 */
391
392 if ('custom' !== $settings['link_to'] && $item['media_type'] !== 'video') {
393 $this->add_lightbox_data_attributes('link' . $index, $item['image']['id'], $settings['open_lightbox'], '', true);
394 $this->add_render_attribute(
395 'link' . $index,
396 [
397 'data-elementor-lightbox-slideshow' => $id,
398 ]
399 );
400 }
401 }
402 ?>
403 <?php if ($link && !empty($item['readmore_text'])) : ?>
404 <div class="pg-<?php echo esc_attr($name); ?>-readmore">
405 <a <?php $this->print_render_attribute_string('link' . $index); ?>>
406 <span><?php echo esc_html($item['readmore_text']); ?></span>
407 <i class="pg-icon-plus"></i>
408 <i class="pg-icon-plus"></i>
409 </a>
410 </div>
411 <?php endif; ?>
412 <?php
413 }
414
415 public function render_items() {
416 $settings = $this->get_settings_for_display();
417 $id = 'pg-alien-' . $this->get_id();
418 $slide_index = 1;
419 foreach ($settings['items'] as $index => $item) :
420
421 $attr_name = 'grid-item' . $index;
422 $this->add_render_attribute($attr_name, 'class', 'pg-alien-item pg-item elementor-repeater-item-' . esc_attr($item['_id']), true);
423
424 /**
425 * Render Video Inject Here
426 * Video Would be work on Media File & Lightbox
427 * @since 1.0.0
428 */
429 if ($item['media_type'] == 'video') {
430 $this->render_video_frame($item, $attr_name, $id);
431 }
432
433 ?>
434
435 <div <?php $this->print_render_attribute_string($attr_name); ?>>
436 <?php if ($item['item_hidden'] !== 'yes' ) : ?>
437 <div class="pg-alien-img-btn">
438 <?php $this->render_image_wrap($item, 'alien'); ?>
439 <?php if ('none' !== $settings['link_to'] && $settings['link_target'] == 'only_button') : ?>
440 <?php $this->render_readmore($item, $index, $id, 'alien'); ?>
441 <?php endif; ?>
442 </div>
443 <div class="pg-alien-content">
444 <?php $this->render_meta($item, 'alien'); ?>
445 <?php $this->render_title($item, 'alien'); ?>
446 </div>
447 <?php if ('none' !== $settings['link_to'] && $settings['link_target'] == 'whole_item') : ?>
448 <?php $this->render_lightbox_link_url($item, $index, $id); ?>
449 <?php endif; ?>
450 <?php endif; ?>
451 </div>
452
453 <?php
454 $slide_index++;
455 endforeach;
456 }
457
458 public function render() {
459 $settings = $this->get_settings_for_display();
460 $this->add_render_attribute('grid', 'class', 'pg-alien-grid pg-grid');
461
462 if (isset($settings['pg_in_animation_show']) && ($settings['pg_in_animation_show'] == 'yes')) {
463 $this->add_render_attribute( 'grid', 'class', 'pg-in-animation' );
464 if (isset($settings['pg_in_animation_delay']['size'])) {
465 $this->add_render_attribute( 'grid', 'data-in-animation-delay', $settings['pg_in_animation_delay']['size'] );
466 }
467 }
468
469 ?>
470 <div <?php $this->print_render_attribute_string('grid'); ?>>
471 <?php $this->render_items(); ?>
472 </div>
473 <?php
474 }
475 /**
476 * Elementor editor Backbone template.
477 */
478 protected function content_template() {
479 ?>
480 <#
481 var items = settings.items || [];
482 var gridClass = 'pg-alien-grid pg-grid';
483 if ( settings.pg_in_animation_show === 'yes' ) {
484 gridClass += ' pg-in-animation';
485 }
486 var animDelay = ( settings.pg_in_animation_delay && settings.pg_in_animation_delay.size ) ? settings.pg_in_animation_delay.size : '';
487 #>
488 <div class="{{{ gridClass }}}"
489 <# if ( settings.pg_in_animation_show === 'yes' && animDelay !== '' ) { #> data-in-animation-delay="{{ animDelay }}"<# } #>
490 >
491 <# _.each( items, function( item, index ) {
492 var itemClass = 'pg-alien-item pg-item elementor-repeater-item-' + item._id;
493 #>
494 <div class="{{{ itemClass }}}">
495 <# if ( item.item_hidden !== 'yes' ) { #>
496 <div class="pg-alien-img-btn">
497 <div class="pg-alien-image-wrap bdt-pg-img-mask">
498 <# if ( item.media_type === 'video' ) { #>
499 <# if ( item.poster && item.poster.url ) { #>
500 <img src="{{ item.poster.url }}" alt="{{ item.title }}" class="pg-alien-img">
501 <# } #>
502 <# } else if ( item.image && item.image.url ) { #>
503 <img src="{{ item.image.url }}" alt="{{ item.title }}" class="pg-alien-img">
504 <# } #>
505 <# if ( settings.link_to === 'file' && item.media_type === 'video' ) { #>
506 <span class="pg-video-icon-wrap">
507 <i class="pg-icon-play-circle pg-eicon-play"></i>
508 </span>
509 <# } #>
510 </div>
511 <# if ( settings.link_to !== 'none' && ( settings.link_target || 'whole_item' ) === 'only_button' && item.readmore_text ) { #>
512 <div class="pg-alien-readmore">
513 <?php $this->print_content_template_item_link_prepare( 'alien' ); ?>
514 <?php $this->print_content_template_item_link_wrap_open(); ?>
515 <?php $this->print_content_template_item_link_a_open(); ?>
516 <span>{{{ item.readmore_text }}}</span><i class="pg-icon-plus"></i><i class="pg-icon-plus"></i>
517 <?php $this->print_content_template_item_link_a_close(); ?>
518 <?php $this->print_content_template_item_link_wrap_close(); ?>
519 </div>
520 <# } #>
521 </div>
522 <div class="pg-alien-content">
523 <# if ( settings.show_meta === 'yes' && item.meta ) { #>
524 <div class="pg-alien-meta">{{{ item.meta }}}</div>
525 <# } #>
526 <# if ( settings.show_title === 'yes' && item.title ) { #>
527 <# var ttag = settings.title_tag || 'h3'; #>
528 <{{{ ttag }}} class="pg-alien-title">{{{ item.title }}}</{{{ ttag }}}>
529 <# } #>
530 </div>
531 <# if ( settings.link_to !== 'none' && ( settings.link_target || 'whole_item' ) === 'whole_item' ) { #>
532 <?php $this->print_content_template_lightbox_overlay( 'alien' ); ?>
533 <# } #>
534 <# } #>
535 </div>
536 <# } ); #>
537 </div>
538 <?php
539 }
540
541 }
542