PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.0.7
Easy Elements for Elementor – Addons & Website Templates v1.0.7
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / countdown / countdown.php

countdown.php in Easy Elements for Elementor – Addons & Website Templates 1.0.7, at widgets/countdown/countdown.php

511 lines 14.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 use Elementor\Controls_Manager;
3 use Elementor\Group_Control_Typography;
4
5 defined( 'ABSPATH' ) || die();
6
7 class Easyel_Count_Down_Widget extends \Elementor\Widget_Base {
8
9 public function get_style_depends() {
10 $handle = 'eel-countdown-style';
11 $css_path = plugin_dir_path( __FILE__ ) . 'css/countdown.css';
12
13 if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
14 wp_register_style( $handle, plugins_url( 'css/countdown.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : EASYELEMENTS_VER );
15 }
16 return [ $handle ];
17 }
18
19 public function get_script_depends() {
20 $handle = 'eel-countdown-script';
21 $js_path = plugin_dir_path( __FILE__ ) . 'js/countdown.js';
22 if ( ! wp_script_is( $handle, 'registered' ) && file_exists( $js_path ) ) {
23 wp_register_script( $handle, plugins_url( 'js/countdown.js', __FILE__ ), [ 'jquery' ], filemtime( $js_path ), true );
24 }
25 return [ $handle ];
26 }
27
28 public function get_name() {
29 return 'eel-countdown';
30 }
31
32 public function get_title() {
33 return __( 'Countdown', 'easy-elements' );
34 }
35
36 public function get_icon() {
37 return 'easyicon eicon-countdown';
38 }
39
40 public function get_categories() {
41 return [ 'easyelements_category' ];
42 }
43
44 public function get_keywords() {
45 return [ 'counter', 'Countdown' ];
46 }
47
48 protected function register_controls() {
49
50 $this->start_controls_section(
51 'countdown_settings',
52 [
53 'label' => esc_html__('Countdown', 'easy-elements'),
54 ]
55 );
56
57 $this->add_control(
58 'day_label',
59 [
60 'label' => esc_html__( 'Days', 'easy-elements' ),
61 'type' => \Elementor\Controls_Manager::TEXT,
62 'default' => esc_html__( 'Days', 'easy-elements' ),
63 'placeholder' => esc_html__( 'Type your days here', 'easy-elements' ),
64 ]
65 );
66
67 $this->add_control(
68 'hours_label',
69 [
70 'label' => esc_html__( 'Hours', 'easy-elements' ),
71 'type' => \Elementor\Controls_Manager::TEXT,
72 'default' => esc_html__( 'Hours', 'easy-elements' ),
73 'placeholder' => esc_html__( 'Type your hours here', 'easy-elements' ),
74 ]
75 );
76
77 $this->add_control(
78 'minute_label',
79 [
80 'label' => esc_html__( 'Minute', 'easy-elements' ),
81 'type' => \Elementor\Controls_Manager::TEXT,
82 'default' => esc_html__( 'Minutes', 'easy-elements' ),
83 'placeholder' => esc_html__( 'Type your minute here', 'easy-elements' ),
84 ]
85 );
86
87 $this->add_control(
88 'seconds_label',
89 [
90 'label' => esc_html__( 'Seconds', 'easy-elements' ),
91 'type' => \Elementor\Controls_Manager::TEXT,
92 'default' => esc_html__( 'Seconds', 'easy-elements' ),
93 'placeholder' => esc_html__( 'Type your seconds here', 'easy-elements' ),
94 ]
95 );
96
97 $this->add_control(
98 'target_date',
99 [
100 'label' => esc_html__('Target Date', 'easy-elements'),
101 'type' => \Elementor\Controls_Manager::DATE_TIME,
102 'picker_options' => [
103 'enableTime' => true,
104 'time_24hr' => true,
105 ],
106 'default' => gmdate( 'Y-m-d H:i:s', strtotime( '+1 day', current_time( 'timestamp', 1 ) ) ),
107 ]
108 );
109
110 $this->add_control(
111 'cntdwn_separator',
112 [
113 'label' => esc_html__( 'Separator', 'easy-elements' ),
114 'type' => \Elementor\Controls_Manager::SELECT,
115 'default' => 'eel-cntdwn-space',
116 'options' => [
117 'eel-cntdwn-space' => esc_html__( 'Space', 'easy-elements' ),
118 'eel-cntdwn-bullets' => esc_html__( 'bullets', 'easy-elements' ),
119 'eel-cntdwn-dash' => esc_html__( 'Dash', 'easy-elements' ),
120 ],
121 ]
122 );
123
124 $this->add_control(
125 'label_down_shown',
126 [
127 'label' => esc_html__( 'Display Label Under Number', 'easy-elements' ),
128 'type' => \Elementor\Controls_Manager::SWITCHER,
129 'label_on' => esc_html__( 'Yes', 'easy-elements' ),
130 'label_off' => esc_html__( 'No', 'easy-elements' ),
131 'return_value' => 'yes',
132 'default' => 'no',
133 'selectors_dictionary' => [
134 'yes' => 'block',
135 'no' => 'inline-block',
136 ],
137 'selectors' => [
138 '{{WRAPPER}} .eel-cntdwn-item span' => 'display: {{VALUE}};',
139 ],
140 ]
141 );
142
143 $this->add_responsive_control(
144 'content_align',
145 [
146 'label' => esc_html__( 'Content Alignment', 'easy-elements' ),
147 'type' => \Elementor\Controls_Manager::CHOOSE,
148 'options' => [
149 'left' => [
150 'title' => esc_html__( 'Left', 'easy-elements' ),
151 'icon' => 'eicon-text-align-left',
152 ],
153 'center' => [
154 'title' => esc_html__( 'Center', 'easy-elements' ),
155 'icon' => 'eicon-text-align-center',
156 ],
157 'right' => [
158 'title' => esc_html__( 'Right', 'easy-elements' ),
159 'icon' => 'eicon-text-align-right',
160 ],
161 ],
162 'toggle' => true,
163 'selectors' => [
164 '{{WRAPPER}} .eel-cntdwn-item span' => 'text-align: {{VALUE}};',
165 ],
166 'condition' => [
167 'label_down_shown' => 'yes'
168 ]
169 ]
170 );
171
172 $this->end_controls_section();
173
174 $this->start_controls_section(
175 'countdown_style',
176 [
177 'label' => esc_html__('Countdown', 'easy-elements'),
178 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
179 ]
180 );
181
182 $this->add_responsive_control(
183 'mid_gap',
184 [
185 'label' => esc_html__( 'Mid Gap', 'easy-elements' ),
186 'type' => \Elementor\Controls_Manager::SLIDER,
187 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
188 'selectors' => [
189 '{{WRAPPER}} .eel-cntdwn' => 'gap: {{SIZE}}{{UNIT}};',
190 ],
191 ]
192 );
193
194 $this->add_responsive_control(
195 'separator_positon_x',
196 [
197 'label' => esc_html__( 'Separator Position (Horizontal)', 'easy-elements' ),
198 'type' => \Elementor\Controls_Manager::SLIDER,
199 'size_units' => ['%','px'],
200 'range' => [
201 'px' => [
202 'min' => 0,
203 'max' => 500,
204 ],
205 '%' => [
206 'min' => 0,
207 'max' => 200,
208 ],
209 ],
210 'default' => [
211 'size' => '',
212 'unit' => '%',
213 ],
214 'selectors' => [
215 '{{WRAPPER}} .eel-cntdwn-bullets::before, {{WRAPPER}} .eel-cntdwn-bullets::after' => 'left: {{SIZE}}{{UNIT}};',
216 '{{WRAPPER}} .eel-cntdwn-dash::before' => 'left: {{SIZE}}{{UNIT}};',
217 ],
218 'condition' => [
219 'cntdwn_separator' => ['eel-cntdwn-bullets','eel-cntdwn-dash']
220 ]
221 ]
222 );
223
224 $this->add_control(
225 'separator_color',
226 [
227 'label' => esc_html__('Separator Color', 'easy-elements'),
228 'type' => \Elementor\Controls_Manager::COLOR,
229 'selectors' => [
230 '{{WRAPPER}} .eel-cntdwn-bullets::before, {{WRAPPER}} .eel-cntdwn-bullets::after' => 'background: {{VALUE}};',
231 '{{WRAPPER}} .eel-cntdwn-dash::before' => 'background: {{VALUE}};',
232 ],
233 'condition' => [
234 'cntdwn_separator' => ['eel-cntdwn-bullets','eel-cntdwn-dash']
235 ]
236 ]
237 );
238
239 $this->add_control(
240 'item_bgcolor',
241 [
242 'label' => esc_html__('Background', 'easy-elements'),
243 'type' => \Elementor\Controls_Manager::COLOR,
244 'selectors' => [
245 '{{WRAPPER}} .eel-cntdwn-item' => 'background: {{VALUE}};',
246 ],
247 ]
248 );
249
250 $this->add_group_control(
251 \Elementor\Group_Control_Border::get_type(),
252 [
253 'name' => 'item_border',
254 'selector' => '{{WRAPPER}} .eel-cntdwn-item',
255 ]
256 );
257
258 $this->add_responsive_control(
259 'item_border_radius',
260 [
261 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
262 'type' => \Elementor\Controls_Manager::DIMENSIONS,
263 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
264 'selectors' => [
265 '{{WRAPPER}} .eel-cntdwn-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
266 ],
267 ]
268 );
269
270 $this->add_responsive_control(
271 'item_padding',
272 [
273 'label' => esc_html__( 'Padding', 'easy-elements' ),
274 'type' => \Elementor\Controls_Manager::DIMENSIONS,
275 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
276 'selectors' => [
277 '{{WRAPPER}} .eel-cntdwn-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
278 ],
279 ]
280 );
281
282 $this->end_controls_section();
283
284 // Days Style
285 $this->start_controls_section(
286 'days_style',
287 [
288 'label' => esc_html__('Days', 'easy-elements'),
289 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
290 ]
291 );
292
293 $this->add_group_control(
294 \Elementor\Group_Control_Typography::get_type(),
295 [
296 'name' => 'days_typography',
297 'label' => esc_html__('Typography', 'easy-elements'),
298 'selector' => '{{WRAPPER}} .eel-cntdwn-days',
299 ]
300 );
301
302 $this->add_control(
303 'days_color',
304 [
305 'label' => esc_html__('Color', 'easy-elements'),
306 'type' => \Elementor\Controls_Manager::COLOR,
307 'selectors' => [
308 '{{WRAPPER}} .eel-cntdwn-days' => 'color: {{VALUE}};',
309 ],
310 ]
311 );
312
313 $this->add_control(
314 'days_label_color',
315 [
316 'label' => esc_html__('Label Color', 'easy-elements'),
317 'type' => \Elementor\Controls_Manager::COLOR,
318 'selectors' => [
319 '{{WRAPPER}} .eel-cntdwn-days-label' => 'color: {{VALUE}};',
320 ],
321 ]
322 );
323
324 $this->add_group_control(
325 \Elementor\Group_Control_Typography::get_type(),
326 [
327 'name' => 'days_label_typography',
328 'label' => esc_html__('Typography', 'easy-elements'),
329 'selector' => '{{WRAPPER}} .eel-cntdwn-days-label',
330 ]
331 );
332 $this->end_controls_section();
333
334 // Hours Style
335 $this->start_controls_section(
336 'hours_style',
337 [
338 'label' => esc_html__('Hours', 'easy-elements'),
339 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
340 ]
341 );
342
343 $this->add_group_control(
344 \Elementor\Group_Control_Typography::get_type(),
345 [
346 'name' => 'hours_typography',
347 'label' => esc_html__('Typography', 'easy-elements'),
348 'selector' => '{{WRAPPER}} .eel-cntdwn-hours',
349 ]
350 );
351
352 $this->add_control(
353 'hours_color',
354 [
355 'label' => esc_html__('Color', 'easy-elements'),
356 'type' => \Elementor\Controls_Manager::COLOR,
357 'selectors' => [
358 '{{WRAPPER}} .eel-cntdwn-hours' => 'color: {{VALUE}} !important;',
359 ],
360 ]
361 );
362
363 $this->add_control(
364 'hours_label_color',
365 [
366 'label' => esc_html__('Label Color', 'easy-elements'),
367 'type' => \Elementor\Controls_Manager::COLOR,
368 'selectors' => [
369 '{{WRAPPER}} .eel-cntdwn-hours-label' => 'color: {{VALUE}};',
370 ],
371 ]
372 );
373
374 $this->add_group_control(
375 \Elementor\Group_Control_Typography::get_type(),
376 [
377 'name' => 'hours_label_typography',
378 'label' => esc_html__('Typography', 'easy-elements'),
379 'selector' => '{{WRAPPER}} .eel-cntdwn-hours-label',
380 ]
381 );
382 $this->end_controls_section();
383
384 // Minutes Style
385 $this->start_controls_section(
386 'minutes_style',
387 [
388 'label' => esc_html__('Minute', 'easy-elements'),
389 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
390 ]
391 );
392
393 $this->add_group_control(
394 \Elementor\Group_Control_Typography::get_type(),
395 [
396 'name' => 'minutes_typography',
397 'label' => esc_html__('Typography', 'easy-elements'),
398 'selector' => '{{WRAPPER}} .eel-cntdwn-minutes',
399 ]
400 );
401
402 $this->add_control(
403 'minutes_color',
404 [
405 'label' => esc_html__('Color', 'easy-elements'),
406 'type' => \Elementor\Controls_Manager::COLOR,
407 'selectors' => [
408 '{{WRAPPER}} .eel-cntdwn-minutes' => 'color: {{VALUE}};',
409 ],
410 ]
411 );
412
413 $this->add_control(
414 'minutes_label_color',
415 [
416 'label' => esc_html__('Label Color', 'easy-elements'),
417 'type' => \Elementor\Controls_Manager::COLOR,
418 'selectors' => [
419 '{{WRAPPER}} .eel-cntdwn-minutes-label' => 'color: {{VALUE}};',
420 ],
421 ]
422 );
423
424 $this->add_group_control(
425 \Elementor\Group_Control_Typography::get_type(),
426 [
427 'name' => 'minutes_label_typography',
428 'label' => esc_html__('Typography', 'easy-elements'),
429 'selector' => '{{WRAPPER}} .eel-cntdwn-minutes-label',
430 ]
431 );
432 $this->end_controls_section();
433
434 // Seconds Style
435 $this->start_controls_section(
436 'seconds_style',
437 [
438 'label' => esc_html__('Seconds', 'easy-elements'),
439 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
440 ]
441 );
442
443 $this->add_group_control(
444 \Elementor\Group_Control_Typography::get_type(),
445 [
446 'name' => 'seconds_typography',
447 'label' => esc_html__('Typography', 'easy-elements'),
448 'selector' => '{{WRAPPER}} .eel-cntdwn-seconds',
449 ]
450 );
451
452 $this->add_control(
453 'seconds_color',
454 [
455 'label' => esc_html__('Color', 'easy-elements'),
456 'type' => \Elementor\Controls_Manager::COLOR,
457 'selectors' => [
458 '{{WRAPPER}} .eel-cntdwn-seconds' => 'color: {{VALUE}};',
459 ],
460 ]
461 );
462
463 $this->add_control(
464 'seconds_label_color',
465 [
466 'label' => esc_html__('Label Color', 'easy-elements'),
467 'type' => \Elementor\Controls_Manager::COLOR,
468 'selectors' => [
469 '{{WRAPPER}} .eel-cntdwn-seconds-label' => 'color: {{VALUE}};',
470 ],
471 ]
472 );
473
474 $this->add_group_control(
475 \Elementor\Group_Control_Typography::get_type(),
476 [
477 'name' => 'seconds_label_typography',
478 'label' => esc_html__('Typography', 'easy-elements'),
479 'selector' => '{{WRAPPER}} .eel-cntdwn-seconds-label',
480 ]
481 );
482 $this->end_controls_section();
483 }
484
485 protected function render() {
486
487 $settings = $this->get_settings_for_display();
488
489 $target_date = !empty($settings['target_date'])
490 ? gmdate( 'Y-m-d H:i:s', strtotime( $settings['target_date'] ) )
491 : gmdate( 'Y-m-d H:i:s', strtotime( '+1 day', current_time( 'timestamp', 1 ) ) );
492
493 // labels
494 $day_label = !empty($settings['day_label']) ? $settings['day_label'] : 'Days';
495 $hours_label = !empty($settings['hours_label']) ? $settings['hours_label'] : 'Hours';
496 $minute_label = !empty($settings['minute_label']) ? $settings['minute_label'] : 'Minutes';
497 $seconds_label = !empty($settings['seconds_label']) ? $settings['seconds_label'] : 'Seconds';
498
499 $separator = !empty($settings['cntdwn_separator']) ? $settings['cntdwn_separator'] : 'default';
500 ?>
501 <div id="eel-countdowns" data-target="<?php echo esc_attr($target_date); ?>">
502 <div class="eel-cntdwn">
503 <div class="eel-cntdwn-item <?php echo esc_attr($separator); ?>"><span class="eel-cntdwn-days"></span> <span class="eel-cntdwn-days-label"><?php echo wp_kses_post($day_label); ?></span></div>
504 <div class="eel-cntdwn-item <?php echo esc_attr($separator); ?>"><span class="eel-cntdwn-hours"></span> <span class="eel-cntdwn-hours-label"><?php echo wp_kses_post($hours_label); ?></span></div>
505 <div class="eel-cntdwn-item <?php echo esc_attr($separator); ?>"><span class="eel-cntdwn-minutes"></span> <span class="eel-cntdwn-minutes-label"><?php echo wp_kses_post($minute_label); ?></span></div>
506 <div class="eel-cntdwn-item <?php echo esc_attr($separator); ?>"><span class="eel-cntdwn-seconds"></span> <span class="eel-cntdwn-seconds-label"><?php echo wp_kses_post($seconds_label); ?></span></div>
507 </div>
508 </div>
509 <?php
510 }
511 }