Timeline Widget For Elementor (Elementor Timeline, Vertical & Horizontal Timeline) - Version 1.1.2

Version Description

Download this release

Release Info

Developer Narinder singh
Plugin Icon 128x128 Timeline Widget For Elementor (Elementor Timeline, Vertical & Horizontal Timeline)
Version 1.1.2
Comparing to
See all releases

Code changes from version 1.1 to 1.1.2

Files changed (6) hide show
  1. assets/js/twae-horizontal.js +75 -46
  2. assets/js/twae-horizontal.min.js +1 -0
  3. includes/class-twae.php +1 -29
  4. readme.txt +14 -3
  5. timeline-widget-addon-for-elementor.php +2 -2
  6. widgets/twae-widget.php +38 -0
assets/js/twae-horizontal.js CHANGED
@@ -1,52 +1,81 @@
1
- jQuery(document).ready(function ($) {
2
-
3
-
4
- $( window ).on( 'elementor/frontend/init', function() {
5
-
 
 
 
 
 
 
6
 
7
- $(".twae-horizontal.swiper-container").each(function(index){
8
-
9
- var slidestoshow = $(this).data("slidestoshow");
10
- var autoplay = $(this).data("autoplay");
11
-
12
- var swiper = new Swiper( $(this), {
13
- spaceBetween: 10,
14
- autoplay:autoplay,
15
- delay: 5000,
16
- slidesPerView: slidestoshow,
17
- direction: 'horizontal',
18
- pagination: {
19
- el: '.twae-pagination',
20
- type: 'progressbar',
21
- },
22
- navigation: {
23
- nextEl: '.twae-button-next',
24
- prevEl: '.twae-button-prev',
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  },
26
- // Responsive breakpoints
27
- breakpoints: {
28
- // when window width is >= 320px
29
- 320: {
30
- slidesPerView: 1,
31
- },
32
- // when window width is >= 480px
33
- 480: {
34
- slidesPerView: 2,
35
- },
36
- // when window width is >= 640px
37
- 640: {
38
- slidesPerView: slidestoshow,
39
-
40
- }
41
  },
42
-
43
- });
44
-
45
-
46
- });
47
-
 
 
 
48
 
49
-
50
- });
 
 
 
 
 
 
 
 
 
 
51
 
52
  });
1
+ class HorizontalSliderClass extends elementorModules.frontend.handlers.Base {
2
+ getDefaultSettings() {
3
+ return {
4
+ selectors: {
5
+ swiperContainer:'.twae-horizontal.swiper-container',
6
+ nextButton: '.twae-button-next',
7
+ prevButton: '.twae-button-prev',
8
+ paginationEl: '.twae-pagination',
9
+ },
10
+ };
11
+ }
12
 
13
+ getDefaultElements() {
14
+ const selectors = this.getSettings( 'selectors' );
15
+ return {
16
+ $swiperContainer: this.$element.find( selectors.swiperContainer ),
17
+ $nextButton: this.$element.find( selectors.nextButton ),
18
+ $prevButton: this.$element.find( selectors.prevButton ),
19
+ $paginationEl: this.$element.find( selectors.paginationEl ),
20
+ };
21
+ }
22
+
23
+ bindEvents() {
24
+
25
+ var selector = this.elements.$swiperContainer,
26
+ slidestoshow = selector.data("slidestoshow"),
27
+ autoplay = selector.data("autoplay"),
28
+
29
+ nextButton = this.elements.$nextButton,
30
+ prevButton = this.elements.$prevButton,
31
+ paginationEl = this.elements.$paginationEl;
32
+
33
+
34
+ var swiper = new Swiper( selector, {
35
+ spaceBetween: 10,
36
+ autoplay:autoplay,
37
+ delay: 5000,
38
+ slidesPerView: slidestoshow,
39
+ direction: 'horizontal',
40
+ pagination: {
41
+ el: paginationEl,
42
+ type: 'progressbar',
43
+ },
44
+ navigation: {
45
+ nextEl: nextButton,
46
+ prevEl: prevButton,
47
+ },
48
+ // Responsive breakpoints
49
+ breakpoints: {
50
+ // when window width is >= 320px
51
+ 320: {
52
+ slidesPerView: 1,
53
  },
54
+ // when window width is >= 480px
55
+ 480: {
56
+ slidesPerView: 2,
 
 
 
 
 
 
 
 
 
 
 
 
57
  },
58
+ // when window width is >= 640px
59
+ 640: {
60
+ slidesPerView: slidestoshow,
61
+
62
+ }
63
+ },
64
+
65
+ });
66
+ }
67
 
68
+ }
69
+
70
+
71
+ jQuery( window ).on( 'elementor/frontend/init', () => {
72
+
73
+ const addHandler = ( $element ) => {
74
+ elementorFrontend.elementsHandler.addHandler( HorizontalSliderClass, {
75
+ $element,
76
+ });
77
+ };
78
+
79
+ elementorFrontend.hooks.addAction( 'frontend/element_ready/timeline-widget-addon.default', addHandler );
80
 
81
  });
assets/js/twae-horizontal.min.js ADDED
@@ -0,0 +1 @@
 
1
+ class HorizontalSliderClass extends elementorModules.frontend.handlers.Base{getDefaultSettings(){return{selectors:{swiperContainer:".twae-horizontal.swiper-container",nextButton:".twae-button-next",prevButton:".twae-button-prev",paginationEl:".twae-pagination"}}}getDefaultElements(){const selectors=this.getSettings("selectors");return{$swiperContainer:this.$element.find(selectors.swiperContainer),$nextButton:this.$element.find(selectors.nextButton),$prevButton:this.$element.find(selectors.prevButton),$paginationEl:this.$element.find(selectors.paginationEl)}}bindEvents(){var selector=this.elements.$swiperContainer,slidestoshow=selector.data("slidestoshow"),autoplay=selector.data("autoplay"),nextButton=this.elements.$nextButton,prevButton=this.elements.$prevButton,paginationEl=this.elements.$paginationEl,swiper=new Swiper(selector,{spaceBetween:10,autoplay:autoplay,delay:5e3,slidesPerView:slidestoshow,direction:"horizontal",pagination:{el:paginationEl,type:"progressbar"},navigation:{nextEl:nextButton,prevEl:prevButton},breakpoints:{320:{slidesPerView:1},480:{slidesPerView:2},640:{slidesPerView:slidestoshow}}})}}jQuery(window).on("elementor/frontend/init",()=>{const addHandler=$element=>{elementorFrontend.elementsHandler.addHandler(HorizontalSliderClass,{$element:$element})};elementorFrontend.hooks.addAction("frontend/element_ready/timeline-widget-addon.default",addHandler)});
includes/class-twae.php CHANGED
@@ -31,9 +31,6 @@ class TWAE_WidgetClass {
31
  */
32
  public function __construct() {
33
  $this->twae_add_actions();
34
-
35
- add_action( 'elementor/preview/enqueue_styles', array($this, 'twae_enqueue_previw_style' ) ); // enqueue scripts for live editor
36
- add_action('wp_enqueue_scripts', array($this, 'twae_enqueue_style')); // enqueue scripts/styles for frontend
37
  }
38
 
39
  /**
@@ -44,34 +41,9 @@ class TWAE_WidgetClass {
44
  * @access private
45
  */
46
  private function twae_add_actions() {
47
- add_action( 'elementor/widgets/widgets_registered', array($this, 'twae_on_widgets_registered' ));
48
-
49
  }
50
-
51
- public function twae_enqueue_previw_style(){
52
- wp_register_script( 'twae-horizontal-editor-js', TWAE_URL . 'assets/js/twae-horizontal-editor.js', 'elementor-editor',null, true );
53
-
54
- wp_enqueue_script( 'twae-horizontal-editor-js' );
55
-
56
- }
57
 
58
- public function twae_enqueue_style() {
59
- wp_enqueue_style( 'twae-centered-css', TWAE_URL . 'assets/css/twae-centered-timeline.min.css', array());
60
- wp_register_style( 'twae-horizontal-css', TWAE_URL . 'assets/css/twae-horizontal-styles.min.css', array());
61
- wp_register_style( 'twae-fontello-css', TWAE_URL . 'assets/css/twae-fontello.css', array());
62
- wp_register_script( 'twae-swiper-js', TWAE_URL . 'assets/js/twae-swiper.min.js',array('jquery'),null, true );
63
- wp_register_script( 'twae-horizontal-js', TWAE_URL . 'assets/js/twae-horizontal.js', array('jquery'),null, true );
64
-
65
- wp_enqueue_style( 'twae-horizontal-css' );
66
- wp_enqueue_style( 'twae-fontello-css' );
67
- wp_enqueue_script( 'twae-swiper-js' );
68
-
69
- if ( ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
70
- wp_enqueue_script( 'twae-horizontal-js' );
71
- }
72
-
73
- }
74
-
75
  /**
76
  * On Widgets Registered
77
  *
31
  */
32
  public function __construct() {
33
  $this->twae_add_actions();
 
 
 
34
  }
35
 
36
  /**
41
  * @access private
42
  */
43
  private function twae_add_actions() {
44
+ add_action( 'elementor/widgets/widgets_registered', array($this, 'twae_on_widgets_registered' ));
 
45
  }
 
 
 
 
 
 
 
46
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  /**
48
  * On Widgets Registered
49
  *
readme.txt CHANGED
@@ -1,7 +1,7 @@
1
  === Elementor Timeline Widget Addon ===
2
  Contributors:narinder-singh,satindersingh,coolplugins
3
  Donate link: https://paypal.me/CoolPlugins/10USD/
4
- Tags:timeline,elementor,elementor timeline,elementor addon,elementor widgets,addons,roadmap,steps,event,history,storytelling
5
  Requires at least:4.5
6
  Tested up to:5.5
7
  Requires PHP:5.6
@@ -26,7 +26,7 @@ These layouts also support advance settings and you can easily manage colors, ic
26
 
27
  **[⭐ View Demo](https://cooltimeline.com/timeline-widget-demo)**
28
 
29
- https://www.youtube.com/watch?v=dcfWYsfSjdM&feature=youtu.be
30
 
31
  ### 🌟 Timeline Widget Features
32
 
@@ -69,9 +69,20 @@ You can show your stories, events, appointments, concerts, future & history happ
69
 
70
  == Screenshots ==
71
  1. Elementor Timeline Widget Addon Preview
72
- 1. Elementor Timeline Widget Addon Horizontal Layout Preview
73
 
74
  == Changelog ==
 
 
 
 
 
 
 
 
 
 
 
 
75
  <strong>Version 1.1 | 07 JUL 2020</strong>
76
  <pre>
77
  New: Horizontal timeline layout added.
1
  === Elementor Timeline Widget Addon ===
2
  Contributors:narinder-singh,satindersingh,coolplugins
3
  Donate link: https://paypal.me/CoolPlugins/10USD/
4
+ Tags:timeline,elementor,elementor timeline,elementor addon,elementor widgets,addons,roadmap,steps,event,history
5
  Requires at least:4.5
6
  Tested up to:5.5
7
  Requires PHP:5.6
26
 
27
  **[⭐ View Demo](https://cooltimeline.com/timeline-widget-demo)**
28
 
29
+ https://youtu.be/05-jlAD-5bc
30
 
31
  ### 🌟 Timeline Widget Features
32
 
69
 
70
  == Screenshots ==
71
  1. Elementor Timeline Widget Addon Preview
 
72
 
73
  == Changelog ==
74
+ <strong>Version 1.1.2 | 21 AUG 2020</strong>
75
+ <pre>
76
+ Fixed: Conflict with Image Carousel widget
77
+ Improved: Layout based load assets
78
+ </pre>
79
+ <strong>Version 1.1.1 | 17 AUG 2020</strong>
80
+ <pre>
81
+ Fixed: Minor Bug fixes
82
+ Fixed:Compatibility issues with WordPress 5.5
83
+ Improved:assets loading conditions
84
+ Improved: JS improvements
85
+ </pre>
86
  <strong>Version 1.1 | 07 JUL 2020</strong>
87
  <pre>
88
  New: Horizontal timeline layout added.
timeline-widget-addon-for-elementor.php CHANGED
@@ -3,7 +3,7 @@
3
  * Plugin Name: Timeline Widget Addon For Elementor
4
  * Description: Timeline Widget Addon For Elementor create a beautiful timeline in page and post.
5
  * Plugin URI: https://coolplugins.net
6
- * Version: 1.1
7
  * Author: Cool Plugins
8
  * Author URI: https://coolplugins.net/
9
  * Text Domain: twae
@@ -18,7 +18,7 @@ if (defined('TWAE_VERSION')) {
18
  return;
19
  }
20
 
21
- define('TWAE_VERSION', '1.1');
22
  define('TWAE_FILE', __FILE__);
23
  define('TWAE_PATH', plugin_dir_path(TWAE_FILE));
24
  define('TWAE_URL', plugin_dir_url(TWAE_FILE));
3
  * Plugin Name: Timeline Widget Addon For Elementor
4
  * Description: Timeline Widget Addon For Elementor create a beautiful timeline in page and post.
5
  * Plugin URI: https://coolplugins.net
6
+ * Version: 1.1.2
7
  * Author: Cool Plugins
8
  * Author URI: https://coolplugins.net/
9
  * Text Domain: twae
18
  return;
19
  }
20
 
21
+ define('TWAE_VERSION', '1.1.2');
22
  define('TWAE_FILE', __FILE__);
23
  define('TWAE_PATH', plugin_dir_path(TWAE_FILE));
24
  define('TWAE_URL', plugin_dir_url(TWAE_FILE));
widgets/twae-widget.php CHANGED
@@ -11,6 +11,44 @@ use Elementor\Scheme_Typography;
11
 
12
  class TWAE_Widget extends \Elementor\Widget_Base {
13
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
  public function get_name() {
16
  return 'timeline-widget-addon';
11
 
12
  class TWAE_Widget extends \Elementor\Widget_Base {
13
 
14
+ public function __construct($data = [], $args = null) {
15
+ parent::__construct($data, $args);
16
+ wp_register_style( 'twae-centered-css', TWAE_URL . 'assets/css/twae-centered-timeline.min.css', array());
17
+ wp_register_style( 'twae-horizontal-css', TWAE_URL . 'assets/css/twae-horizontal-styles.min.css', array());
18
+ wp_register_style( 'twae-fontello-css', TWAE_URL . 'assets/css/twae-fontello.css', array());
19
+ wp_register_script( 'twae-horizontal-js', TWAE_URL . 'assets/js/twae-horizontal.min.js',[ 'elementor-frontend' ],null, true );
20
+
21
+ }
22
+
23
+ public function get_script_depends() {
24
+ if (\Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode()) {
25
+ return [ 'twae-horizontal-js' ];
26
+ }
27
+ $settings = $this->get_settings_for_display();
28
+ $layout = $settings['twae_layout'];
29
+ if($layout == 'horizontal'){
30
+ return [ 'twae-horizontal-js' ];
31
+ }else{
32
+ return [];
33
+ }
34
+ }
35
+
36
+ public function get_style_depends() {
37
+ $styles = ['twae-fontello-css'];
38
+ if (\Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode()) {
39
+ return [ 'twae-centered-css','twae-horizontal-css','twae-fontello-css' ];
40
+ }
41
+ $settings = $this->get_settings_for_display();
42
+ $layout = $settings['twae_layout'];
43
+
44
+ if($layout == 'horizontal'){
45
+ array_push($styles, 'twae-horizontal-css');
46
+ }else{
47
+ array_push($styles, 'twae-centered-css');
48
+ }
49
+
50
+ return $styles ;
51
+ }
52
 
53
  public function get_name() {
54
  return 'timeline-widget-addon';