PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.2.1
Easy Elements for Elementor – Addons & Website Templates v1.2.1
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.2.1, at widgets/countdown/countdown.php

519 lines 14.6 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.min.css';
12
13 if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
14 wp_register_style( $handle, plugins_url( 'css/countdown.min.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 easyelIcon-countdown';
38 }
39
40 public function get_categories() {
41 return [ 'easyelements_category' ];
42 }
43
44 public function get_keywords() {
45 return [ 'Countdown', 'timer', 'schedule', 'time', 'day', 'hour', 'minute', 'second' ];
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_group_control(
259 \Elementor\Group_Control_Box_Shadow::get_type(),
260 [
261 'name' => 'item_box_shadow',
262 'selector' => '{{WRAPPER}} .eel-cntdwn-item',
263 ]
264 );
265
266 $this->add_responsive_control(
267 'item_border_radius',
268 [
269 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
270 'type' => \Elementor\Controls_Manager::DIMENSIONS,
271 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
272 'selectors' => [
273 '{{WRAPPER}} .eel-cntdwn-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
274 ],
275 ]
276 );
277
278 $this->add_responsive_control(
279 'item_padding',
280 [
281 'label' => esc_html__( 'Padding', 'easy-elements' ),
282 'type' => \Elementor\Controls_Manager::DIMENSIONS,
283 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
284 'selectors' => [
285 '{{WRAPPER}} .eel-cntdwn-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
286 ],
287 ]
288 );
289
290 $this->end_controls_section();
291
292 // Days Style
293 $this->start_controls_section(
294 'days_style',
295 [
296 'label' => esc_html__('Days', 'easy-elements'),
297 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
298 ]
299 );
300
301 $this->add_group_control(
302 \Elementor\Group_Control_Typography::get_type(),
303 [
304 'name' => 'days_typography',
305 'label' => esc_html__('Typography', 'easy-elements'),
306 'selector' => '{{WRAPPER}} .eel-cntdwn-days',
307 ]
308 );
309
310 $this->add_control(
311 'days_color',
312 [
313 'label' => esc_html__('Color', 'easy-elements'),
314 'type' => \Elementor\Controls_Manager::COLOR,
315 'selectors' => [
316 '{{WRAPPER}} .eel-cntdwn-days' => 'color: {{VALUE}};',
317 ],
318 ]
319 );
320
321 $this->add_control(
322 'days_label_color',
323 [
324 'label' => esc_html__('Label Color', 'easy-elements'),
325 'type' => \Elementor\Controls_Manager::COLOR,
326 'selectors' => [
327 '{{WRAPPER}} .eel-cntdwn-days-label' => 'color: {{VALUE}};',
328 ],
329 ]
330 );
331
332 $this->add_group_control(
333 \Elementor\Group_Control_Typography::get_type(),
334 [
335 'name' => 'days_label_typography',
336 'label' => esc_html__('Typography', 'easy-elements'),
337 'selector' => '{{WRAPPER}} .eel-cntdwn-days-label',
338 ]
339 );
340 $this->end_controls_section();
341
342 // Hours Style
343 $this->start_controls_section(
344 'hours_style',
345 [
346 'label' => esc_html__('Hours', 'easy-elements'),
347 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
348 ]
349 );
350
351 $this->add_group_control(
352 \Elementor\Group_Control_Typography::get_type(),
353 [
354 'name' => 'hours_typography',
355 'label' => esc_html__('Typography', 'easy-elements'),
356 'selector' => '{{WRAPPER}} .eel-cntdwn-hours',
357 ]
358 );
359
360 $this->add_control(
361 'hours_color',
362 [
363 'label' => esc_html__('Color', 'easy-elements'),
364 'type' => \Elementor\Controls_Manager::COLOR,
365 'selectors' => [
366 '{{WRAPPER}} .eel-cntdwn-hours' => 'color: {{VALUE}} !important;',
367 ],
368 ]
369 );
370
371 $this->add_control(
372 'hours_label_color',
373 [
374 'label' => esc_html__('Label Color', 'easy-elements'),
375 'type' => \Elementor\Controls_Manager::COLOR,
376 'selectors' => [
377 '{{WRAPPER}} .eel-cntdwn-hours-label' => 'color: {{VALUE}};',
378 ],
379 ]
380 );
381
382 $this->add_group_control(
383 \Elementor\Group_Control_Typography::get_type(),
384 [
385 'name' => 'hours_label_typography',
386 'label' => esc_html__('Typography', 'easy-elements'),
387 'selector' => '{{WRAPPER}} .eel-cntdwn-hours-label',
388 ]
389 );
390 $this->end_controls_section();
391
392 // Minutes Style
393 $this->start_controls_section(
394 'minutes_style',
395 [
396 'label' => esc_html__('Minute', 'easy-elements'),
397 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
398 ]
399 );
400
401 $this->add_group_control(
402 \Elementor\Group_Control_Typography::get_type(),
403 [
404 'name' => 'minutes_typography',
405 'label' => esc_html__('Typography', 'easy-elements'),
406 'selector' => '{{WRAPPER}} .eel-cntdwn-minutes',
407 ]
408 );
409
410 $this->add_control(
411 'minutes_color',
412 [
413 'label' => esc_html__('Color', 'easy-elements'),
414 'type' => \Elementor\Controls_Manager::COLOR,
415 'selectors' => [
416 '{{WRAPPER}} .eel-cntdwn-minutes' => 'color: {{VALUE}};',
417 ],
418 ]
419 );
420
421 $this->add_control(
422 'minutes_label_color',
423 [
424 'label' => esc_html__('Label Color', 'easy-elements'),
425 'type' => \Elementor\Controls_Manager::COLOR,
426 'selectors' => [
427 '{{WRAPPER}} .eel-cntdwn-minutes-label' => 'color: {{VALUE}};',
428 ],
429 ]
430 );
431
432 $this->add_group_control(
433 \Elementor\Group_Control_Typography::get_type(),
434 [
435 'name' => 'minutes_label_typography',
436 'label' => esc_html__('Typography', 'easy-elements'),
437 'selector' => '{{WRAPPER}} .eel-cntdwn-minutes-label',
438 ]
439 );
440 $this->end_controls_section();
441
442 // Seconds Style
443 $this->start_controls_section(
444 'seconds_style',
445 [
446 'label' => esc_html__('Seconds', 'easy-elements'),
447 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
448 ]
449 );
450
451 $this->add_group_control(
452 \Elementor\Group_Control_Typography::get_type(),
453 [
454 'name' => 'seconds_typography',
455 'label' => esc_html__('Typography', 'easy-elements'),
456 'selector' => '{{WRAPPER}} .eel-cntdwn-seconds',
457 ]
458 );
459
460 $this->add_control(
461 'seconds_color',
462 [
463 'label' => esc_html__('Color', 'easy-elements'),
464 'type' => \Elementor\Controls_Manager::COLOR,
465 'selectors' => [
466 '{{WRAPPER}} .eel-cntdwn-seconds' => 'color: {{VALUE}};',
467 ],
468 ]
469 );
470
471 $this->add_control(
472 'seconds_label_color',
473 [
474 'label' => esc_html__('Label Color', 'easy-elements'),
475 'type' => \Elementor\Controls_Manager::COLOR,
476 'selectors' => [
477 '{{WRAPPER}} .eel-cntdwn-seconds-label' => 'color: {{VALUE}};',
478 ],
479 ]
480 );
481
482 $this->add_group_control(
483 \Elementor\Group_Control_Typography::get_type(),
484 [
485 'name' => 'seconds_label_typography',
486 'label' => esc_html__('Typography', 'easy-elements'),
487 'selector' => '{{WRAPPER}} .eel-cntdwn-seconds-label',
488 ]
489 );
490 $this->end_controls_section();
491 }
492
493 protected function render() {
494
495 $settings = $this->get_settings_for_display();
496
497 $target_date = !empty($settings['target_date'])
498 ? gmdate( 'Y-m-d H:i:s', strtotime( $settings['target_date'] ) )
499 : gmdate( 'Y-m-d H:i:s', strtotime( '+1 day', current_time( 'timestamp', 1 ) ) );
500
501 // labels
502 $day_label = !empty($settings['day_label']) ? $settings['day_label'] : 'Days';
503 $hours_label = !empty($settings['hours_label']) ? $settings['hours_label'] : 'Hours';
504 $minute_label = !empty($settings['minute_label']) ? $settings['minute_label'] : 'Minutes';
505 $seconds_label = !empty($settings['seconds_label']) ? $settings['seconds_label'] : 'Seconds';
506
507 $separator = !empty($settings['cntdwn_separator']) ? $settings['cntdwn_separator'] : 'default';
508 ?>
509 <div id="eel-countdowns" data-target="<?php echo esc_attr($target_date); ?>">
510 <div class="eel-cntdwn">
511 <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>
512 <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>
513 <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>
514 <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>
515 </div>
516 </div>
517 <?php
518 }
519 }