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

Version Description

Download this release

Release Info

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

Version 1.0

Files changed (13) hide show
  1. assets/css/twae-admin-feedback-notice.css +28 -0
  2. assets/css/twae-centered-timeline.css +346 -0
  3. assets/images/amazon-1.png +0 -0
  4. assets/images/amazon-2.png +0 -0
  5. assets/images/amazon-3.png +0 -0
  6. assets/images/timeline-widget-logo.png +0 -0
  7. assets/js/twae-admin-feedback-notice.js +13 -0
  8. includes/class-twae.php +82 -0
  9. includes/twae-feedback-notice.php +115 -0
  10. readme.txt +61 -0
  11. timeline-widget-addon-for-elementor.php +133 -0
  12. widgets/twae-centered-timeline.php +65 -0
  13. widgets/twae-widget.php +575 -0
assets/css/twae-admin-feedback-notice.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .cool-feedback-notice-wrapper.notice.notice-info.is-dismissible {
2
+ padding: 5px;
3
+ display: inline-block;
4
+ width: 100%;
5
+ }
6
+ .cool-feedback-notice-wrapper .logo_container {
7
+ width:80px;
8
+ display:inline-block;
9
+ margin-right: 10px;
10
+ vertical-align: top;
11
+ }
12
+ .cool-feedback-notice-wrapper .logo_container img {
13
+ width:100%;
14
+ height:auto;
15
+ }
16
+ .cool-feedback-notice-wrapper .message_container {
17
+ width: calc(100% - 120px);
18
+ display: inline-block;
19
+ margin: 0;
20
+ vertical-align: top;
21
+ }
22
+ .cool-feedback-notice-wrapper ul li {
23
+ float: left;
24
+ margin: 0px 5px;
25
+ }
26
+ .clrfix{
27
+ clear:both;
28
+ }
assets/css/twae-centered-timeline.css ADDED
@@ -0,0 +1,346 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .twae-wrapper:before,
2
+ .twae-wrapper:after {
3
+ content: "";
4
+ width: 20px;
5
+ height: 20px;
6
+ background: #222;
7
+ display: inline-block;
8
+ border-radius: 50%;
9
+ position: absolute;
10
+ left: calc(50% - 12px);
11
+ z-index: 9;
12
+ }
13
+ .twae-wrapper:before {
14
+ top: -10px;
15
+ }
16
+ .twae-wrapper:after {
17
+ bottom: 20px;
18
+ }
19
+ .twae-timeline-centered {
20
+ position: relative;
21
+ margin-bottom: 30px;
22
+ padding-top: 20px;
23
+ }
24
+ .twae-wrapper span.twae-year-container:first-child {
25
+ margin-top: 0px!important;
26
+ }
27
+ .twae-timeline-centered.twae-timeline-sm .twae-timeline-entry {
28
+ margin-bottom: 20px !important;
29
+ }
30
+ .twae-timeline-centered.twae-timeline-sm .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container {
31
+ padding: 0.85em;
32
+ }
33
+ .twae-timeline-centered:before,
34
+ .twae-timeline-centered:after {
35
+ content: " ";
36
+ display: table;
37
+ }
38
+ .twae-timeline-centered:after {
39
+ clear: both;
40
+ }
41
+ .twae-timeline-centered:before {
42
+ content: '';
43
+ position: absolute;
44
+ display: block;
45
+ width: 4px;
46
+ left: 50%;
47
+ top: 0;
48
+ bottom: 0;
49
+ margin-left: -4px;
50
+ }
51
+ .twae-timeline-centered .twae-timeline-entry {
52
+ position: relative;
53
+ width: 50%;
54
+ float: right;
55
+ margin-bottom: 70px;
56
+ clear: both;
57
+ }
58
+ .twae-timeline-centered .twae-timeline-entry:before,
59
+ .twae-timeline-centered .twae-timeline-entry:after {
60
+ content: " ";
61
+ display: table;
62
+ }
63
+ .twae-timeline-centered .twae-timeline-entry:after {
64
+ clear: both;
65
+ }
66
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned {
67
+ float: left;
68
+ }
69
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner {
70
+ margin-left: 0;
71
+ margin-right: -22px;
72
+ }
73
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-label-extra-label {
74
+ left: auto;
75
+ right: -100%;
76
+ text-align: left;
77
+ }
78
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-icon {
79
+ float: right;
80
+ }
81
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-data-container {
82
+ margin-left: 0;
83
+ margin-right: 70px;
84
+ }
85
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-data-container:after {
86
+ left: auto;
87
+ right: 0;
88
+ margin-left: 0;
89
+ margin-right: -9px;
90
+ -moz-transform: rotate(180deg);
91
+ -o-transform: rotate(180deg);
92
+ -webkit-transform: rotate(180deg);
93
+ -ms-transform: rotate(180deg);
94
+ transform: rotate(180deg);
95
+ }
96
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner {
97
+ position: relative;
98
+ margin-left: -27px;
99
+ }
100
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner:before,
101
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner:after {
102
+ content: " ";
103
+ display: table;
104
+ }
105
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner:after {
106
+ clear: both;
107
+ }
108
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-label-extra-label {
109
+ position: absolute;
110
+ left: -100%;
111
+ width: 100%;
112
+ text-align: right;
113
+ padding: 10px;
114
+ -webkit-box-sizing: border-box;
115
+ -moz-box-sizing: border-box;
116
+ box-sizing: border-box;
117
+ }
118
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-label-extra-label > span {
119
+ display: block;
120
+ }
121
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-label-extra-label > span:first-child {
122
+ font-size: 1em;
123
+ font-weight: bold;
124
+ }
125
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-label-extra-label > span:last-child {
126
+ font-size: 0.75em;
127
+ margin-top: 5px;
128
+ }
129
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-icon {
130
+ display: block;
131
+ width: 48px;
132
+ height: 48px;
133
+ -webkit-background-clip: padding-box;
134
+ -moz-background-clip: padding-box;
135
+ background-clip: padding-box;
136
+ border-radius: 50%;
137
+ text-align: center;
138
+ border: 4px solid;
139
+ line-height: 0;
140
+ font-size: 0;
141
+ float: left;
142
+ padding: 0;
143
+ }
144
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-icon i {
145
+ line-height: 38px;
146
+ font-size: 22px;
147
+ }
148
+ .twae-wrapper .twae-timeline-centered .twae-data-container{
149
+ display: flow-root;
150
+ }
151
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container {
152
+ position: relative;
153
+ padding: 1.7em;
154
+ margin-left: 70px;
155
+ -webkit-background-clip: padding-box;
156
+ -moz-background-clip: padding;
157
+ background-clip: padding-box;
158
+ -webkit-border-radius: 3px;
159
+ -moz-border-radius: 3px;
160
+ border-radius: 3px;
161
+ }
162
+
163
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container.twae-bg-orange:after {
164
+ border-color: transparent #e9662c transparent transparent;
165
+ }
166
+
167
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container:after {
168
+ content: '';
169
+ display: block;
170
+ position: absolute;
171
+ width: 0;
172
+ height: 0;
173
+ border-style: solid;
174
+ border-width: 9px 9px 9px 0;
175
+ left: 0;
176
+ top: 14px;
177
+ margin-left: -9px;
178
+ }
179
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container .twae-title,
180
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container p {
181
+ margin: 0;
182
+ }
183
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container p + p {
184
+ margin-top: 15px;
185
+ }
186
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container .twae-title {
187
+ margin-bottom: 10px;
188
+ font-weight: bold;
189
+ }
190
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container .twae-title span {
191
+ -webkit-opacity: .6;
192
+ -moz-opacity: .6;
193
+ opacity: .6;
194
+ -ms-filter: alpha(opacity=60);
195
+ filter: alpha(opacity=60);
196
+ }
197
+ .twae-timeline-centered .twae-timeline-entry .twae-data-container .twae-timeline-img img {
198
+ float: left;
199
+ padding: 0px 5px 0px 0px;
200
+ }
201
+
202
+ .twae-timeline-centered .twae-year-container .twae-year-label {
203
+ border-radius: 6px;
204
+ display: inline-block;
205
+ font-size: 20px;
206
+ font-weight: 600;
207
+ line-height: 1;
208
+ padding: 7px 14px;
209
+ text-align: center;
210
+ vertical-align: baseline;
211
+ white-space: nowrap
212
+ }
213
+
214
+ .twae-timeline-centered .twae-year-container {
215
+ position: relative;
216
+ float: left;
217
+ clear: left;
218
+ width: 50%;
219
+ margin-top:20px;
220
+ margin-bottom: 20px;
221
+ top: 1px;
222
+ width: 100%;
223
+ margin-left: auto;
224
+ margin-right: auto;
225
+ padding: 0;
226
+ text-align: center
227
+ }
228
+
229
+ .twae-timeline-centered .twae-year-container:before,
230
+ .twae-timeline-centered .twae-year-container:after {
231
+ content: "";
232
+ display: table
233
+ }
234
+
235
+ .twae-timeline-centered .twae-year-container:after {
236
+ clear: both
237
+ }
238
+ .twae-wrapper .twae-timeline-centered .twae-year{
239
+ border: 2px solid;
240
+ }
241
+
242
+
243
+
244
+ @media only screen and (max-width: 768px) {
245
+
246
+ .twae-wrapper:before,
247
+ .twae-wrapper:after {
248
+ left: 10px;
249
+ }
250
+ .twae-timeline-centered:before {
251
+ left: 22px;
252
+ }
253
+ .twae-timeline-centered .twae-year-container {
254
+ padding-left: 54px;
255
+ text-align: left;
256
+ margin-bottom: 5px;
257
+ margin-top: 20px;
258
+ }
259
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner {
260
+ margin-left: 0;
261
+ }
262
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner {
263
+ margin-right: 0;
264
+ }
265
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-label-extra-label {
266
+ position: relative;
267
+ left: 0;
268
+ text-align: left;
269
+ display: inline-block;
270
+ width: 100%;
271
+ padding-left: 54px;
272
+ }
273
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-label-extra-label {
274
+ right: 0;
275
+ }
276
+ .twae-timeline-centered .twae-timeline-entry {
277
+ width: 100%;
278
+ }
279
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-icon {
280
+ width: 40px;
281
+ height: 40px;
282
+ line-height: 28px;
283
+ font-size: 18px !IMPORTANT;
284
+ }
285
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-icon i {
286
+ font-size:18px !important;
287
+ line-height: 31px;
288
+ }
289
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-icon {
290
+ float: left;
291
+ }
292
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container,
293
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-data-container {
294
+ margin-left: 54px;
295
+ margin-right: 0;
296
+ }
297
+ .twae-timeline-centered .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container:after {
298
+ top:10px;
299
+ }
300
+ .twae-timeline-centered .twae-timeline-entry.twae-left-aligned .twae-timeline-entry-inner .twae-data-container:after {
301
+ left: 0;
302
+ right: auto;
303
+ margin-left: -9px;
304
+ margin-right: 0;
305
+ -moz-transform: rotate(360deg);
306
+ -o-transform: rotate(360deg);
307
+ -webkit-transform: rotate(360deg);
308
+ -ms-transform: rotate(360deg);
309
+ transform: rotate(360deg);
310
+ }
311
+
312
+ }
313
+
314
+
315
+ @media only screen and (min-width: 769px) {
316
+
317
+ .twae-timeline-centered.twae-one-sided-timeline:before {
318
+ left:24%;
319
+ }
320
+ .twae-timeline-centered.twae-one-sided-timeline .twae-year-container {
321
+ text-align: right;
322
+ padding-right: 80%;
323
+ }
324
+ .twae-timeline-centered.twae-one-sided-timeline .twae-timeline-entry {
325
+ width: 100%;
326
+ float: left;
327
+ }
328
+ .twae-timeline-centered.twae-one-sided-timeline .twae-timeline-entry .twae-timeline-entry-inner {
329
+ margin-left:0;
330
+ }
331
+ .twae-timeline-centered.twae-one-sided-timeline .twae-timeline-entry .twae-timeline-entry-inner .twae-data-container {
332
+ margin-left: 31%;
333
+ }
334
+ .twae-timeline-centered.twae-one-sided-timeline .twae-timeline-entry .twae-timeline-entry-inner .twae-icon {
335
+ margin-left: calc(24% - 25px);
336
+ }
337
+ .twae-timeline-centered.twae-one-sided-timeline .twae-timeline-entry .twae-timeline-entry-inner .twae-label-extra-label {
338
+ left: -2%;
339
+ width: 22%;
340
+ }
341
+ .twae-wrapper.twae-one-sided-wrapper:before,
342
+ .twae-wrapper.twae-one-sided-wrapper:after {
343
+ left: calc(23% - 4px);
344
+ }
345
+
346
+ }
assets/images/amazon-1.png ADDED
Binary file
assets/images/amazon-2.png ADDED
Binary file
assets/images/amazon-3.png ADDED
Binary file
assets/images/timeline-widget-logo.png ADDED
Binary file
assets/js/twae-admin-feedback-notice.js ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ jQuery(document).ready(function ($) {
2
+ $('.twae_dismiss_notice').on('click', function (event) {
3
+ var $this = $(this);
4
+ var wrapper=$this.parents('.cool-feedback-notice-wrapper');
5
+ var ajaxURL=wrapper.data('ajax-url');
6
+ var ajaxCallback=wrapper.data('ajax-callback');
7
+
8
+ $.post(ajaxURL, { 'action':ajaxCallback }, function( data ) {
9
+ wrapper.slideUp('fast');
10
+ }, "json");
11
+
12
+ });
13
+ });
includes/class-twae.php ADDED
@@ -0,0 +1,82 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
+
4
+ // Add a custom category for panel widgets
5
+ add_action( 'elementor/init', function() {
6
+ \Elementor\Plugin::$instance->elements_manager->add_category(
7
+ 'twae', // the name of the category
8
+ [
9
+ 'title' => esc_html__( 'Timeline Widget Addon For Elementor', 'twae' ),
10
+ 'icon' => 'fa fa-header', //default icon
11
+ ],
12
+ 1 // position
13
+ );
14
+ } );
15
+
16
+ /**
17
+ * Main Plugin Class
18
+ *
19
+ * Register new elementor widget.
20
+ *
21
+ * @since 1.0.0
22
+ */
23
+ class TWAE_WidgetClass {
24
+
25
+ /**
26
+ * Constructor
27
+ *
28
+ * @since 1.0.0
29
+ *
30
+ * @access public
31
+ */
32
+ public function __construct() {
33
+ $this->twae_add_actions();
34
+ add_action( 'elementor/preview/enqueue_styles', array($this, 'twae_enqueue_style' ) );
35
+ add_action('wp_enqueue_scripts', array($this, 'twae_enqueue_style'));
36
+
37
+ }
38
+
39
+ /**
40
+ * Add Actions
41
+ *
42
+ * @since 1.0.0
43
+ *
44
+ * @access private
45
+ */
46
+ private function twae_add_actions() {
47
+ add_action( 'elementor/widgets/widgets_registered', array($this, 'twae_on_widgets_registered' ));
48
+ add_action( 'elementor/frontend/after_register_scripts', function() {
49
+ } );
50
+ }
51
+
52
+
53
+
54
+ public function twae_enqueue_style() {
55
+ wp_enqueue_style( 'centered-css', TWAE_URL . 'assets/css/twae-centered-timeline.css', array());
56
+ }
57
+
58
+ /**
59
+ * On Widgets Registered
60
+ *
61
+ * @since 1.0.0
62
+ *
63
+ * @access public
64
+ */
65
+ public function twae_on_widgets_registered() {
66
+ $this->twae_widget_includes();
67
+ }
68
+
69
+ /**
70
+ * Includes
71
+ *
72
+ * @since 1.0.0
73
+ *
74
+ * @access private
75
+ */
76
+ private function twae_widget_includes() {
77
+ require_once TWAE_PATH . 'widgets/twae-widget.php';
78
+ }
79
+
80
+ }
81
+
82
+ new TWAE_WidgetClass();
includes/twae-feedback-notice.php ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ if (!class_exists('TWAEFeedbackNotice')) {
4
+ class TWAEFeedbackNotice {
5
+ /**
6
+ * The Constructor
7
+ */
8
+ public function __construct() {
9
+ // register actions
10
+
11
+ if(is_admin()){
12
+ add_action( 'admin_notices',array($this,'admin_notice_for_reviews'));
13
+ add_action( 'admin_print_scripts', array($this, 'load_script' ) );
14
+ add_action( 'wp_ajax_twae_dismiss_notice',array($this,'twae_dismiss_review_notice' ) );
15
+ }
16
+ }
17
+
18
+ /**
19
+ * Load script to dismiss notices.
20
+ *
21
+ * @return void
22
+ */
23
+ public function load_script() {
24
+ wp_register_script( 'twae-feedback-notice-script', TWAE_URL. 'assets/js/twae-admin-feedback-notice.js', array( 'jquery' ),null, true );
25
+ wp_enqueue_script( 'twae-feedback-notice-script' );
26
+ wp_register_style( 'twae-feedback-notice-styles',TWAE_URL.'assets/css/twae-admin-feedback-notice.css' );
27
+ wp_enqueue_style( 'twae-feedback-notice-styles' );
28
+ }
29
+ // ajax callback for review notice
30
+ public function twae_dismiss_review_notice(){
31
+ $rs=update_option( 'twae-alreadyRated','yes' );
32
+ echo json_encode( array("success"=>"true") );
33
+ exit;
34
+ }
35
+ // admin notice
36
+ public function admin_notice_for_reviews(){
37
+
38
+ if( !current_user_can( 'update_plugins' ) ){
39
+ return;
40
+ }
41
+ // get installation dates and rated settings
42
+ $installation_date = get_option( 'twae-installDate' );
43
+ $alreadyRated =get_option( 'twae-alreadyRated' )!=false?get_option( 'twae-alreadyRated'):"no";
44
+
45
+ // check user already rated
46
+ if( $alreadyRated=="yes") {
47
+ return;
48
+ }
49
+
50
+ // grab plugin installation date and compare it with current date
51
+ $display_date = date( 'Y-m-d h:i:s' );
52
+ $install_date= new DateTime( $installation_date );
53
+ $current_date = new DateTime( $display_date );
54
+ $difference = $install_date->diff($current_date);
55
+ $diff_days= $difference->days;
56
+
57
+ // check if installation days is greator then week
58
+ if (isset($diff_days) && $diff_days>=3) {
59
+ echo $this->create_notice_content();
60
+ }
61
+ }
62
+
63
+ // generated review notice HTML
64
+ function create_notice_content(){
65
+ $ajax_url=admin_url( 'admin-ajax.php' );
66
+ $ajax_callback='twae_dismiss_notice';
67
+ $wrap_cls="notice notice-info is-dismissible";
68
+ $img_path=TWAE_URL.'assets/images/timeline-widget-logo.png';
69
+ $p_name="Timeline Widget Addon For Elementor";
70
+ $like_it_text='Rate Now! ★★★★★';
71
+ $already_rated_text=esc_html__( 'I already rated it', 'cool-timeline' );
72
+ $not_interested=esc_html__( 'Not Interested', 'ect' );
73
+ $not_like_it_text=esc_html__( 'No, not good enough, i do not like to rate it!', 'cool-timeline' );
74
+ $p_link=esc_url('https://wordpress.org/support/plugin/timeline-widget-addon-for-elementor/reviews/#new-post');
75
+ $pro_url=esc_url('https://1.envato.market/c/1258464/275988/4415?u=https%3A%2F%2Fcodecanyon.net%2Fitem%2Fthe-events-calendar-templates-and-shortcode-wordpress-plugin%2F20143286');
76
+
77
+ $message="Thanks for using <b>$p_name</b> WordPress plugin. We hope it meets your expectations! <br/>Please give us a quick rating, it works as a boost for us to keep working on more <a href='https://coolplugins.net' target='_blank'><strong>Cool Plugins</strong></a>!<br/>";
78
+
79
+ $html='<div data-ajax-url="%8$s" data-ajax-callback="%9$s" class="cool-feedback-notice-wrapper %1$s">
80
+ <div class="logo_container"><a href="%5$s"><img src="%2$s" alt="%3$s"></a></div>
81
+ <div class="message_container">%4$s
82
+ <div class="callto_action">
83
+ <ul>
84
+ <li class="love_it"><a href="%5$s" class="like_it_btn button button-primary" target="_new" title="%6$s">%6$s</a></li>
85
+ <li class="already_rated"><a href="javascript:void(0);" class="already_rated_btn button twae_dismiss_notice" title="%7$s">%7$s</a></li>
86
+ <li class="already_rated"><a href="javascript:void(0);" class="already_rated_btn button twae_dismiss_notice" title="%11$s">%11$s</a></li>
87
+
88
+ </ul>
89
+ <div class="clrfix"></div>
90
+ </div>
91
+ </div>
92
+ </div>';
93
+
94
+ return sprintf($html,
95
+ $wrap_cls,
96
+ $img_path,
97
+ $p_name,
98
+ $message,
99
+ $p_link,
100
+ $like_it_text,
101
+ $already_rated_text,
102
+ $ajax_url,// 8
103
+ $ajax_callback,//9
104
+ $pro_url,//10
105
+ $not_interested
106
+ );
107
+
108
+ }
109
+
110
+ } //class end
111
+
112
+ }
113
+
114
+
115
+
readme.txt ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Elementor Timeline Widget Addon ===
2
+ Contributors:narinder-singh,satindersingh,coolplugins
3
+ Donate link: https://paypal.me/CoolPlugins/10USD/
4
+ Tags:elementor addon, elementor,elementor widgets,addons,elementor timeline,elementor roadmap,steps
5
+ Requires at least:4.5
6
+ Tested up to:5.4
7
+ Requires PHP:5.6
8
+ Stable tag:trunk
9
+ License:GPLv2 or later
10
+ License URI:http://www.gnu.org/licenses/gpl-2.0.html
11
+
12
+ Showcase your Story, History in a precise and elegant way using powerful and advance Elementor Timeline Widget Addon.
13
+
14
+ == Description ==
15
+ Showcase your Story, History in a precise and elegant way using powerful and advance Elementor Timeline Widget Addon.
16
+
17
+ It supports two types of layout these are single-sided and both sided.
18
+ Using Timeline Widget Addon plugin you can easily create a beautiful timeline within a few minutes.It supports many advanced settings i.e story Icon, Image, label, Sublabel.
19
+
20
+ * [View Timeline Widget Addon Demo](https://cooltimeline.com/timeline-widget-demo)
21
+
22
+ https://www.youtube.com/watch?v=dcfWYsfSjdM&feature=youtu.be
23
+
24
+ <h4>Here is the list of available settings:-</h4>
25
+ <ul>
26
+ <li>Two different timeline layout(Single Sided/ Both Sided).</li>
27
+ <li>Set Highlighted Year/Custom label text.</li>
28
+ <li>Add Story Date and custom label like:15 Feb | Mid,Early |Jan 01 2020, 20 Dec| end</li>
29
+ <li>Choose Font awesome Icons for your story and set custom size,color</li>
30
+ <li>Set Story title,Description,Date and Year section Color from Color settings.</li>
31
+ <li>Set elegant Typography on Story title,description,Date and year Label.</li>
32
+ </ul>
33
+
34
+ ### Cool Timeline - WordPress #1 Timeline Plugin
35
+
36
+ **Cool Timeline** is a responsive WordPress pure HTML & CSS timeline plugin that allows you to create beautiful horizontal and vertical history timeline. You simply create posts, set images and date then Cool Timeline will automatically populate these posts in chronological order(ASC or DESC), based on the year and date of stories. You can easily show timeline on any page of your website using shortcode - [cool-timeline]
37
+
38
+ ### Check Cool Timeline Demos
39
+
40
+ [Cool Timeline Pro Demo](https://cooltimeline.com/demo/) | [Cool Timeline Free Demo](https://free.cooltimeline.com)
41
+
42
+ You can show your stories, events, appointments, concerts, future & history happenings by using **Cool Timeline plugin** on your website.
43
+
44
+
45
+ It is an **[Elementor Page Builder](https://wordpress.org/plugins/elementor/)** Addon.In order to use It you must have to install **[Elementor Page Builder](https://wordpress.org/plugins/elementor/)**.
46
+
47
+
48
+ == Installation ==
49
+ 1. Install **Elementor Timeline Widget Addon** from the WordPress.org repository or by uploading plugin-zip unzipped folder to the **/wp-content/plugins** directory.
50
+ You must also install **[Elementor Page Builder](https://wordpress.org/plugins/elementor/)** free plugin if you want to use this addon.
51
+ 2. Activate the plugin through **Plugins >> Installed Plugin** menu in WordPress
52
+ 3. After plugin activation, you can find the Timeline Widget in the Elementor Widget Section.
53
+
54
+ == Screenshots ==
55
+ 1. Elementor Timeline Widget Addon Preview
56
+
57
+ == Changelog ==
58
+ <strong>Version 1.0 | 14 FEB 2020</strong>
59
+ <pre>
60
+ New: Initial Plugin Release
61
+ </pre>
timeline-widget-addon-for-elementor.php ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
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.0
7
+ * Author: Cool Plugins
8
+ * Author URI: https://coolplugins.net/
9
+ * Text Domain: twae
10
+ */
11
+
12
+
13
+ if (!defined('ABSPATH')) {
14
+ exit;
15
+ }
16
+
17
+ if (defined('TWAE_VERSION')) {
18
+ return;
19
+ }
20
+
21
+ define('TWAE_VERSION', '1.0.0');
22
+ define('TWAE_FILE', __FILE__);
23
+ define('TWAE_PATH', plugin_dir_path(TWAE_FILE));
24
+ define('TWAE_URL', plugin_dir_url(TWAE_FILE));
25
+
26
+ register_activation_hook(TWAE_FILE, array('Timeline_Widget_Addon', 'twae_activate'));
27
+ register_deactivation_hook(TWAE_FILE, array('Timeline_Widget_Addon', 'twae_deactivate'));
28
+
29
+ /**
30
+ * Class Timeline_Widget_Addon
31
+ */
32
+ final class Timeline_Widget_Addon
33
+ {
34
+
35
+ /**
36
+ * Plugin instance.
37
+ *
38
+ * @var Timeline_Widget_Addon
39
+ * @access private
40
+ */
41
+ private static $instance = null;
42
+
43
+ /**
44
+ * Get plugin instance.
45
+ *
46
+ * @return Timeline_Widget_Addon
47
+ * @static
48
+ */
49
+ public static function get_instance()
50
+ {
51
+ if (!isset(self::$instance)) {
52
+ self::$instance = new self;
53
+ }
54
+
55
+ return self::$instance;
56
+ }
57
+
58
+ /**
59
+ * Constructor.
60
+ *
61
+ * @access private
62
+ */
63
+ private function __construct()
64
+ {
65
+ //Load the plugin after Elementor (and other plugins) are loaded.
66
+ add_action( 'plugins_loaded', array($this, 'twae_plugins_loaded') );
67
+ }
68
+
69
+
70
+ /**
71
+ * Code you want to run when all other plugins loaded.
72
+ */
73
+ function twae_plugins_loaded() {
74
+
75
+ // Notice if the Elementor is not active
76
+ if ( ! did_action( 'elementor/loaded' ) ) {
77
+ add_action( 'admin_notices', array($this, 'twae_fail_to_load') );
78
+ return;
79
+ }
80
+
81
+ load_plugin_textdomain('twae', false, TWAE_FILE . 'languages');
82
+
83
+
84
+ // Require the main plugin file
85
+ require( __DIR__ . '/includes/class-twae.php' );
86
+ if( is_admin() ){
87
+ /*** Plugin review notice file */
88
+ require_once(__DIR__ . '/includes/twae-feedback-notice.php');
89
+ new TWAEFeedbackNotice();
90
+
91
+
92
+
93
+ }
94
+
95
+
96
+ } // end of ctla_loaded()
97
+
98
+
99
+ function twae_fail_to_load() {
100
+
101
+ if (!is_plugin_active( 'elementor/elementor.php' ) ) : ?>
102
+ <div class="notice notice-warning is-dismissible">
103
+ <p><?php echo sprintf( __( '<a href="%s" target="_blank" >Elementor Page Builder</a> must be installed and activated for "<strong>Timeline Widget Addon For Elementor</strong>" to work' ),'https://wordpress.org/plugins/elementor/'); ?></p>
104
+ </div>
105
+ <?php endif;
106
+
107
+ }
108
+
109
+ /**
110
+ * Run when activate plugin.
111
+ */
112
+ public static function twae_activate()
113
+ {
114
+ update_option("twae-v",TWAE_VERSION);
115
+ update_option("twae-type","FREE");
116
+ update_option("twae-installDate",date('Y-m-d h:i:s') );
117
+ }
118
+
119
+ /**
120
+ * Run when deactivate plugin.
121
+ */
122
+ public static function twae_deactivate()
123
+ {
124
+
125
+ }
126
+ }
127
+
128
+ function Timeline_Widget_Addon()
129
+ {
130
+ return Timeline_Widget_Addon::get_instance();
131
+ }
132
+
133
+ $GLOBALS['Timeline_Widget_Addon'] = Timeline_Widget_Addon();
widgets/twae-centered-timeline.php ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ echo '
3
+ <div class="twae-wrapper '.$timeline_layout_wrapper.'">
4
+ <div class="twae-timeline-centered twae-timeline-sm twae-line '.$timeline_layout.'">';
5
+ foreach($data as $index=>$content){
6
+
7
+ $left_aligned = "twae-right-aligned";
8
+ if($layout == 'centered'){
9
+ if($countItem % 2 == 0){
10
+ $left_aligned = "twae-left-aligned";
11
+ }
12
+ }
13
+ $timeline_description = $content['twae_description'];
14
+ $show_year_label = $content['twae_show_year_label'];
15
+ $timeline_year = $content['twae_year'];
16
+ $story_date_label = $content['twae_date_label'];
17
+ $story_extra_label = $content['twae_extra_label'];
18
+ $timeline_story_title = $content['twae_story_title'];
19
+ $story_icon = $content['twae_story_icon']['value'];
20
+ $thumbnail_size = $content['twae_thumbnail_size'];
21
+ $thumbnail_custom_dimension = $content['twae_thumbnail_custom_dimension'];
22
+
23
+ if($content['twae_image']['id']!=""){
24
+ if($thumbnail_size =='custom'){
25
+ $custom_size = array ( $thumbnail_custom_dimension['width'],$thumbnail_custom_dimension['height']);
26
+ $image= wp_get_attachment_image($content['twae_image']['id'], $custom_size , true);
27
+
28
+ }
29
+ else{
30
+ $image= wp_get_attachment_image($content['twae_image']['id'],$thumbnail_size, true);
31
+ }
32
+ $image = '<div class="twae-timeline-img">'.$image.'</div>';
33
+ }else if($content['twae_image']['url']!=""){
34
+ $image = '<div class="twae-timeline-img"><img src="'.$content['twae_image']['url'].'"></img></div>';
35
+ }
36
+ else{
37
+ $image ='';
38
+ }
39
+
40
+ if($show_year_label == 'yes'){
41
+ echo '<span class="twae-year-container">
42
+ <span class="twae-year-label twae-year">'.$timeline_year.'</span>
43
+ </span>';
44
+ }
45
+
46
+ echo '<article class="twae-timeline-entry '.$left_aligned.'">
47
+ <div class="twae-timeline-entry-inner">
48
+ <time class="twae-label-extra-label">
49
+ <span class="twae-label">'.$story_date_label.'</span>
50
+ <span class="twae-extra-label">'.$story_extra_label.'</span>
51
+ </time>
52
+ <div class="twae-bg-orange twae-icon">';
53
+ \Elementor\Icons_Manager::render_icon( $content['twae_story_icon'], [ 'aria-hidden' => 'true' ] );
54
+ echo'</div>
55
+ <div class="twae-bg-orange twae-data-container">
56
+ <span class="twae-title">'.$timeline_story_title.'</span>
57
+ '.$image.'
58
+ <div class="twae-description">'.$timeline_description.'</div>
59
+ </div>
60
+ </div>
61
+ </article>';
62
+ $countItem = $countItem +1;
63
+ }
64
+ echo'</div>
65
+ </div>';
widgets/twae-widget.php ADDED
@@ -0,0 +1,575 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ use Elementor\Widget_Base;
3
+ use Elementor\Utils;
4
+ use Elementor\Repeater;
5
+ use Elementor\Controls_Manager;
6
+ use Elementor\Scheme_Color;
7
+ use Elementor\Group_Control_Image_Size;
8
+ use Elementor\Group_Control_Background;
9
+ use Elementor\Group_Control_Typography;
10
+ use Elementor\Scheme_Typography;
11
+
12
+ class TWAE_Widget extends \Elementor\Widget_Base {
13
+
14
+ public function get_name() {
15
+ return 'timeline-widget-addon';
16
+ }
17
+
18
+ public function get_title() {
19
+ return __( 'Timeline Widget Addon', 'twae' );
20
+ }
21
+
22
+ public function get_icon() {
23
+ return 'eicon-time-line';
24
+ }
25
+
26
+ public function get_categories() {
27
+ return [ 'general' ];
28
+ }
29
+
30
+ protected function _register_controls() {
31
+
32
+ $this->start_controls_section(
33
+ 'twae_layout_section',
34
+ [
35
+ 'label' => __( 'Layout Settings', 'twae' ),
36
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
37
+ ]
38
+ );
39
+
40
+ $this->add_control(
41
+ 'twae_layout',
42
+ [
43
+ 'label' => __( 'Layout', 'twae' ),
44
+ 'type' => \Elementor\Controls_Manager::SELECT,
45
+ 'default' => 'centered',
46
+ 'options'=>[
47
+ 'centered'=>'Centered',
48
+ 'one-sided'=>'One Sided',
49
+ ],
50
+ 'default' => 'centered',
51
+ ]
52
+ );
53
+
54
+ $this->end_controls_section();
55
+
56
+
57
+ $this->start_controls_section(
58
+ 'twae_typography_section',
59
+ [
60
+ 'label' => __( 'Typography Settings', 'twae' ),
61
+ 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
62
+ ]
63
+ );
64
+
65
+ $this->add_group_control(
66
+ Group_Control_Typography::get_type(),
67
+ [
68
+ 'name' => 'twae_year_typography',
69
+ 'label' => __( 'Year Typography', 'twae' ),
70
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
71
+ 'fields_options' => [
72
+ // Inner control name
73
+ 'font_weight' => [
74
+ // Inner control settings
75
+ 'default' => '500',
76
+ ],
77
+ 'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 18 ] ]
78
+ ],
79
+ 'selector' => '{{WRAPPER}} .twae-wrapper .twae-year',
80
+ ]
81
+ );
82
+
83
+ $this->add_group_control(
84
+ Group_Control_Typography::get_type(),
85
+ [
86
+ 'name' => 'twae_title_typography',
87
+ 'label' => __( 'Story Title Typography', 'twae' ),
88
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
89
+ 'selector' => '{{WRAPPER}} .twae-wrapper span.twae-title',
90
+ ]
91
+ );
92
+
93
+ $this->add_group_control(
94
+ Group_Control_Typography::get_type(),
95
+ [
96
+ 'name' => 'twae_label_typography',
97
+ 'label' => __( 'Story Label Typography', 'twae' ),
98
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
99
+ 'selector' => '{{WRAPPER}} .twae-wrapper .twae-label-extra-label',
100
+ ]
101
+ );
102
+
103
+ $this->add_group_control(
104
+ Group_Control_Typography::get_type(),
105
+ [
106
+ 'name' => 'twae_extra_label_typography',
107
+ 'label' => __( 'Story Extra Label Typography', 'twae' ),
108
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
109
+ 'selector' => '{{WRAPPER}} .twae-wrapper span.twae-extra-label',
110
+ ]
111
+ );
112
+
113
+ $this->add_group_control(
114
+ Group_Control_Typography::get_type(),
115
+ [
116
+ 'name' => 'twae_description_typography',
117
+ 'label' => __( 'Story Description Typography', 'twae' ),
118
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
119
+ 'selector' => '{{WRAPPER}} .twae-wrapper .twae-description',
120
+ ]
121
+ );
122
+
123
+ $this->add_control(
124
+ 'twae_icon_size',
125
+ [
126
+ 'label' => __( 'Icon Size', 'twae' ),
127
+ 'type' => Controls_Manager::SLIDER,
128
+ 'range' => [
129
+ 'px' => [
130
+ 'min' => 6,
131
+ 'max' => 100,
132
+ ],
133
+ ],
134
+ 'default' => [
135
+ 'unit' => 'px',
136
+ 'size' => 20,
137
+ ],
138
+ 'selectors' => [
139
+ '{{WRAPPER}} .twae-wrapper .twae-icon i' => 'font-size: {{SIZE}}{{UNIT}}',
140
+ ],
141
+ //'default' => '.75rem',
142
+ ]
143
+ );
144
+
145
+ $this->add_control(
146
+ 'twae_icon_padding',
147
+ [
148
+ 'label' => __( 'Icon Padding', 'twae' ),
149
+ 'type' => Controls_Manager::DIMENSIONS,
150
+ 'size_units' => [ 'px', '%', 'em' ],
151
+ 'selectors' => [
152
+ '{{WRAPPER}} .twae-wrapper .twae-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
153
+ ],
154
+ ]
155
+ );
156
+
157
+ $this->end_controls_section();
158
+
159
+ $this->start_controls_section(
160
+ 'twae_style_section',
161
+ [
162
+ 'label' => __( 'Color Settings', 'twae' ),
163
+ 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
164
+ ]
165
+ );
166
+
167
+ $this->add_control(
168
+ 'twae_year_label_color',
169
+ [
170
+ 'label' => __( 'Year/Label Color', 'twae' ),
171
+ 'type' => Controls_Manager::COLOR,
172
+ 'scheme' => [
173
+ 'type' => Scheme_Color::get_type(),
174
+ 'value' => Scheme_Color::COLOR_2,
175
+ ],
176
+ 'selectors' => [
177
+ '{{WRAPPER}} .twae-wrapper .twae-year' => 'color: {{twae_year_label_color}}',
178
+ ],
179
+ 'default' => '#4054B2',
180
+ ]
181
+ );
182
+
183
+ $this->add_control(
184
+ 'twae_year_label_bgcolor',
185
+ [
186
+ 'label' => __( 'Year/Label Background Color', 'twae' ),
187
+ 'type' => Controls_Manager::COLOR,
188
+ 'scheme' => [
189
+ 'type' => Scheme_Color::get_type(),
190
+ 'value' => Scheme_Color::COLOR_2,
191
+ ],
192
+ 'selectors' => [
193
+ '{{WRAPPER}} .twae-wrapper .twae-year' => 'background-color: {{twae_year_label_bgcolor}}',
194
+ ],
195
+ 'default' => '#c3c56f',
196
+ ]
197
+ );
198
+
199
+ $this->add_control(
200
+ 'twae_date_label_color',
201
+ [
202
+ 'label' => __( 'Story Date/Label Color', 'twae' ),
203
+ 'type' => Controls_Manager::COLOR,
204
+ 'scheme' => [
205
+ 'type' => Scheme_Color::get_type(),
206
+ 'value' => Scheme_Color::COLOR_2,
207
+ ],
208
+ 'selectors' => [
209
+ '{{WRAPPER}} .twae-wrapper span.twae-label' => 'color: {{twae_date_label_color}}',
210
+ ],
211
+ 'default' => '#DD1414',
212
+ ]
213
+ );
214
+
215
+ $this->add_control(
216
+ 'twae_extra_label_color',
217
+ [
218
+ 'label' => __( 'Story Extra Label Color', 'twae' ),
219
+ 'type' => Controls_Manager::COLOR,
220
+ 'scheme' => [
221
+ 'type' => Scheme_Color::get_type(),
222
+ 'value' => Scheme_Color::COLOR_2,
223
+ ],
224
+ 'selectors' => [
225
+ '{{WRAPPER}} .twae-wrapper span.twae-extra-label' => 'color: {{twae_extra_label_color}}',
226
+ ],
227
+ 'default' => '#AF1A1A',
228
+ ]
229
+ );
230
+
231
+ $this->add_control(
232
+ 'twae_story_title_color',
233
+ [
234
+ 'label' => __( 'Story Title Color', 'twae' ),
235
+ 'type' => Controls_Manager::COLOR,
236
+ 'scheme' => [
237
+ 'type' => Scheme_Color::get_type(),
238
+ 'value' => Scheme_Color::COLOR_2,
239
+ ],
240
+ 'selectors' => [
241
+ '{{WRAPPER}} .twae-wrapper .twae-data-container span.twae-title' => 'color: {{twae_story_title_color}}',
242
+ ],
243
+ 'default' => '#1F39B2',
244
+ ]
245
+ );
246
+
247
+ $this->add_control(
248
+ 'twae_description_color',
249
+ [
250
+ 'label' => __( 'Story Description Color', 'twae' ),
251
+ 'type' => Controls_Manager::COLOR,
252
+ 'scheme' => [
253
+ 'type' => Scheme_Color::get_type(),
254
+ 'value' => Scheme_Color::COLOR_2,
255
+ ],
256
+ 'selectors' => [
257
+ '{{WRAPPER}} .twae-wrapper .twae-description' => 'color: {{twae_description_color}}',
258
+ ],
259
+ 'default' => '#333333',
260
+ ]
261
+ );
262
+
263
+ $this->add_control(
264
+ 'twae_line_color',
265
+ [
266
+ 'label' => __( 'Line Color', 'twae' ),
267
+ 'type' => Controls_Manager::COLOR,
268
+ 'scheme' => [
269
+ 'type' => Scheme_Color::get_type(),
270
+ 'value' => Scheme_Color::COLOR_2,
271
+ ],
272
+ 'selectors' => [
273
+ '{{WRAPPER}} .twae-wrapper .twae-line::before' => 'background-color: {{twae_line_color}}',
274
+ '{{WRAPPER}} .twae-wrapper .twae-timeline-centered .twae-icon' => 'border-color: {{twae_line_color}}',
275
+ '{{WRAPPER}} .twae-wrapper .twae-timeline-centered .twae-year' => 'border-color: {{twae_line_color}}; box-shadow: 2px 2px 4px -2px {{twae_line_color}}',
276
+ '{{WRAPPER}} .twae-wrapper .twae-data-container' => 'box-shadow: 2px 2px 4px -2px {{twae_line_color}}',
277
+ '@media only screen and (min-width: 769px) { {{WRAPPER}} .twae-wrapper .twae-left-aligned .twae-data-container' => 'box-shadow: -2px 2px 4px -2px {{twae_line_color}} }',
278
+ ],
279
+ 'default' => '#333333',
280
+ ]
281
+ );
282
+
283
+ $this->add_control(
284
+ 'twae_icon_bgcolor',
285
+ [
286
+ 'label' => __( 'Icon Background Color', 'twae' ),
287
+ 'type' => Controls_Manager::COLOR,
288
+ 'scheme' => [
289
+ 'type' => Scheme_Color::get_type(),
290
+ 'value' => Scheme_Color::COLOR_2,
291
+ ],
292
+ 'selectors' => [
293
+ '{{WRAPPER}} .twae-wrapper .twae-icon' => 'background-color: {{twae_icon_bgcolor}}',
294
+ ],
295
+ 'default' => '#C3C56F',
296
+ ]
297
+ );
298
+
299
+ $this->add_control(
300
+ 'twae_story_bgcolor',
301
+ [
302
+ 'label' => __( 'Story Background Color', 'twae' ),
303
+ 'type' => Controls_Manager::COLOR,
304
+ 'scheme' => [
305
+ 'type' => Scheme_Color::get_type(),
306
+ 'value' => Scheme_Color::COLOR_2,
307
+ ],
308
+ 'selectors' => [
309
+ '{{WRAPPER}} .twae-wrapper .twae-data-container' => 'background-color: {{twae_story_bgcolor}}',
310
+ '{{WRAPPER}} .twae-wrapper .twae-data-container:after' => 'border-right-color: {{twae_story_bgcolor}}',
311
+ '{{WRAPPER}} .twae-wrapper .twae-icon' => 'color: {{twae_icon_bgcolor}}',
312
+ ],
313
+ 'default' => '#EDEFB1',
314
+
315
+ ]
316
+ );
317
+
318
+ $this->end_controls_section();
319
+
320
+ $this->start_controls_section(
321
+ 'twae_content_section',
322
+ [
323
+ 'label' => __( 'Timeline Story Settings', 'twae' ),
324
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
325
+ ]
326
+ );
327
+
328
+ $repeater = new \Elementor\Repeater();
329
+
330
+ $repeater->add_control(
331
+ 'twae_show_year_label',
332
+ [
333
+ 'label' => __( 'Year/Label', 'twae' ),
334
+ 'type' => \Elementor\Controls_Manager::SWITCHER,
335
+ 'label_on' => __( 'Show', 'twae' ),
336
+ 'label_off' => __( 'Hide', 'twae' ),
337
+ 'return_value' => 'yes',
338
+ 'default' => 'yes',
339
+ ]
340
+ );
341
+
342
+ $repeater->add_control(
343
+ 'twae_year',
344
+ [
345
+ 'label' => __( 'Year/Label', 'twae' ),
346
+ 'type' => \Elementor\Controls_Manager::TEXT,
347
+ 'default' => '2020',
348
+ 'condition' => [
349
+ 'twae_show_year_label' => [
350
+ 'yes'
351
+ ],
352
+ ]
353
+
354
+ ]
355
+ );
356
+
357
+ $repeater->add_control(
358
+ 'twae_date_label',
359
+ [
360
+ 'label' => __( 'Story Date/Label', 'twae' ),
361
+ 'type' => \Elementor\Controls_Manager::TEXT,
362
+ 'default' => '01 Jan 2020',
363
+ ]
364
+ );
365
+
366
+ $repeater->add_control(
367
+ 'twae_extra_label',
368
+ [
369
+ 'label' => __( 'Extra Label', 'twae' ),
370
+ 'type' => \Elementor\Controls_Manager::TEXT,
371
+ 'default' => 'Extra Label',
372
+ ]
373
+ );
374
+
375
+ $repeater->add_control(
376
+ 'twae_story_title',
377
+ [
378
+ 'label' => __( 'Timeline Story Title', 'twae' ),
379
+ 'type' => \Elementor\Controls_Manager::TEXT,
380
+ 'default' => 'Timeline Story',
381
+ ]
382
+ );
383
+
384
+ $repeater->add_control(
385
+ 'twae_description',
386
+ [
387
+ 'label' => __( 'Description', 'twae' ),
388
+ 'type' => \Elementor\Controls_Manager::WYSIWYG,
389
+ 'default' => 'Add Description Here',
390
+ ]
391
+ );
392
+
393
+ $repeater->add_control(
394
+ 'twae_story_icon',
395
+ [
396
+ 'label' => __( 'Icon', 'twae' ),
397
+ 'type' => \Elementor\Controls_Manager::ICONS,
398
+ 'default' => [
399
+ 'value' => 'fab fa-amazon',
400
+ 'library' => 'solid',
401
+ ],
402
+ ]
403
+ );
404
+
405
+ $repeater->add_control(
406
+ 'twae_image',
407
+ [
408
+ 'label' => __( 'Choose Image', 'twae' ),
409
+ 'type' => \Elementor\Controls_Manager::MEDIA,
410
+ 'description' => __('Image Size will not work with default image','twae'),
411
+ 'default' => [
412
+ 'url' => \Elementor\Utils::get_placeholder_image_src(),
413
+ ],
414
+ ]
415
+ );
416
+
417
+ $repeater->add_group_control(
418
+ Group_Control_Image_Size::get_type(),
419
+ [
420
+ 'name' => 'twae_thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
421
+ 'separator' => 'none',
422
+ ]
423
+ );
424
+
425
+ $this->add_control(
426
+ 'twae_list',
427
+ [
428
+
429
+ 'label' => __( 'Timeline Widget Addon For Elementor', 'twae' ),
430
+ 'type' => \Elementor\Controls_Manager::REPEATER,
431
+ 'fields' => array_values( $repeater->get_controls() ),
432
+ 'default' => [
433
+ [
434
+ 'twae_story_title' => __( 'Amazon Founded', 'twae' ),
435
+ 'twae_description' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim res aperta. Ne discipulum abducam, times. Primum quid tu dicis breve? An haec ab eo non dicuntur?','twae'),
436
+ 'twae_year' => __('1994','twae'),
437
+ 'twae_date_label' => __('Jul 1994','twae'),
438
+ 'twae_extra_label' => __('Amazon History','twae'),
439
+ 'twae_image' =>[
440
+ 'url' => TWAE_URL . 'assets/images/amazon-1.png',
441
+ 'id' => '',
442
+ ],
443
+ ],
444
+ [
445
+ 'twae_story_title' => __( 'Amazon Prime Services', 'twae' ),
446
+ 'twae_description' => __('Aliter homines, aliter philosophos loqui putas oportere? Sin aliud quid voles, postea. Mihi enim satis est, ipsis non satis. Negat enim summo bono afferre incrementum diem. Quod ea non occurrentia fingunt, vincunt Aristonem.','twae'),
447
+ 'twae_year' => __('2005','twae'),
448
+ 'twae_date_label' => __('Feb 2005','twae'),
449
+ 'twae_extra_label' => __('Amazon History','twae'),
450
+ 'twae_image' =>[
451
+ 'url' => TWAE_URL . 'assets/images/amazon-2.png',
452
+ 'id' => '',
453
+ ],
454
+
455
+ ],
456
+ [
457
+ 'twae_story_title' => __( 'Amazon Announced Amazon Fresh Pickup', 'twae' ),
458
+ 'twae_description' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.','twae'),
459
+ 'twae_year' => __('2007','twae'),
460
+ 'twae_date_label' => __('Aug 2007','twae'),
461
+ 'twae_extra_label' => __('Amazon History','twae'),
462
+ 'twae_image' =>[
463
+ 'url' => TWAE_URL . 'assets/images/amazon-3.png',
464
+ 'id' => '',
465
+ ],
466
+ ],
467
+ ],
468
+ 'title_field' => '{{{ twae_story_title }}}',
469
+ ]
470
+ );
471
+
472
+ $this->end_controls_section();
473
+
474
+ }
475
+
476
+ protected function render() {
477
+
478
+ $settings = $this->get_settings_for_display();
479
+ $data = $settings['twae_list'];
480
+ $layout = $settings['twae_layout'];
481
+
482
+ $timeline_layout_wrapper = "twae-centered";
483
+ $timeline_layout = '';
484
+ if($layout == 'one-sided'){
485
+ $timeline_layout = "twae-one-sided-timeline";
486
+ $timeline_layout_wrapper = "twae-one-sided-wrapper";
487
+ }
488
+
489
+ $countItem = 1;
490
+ require TWAE_PATH . 'widgets/twae-centered-timeline.php';
491
+
492
+ }
493
+
494
+
495
+ protected function _content_template() {
496
+
497
+ ?>
498
+ <#
499
+ if( settings.twae_list ) {
500
+ var countItem = 1;
501
+
502
+ var timeline_layout = '';
503
+ var timeline_layout_wrapper = 'twae-centered';
504
+ if(settings.twae_layout == 'one-sided'){
505
+ var timeline_layout = "twae-one-sided-timeline";
506
+ var timeline_layout_wrapper = 'twae-one-sided-wrapper';
507
+ }
508
+
509
+ #>
510
+ <div class="twae-wrapper {{{ timeline_layout_wrapper }}}">
511
+ <div class="twae-timeline-centered twae-timeline-sm twae-line {{{ timeline_layout }}}">
512
+ <#
513
+ _.each( settings.twae_list, function( item, index ) {
514
+ var timeline_image = {
515
+ id: item.twae_image.id,
516
+ url: item.twae_image.url,
517
+ size: item.twae_thumbnail_size,
518
+ dimension: item.twae_thumbnail_custom_dimension,
519
+ model: view.getEditModel()
520
+ };
521
+ var image_url = elementor.imagesManager.getImageUrl( timeline_image );
522
+
523
+ if(item.twae_show_year_label == 'yes'){
524
+ #>
525
+ <span class="twae-year-container">
526
+ <span class="twae-year-label twae-year">{{{ item.twae_year }}}</span>
527
+ </span>
528
+ <#
529
+ }
530
+ var story_alignment = "twae-right-aligned";
531
+ if(settings.twae_layout == 'centered'){
532
+
533
+ if ( countItem % 2 == 0) {
534
+ var story_alignment = "twae-left-aligned";
535
+ }
536
+ }
537
+ twaeiconHTML = elementor.helpers.renderIcon( view, item.twae_story_icon, { 'aria-hidden': true }, 'i' , 'object' ),
538
+
539
+ #>
540
+ <article class="twae-timeline-entry {{{ story_alignment }}}">
541
+ <div class="twae-timeline-entry-inner">
542
+ <time class="twae-label-extra-label">
543
+ <span class="twae-label">{{{ item.twae_date_label }}}</span>
544
+ <span class="twae-extra-label">{{{ item.twae_extra_label }}}</span>
545
+ </time>
546
+ <div class="twae-bg-orange twae-icon">
547
+ <# if ( twaeiconHTML && twaeiconHTML.rendered ) { #>
548
+ {{{ twaeiconHTML.value }}}
549
+ <# } else { #>
550
+ <i class="{{ item.twae_story_icon.value }}" aria-hidden="true"></i>
551
+ <# } #>
552
+
553
+ </div>
554
+ <div class="twae-bg-orange twae-data-container">
555
+ <span class="twae-title">{{{ item.twae_story_title}}}</span>
556
+ <div class="twae-timeline-img"><img src="{{{ image_url }}}" /></div>
557
+ <div class="twae-description">{{{ item.twae_description }}}</div>
558
+ </div>
559
+ </div>
560
+ </article>
561
+ <#
562
+ countItem = countItem+1;
563
+ });
564
+ #>
565
+ </div>
566
+ </div>
567
+ <#
568
+ }
569
+ #>
570
+ <?php
571
+ }
572
+
573
+ }
574
+
575
+ \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new TWAE_Widget() );