PluginProbe
Enter Addons – Ultimate Template Builder for Elementor / trunk
Enter Addons – Ultimate Template Builder for Elementor vtrunk
trunk 2.2.10 2.2.2 2.2.3 2.2.4 2.2.5 2.2.6 2.2.7 2.2.8 2.2.9 2.3.0 2.3.1 2.3.2 2.3.3 2.3.4
enteraddons / widgets / photo_stack / Photo_Stack.php

Photo_Stack.php in Enter Addons – Ultimate Template Builder for Elementor trunk, at widgets/photo_stack/Photo_Stack.php

610 lines 21.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace Enteraddons\Widgets\Photo_Stack;
3
4 use Elementor\Widget_Base;
5 use Elementor\Controls_Manager;
6 use Elementor\Scheme_Color;
7 use Elementor\Scheme_Typography;
8 use Elementor\Group_Control_Typography;
9 use Elementor\Group_Control_Box_Shadow;
10 use Elementor\Group_Control_Background;
11 use Elementor\Group_Control_Border;
12 use Elementor\Group_Control_Image_Size;
13 use Elementor\Repeater;
14
15
16
17 // Exit if accessed directly
18 if ( ! defined( 'ABSPATH' ) ) {
19 exit;
20 }
21
22 /**
23 *
24 * Enteraddons elementor Photo Stack widget.
25 *
26 * @since 1.0
27 */
28
29 class Photo_Stack extends Widget_Base {
30
31 public function get_name() {
32 return 'enteraddons-photo-stack';
33 }
34
35 public function get_title() {
36 return esc_html__( 'Photo Stack', 'enteraddons' );
37 }
38
39 public function get_icon() {
40 return 'entera entera-photo-stack';
41 }
42
43 public function get_categories() {
44 return ['enteraddons-elements-category'];
45 }
46
47 protected function register_controls() {
48
49 // ---------------------------------------- Photo Stack content ------------------------------
50 $this->start_controls_section(
51 'enteraddons_photo_stack_content',
52 [
53 'label' => esc_html__( 'Content', 'enteraddons' ),
54 ]
55 );
56
57 $repeater = new Repeater();
58 $repeater->add_control(
59 'image',
60 [
61 'label' => esc_html__('Image', 'enteraddons'),
62 'type' => Controls_Manager::MEDIA,
63 'default' => [
64 'url' => \Elementor\Utils::get_placeholder_image_src(),
65 ],
66 'dynamic' => [
67 'active' => true,
68 ],
69 ]
70 );
71
72 $repeater->add_control(
73 'link',
74 [
75 'label' => esc_html__( 'Link', 'enteraddons' ),
76 'type' => Controls_Manager::URL,
77 'label_block' => true,
78 'placeholder' => 'https://example.com',
79 'dynamic' => [
80 'active' => true,
81 ]
82 ]
83 );
84
85 $repeater->add_responsive_control(
86 'image_width',
87 [
88 'label' => esc_html__( 'Image Width', 'enteraddons' ),
89 'type' => Controls_Manager::SLIDER,
90 'size_units' => [ 'px', '%' ],
91 'range' => [
92 'px' => [
93 'min' => 0,
94 'max' => 1000,
95 'step' => 1,
96 ],
97 '%' => [
98 'min' => 0,
99 'max' => 100,
100 ],
101 ],
102 'default' => [
103 'unit' => '%',
104 'size' => '60',
105 ],
106 'selectors' => [
107 '{{WRAPPER}} .ea-photo-stack-item{{CURRENT_ITEM}} img' => 'width: {{SIZE}}{{UNIT}};',
108 ],
109 ]
110 );
111 $repeater->add_responsive_control(
112 'image_height',
113 [
114 'label' => esc_html__( 'Image Height', 'enteraddons' ),
115 'type' => Controls_Manager::SLIDER,
116 'size_units' => [ 'px', '%' ],
117 'range' => [
118 'px' => [
119 'min' => 0,
120 'max' => 1000,
121 'step' => 1,
122 ],
123 '%' => [
124 'min' => 0,
125 'max' => 100,
126 ],
127 ],
128 'default' => [
129 'unit' => '%',
130 'size' => '',
131 ],
132 'selectors' => [
133 '{{WRAPPER}} .ea-photo-stack-item{{CURRENT_ITEM}} img' => 'height: {{SIZE}}{{UNIT}};',
134 ],
135 ]
136 );
137 $repeater->add_responsive_control(
138 'image_offset_y',
139 [
140 'label' => esc_html__('Offset Y', 'enteraddons'),
141 'type' => Controls_Manager::SLIDER,
142 'size_units' => ['px', '%'],
143 'range' => [
144 'px' => [
145 'min' => -1000,
146 'max' => 1000,
147 'step' => 5,
148 ],
149 '%' => [
150 'min' => -100,
151 'max' => 100,
152 ],
153 ],
154 'default' => [
155 'unit' => 'px',
156 'size' => 0,
157 ],
158 'selectors' => [
159 '{{WRAPPER}} .ea-photo-stack-item{{CURRENT_ITEM}}'=> 'top: {{SIZE}}{{UNIT}};',
160 ],
161 ]
162 );
163
164 $repeater->add_responsive_control(
165 'image_offset_x',
166 [
167 'label' => esc_html__('Offset X', 'enteraddons'),
168 'type' => Controls_Manager::SLIDER,
169 'size_units' => ['px', '%'],
170 'range' => [
171 'px' => [
172 'min' => -1000,
173 'max' => 1000,
174 'step' => 5,
175 ],
176 '%' => [
177 'min' => -100,
178 'max' => 100,
179 ],
180 ],
181 'default' => [
182 'unit' => 'px',
183 'size' => 0,
184 ],
185 'selectors' => [
186 '{{WRAPPER}} .ea-photo-stack-item{{CURRENT_ITEM}}' => 'left: {{SIZE}}{{UNIT}};',
187 ],
188 ]
189 );
190
191 $repeater->add_responsive_control(
192 'image_z_index',
193 [
194 'label' => esc_html__('Z-Index', 'enteraddons'),
195 'type' => Controls_Manager::NUMBER,
196 'min' => -100,
197 'max' => 100,
198 'step' => 1,
199 'selectors' => [
200 '{{WRAPPER}} .ea-photo-stack-item{{CURRENT_ITEM}}' => 'z-index: {{VALUE}};',
201 ],
202 'separator' => 'before',
203 ]
204 );
205
206 $this->add_control(
207 'image_list',
208 [
209 'show_label' => true,
210 'label' => esc_html__('Items', 'enteraddons'),
211 'type' => Controls_Manager::REPEATER,
212 'fields' => $repeater->get_controls(),
213 'title_field' => '{{{ name }}}',
214 'default' => [
215 [
216 'image' => [
217 'url' => \Elementor\Utils::get_placeholder_image_src(),
218 ],
219
220 'image_width' => [
221 'size' => 200,
222 'unit' => 'px',
223 ],
224 'image_height' => [
225 'size' => 200,
226 'unit' => 'px',
227 ],
228 'image_offset_y' => [
229 'size' => 0,
230 'unit' => 'px',
231 ],
232 'image_offset_x' => [
233 'size' => 35,
234 'unit' => 'px',
235 ],
236 ],
237 [
238 'image'=> [
239 'url' => \Elementor\Utils::get_placeholder_image_src(),
240 ],
241
242 'image_width' => [
243 'size' => 300,
244 'unit' => 'px',
245 ],
246 'image_height' => [
247 'size' => 300,
248 'unit' => 'px',
249 ],
250 'image_offset_y' => [
251 'size' => 250,
252 'unit' => 'px',
253 ],
254 'image_offset_x' => [
255 'size' => 0,
256 'unit' => 'px',
257 ],
258 ],
259 [
260 'image' => [
261 'url' => \Elementor\Utils::get_placeholder_image_src(),
262 ],
263
264 'image_width' => [
265 'size' => 400,
266 'unit' => 'px',
267 ],
268 'image_height' => [
269 'size' => 400,
270 'unit' => 'px',
271 ],
272 'image_offset_y' => [
273 'size' => 100,
274 'unit' => 'px',
275 ],
276 'image_offset_x' => [
277 'size' => 180,
278 'unit' => 'px',
279 ],
280 ],
281 ],
282
283 ]
284 );
285
286 $this->end_controls_section();
287
288 // ---------------------------------------- Photo Stack Settings ------------------------------
289 $this->start_controls_section(
290 'enteraddons_photo_stack_settings',
291 [
292 'label' => esc_html__( 'Photo Stack Settings', 'enteraddons' ),
293 ]
294 );
295
296 $this->add_control(
297 'image_animation',
298 [
299 'label' => esc_html__('Animation', 'enteraddons'),
300 'type' => Controls_Manager::SELECT,
301 'options' => [
302 '' => esc_html__('None', 'enteraddons'),
303 'ea-bounce-sm' => esc_html__('Bounce Small', 'enteraddons'),
304 'ea-bounce-md' => esc_html__('Bounce Medium', 'enteraddons'),
305 'ea-bounce-lg' => esc_html__('Bounce Large', 'enteraddons'),
306 'ea-fade' => esc_html__('Fade', 'enteraddons'),
307 'ea-rotating' => esc_html__('Rotating', 'enteraddons'),
308 'ea-rotating-inverse' => esc_html__('Rotating inverse', 'enteraddons'),
309 'ea-scale-sm' => esc_html__('Scale Small', 'enteraddons'),
310 'ea-scale-md' => esc_html__('Scale Medium', 'enteraddons'),
311 'ea-scale-lg' => esc_html__('Scale Large', 'enteraddons'),
312 ],
313 'default' => 'ea-bounce-sm',
314 'separator' => 'before',
315 ]
316 );
317
318 $this->add_control(
319 'hover_animation',
320 [
321 'label' => esc_html__('Hover Animation', 'enteraddons'),
322 'type' => Controls_Manager::SELECT,
323 'options' => [
324 'none' => esc_html__('None', 'enteraddons'),
325 'fly-sm' => esc_html__('Fly Small', 'enteraddons'),
326 'fly' => esc_html__('Fly Medium', 'enteraddons'),
327 'fly-lg' => esc_html__('Fly Large', 'enteraddons'),
328 'scale-sm' => esc_html__('Scale Small', 'enteraddons'),
329 'scale' => esc_html__('Scale Medium', 'enteraddons'),
330 'scale-lg' => esc_html__('Scale Large', 'enteraddons'),
331 'scale-inverse-sm' => esc_html__('Scale Inverse Small', 'enteraddons'),
332 'scale-inverse' => esc_html__('Scale Inverse Medium', 'enteraddons'),
333 'scale-inverse-lg' => esc_html__('Scale Inverse Large', 'enteraddons'),
334 ],
335 'default' => 'scale-sm',
336 'separator' => 'before',
337 ]
338 );
339 $this->add_control(
340 'animation_speed',
341 [
342 'label' => esc_html__('Animation speed', 'enteraddons'),
343 'description' => esc_html__('Please set your animation speed in seconds. Default value is 6s.', 'enteraddons'),
344 'type' => Controls_Manager::NUMBER,
345 'min' => 0,
346 'max' => 100,
347 'step' => 1,
348 'default' => 6,
349 'selectors' => [
350 '{{WRAPPER}} .ea-photo-stack-wrap' => '--animation_speed:{{SIZE}}s',
351 ],
352 ]
353 );
354
355 $this->add_responsive_control(
356 'image_container_align',
357 [
358 'label' => esc_html__('Alignment', 'enteraddons'),
359 'type' => Controls_Manager::CHOOSE,
360 'options' => [
361 'left' => [
362 'title' => esc_html__('Left', 'enteraddons'),
363 'icon' => 'eicon-text-align-left',
364 ],
365 'center' => [
366 'title' => esc_html__('Center', 'enteraddons'),
367 'icon' => 'eicon-text-align-center',
368 ],
369 'right' => [
370 'title' => esc_html__('Right', 'enteraddons'),
371 'icon' => 'eicon-text-align-right',
372 ],
373 ],
374 'toggle' => true,
375 'default' => 'center',
376 'separator' => 'before',
377 'selectors' => [
378 '{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}};',
379 ],
380 ]
381 );
382 $this->end_controls_section(); // End Photo Stack content settings
383
384 /**
385 * Style Tab
386 * ------------------------------ Photo Stack Wrapper Style Settings ------------------------------
387 *
388 */
389 $this->start_controls_section(
390 'enteraddons_photo_stack_wrapper_settings', [
391 'label' => esc_html__( 'Warapper Style', 'enteraddons' ),
392 'tab' => Controls_Manager::TAB_STYLE,
393 ]
394 );
395
396 $this->add_responsive_control(
397 'image_container_width',
398 [
399 'label' => esc_html__('Width', 'enteraddons'),
400 'type' => Controls_Manager::SLIDER,
401 'size_units' => ['px', '%'],
402 'range' => [
403 '%' => [
404 'min' => 1,
405 'max' => 100,
406 ],
407 'px' => [
408 'min' => 1,
409 'max' => 2000,
410 ],
411 ],
412 'default' => [
413 'size' => 100,
414 'unit' => '%',
415 ],
416 'selectors' => [
417 '{{WRAPPER}} .ea-photo-stack-wrap' => 'width: {{SIZE}}{{UNIT}};',
418 ],
419 ]
420 );
421
422 $this->add_responsive_control(
423 'image_container_height',
424 [
425 'label' => esc_html__('Minimum Height', 'enteraddons'),
426 'type' => Controls_Manager::SLIDER,
427 'size_units' => ['px', 'vh'],
428 'range' => [
429 'px' => [
430 'min' => 0,
431 'max' => 1000,
432 'step' => 1,
433 ],
434 'vh' => [
435 'min' => 0,
436 'max' => 100,
437 ],
438 ],
439 'default' => [
440 'size' => 600,
441 'unit' => 'px',
442 ],
443 'selectors' => [
444 '{{WRAPPER}} .ea-photo-stack-wrap' => 'min-height: {{SIZE}}{{UNIT}}',
445 ],
446 ]
447 );
448 $this->add_responsive_control(
449 'wrapper_margin',
450 [
451 'label' => esc_html__( 'Margin', 'enteraddons' ),
452 'type' => Controls_Manager::DIMENSIONS,
453 'devices' => [ 'desktop', 'tablet', 'mobile' ],
454 'size_units' => [ 'px', '%', 'em' ],
455 'selectors' => [
456 '{{WRAPPER}} .ea-photo-stack-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457 ],
458 ]
459 );
460 $this->add_responsive_control(
461 'wrapper_padding',
462 [
463 'label' => esc_html__( 'Padding', 'enteraddons' ),
464 'type' => Controls_Manager::DIMENSIONS,
465 'devices' => [ 'desktop', 'tablet', 'mobile' ],
466 'size_units' => [ 'px', '%', 'em' ],
467 'selectors' => [
468 '{{WRAPPER}} .ea-photo-stack-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
469 ],
470 ]
471 );
472 $this->add_group_control(
473 \Elementor\Group_Control_Border::get_type(),
474 [
475 'name' => 'wrapper_border',
476 'label' => esc_html__( 'Border', 'enteraddons' ),
477 'selector' => '{{WRAPPER}} .ea-photo-stack-wrap',
478 ]
479 );
480 $this->add_responsive_control(
481 'wrapper_border_radius',
482 [
483 'label' => esc_html__( 'Border Radius', 'enteraddons' ),
484 'type' => Controls_Manager::DIMENSIONS,
485 'devices' => [ 'desktop', 'tablet', 'mobile' ],
486 'size_units' => [ 'px', '%', 'em' ],
487 'selectors' => [
488 '{{WRAPPER}} .ea-photo-stack-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
489 ],
490 ]
491 );
492 $this->add_group_control(
493 \Elementor\Group_Control_Box_Shadow::get_type(),
494 [
495 'name' => 'wrapper_box_shadow',
496 'label' => esc_html__( 'Box Shadow', 'enteraddons' ),
497 'selector' => '{{WRAPPER}} .ea-photo-stack-wrap',
498 ]
499 );
500 $this->add_group_control(
501 \Elementor\Group_Control_Background::get_type(),
502 [
503 'name' => 'wrapper_background',
504 'label' => esc_html__( 'Background', 'enteraddons' ),
505 'types' => [ 'classic', 'gradient' ],
506 'selector' => '{{WRAPPER}} .ea-photo-stack-wrap',
507 ]
508 );
509 $this->end_controls_section();
510 /**
511 * Style Tab
512 * ------------------------------ Photo Stack Style Settings ------------------------------
513 *
514 */
515
516 $this->start_controls_section(
517 'enteraddons_photo_stack_style_settings', [
518 'label' => esc_html__( 'Photo Stack Style', 'enteraddons' ),
519 'tab' => Controls_Manager::TAB_STYLE,
520 ]
521 );
522 $this->add_group_control(
523 Group_Control_Border::get_type(),
524 [
525 'name' => 'border',
526 'label' => esc_html__( 'Border', 'enteraddons' ),
527 'selector' => '{{WRAPPER}} .ea-photo-stack-item img',
528 'separator' => 'before',
529 ]
530 );
531 $this->add_responsive_control(
532 'image_border_radius',
533 [
534 'label' => esc_html__('Border Radius', 'enteraddons'),
535 'type' => Controls_Manager::DIMENSIONS,
536 'size_units' => ['px', '%'],
537 'default' => [
538 'top' => 5,
539 'right' => 5,
540 'bottom' => 5,
541 'left' => 5,
542 ],
543 'selectors' => [
544 '{{WRAPPER}} .ea-photo-stack-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545 '{{WRAPPER}} .ea-photo-stack-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
546 ],
547 ]
548 );
549 $this->start_controls_tabs('tabs_hover_style');
550
551 $this->start_controls_tab(
552 'tab_button_normal',
553 [
554 'label' => esc_html__( 'Normal', 'enteraddons' ),
555 ]
556 );
557
558 $this->add_group_control(
559 Group_Control_Box_Shadow::get_type(),
560 [
561 'name' => 'img_box_shadow',
562 'label' => esc_html__( 'Box Shadow', 'enteraddons' ),
563 'selector' => '{{WRAPPER}} .ea-photo-stack-item img',
564
565 ]
566 );
567
568 $this->end_controls_tab();
569
570 $this->start_controls_tab(
571 'tab_button_hover',
572 [
573 'label' => esc_html__( 'Hover', 'enteraddons' ),
574 ]
575 );
576 $this->add_group_control(
577 Group_Control_Box_Shadow::get_type(),
578 [
579 'name' => 'img_box_shadow_hover',
580 'label' => esc_html__( 'Box Shadow Hover', 'enteraddons' ),
581 'selector' => '{{WRAPPER}} .ea-photo-stack-item img:hover',
582
583 ]
584 );
585 $this->end_controls_tab();
586
587 $this->end_controls_tabs();
588
589 $this->end_controls_section();
590 }
591
592 protected function render() {
593
594 // get settings
595 $settings = $this->get_settings_for_display();
596
597 // template render
598 $obj = new Photo_Stack_Template();
599 $obj::setDisplaySettings( $settings );
600 $obj->renderTemplate();
601
602 }
603
604 public function get_style_depends() {
605 return [ 'enteraddons-global-style'];
606 }
607
608
609 }
610