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 / doodle / widgets / doodle.php

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

553 lines 15.0 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\Doodle\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 Doodle extends Module_Base {
23
24 use Global_Widget_Controls;
25
26 public function get_name() {
27 return 'pg-doodle';
28 }
29
30 public function get_title() {
31 return BDTPG . esc_html__('Doodle', 'pixel-gallery');
32 }
33
34 public function get_icon() {
35 return 'pg-icon-doodle';
36 }
37
38 public function get_categories() {
39 return ['pixel-gallery'];
40 }
41
42 public function get_keywords() {
43 return ['doodle', 'grid', 'gallery'];
44 }
45
46 public function get_style_depends() {
47 return ['pg-doodle'];
48 }
49
50 public function get_script_depends() {
51 if ( true === _is_pg_pro_activated() ) {
52 return ['justified-gallery'];
53 } else {
54 return [];
55 }
56 }
57
58 public function get_custom_help_url() {
59 return 'https://youtu.be/T9QmOd9o550';
60 }
61
62 public function has_widget_inner_wrapper(): bool {
63 return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
64 }
65 protected function is_dynamic_content(): bool {
66 return false;
67 }
68
69 protected function register_controls() {
70
71 $this->start_controls_section(
72 'section_layout',
73 [
74 'label' => __('Layout', 'pixel-gallery'),
75 'tab' => Controls_Manager::TAB_CONTENT,
76 ]
77 );
78
79 //Global
80 $this->register_grid_controls('doodle');
81 $this->register_global_height_controls('doodle');
82 /**
83 * Global Title Controls
84 */
85 $this->register_justified_gallery_controls();
86 $this->register_title_tag_controls();
87 $this->register_show_meta_controls();
88 $this->register_thumbnail_size_controls();
89
90 //Global Lightbox Controls
91 $this->register_lightbox_controls();
92
93 $this->end_controls_section();
94
95 $this->start_controls_section(
96 'section_item_content',
97 [
98 'label' => __('Items', 'pixel-gallery'),
99 'tab' => Controls_Manager::TAB_CONTENT,
100 ]
101 );
102
103 $repeater = new Repeater();
104 $repeater->start_controls_tabs('tabs_item_content');
105 $repeater->start_controls_tab(
106 'tab_item_content',
107 [
108 'label' => esc_html__('Content', 'pixel-gallery'),
109 ]
110 );
111 $this->register_repeater_media_controls($repeater);
112 $this->register_repeater_title_controls($repeater);
113 $this->register_repeater_meta_controls($repeater);
114 $this->register_repeater_custom_url_controls($repeater);
115 $this->register_repeater_hidden_item_controls($repeater);
116
117 $repeater->end_controls_tab();
118 $repeater->start_controls_tab(
119 'tab_item_grid',
120 [
121 'label' => esc_html__('Grid', 'pixel-gallery'),
122 ]
123 );
124 $this->register_repeater_grid_controls($repeater, 'doodle');
125 $this->register_repeater_item_height_controls($repeater, 'doodle');
126 $repeater->end_controls_tab();
127 $repeater->end_controls_tabs();
128 $this->register_repeater_items_controls($repeater);
129 $this->end_controls_section();
130
131 //Style
132 $this->start_controls_section(
133 'pg_section_style',
134 [
135 'label' => esc_html__('Items', 'pixel-gallery'),
136 'tab' => Controls_Manager::TAB_STYLE,
137 ]
138 );
139
140 $this->add_control(
141 'overlay_type',
142 [
143 'label' => esc_html__('Overlay', 'pixel-gallery'),
144 'type' => Controls_Manager::SELECT,
145 'default' => 'background',
146 'options' => [
147 'none' => esc_html__('None', 'pixel-gallery'),
148 'background' => esc_html__('Background', 'pixel-gallery'),
149 'blend' => esc_html__('Blend', 'pixel-gallery'),
150 ],
151 ]
152 );
153
154 $this->add_group_control(
155 Group_Control_Background::get_type(),
156 [
157 'name' => 'overlay_color',
158 'label' => esc_html__('Background', 'pixel-gallery'),
159 'types' => ['classic', 'gradient'],
160 // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
161 'exclude' => ['image'],
162 'selector' => '{{WRAPPER}} .pg-doodle-grid .pg-doodle-image-wrap::before',
163 'fields_options' => [
164 'background' => [
165 'default' => 'classic',
166 ],
167 'color' => [
168 'default' => '#fff',
169 ],
170 ],
171 'condition' => [
172 'overlay_type' => ['background', 'blend'],
173 ],
174 ]
175 );
176
177 $this->add_control(
178 'blend_type',
179 [
180 'label' => esc_html__('Blend Type', 'pixel-gallery'),
181 'type' => Controls_Manager::SELECT,
182 'default' => 'multiply',
183 'options' => pixel_gallery_blend_options(),
184 'condition' => [
185 'overlay_type' => 'blend',
186 ],
187 'selectors' => [
188 '{{WRAPPER}} .pg-doodle-image-wrap::before' => 'mix-blend-mode: {{VALUE}};'
189 ],
190 ]
191 );
192
193 $this->add_control(
194 'glassmorphism_effect',
195 [
196 'label' => esc_html__('Glassmorphism', 'pixel-gallery') . BDTPG_NC,
197 'type' => Controls_Manager::SWITCHER,
198 /* translators: %1$s: opening anchor tag, %2$s: closing anchor tag */
199 'description' => sprintf(esc_html__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1$s look here %2$s', 'pixel-gallery'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
200 'condition' => [
201 'overlay_type' => 'background',
202 ]
203 ]
204 );
205
206 $this->add_control(
207 'glassmorphism_blur_level',
208 [
209 'label' => esc_html__('Blur Level', 'pixel-gallery'),
210 'type' => Controls_Manager::SLIDER,
211 'range' => [
212 'px' => [
213 'min' => 0,
214 'step' => 1,
215 'max' => 50,
216 ]
217 ],
218 'default' => [
219 'size' => 5
220 ],
221 'selectors' => [
222 '{{WRAPPER}} .pg-doodle-image-wrap::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
223 ],
224 'condition' => [
225 'glassmorphism_effect' => 'yes',
226 'overlay_type' => 'background',
227 ]
228 ]
229 );
230
231 $this->start_controls_tabs('tabs_item_style');
232
233 $this->start_controls_tab(
234 'tab_item_normal',
235 [
236 'label' => esc_html__('Normal', 'pixel-gallery'),
237 ]
238 );
239
240 $this->add_group_control(
241 Group_Control_Background::get_type(),
242 [
243 'name' => 'item_background',
244 'label' => esc_html__('Background', 'pixel-gallery'),
245 'types' => ['classic', 'gradient'],
246 // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
247 'exclude' => ['image'],
248 'selector' => '{{WRAPPER}} .pg-doodle-item',
249 ]
250 );
251
252 $this->add_group_control(
253 Group_Control_Border::get_type(),
254 [
255 'name' => 'item_border',
256 'selector' => '{{WRAPPER}} .pg-doodle-item',
257 'separator' => 'before',
258 ]
259 );
260
261 $this->add_responsive_control(
262 'item_border_radius',
263 [
264 'label' => esc_html__('Border Radius', 'pixel-gallery'),
265 'type' => Controls_Manager::DIMENSIONS,
266 'size_units' => ['px', 'em', '%'],
267 'selectors' => [
268 '{{WRAPPER}} .pg-doodle-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
269 ],
270 ]
271 );
272
273 $this->add_responsive_control(
274 'item_padding',
275 [
276 'label' => esc_html__('Padding', 'pixel-gallery'),
277 'type' => Controls_Manager::DIMENSIONS,
278 'size_units' => ['px', 'em', '%'],
279 'selectors' => [
280 '{{WRAPPER}} .pg-doodle-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
281 ],
282 ]
283 );
284
285
286 $this->add_responsive_control(
287 'item_margin',
288 [
289 'label' => esc_html__('Margin', 'pixel-gallery'),
290 'type' => Controls_Manager::DIMENSIONS,
291 'size_units' => ['px', 'em', '%'],
292 'selectors' => [
293 '{{WRAPPER}} .pg-doodle-top-content, {{WRAPPER}} .pg-doodle-meta' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
294 ],
295 ]
296 );
297
298 $this->add_group_control(
299 Group_Control_Box_Shadow::get_type(),
300 [
301 'name' => 'item_box_shadow',
302 'selector' => '{{WRAPPER}} .pg-doodle-item',
303 ]
304 );
305
306 $this->end_controls_tab();
307
308 $this->start_controls_tab(
309 'tab_item_hover',
310 [
311 'label' => esc_html__('Hover', 'pixel-gallery'),
312 ]
313 );
314
315 $this->add_group_control(
316 Group_Control_Background::get_type(),
317 [
318 'name' => 'item_hover_background',
319 'label' => esc_html__('Background', 'pixel-gallery'),
320 'types' => ['classic', 'gradient'],
321 // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams, WordPress.DB.SlowDBQuery -- Intentional bounded query; exclusions/keys are plugin-controlled, not user request input.
322 'exclude' => ['image'],
323 'selector' => '{{WRAPPER}} .pg-doodle-item:hover',
324 ]
325 );
326
327 $this->add_control(
328 'item_hover_border_color',
329 [
330 'label' => esc_html__('Border Color', 'pixel-gallery'),
331 'type' => Controls_Manager::COLOR,
332 'condition' => [
333 'item_border_border!' => '',
334 ],
335 'selectors' => [
336 '{{WRAPPER}} .pg-doodle-item:hover' => 'border-color: {{VALUE}};',
337 ],
338 ]
339 );
340
341 $this->add_group_control(
342 Group_Control_Box_Shadow::get_type(),
343 [
344 'name' => 'item_hover_box_shadow',
345 'selector' => '{{WRAPPER}} .pg-doodle-item:hover',
346 ]
347 );
348
349 $this->end_controls_tab();
350
351 $this->end_controls_tabs();
352
353 $this->end_controls_section();
354
355 //Global Title Controls
356 $this->register_title_controls('doodle');
357
358 $this->start_controls_section(
359 'section_style_line',
360 [
361 'label' => __('Line', 'pixel-gallery'),
362 'tab' => Controls_Manager::TAB_STYLE,
363 ]
364 );
365
366 $this->add_control(
367 'meta_line_color',
368 [
369 'label' => __('Color', 'pixel-gallery'),
370 'type' => Controls_Manager::COLOR,
371 'selectors' => [
372 '{{WRAPPER}} .pg-doodle-meta::before' => 'background: {{VALUE}};',
373 ],
374 ]
375 );
376
377 $this->add_responsive_control(
378 'meta_line_height',
379 [
380 'label' => __('Height', 'pixel-gallery'),
381 'type' => Controls_Manager::SLIDER,
382 'range' => [
383 'px' => [
384 'min' => 1,
385 'max' => 10,
386 ],
387 ],
388 'selectors' => [
389 '{{WRAPPER}} .pg-doodle-meta::before' => 'height: {{SIZE}}{{UNIT}};',
390 ],
391 ]
392 );
393
394 $this->add_responsive_control(
395 'meta_line_width',
396 [
397 'label' => __('Width', 'pixel-gallery'),
398 'type' => Controls_Manager::SLIDER,
399 'range' => [
400 'px' => [
401 'min' => 10,
402 'max' => 200,
403 ],
404 ],
405 'selectors' => [
406 '{{WRAPPER}} .pg-doodle-item:hover .pg-doodle-meta::before' => 'width: {{SIZE}}{{UNIT}};',
407 ],
408 ]
409 );
410
411 $this->add_responsive_control(
412 'meta_line_spacing',
413 [
414 'label' => esc_html__('Spacing', 'pixel-gallery'),
415 'type' => Controls_Manager::SLIDER,
416 'range' => [
417 'px' => [
418 'min' => -100,
419 'max' => 100,
420 ],
421 ],
422 'selectors' => [
423 '{{WRAPPER}} .pg-doodle-meta::before' => 'top: {{SIZE}}{{UNIT}};',
424 ],
425 ]
426 );
427
428 $this->end_controls_section();
429
430 //Global Meta Controls
431 $this->register_meta_controls('doodle');
432
433 //Clip Path Controls
434 $this->register_clip_path_controls('doodle');
435
436
437 }
438
439 public function render_items() {
440 $settings = $this->get_settings_for_display();
441 $id = 'pg-doodle-' . $this->get_id();
442 $slide_index = 1;
443 foreach ($settings['items'] as $index => $item) :
444
445 $attr_name = 'grid-item' . $index;
446 $this->add_render_attribute($attr_name, 'class', 'pg-doodle-item pg-item elementor-repeater-item-' . esc_attr($item['_id']), true);
447
448 /**
449 * Render Video Inject Here
450 * Video Would be work on Media File & Lightbox
451 * @since 1.0.0
452 */
453 if ($item['media_type'] == 'video') {
454 $this->render_video_frame($item, $attr_name, $id);
455 }
456
457 ?>
458
459 <div <?php $this->print_render_attribute_string($attr_name); ?>>
460 <?php if ($item['item_hidden'] !== 'yes' ) : ?>
461 <?php $this->render_image_wrap($item, 'doodle'); ?>
462 <div class="pg-doodle-content">
463 <?php $this->render_title($item, 'doodle'); ?>
464 <?php $this->render_meta($item, 'doodle'); ?>
465 </div>
466 <?php $this->render_lightbox_link_url($item, $index, $id); ?>
467 <?php endif; ?>
468 </div>
469
470 <?php
471 $slide_index++;
472 endforeach;
473 }
474
475 public function render() {
476 $settings = $this->get_settings_for_display();
477 $this->add_render_attribute('grid', 'class', 'pg-doodle-grid pg-grid');
478
479 /**
480 * Render Justified Gallery Attributes
481 */
482 $this->render_justified_gallery_attributes('grid');
483
484 if (isset($settings['pg_in_animation_show']) && ($settings['pg_in_animation_show'] == 'yes')) {
485 $this->add_render_attribute( 'grid', 'class', 'pg-in-animation' );
486 if (isset($settings['pg_in_animation_delay']['size'])) {
487 $this->add_render_attribute( 'grid', 'data-in-animation-delay', $settings['pg_in_animation_delay']['size'] );
488 }
489 }
490
491 ?>
492 <div <?php $this->print_render_attribute_string('grid'); ?>>
493 <?php $this->render_items(); ?>
494 </div>
495 <?php
496 }
497 /**
498 * Elementor editor Backbone template.
499 */
500 protected function content_template() {
501 ?>
502 <#
503 var items = settings.items || [];
504 var animDelay = ( settings.pg_in_animation_delay && settings.pg_in_animation_delay.size ) ? settings.pg_in_animation_delay.size : '';
505 var alwaysLb = true;
506 var gridClass = 'pg-doodle-grid pg-grid';
507 if ( settings.pg_in_animation_show === 'yes' ) {
508 gridClass += ' pg-in-animation';
509 }
510 #>
511 <div class="{{{ gridClass }}}"
512 <# if ( settings.pg_in_animation_show === 'yes' && animDelay !== '' ) { #> data-in-animation-delay="{{ animDelay }}"<# } #>
513 >
514 <# _.each( items, function( item, index ) {
515 var itemClass = 'pg-doodle-item pg-item elementor-repeater-item-' + item._id;
516 #>
517 <div class="{{{ itemClass }}}">
518 <# if ( item.item_hidden !== 'yes' ) { #>
519 <div class="pg-doodle-image-wrap bdt-pg-img-mask">
520 <# if ( item.media_type === 'video' ) { #>
521 <# if ( item.poster && item.poster.url ) { #>
522 <img src="{{ item.poster.url }}" alt="{{ item.title }}" class="pg-doodle-img">
523 <# } #>
524 <# } else if ( item.image && item.image.url ) { #>
525 <img src="{{ item.image.url }}" alt="{{ item.title }}" class="pg-doodle-img">
526 <# } #>
527 <# if ( settings.link_to === 'file' && item.media_type === 'video' ) { #>
528 <span class="pg-video-icon-wrap">
529 <i class="pg-icon-play-circle pg-eicon-play"></i>
530 </span>
531 <# } #>
532 </div>
533 <div class="pg-doodle-content">
534 <# if ( settings.show_title === 'yes' && item.title ) { #>
535 <# var ttag = settings.title_tag || 'h3'; #>
536 <{{{ ttag }}} class="pg-doodle-title">{{{ item.title }}}</{{{ ttag }}}>
537 <# } #>
538 <# if ( settings.show_meta === 'yes' && item.meta ) { #>
539 <div class="pg-doodle-meta">{{{ item.meta }}}</div>
540 <# } #>
541 </div>
542 <# if ( alwaysLb || ( settings.link_to !== 'none' && ( settings.link_target || 'whole_item' ) === 'whole_item' ) ) { #>
543 <?php $this->print_content_template_lightbox_overlay( 'doodle' ); ?>
544 <# } #>
545 <# } #>
546 </div>
547 <# } ); #>
548 </div>
549 <?php
550 }
551
552 }
553