Elementor Custom Skin - Version 2.2.0

Version Description

NEW!!! Ajax pagination. Now you can go to Pagination Section in Posts / Archive Posts Widgets and select "Load more" pagination.
Solved issue with multiple Custom Grid in one page.
Solving Astra Theme Issues with Post Items width shrinkage.

Release Info

Developer	dudaster
Plugin	Elementor Custom Skin
Version	2.2.0
Comparing to
See all releases

Code changes from version 2.1.0 to 2.2.0

Files changed (9) hide show

assets/css/ecs-style.css +412 -0
assets/js/ecs.js +14 -0
assets/js/ecs_ajax_pagination.js +80 -0
ele-custom-skin.php +4 -2
includes/ajax-pagination.php +517 -0
includes/dynamic-style.php +10 -2
includes/enqueue-styles.php +2 -1
readme.txt +11 -2
skins/skin-custom.php +98 -31

assets/css/ecs-style.css CHANGED Viewed

@@ -48,3 +48,415 @@
                 margin: 0;
                 padding: 0;
+            }


48	margin: 0;
49	padding: 0;
50	}
51	+ .ecs-post-loop .ast-article-post{
52	+ width:100%;
53	+ }
54	+
55	+ /* Lazy Load Animations */
56	+
57	+ .elementor-editor-active .ecs-lazyload a,.elementor-editor-preview .ecs-lazyload a{
58	+ display:none;
59	+ }
60	+ .animation-hidden .ecs-lazy-load-animation{
61	+ height:0;
62	+ visibility:hidden;
63	+ }
64	+
65	+ /* loading bar progresion */
66	+ /*
67	+ <div class="barload-wrapper ecs-lazy-load-animation"><div class="barload-border ecs-ll-brcolor"><div class="barload-whitespace"><div class="barload-line ecs-ll-bgcolor"></div></div></div></div>
68	+ */
69	+ .barload-wrapper {
70	+ width: 195px;
71	+ height: 1em;
72	+ position: relative;
73	+ display:inline-block;
74	+ font-size:16px;
75	+ padding:10px;
76	+ }
77	+
78	+ .barload-border {
79	+ border: 3px solid rgb(34,34,34);
80	+ height: 100%;
81	+ width: 100%;
82	+ position: relative;
83	+
84	+ top: -50%;
85	+ padding: 4px 3px;
86	+ }
87	+
88	+ .barload-whitespace {
89	+ overflow: hidden;
90	+ height: 100%;
91	+ width: 100%;
92	+ margin: 0 auto;
93	+ overflow: hidden;
94	+ position: relative;
95	+ }
96	+
97	+ .barload-line {
98	+ position: absolute;
99	+ height: 100%;
100	+ width: 100%;
101	+ background-color: rgb(0,0,0);
102	+ animation: barload-slide 2.75s steps(40) infinite;
103	+ -o-animation: barload-slide 2.75s steps(40) infinite;
104	+ -ms-animation: barload-slide 2.75s steps(40) infinite;
105	+ -webkit-animation: barload-slide 2.75s steps(40) infinite;
106	+ -moz-animation: barload-slide 2.75s steps(40) infinite;
107	+ }
108	+
109	+
110	+
111	+ @keyframes barload-slide {
112	+ 0% {
113	+ left: -100%;
114	+ }
115	+
116	+ 100% {
117	+ left: 100%;
118	+ }
119	+ }
120	+
121	+ @-o-keyframes barload-slide {
122	+ 0% {
123	+ left: -100%;
124	+ }
125	+
126	+ 100% {
127	+ left: 100%;
128	+ }
129	+ }
130	+
131	+ @-ms-keyframes barload-slide {
132	+ 0% {
133	+ left: -100%;
134	+ }
135	+
136	+ 100% {
137	+ left: 100%;
138	+ }
139	+ }
140	+
141	+ @-webkit-keyframes barload-slide {
142	+ 0% {
143	+ left: -100%;
144	+ }
145	+
146	+ 100% {
147	+ left: 100%;
148	+ }
149	+ }
150	+
151	+ @-moz-keyframes barload-slide {
152	+ 0% {
153	+ left: -100%;
154	+ }
155	+
156	+ 100% {
157	+ left: 100%;
158	+ }
159	+ }
160	+ /* four ball moving from left to right*/
161	+ /*
162	+ <div class="ballsload-container ecs-lazy-load-animation"><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div></div>
163	+ */
164	+
165	+ .barload-wrapper ,.barload-wrapper * {
166	+ box-sizing:content-box;
167	+ }
168	+ .ballsload-container{
169	+ font-size:16px;
170	+ padding:10px;
171	+ position:relative;
172	+ }
173	+
174	+ .ballsload-container div {
175	+ width: 1em;
176	+ height: 1em;
177	+ position: absolute;
178	+ background-color: rgb(0,0,0);
179	+ top: 0;
180	+ border-radius: 50%;
181	+ }
182	+
183	+ .ballsload-container div:nth-child(1) {
184	+
185	+ animation: ballsload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
186	+ -o-animation: ballsload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
187	+ -ms-animation: ballsload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
188	+ -webkit-animation: ballsload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
189	+ -moz-animation: ballsload-move 2.3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
190	+ }
191	+
192	+ .ballsload-container div:nth-child(2) {
193	+
194	+ animation: ballsload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
195	+ -o-animation: ballsload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
196	+ -ms-animation: ballsload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
197	+ -webkit-animation: ballsload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
198	+ -moz-animation: ballsload-move 2.3s 172.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
199	+ }
200	+
201	+ .ballsload-container div:nth-child(3) {
202	+
203	+ animation: ballsload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
204	+ -o-animation: ballsload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
205	+ -ms-animation: ballsload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
206	+ -webkit-animation: ballsload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
207	+ -moz-animation: ballsload-move 2.3s 345ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
208	+ }
209	+
210	+ .ballsload-container div:nth-child(4) {
211	+
212	+ animation: ballsload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
213	+ -o-animation: ballsload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
214	+ -ms-animation: ballsload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
215	+ -webkit-animation: ballsload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
216	+ -moz-animation: ballsload-move 2.3s 517.5ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
217	+ }
218	+
219	+
220	+
221	+ @keyframes ballsload-move {
222	+ 0% {
223	+ left: 0%;
224	+ }
225	+ 100% {
226	+ left: 100%;
227	+ }
228	+ }
229	+
230	+ @-o-keyframes ballsload-move {
231	+ 0% {
232	+ left: 0%;
233	+ }
234	+ 100% {
235	+ left: 100%;
236	+ }
237	+ }
238	+
239	+ @-ms-keyframes ballsload-move {
240	+ 0% {
241	+ left: 0%;
242	+ }
243	+ 100% {
244	+ left: 100%;
245	+ }
246	+ }
247	+
248	+ @-webkit-keyframes ballsload-move {
249	+ 0% {
250	+ left: 0%;
251	+ }
252	+ 100% {
253	+ left: 100%;
254	+ }
255	+ }
256	+
257	+ @-moz-keyframes ballsload-move {
258	+ 0% {
259	+ left: 0%;
260	+ }
261	+ 100% {
262	+ left: 100%;
263	+ }
264	+ }
265	+
266	+
267	+ /* one ball sliding left to right */
268	+ /*
269	+ <div id="movingBallG" class="ecs-lazy-load-animation"><div class="movingBallLineG ecs-ll-bgcolor"></div><div id="movingBallG_1" class="movingBallG ecs-ll-bgcolor"></div></div>
270	+ */
271	+
272	+ #movingBallG{
273	+ position:relative;
274	+ width:250px;
275	+ height:19px;
276	+ display:inline-block;
277	+ font-size:16px;
278	+ }
279	+
280	+ .movingBallLineG{
281	+ position:absolute;
282	+ left:0px;
283	+ top:0.5em;
284	+ height:0.25em;
285	+ width:250px;
286	+ background-color:rgb(0,0,0);
287	+ }
288	+
289	+ .movingBallG{
290	+ background-color:rgb(0,0,0);
291	+ position:absolute;
292	+ top:0;
293	+ left:0;
294	+ width:1.188em;
295	+ height:1.188em;
296	+ border-radius:100px;
297	+ -o-border-radius:100px;
298	+ -ms-border-radius:100px;
299	+ -webkit-border-radius:100px;
300	+ -moz-border-radius:100px;
301	+ animation-name:bounce_movingBallG;
302	+ -o-animation-name:bounce_movingBallG;
303	+ -ms-animation-name:bounce_movingBallG;
304	+ -webkit-animation-name:bounce_movingBallG;
305	+ -moz-animation-name:bounce_movingBallG;
306	+ animation-duration:1.5s;
307	+ -o-animation-duration:1.5s;
308	+ -ms-animation-duration:1.5s;
309	+ -webkit-animation-duration:1.5s;
310	+ -moz-animation-duration:1.5s;
311	+ animation-iteration-count:infinite;
312	+ -o-animation-iteration-count:infinite;
313	+ -ms-animation-iteration-count:infinite;
314	+ -webkit-animation-iteration-count:infinite;
315	+ -moz-animation-iteration-count:infinite;
316	+ animation-direction:normal;
317	+ -o-animation-direction:normal;
318	+ -ms-animation-direction:normal;
319	+ -webkit-animation-direction:normal;
320	+ -moz-animation-direction:normal;
321	+ }
322	+
323	+
324	+
325	+ @keyframes bounce_movingBallG{
326	+ 0%{
327	+ left:0px;
328	+ }
329	+
330	+ 50%{
331	+ left:230px;
332	+ }
333	+
334	+ 100%{
335	+ left:0px;
336	+ }
337	+ }
338	+
339	+ @-o-keyframes bounce_movingBallG{
340	+ 0%{
341	+ left:0px;
342	+ }
343	+
344	+ 50%{
345	+ left:230px;
346	+ }
347	+
348	+ 100%{
349	+ left:0px;
350	+ }
351	+ }
352	+
353	+ @-ms-keyframes bounce_movingBallG{
354	+ 0%{
355	+ left:0px;
356	+ }
357	+
358	+ 50%{
359	+ left:230px;
360	+ }
361	+
362	+ 100%{
363	+ left:0px;
364	+ }
365	+ }
366	+
367	+ @-webkit-keyframes bounce_movingBallG{
368	+ 0%{
369	+ left:0px;
370	+ }
371	+
372	+ 50%{
373	+ left:230px;
374	+ }
375	+
376	+ 100%{
377	+ left:0px;
378	+ }
379	+ }
380	+
381	+ @-moz-keyframes bounce_movingBallG{
382	+ 0%{
383	+ left:0px;
384	+ }
385	+
386	+ 50%{
387	+ left:230px;
388	+ }
389	+
390	+ 100%{
391	+ left:0px;
392	+ }
393	+ }
394	+
395	+
396	+ /* loading 3 dots moving form left to write */
397	+
398	+ /*
399	+ <div class="lds-ellipsis ecs-lazy-load-animation"><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div></div>
400	+ */
401	+
402	+ .lds-ellipsis {
403	+ display: inline-block;
404	+ position: relative;
405	+ width: 8em;
406	+ height: 1em;
407	+ font-size:13px;
408	+ }
409	+ .lds-ellipsis div {
410	+ position: absolute;
411	+ top: 0px;
412	+ width: 1em;
413	+ height: 1em;
414	+ border-radius: 50%;
415	+ background: #000;
416	+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
417	+ }
418	+ .lds-ellipsis div:nth-child(1) {
419	+ left: 1em;
420	+ animation: lds-ellipsis1 0.6s infinite;
421	+ }
422	+ .lds-ellipsis div:nth-child(2) {
423	+ left: 1em;
424	+ animation: lds-ellipsis2 0.6s infinite;
425	+ }
426	+ .lds-ellipsis div:nth-child(3) {
427	+ left: 4em;
428	+ animation: lds-ellipsis2 0.6s infinite;
429	+ }
430	+ .lds-ellipsis div:nth-child(4) {
431	+ left: 7em;
432	+ animation: lds-ellipsis3 0.6s infinite;
433	+ }
434	+ @keyframes lds-ellipsis1 {
435	+ 0% {
436	+ transform: scale(0);
437	+ }
438	+ 100% {
439	+ transform: scale(1);
440	+ }
441	+ }
442	+ @keyframes lds-ellipsis3 {
443	+ 0% {
444	+ transform: scale(1);
445	+ }
446	+ 100% {
447	+ transform: scale(0);
448	+ }
449	+ }
450	+ @keyframes lds-ellipsis2 {
451	+ 0% {
452	+ transform: translate(0, 0);
453	+ }
454	+ 100% {
455	+ transform: translate(3em, 0);
456	+ }
457	+ }
458	+
459	+
460	+
461	+
462	+

assets/js/ecs.js ADDED Viewed

	@@ -0,0 +1,14 @@


1	+
2	+ var ECS_hooks = {};
3	+
4	+ var ECS_Columns_Count=0;
5	+
6	+ function ECS_add_action(name, func) {
7	+ if(!ECS_hooks[name]) ECS_hooks[name] = [];
8	+ ECS_hooks[name].push(func);
9	+ }
10	+
11	+ function ECS_do_action(name, ...params){
12	+ if(ECS_hooks[name])
13	+ ECS_hooks[name].forEach(func => func(...params));
14	+ }

assets/js/ecs_ajax_pagination.js ADDED Viewed

	@@ -0,0 +1,80 @@


1	+ jQuery( document ).ready(function() {
2	+ jQuery( ".ecs-load-more-button" ).each(function() {
3	+ widget=jQuery(this);
4	+ settings = widget.attr("data-settings");
5	+ args = JSON.parse(settings);
6	+ widget.children( ".elementor-button" ).attr("href", "javascript:ECS_load_next_page('"+ args.widget_id +"');");
7	+ });
8	+ });
9	+ var canBeLoaded = true; // this param allows to initiate the AJAX call only if necessary
10	+
11	+
12	+ function ECS_load_next_page(id){
13	+
14	+ widget = jQuery(".elementor-element[data-id='" + id + "'] .ecs-posts");
15	+ settings = widget.attr("data-settings");
16	+ args = JSON.parse(settings);
17	+
18	+ posts = jQuery(".elementor-element[data-id='" + args.widget_id + "'] .ecs-posts");
19	+
20	+ if(args.load_method == 'loadmore'){
21	+ button_text = jQuery(".elementor-element[data-id='" + args.widget_id + "'] .ecs-load-more-button .elementor-button");// add this .elementor-element[data-id='" + args.widget_id + "']
22	+ button = jQuery(".elementor-element[data-id='" + args.widget_id + "'] .ecs-load-more-button");
23	+ attb = JSON.parse(button.attr("data-settings"));
24	+ }
25	+ if(args.load_method == 'lazyload'){
26	+ animation = jQuery(".elementor-element[data-id='" + args.widget_id + "'] .ecs-lazyload");
27	+ }
28	+ data = {
29	+ 'action': 'ecsload',
30	+ 'query': ecs_ajax_params.posts,
31	+ 'ecs_ajax_settings': settings,
32	+ };
33	+
34	+ jQuery.ajax({
35	+ url : ecs_ajax_params.ajaxurl, // AJAX handler
36	+ data : data,
37	+ type : 'POST',
38	+ beforeSend : function ( xhr ) {
39	+ if(args.load_method == 'loadmore') button_text.html(attb.loading_text); // change the button text, you can also add a preloader image
40	+ canBeLoaded = false;
41	+ },
42	+ success : function( data ){
43	+ if( data ) {
44	+ posts.append(data); // insert new posts
45	+ args.current_page++;
46	+ if(args.load_method == 'loadmore'){
47	+ button_text.html( attb.text );
48	+ button_text.blur();
49	+ }
50	+ newsettings = JSON.stringify(args);
51	+ widget.attr("data-settings",newsettings);
52	+
53	+
54	+ if(args.load_method == 'lazyload') {jQuery(animation).addClass("animation-hidden");}
55	+ //here you need to take care of linkable items and masonry !!!!!!!!!!!!!!!!!
56	+ ECS_do_action('ajax');
57	+
58	+ if ( args.current_page == args.max_num_pages ) {
59	+ if(args.load_method == 'loadmore') button.remove(); // if last page, remove the button
60	+ if(args.load_method == 'lazyload') animation.remove();
61	+ }
62	+ canBeLoaded = true;
63	+
64	+ if (typeof ECScheckInView !== 'undefined') ECScheckInView();
65	+ // you can also fire the "post-load" event here if you use a plugin that requires it
66	+ // $( document.body ).trigger( 'post-load' );
67	+ } else {
68	+ if(args.load_method == 'loadmore') {button.remove();} // if no data, remove the button as well
69	+ if(args.load_method == 'lazyload') {animation.remove();}
70	+ }
71	+ }
72	+ });
73	+
74	+ }
75	+
76	+
77	+ jQuery(function($){
78	+ $('.ecs-lazyload').addClass("animation-hidden");
79	+ $('.ecs-lazyload a').css("display", "none");
80	+ });

ele-custom-skin.php CHANGED Viewed

	@@ -1,7 +1,7 @@
1	<?php
2	/*
3	* Plugin Name: Ele Custom Skin
4	- * Version: 2.1.0
5	* Description: Elementor Custom Skin for Posts and Archive Posts. You can create a skin as you want.
6	* Plugin URI: https://dudaster.com
7	* Author: Dudaster.com
	@@ -18,12 +18,14 @@ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
18	define( 'ELECS_DIR', plugin_dir_path( __FILE__ ));
19	define( 'ELECS_NAME', plugin_basename( __FILE__ ));
20	define( 'ELECS_URL', plugin_dir_url( __FILE__ ));
21	- define ('ELECS_VER','2.1.0');
22
23	include_once ELECS_DIR.'includes/ecs-notices.php';
24	include_once ELECS_DIR.'includes/ecs-dependencies.php';
25	include_once ELECS_DIR.'includes/enqueue-styles.php';
26


27	//check if Elementor is installed
28
29	if (ecs_dependencies()) {


1	<?php
2	/*
3	* Plugin Name: Ele Custom Skin
4	+ * Version: 2.2.0
5	* Description: Elementor Custom Skin for Posts and Archive Posts. You can create a skin as you want.
6	* Plugin URI: https://dudaster.com
7	* Author: Dudaster.com

18	define( 'ELECS_DIR', plugin_dir_path( __FILE__ ));
19	define( 'ELECS_NAME', plugin_basename( __FILE__ ));
20	define( 'ELECS_URL', plugin_dir_url( __FILE__ ));
21	+ define ('ELECS_VER','2.2.0');
22
23	include_once ELECS_DIR.'includes/ecs-notices.php';
24	include_once ELECS_DIR.'includes/ecs-dependencies.php';
25	include_once ELECS_DIR.'includes/enqueue-styles.php';
26
27	+ include_once ELECS_DIR.'includes/ajax-pagination.php';
28	+
29	//check if Elementor is installed
30
31	if (ecs_dependencies()) {

includes/ajax-pagination.php ADDED Viewed

	@@ -0,0 +1,517 @@


1	+ <?php
2	+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3	+
4	+ class ECS_Ajax_Load {
5	+ private $post_id='';
6	+ private $current_page=1;
7	+ private $widget_id='';
8	+ private $theme_id='';
9	+ private $query=[];
10	+
11	+ public function __construct($args=[]) {//["post_id"=>2,"current_page"=>2,"max_num_pages"=>5,"widget_id"=>"65054a0"]
12	+
13	+ $this->init();
14	+
15	+ if (!isset($args['post_id']))//debug line comment it
16	+ if(!isset($_POST['ecs_ajax_settings'])) return;
17	+ else $args = json_decode( stripslashes( $_POST['ecs_ajax_settings'] ), true );
18	+
19	+ $this->post_id = $args['post_id'];
20	+ $this->current_page = $args['current_page'] + 1;
21	+ $this->widget_id = $args['widget_id'];
22	+ $this->theme_id = isset($args['theme_id']) ? $args['theme_id'] : $args['post_id'];
23	+ $this->query = json_decode( stripslashes( $_POST['query'] ), true );
24	+ if ($this->current_page > $args['max_num_pages']) return;
25	+ $this->init_ajax();
26	+
27	+ }
28	+
29	+ public function init() {
30	+ add_action( 'wp_enqueue_scripts', [$this,'enqueue_scripts'] ,99);
31	+ add_action( 'elementor/element/before_section_end', [$this,'post_pagination'],10,3);
32	+ add_action( 'elementor/element/after_section_end', [$this,'button_pagination_style'],10,3);
33	+ }
34	+
35	+ public function init_ajax(){
36	+ //add_action( 'wp_footer',[$this,'get_document_data'],99);// debug line comment it
37	+ add_action( 'wp_ajax_ecsload', [$this,'get_document_data']);
38	+ add_action( 'wp_ajax_nopriv_ecsload', [$this,'get_document_data']);
39	+ }
40	+
41	+ public function post_pagination($element, $section_id='', $args=''){
42	+
43	+ if ( ( 'archive-posts' === $element->get_name() \|\| 'posts' === $element->get_name() ) && 'section_pagination' === $section_id ) {
44	+
45	+ $element->remove_control( 'pagination_type' );
46	+
47	+ $element->add_control(
48	+ 'pagination_type',
49	+ [
50	+ 'label' => __( 'Pagination', 'ele-custom-skin' ),
51	+ 'type' => \Elementor\Controls_Manager::SELECT,
52	+ 'default' => '',
53	+ 'options' => [
54	+ '' => __( 'None', 'elementor-pro' ),
55	+ 'numbers' => __( 'Numbers', 'elementor-pro' ),
56	+ 'loadmore' => __( 'Load More (Custom Skin)', 'ele-custom-skin' ),
57	+ 'lazyload' => __( 'Infinite Load (Custom Skin Pro)', 'ele-custom-skin' ),
58	+ 'prev_next' => __( 'Previous/Next', 'elementor-pro' ),
59	+ 'numbers_and_prev_next' => __( 'Numbers', 'elementor-pro' ) . ' + ' . __( 'Previous/Next', 'elementor-pro' ),
60	+ ],
61	+ ]
62	+ );
63	+ /* lazyload stuff*/
64	+ $element->add_control(
65	+ 'lazyload_title',
66	+ [
67	+ 'label' => __( 'Infinite Load', 'ele-custom-skin' ),
68	+ 'type' => \Elementor\Controls_Manager::HEADING,
69	+ 'separator' => 'before',
70	+ 'condition' => [
71	+ 'pagination_type' => 'lazyload',
72	+ ],
73	+ ]
74	+ );
75	+
76	+ $element->add_control(
77	+ 'lazyload_animation',
78	+ [
79	+ 'label' => __( 'Loading Animation', 'ele-custom-skin' ),
80	+ 'type' => \Elementor\Controls_Manager::SELECT,
81	+ 'default' => 'default',
82	+ 'options' => ECS_Loading_Animation::get_lazy_load_animations_list(),
83	+ 'condition' => [
84	+ 'pagination_type' => 'lazyload',
85	+ ],
86	+ ]
87	+ );
88	+ $element->add_control(
89	+ 'lazyload_color',
90	+ [
91	+ 'label' => __( 'Animation Color', 'ele-custom-skin' ),
92	+ 'type' => \Elementor\Controls_Manager::COLOR,
93	+ 'selectors' => [
94	+ '{{WRAPPER}} .ecs-lazyload .ecs-ll-brcolor' => 'border-color: {{VALUE}};',
95	+ '{{WRAPPER}} .ecs-lazyload .ecs-ll-bgcolor' => 'background-color: {{VALUE}} !important;',
96	+ ],
97	+ 'condition' => [
98	+ 'pagination_type' => 'lazyload',
99	+ ],
100	+ ]
101	+ );
102	+
103	+ $element->add_control(
104	+ 'lazyload_spacing',
105	+ [
106	+ 'label' => __( 'Animation Spacing', 'ele-custom-skin' ),
107	+ 'type' => \Elementor\Controls_Manager::SLIDER,
108	+ 'range' => [
109	+ 'px' => [
110	+ 'max' => 250,
111	+ ],
112	+ ],
113	+ 'default' =>[
114	+ 'unit' => 'px',
115	+ 'size' => '20',
116	+ ],
117	+ 'selectors' => [
118	+ '{{WRAPPER}} .ecs-lazyload' => 'margin-top: {{SIZE}}{{UNIT}};',
119	+ ],
120	+ 'condition' => [
121	+ 'pagination_type' => 'lazyload',
122	+ ],
123	+ ]
124	+ );
125	+ $element->add_control(
126	+ 'lazyload_size',
127	+ [
128	+ 'label' => __( 'Animation Size', 'ele-custom-skin' ),
129	+ 'type' => \Elementor\Controls_Manager::SLIDER,
130	+ 'range' => [
131	+ 'px' => [
132	+ 'max' => 50,
133	+ ],
134	+ ],
135	+ 'selectors' => [
136	+ '{{WRAPPER}} .ecs-lazyload .ecs-lazy-load-animation' => 'font-size: {{SIZE}}{{UNIT}};',
137	+ ],
138	+ 'condition' => [
139	+ 'pagination_type' => 'lazyload',
140	+ ],
141	+ ]
142	+ );
143	+
144	+
145	+ /* load more button stuff */
146	+
147	+ $element->add_control(
148	+ 'loadmore_title',
149	+ [
150	+ 'label' => __( 'Load More Button', 'ele-custom-skin' ),
151	+ 'type' => \Elementor\Controls_Manager::HEADING,
152	+ 'separator' => 'before',
153	+ 'condition' => [
154	+ 'pagination_type' => 'loadmore',
155	+ ],
156	+ ]
157	+ );
158	+
159	+ $element->add_control(
160	+ 'loadmore_text',
161	+ [
162	+ 'label' => __( 'Text', 'ele-custom-skin' ),
163	+ 'type' => \Elementor\Controls_Manager::TEXT,
164	+ 'default' => __( 'Load More', 'elementor' ),
165	+ 'placeholder' => __( 'Load More', 'elementor' ),
166	+ 'condition' => [
167	+ 'pagination_type' => 'loadmore',
168	+ ],
169	+ ]
170	+ );
171	+
172	+ $element->add_control(
173	+ 'loadmore_loading_text',
174	+ [
175	+ 'label' => __( 'Loading Text', 'ele-custom-skin' ),
176	+ 'type' => \Elementor\Controls_Manager::TEXT,
177	+ 'default' => __( 'Loading...', 'elementor' ),
178	+ 'placeholder' => __( 'Loading...', 'elementor' ),
179	+ 'condition' => [
180	+ 'pagination_type' => 'loadmore',
181	+ ],
182	+ ]
183	+ );
184	+
185	+ $element->add_control(
186	+ 'loadmore_spacing',
187	+ [
188	+ 'label' => __( 'Button Spacing', 'ele-custom-skin' ),
189	+ 'type' => \Elementor\Controls_Manager::SLIDER,
190	+ 'range' => [
191	+ 'px' => [
192	+ 'max' => 250,
193	+ ],
194	+ ],
195	+ 'default' =>[
196	+ 'unit' => 'px',
197	+ 'size' => '20',
198	+ ],
199	+ 'selectors' => [
200	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button' => 'margin-top: {{SIZE}}{{UNIT}};',
201	+ ],
202	+ 'condition' => [
203	+ 'pagination_type' => 'loadmore',
204	+ ],
205	+ ]
206	+ );
207	+
208	+
209	+ }
210	+ }
211	+
212	+ public function button_pagination_style($element, $section_id='', $args=''){
213	+
214	+ if ( ( 'archive-posts' === $element->get_name() \|\| 'posts' === $element->get_name() ) && 'section_pagination_style' === $section_id ) {
215	+
216	+ $element->start_controls_section(
217	+ 'loadmore_section_style',
218	+ [
219	+ 'label' => __( 'Load More Button', 'ele-custom-skin' ),
220	+ 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
221	+ 'condition' => [
222	+ 'pagination_type' => 'loadmore',
223	+ ],
224	+ ]
225	+ );
226	+
227	+ $element->add_group_control(
228	+ \Elementor\Group_Control_Typography::get_type(),
229	+ [
230	+ 'name' => 'loadmore_typography',
231	+ 'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_4,
232	+ 'selector' => '{{WRAPPER}} .ecs-load-more-button .elementor-button',
233	+ ]
234	+ );
235	+
236	+ $element->add_group_control(
237	+ \Elementor\Group_Control_Text_Shadow::get_type(),
238	+ [
239	+ 'name' => 'loadmore_text_shadow',
240	+ 'selector' => '{{WRAPPER}} .ecs-load-more-button .elementor-button',
241	+ ]
242	+ );
243	+
244	+ $element->start_controls_tabs( 'tabs_button_style' );
245	+
246	+ $element->start_controls_tab(
247	+ 'loadmore_tab_button_normal',
248	+ [
249	+ 'label' => __( 'Normal', 'ele-custom-skin' ),
250	+ ]
251	+ );
252	+
253	+ $element->add_control(
254	+ 'loadmore_button_text_color',
255	+ [
256	+ 'label' => __( 'Text Color', 'ele-custom-skin' ),
257	+ 'type' => \Elementor\Controls_Manager::COLOR,
258	+ 'default' => '',
259	+ 'selectors' => [
260	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button' => 'fill: {{VALUE}}; color: {{VALUE}};',
261	+ ],
262	+ ]
263	+ );
264	+
265	+ $element->add_control(
266	+ 'loadmore_background_color',
267	+ [
268	+ 'label' => __( 'Background Color', 'ele-custom-skin' ),
269	+ 'type' => \Elementor\Controls_Manager::COLOR,
270	+ 'scheme' => [
271	+ 'type' => \Elementor\Core\Schemes\Color::get_type(),
272	+ 'value' => \Elementor\Core\Schemes\Color::COLOR_4,
273	+ ],
274	+ 'selectors' => [
275	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button' => 'background-color: {{VALUE}};',
276	+ ],
277	+ ]
278	+ );
279	+
280	+ $element->end_controls_tab();
281	+
282	+ $element->start_controls_tab(
283	+ 'loadmore_tab_button_hover',
284	+ [
285	+ 'label' => __( 'Hover', 'ele-custom-skin' ),
286	+ ]
287	+ );
288	+
289	+ $element->add_control(
290	+ 'loadmore_hover_color',
291	+ [
292	+ 'label' => __( 'Text Color', 'ele-custom-skin' ),
293	+ 'type' => \Elementor\Controls_Manager::COLOR,
294	+ 'selectors' => [
295	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button:hover, {{WRAPPER}} .ecs-load-more-button .elementor-button:focus' => 'color: {{VALUE}};',
296	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button:hover svg, {{WRAPPER}} .ecs-load-more-button .elementor-button:focus svg' => 'fill: {{VALUE}};',
297	+ ],
298	+ ]
299	+ );
300	+
301	+ $element->add_control(
302	+ 'loadmore_button_background_hover_color',
303	+ [
304	+ 'label' => __( 'Background Color', 'ele-custom-skin' ),
305	+ 'type' => \Elementor\Controls_Manager::COLOR,
306	+ 'selectors' => [
307	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'background-color: {{VALUE}};',
308	+ ],
309	+ ]
310	+ );
311	+
312	+ $element->add_control(
313	+ 'loadmore_button_hover_border_color',
314	+ [
315	+ 'label' => __( 'Border Color', 'ele-custom-skin' ),
316	+ 'type' => \Elementor\Controls_Manager::COLOR,
317	+ 'condition' => [
318	+ 'border_border!' => '',
319	+ ],
320	+ 'selectors' => [
321	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'border-color: {{VALUE}};',
322	+ ],
323	+ ]
324	+ );
325	+
326	+ $element->add_control(
327	+ 'loadmore_hover_animation',
328	+ [
329	+ 'label' => __( 'Hover Animation', 'ele-custom-skin' ),
330	+ 'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
331	+ ]
332	+ );
333	+
334	+ $element->end_controls_tab();
335	+
336	+ $element->end_controls_tabs();
337	+
338	+ $element->add_group_control(
339	+ \Elementor\Group_Control_Border::get_type(),
340	+ [
341	+ 'name' => 'loadmore_border',
342	+ 'selector' => '{{WRAPPER}} .elementor-button',
343	+ 'separator' => 'before',
344	+ ]
345	+ );
346	+
347	+ $element->add_control(
348	+ 'loadmore_border_radius',
349	+ [
350	+ 'label' => __( 'Border Radius', 'ele-custom-skin' ),
351	+ 'type' => \Elementor\Controls_Manager::DIMENSIONS,
352	+ 'size_units' => [ 'px', '%' ],
353	+ 'selectors' => [
354	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
355	+ ],
356	+ ]
357	+ );
358	+
359	+ $element->add_group_control(
360	+ \Elementor\Group_Control_Box_Shadow::get_type(),
361	+ [
362	+ 'name' => 'loadmore_button_box_shadow',
363	+ 'selector' => '{{WRAPPER}} .ecs-load-more-button .elementor-button',
364	+ ]
365	+ );
366	+
367	+ $element->add_responsive_control(
368	+ 'loadmore_text_padding',
369	+ [
370	+ 'label' => __( 'Padding', 'ele-custom-skin' ),
371	+ 'type' => \Elementor\Controls_Manager::DIMENSIONS,
372	+ 'size_units' => [ 'px', 'em', '%' ],
373	+ 'selectors' => [
374	+ '{{WRAPPER}} .ecs-load-more-button .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
375	+ ],
376	+ 'separator' => 'before',
377	+ ]
378	+ );
379	+ $element->end_controls_section();
380	+ }
381	+ }
382	+
383	+ private function get_element_data($id,$data){
384	+
385	+ foreach($data as $element){
386	+ //echo "[".$element['id']."] == (".$id.")";
387	+ if (isset($element['id']) && $element['id'] == $id) {
388	+ return $element;
389	+ } else {
390	+ //echo $element['id']." - ".count($element['elements'])." > ";//print_r($element['elements']);
391	+ if(count($element['elements'])) {
392	+ $element_children=$this->get_element_data($id,$element['elements']);
393	+ if ($element_children) return $element_children ;
394	+ }
395	+ //echo"am ajuns aici?";
396	+ }
397	+ }
398	+ return false;
399	+ }
400	+
401	+ public function get_document_data(){
402	+
403	+ global $wp_query;
404	+
405	+
406	+ $id = $this->widget_id;
407	+
408	+ $post_id = $this->post_id;
409	+ $theme_id = $this->theme_id;
410	+ $old_query = $wp_query->query_vars;
411	+
412	+
413	+ $this->query['paged'] = $this->current_page; // we need current(next) page to be loaded
414	+ $this->query['post_status'] = 'publish';
415	+
416	+ $wp_query = new \WP_Query($this->query);
417	+ wp_reset_postdata();//this fixes some issues with some get_the_ID users.
418	+ if (is_archive()){
419	+ $post_id = $theme_id;
420	+ }
421	+
422	+ $document = \Elementor\Plugin::$instance->documents->get_doc_for_frontend( $post_id );
423	+ $theme_document = \Elementor\Plugin::$instance->documents->get_doc_for_frontend( $theme_id );
424	+
425	+ $data[] = $this->get_element_data($id,$theme_document->get_elements_data());
426	+
427	+ // Change the current post, so widgets can use `documents->get_current`.
428	+ \Elementor\Plugin::$instance->documents->switch_to_document( $document );
429	+
430	+ ob_start();
431	+ $document->print_elements_with_wrapper( $data );
432	+ $content = ob_get_clean();
433	+ echo $this->clean_response($content,$id);
434	+
435	+ \Elementor\Plugin::$instance->documents->restore_document();
436	+ $wp_query->query_vars = $query_vars;
437	+
438	+ die;
439	+ }
440	+
441	+ private function clean_response($html,$id){
442	+ $content = "";
443	+ $dom = new DOMDocument();
444	+ libxml_use_internal_errors(true);
445	+ $dom->loadHTML($html);
446	+ $xpath = new DOMXPath($dom);
447	+ $childs = $xpath->query('//div[@data-id="'.$id.'"]/div[@class="elementor-widget-container"]/div/* \| //div[@data-elementor-type="custom_grid"]');
448	+ // $childs = $xpath->query('//div[@data-elementor-type="custom_grid"]');
449	+ //return $dom->saveHTML($childs->item(0));
450	+ foreach($childs as $child){
451	+ $content .= $dom->saveHTML($child);
452	+ }
453	+ //$div = $div->item(0);
454	+ return $content;
455	+ }
456	+
457	+ public function enqueue_scripts(){
458	+
459	+ global $wp_query;
460	+
461	+ wp_register_script('ecs_ajax_load', plugin_dir_url(__DIR__) . 'assets/js/ecs_ajax_pagination.js',array(),ELECS_VER);
462	+
463	+ wp_localize_script( 'ecs_ajax_load', 'ecs_ajax_params', array(
464	+ 'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
465	+ 'posts' => json_encode( $wp_query->query_vars ),
466	+ ) );
467	+
468	+ wp_enqueue_script( 'ecs_ajax_load' );
469	+ }
470	+
471	+ }
472	+
473	+
474	+ class ECS_Loading_Animation {
475	+ private static function animations(){
476	+ return [
477	+ 'default'=>[
478	+ 'label' => __( 'Default', 'ele-custom-skin' ),
479	+ 'html' => '<div class="lds-ellipsis ecs-lazy-load-animation"><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div></div>',
480	+ ],
481	+ 'progress_bar'=>[
482	+ 'label' => __( 'Progress Bar', 'ele-custom-skin' ),
483	+ 'html' => '<div class="barload-wrapper ecs-lazy-load-animation"><div class="barload-border ecs-ll-brcolor"><div class="barload-whitespace"><div class="barload-line ecs-ll-bgcolor"></div></div></div></div>',
484	+ ],
485	+ 'running_dots'=>[
486	+ 'label' => __( 'Running Dots', 'ele-custom-skin' ),
487	+ 'html' => '<div class="ballsload-container ecs-lazy-load-animation"><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div><div class="ecs-ll-bgcolor"></div></div>',
488	+ ],
489	+ 'ball_slide'=>[
490	+ 'label' => __( 'Ball Slide', 'ele-custom-skin' ),
491	+ 'html' => '<div id="movingBallG" class="ecs-lazy-load-animation"><div class="movingBallLineG ecs-ll-bgcolor"></div><div id="movingBallG_1" class="movingBallG ecs-ll-bgcolor"></div></div>',
492	+ ],
493	+
494	+ ];
495	+ }
496	+
497	+
498	+ public static function get_lazy_load_animations_html($animation){
499	+ $arrs = self::animations();
500	+ return $arrs[$animation]['html'];
501	+ }
502	+
503	+ public static function get_lazy_load_animations_list(){
504	+ $arrs = self::animations();
505	+ foreach ( $arrs as $key => $arr ) {
506	+ $options[ $key ] = $arr['label'];
507	+ }
508	+ return $options;
509	+ }
510	+
511	+ }
512	+
513	+
514	+
515	+ new ECS_Ajax_Load();
516	+
517	+

includes/dynamic-style.php CHANGED Viewed

	@@ -16,6 +16,14 @@ function ECS_parse_selector($selector,$wrapper,$value){
16	$selector = str_replace(["{{VALUE}}","{{URL}}","{{UNIT}}"],$clean_value,$selector);
17	return $selector;
18	}








19	// dynamic style for elements
20	function ECS_set_dynamic_style( \Elementor\Element_Base $element ) {
21	global $ecs_render_loop;
	@@ -28,8 +36,8 @@ function ECS_set_dynamic_style( \Elementor\Element_Base $element ) {
28
29	$all_controls = isset($all_controls) ? $all_controls : []; $dynamic_settings = isset($dynamic_settings) ? $dynamic_settings : [];
30	$controls = array_intersect_key( $all_controls, $dynamic_settings );
31	-
32	- $settings = @$element->parse_dynamic_settings( $dynamic_settings, $controls); // @ <- dirty fix for that fugly controls-stack.php Illegal string offset 'url' error
33
34	$ECS_css="";
35	$element_wrapper="#post-{$PostID} .elementor-{$LoopID} .elementor-element.elementor-element-{$ElementID}";


16	$selector = str_replace(["{{VALUE}}","{{URL}}","{{UNIT}}"],$clean_value,$selector);
17	return $selector;
18	}
19	+ function ECS_recursive_unset(&$array, $unwanted_key) {
20	+ unset($array[$unwanted_key]);
21	+ foreach ($array as &$value) {
22	+ if (is_array($value)) {
23	+ recursive_unset($value, $unwanted_key);
24	+ }
25	+ }
26	+ }
27	// dynamic style for elements
28	function ECS_set_dynamic_style( \Elementor\Element_Base $element ) {
29	global $ecs_render_loop;

36
37	$all_controls = isset($all_controls) ? $all_controls : []; $dynamic_settings = isset($dynamic_settings) ? $dynamic_settings : [];
38	$controls = array_intersect_key( $all_controls, $dynamic_settings );
39	+ ECS_recursive_unset($dynamic_settings, 'link');//we don't need the link options
40	+ $settings = $element->parse_dynamic_settings( $dynamic_settings, $controls); // @ <- dirty fix for that fugly controls-stack.php Illegal string offset 'url' error
41
42	$ECS_css="";
43	$element_wrapper="#post-{$PostID} .elementor-{$LoopID} .elementor-element.elementor-element-{$ElementID}";

includes/enqueue-styles.php CHANGED Viewed

	@@ -26,7 +26,8 @@ class ECS_Enqueue_Style {
26	public function frontend_styles() {
27	//adding some css fixes
28
29	- wp_enqueue_style('ecs-styles', plugin_dir_url(__DIR__) . 'assets/css/ecs-style.css');

30
31	$styles=$this->get_skin_template();
32	$upload_dir = wp_upload_dir();


26	public function frontend_styles() {
27	//adding some css fixes
28
29	+ wp_enqueue_style('ecs-styles', plugin_dir_url(__DIR__) . 'assets/css/ecs-style.css',array(),ELECS_VER);
30	+ wp_enqueue_script('ecs-script', plugin_dir_url(__DIR__) . 'assets/js/ecs.js',array(),ELECS_VER);
31
32	$styles=$this->get_skin_template();
33	$upload_dir = wp_upload_dir();

readme.txt CHANGED Viewed

	@@ -4,7 +4,7 @@ Tags: page-builder, elementor, loop, archive list, post widget, skin, custom, po
4	Donate link: https://www.paypal.me/dudaster
5	Requires at least: 5.0
6	Tested up to: 5.4.2
7	- Stable tag: 2.1.0
8	License: GPLv2 or later
9	License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
	@@ -16,6 +16,10 @@ This plugin adds new skin to Elementor Page Builder Posts and Posts Archive widg
16
17	You can design a loop item just like a single template and it would be used as a skin so you can be able to create a post grid the way you like.
18




19	New in version 2.0.0
20
21	The biggest newest feature is the Custom Grid. No more boring grid with fixed number of columns.
	@@ -66,8 +70,13 @@ Add to your template a Post or Post Archive widget and from Skins select Custom
66
67	== Changelog ==
68





69	= 2.1.0 =
70	- * Solved Error issue with Dynamic Button Link.
71	* Solving Astra Theme Issues with Post Items Padding and bordering
72	* Post Title made visible again inside Post Items
73	* Solved problem with Forms not being sent.


4	Donate link: https://www.paypal.me/dudaster
5	Requires at least: 5.0
6	Tested up to: 5.4.2
7	+ Stable tag: 2.2.0
8	License: GPLv2 or later
9	License URI: http://www.gnu.org/licenses/gpl-2.0.html
10

16
17	You can design a loop item just like a single template and it would be used as a skin so you can be able to create a post grid the way you like.
18
19	+ New in version 2.2.0
20	+
21	+ Go to Pagination and you'll see "Load moare" pagination. It will load the posts trough AJAX. No more boring pagination.
22	+
23	New in version 2.0.0
24
25	The biggest newest feature is the Custom Grid. No more boring grid with fixed number of columns.

70
71	== Changelog ==
72
73	+ = 2.2.0 =
74	+ * NEW!!! Ajax pagination. Now you can go to Pagination Section in Posts / Archive Posts Widgets and select "Load more" pagination.
75	+ * Solved issue with multiple Custom Grid in one page.
76	+ * Solving Astra Theme Issues with Post Items width shrinkage.
77	+
78	= 2.1.0 =
79	+ * Solved Error issue with Dynamic Button Link.
80	* Solving Astra Theme Issues with Post Items Padding and bordering
81	* Post Title made visible again inside Post Items
82	* Solved problem with Forms not being sent.

skins/skin-custom.php CHANGED Viewed

@@ -139,9 +139,9 @@ class Skin_Posts_ECS extends Skin_Base {
             		$this->remove_control( 'read_more_text' );
             		$this->remove_control( 'show_excerpt' );
             		$this->remove_control( 'excerpt_length' );
+            	}
-            -
             	private function get_post_id(){
             		return $this->pid;
+            	}
@@ -237,6 +237,7 @@ class Skin_Posts_ECS extends Skin_Base {
                   echo $this->grid[$i];
                   echo "<!-- end part [".$i."] finishing -->";
+                }
+              }
@@ -335,38 +336,54 @@ class Skin_Posts_ECS extends Skin_Base {
+            	}
               	protected function render_loop_header() {
-            -
-            -
                $parent_settings = $this->parent->get_settings();
-            -
                $parent_settings[$this->get_id().'_post_slider'] = isset($parent_settings[$this->get_id().'_post_slider'])? $parent_settings[$this->get_id().'_post_slider'] : "";
-            -
-            -
                if($parent_settings[$this->get_id().'_post_slider'] == "yes") {
-            -
                  echo '<div class="swiper-container">';
-            -
                  $this->grid_settings['allow'] = false;
-            -
                } else {// we don't use custom grid if slider is activated
-            -
                  if($parent_settings[$this->get_id().'_use_custom_grid'] == "yes" && $parent_settings[$this->get_id().'_custom_grid'] ){
-            -
                    $this->set_custom_grid($parent_settings[$this->get_id().'_custom_grid']);
-            -
                    $this->grid_settings['allow'] = true;
-            -
                  } else $this->grid_settings['allow'] = false;
-            -
                }
-            -
-            -
                 $this->parent->add_render_attribute( 'container', [
-            -
            			'class' => [
-            -
            				'elementor-posts-container',
-            -
            				'elementor-posts',
-            -
                     $parent_settings[$this->get_id().'_post_slider'] == "yes" ? 'swiper-wrapper' : "",
-            -
                     $this->grid_settings['allow'] ? "ecs-custom-grid" : '',
-            -
                    $parent_settings[$this->get_id().'_post_slider'] != "yes" && !$this->grid_settings['allow'] ? 'elementor-grid':'',
-            -
            				$this->get_container_class(),
-            -
            			],
-            -
            		] );
-            -
-            -
-            -
-            -
            		?>
-            -
            		<div <?php echo $this->parent->get_render_attribute_string( 'container' ); ?>>
-            -
            		<?php
+            	}
             	protected function render_loop_footer() {
@@ -443,6 +460,56 @@ class Skin_Posts_ECS extends Skin_Base {
             			<?php echo implode( PHP_EOL, $links ); ?>
             		</nav>
             		<?php
+            	}
               private function slider_elements(){


139	$this->remove_control( 'read_more_text' );
140	$this->remove_control( 'show_excerpt' );
141	$this->remove_control( 'excerpt_length' );
142	+ $this->remove_control( 'open_new_tab' );
143
144	}

145	private function get_post_id(){
146	return $this->pid;
147	}

237	echo $this->grid[$i];
238	echo "<!-- end part [".$i."] finishing -->";
239	}
240	+ $this->grid_settings['current'] = 0;
241
242	}
243

336
337	}
338
339	+ protected function ajax_pagination(){
340	+ $settings = $this->parent->get_settings();
341	+ $theme_document = \Elementor\Plugin::$instance->documents->get_current();
342	+ $page_limit = $settings['pagination_page_limit'] ? $settings['pagination_page_limit'] : 999;
343	+ $max_pages = $this->parent->get_query()->max_num_pages;
344	+ $max_num_pages = $page_limit < $max_pages ? $page_limit : $max_pages;
345	+ $args = [ 'current_page' => $this->parent->get_current_page(),
346	+ 'max_num_pages' => $max_num_pages,
347	+ 'load_method' => $settings['pagination_type'],//or infinitescroll for pro
348	+ 'widget_id' => $this->parent->get_id(),
349	+ 'post_id' => get_the_id(),
350	+ 'theme_id' => $theme_document->get_main_id(),
351	+
352	+ ];
353	+
354	+ $pagination=json_encode($args);
355	+ return $pagination;
356	+ }
357
358	protected function render_loop_header() {
359	+ $parent_settings = $this->parent->get_settings();
360	+ $parent_settings[$this->get_id().'_post_slider'] = isset($parent_settings[$this->get_id().'_post_slider'])? $parent_settings[$this->get_id().'_post_slider'] : "";
361	+
362	+ if($parent_settings[$this->get_id().'_post_slider'] == "yes") {
363	+ echo '<div class="swiper-container">';
364	+ $this->grid_settings['allow'] = false;
365	+ } else {// we don't use custom grid if slider is activated
366	+ if($parent_settings[$this->get_id().'_use_custom_grid'] == "yes" && $parent_settings[$this->get_id().'_custom_grid'] ){
367	+ $this->set_custom_grid($parent_settings[$this->get_id().'_custom_grid']);
368	+ $this->grid_settings['allow'] = true;
369	+ } else $this->grid_settings['allow'] = false;
370	+ }
371	+ $this->parent->add_render_attribute( 'container', [
372	+ 'class' => [
373	+ 'ecs-posts',
374	+ 'elementor-posts-container',
375	+ 'elementor-posts',
376	+ $parent_settings[$this->get_id().'_post_slider'] == "yes" ? 'swiper-wrapper' : "",
377	+ $this->grid_settings['allow'] ? "ecs-custom-grid" : '',
378	+ $parent_settings[$this->get_id().'_post_slider'] != "yes" && !$this->grid_settings['allow'] ? 'elementor-grid':'',
379	+ $this->get_container_class(),
380	+ ],
381	+ 'data-settings' => [htmlentities($this->ajax_pagination(), ENT_QUOTES)],
382	+ ] );
383	+
384	+ ?>
385	+ <div <?php echo $this->parent->get_render_attribute_string( 'container' ); ?>>
386	+ <?php


387	}
388
389	protected function render_loop_footer() {

460	<?php echo implode( PHP_EOL, $links ); ?>
461	</nav>
462	<?php
463	+
464	+ if ( 'loadmore' === $parent_settings['pagination_type'] ) {
465	+ $this->render_loadmore_button();
466	+ }
467	+ if ( 'lazyload' === $parent_settings['pagination_type'] ) {
468	+ $this->render_lazyload_animation();
469	+ }
470	+
471	+ }
472	+
473	+ protected function render_lazyload_animation() {
474	+ $settings = $this->parent->get_settings();
475	+ $next_page = $this->parent->get_current_page()+1;
476	+ $next_page_link = trailingslashit( get_permalink() ) . '?page='.$next_page;
477	+ $animation = \ECS_Loading_Animation::get_lazy_load_animations_html($settings['lazyload_animation']);
478	+ $target= $this->parent->get_id();
479	+
480	+ ?>
481	+ <nav class="ecs-lazyload elementor-pagination" data-targetid="<?php echo $target; ?>">
482	+ <?php echo $animation; ?>
483	+ <a href="<?php echo $next_page_link; ?>" >
484	+ >
485	+ </a>
486	+ </nav>
487	+ <?php
488	+ }
489	+ protected function render_loadmore_button() {
490	+ $settings = $this->parent->get_settings();
491	+ $next_page = $this->parent->get_current_page()+1;
492	+ $next_page_link = trailingslashit( get_permalink() ) . '?page='.$next_page;
493	+ $class='';
494	+ $args = [ 'loading_text' => $settings['loadmore_loading_text'],
495	+ 'text' => $settings['loadmore_text'],//or infinitescroll for pro
496	+ 'widget_id' => $this->parent->get_id(),
497	+
498	+ ];
499	+
500	+ $data=htmlentities(json_encode($args), ENT_QUOTES);
501	+
502	+ if ( $settings['loadmore_hover_animation'] ) {
503	+ $class = 'elementor-animation-' . $settings['loadmore_hover_animation'];
504	+ }
505	+
506	+ ?>
507	+ <nav class="elementor-button-wrapper elementor-pagination ecs-load-more-button" data-settings="<?php echo $data; ?>">
508	+ <a href="<?php echo $next_page_link; ?>" class="elementor-button-link elementor-button <?php echo $class; ?>" role="button">
509	+ <span><?php echo $settings['loadmore_text']; ?></span>
510	+ </a>
511	+ </nav>
512	+ <?php
513	}
514
515	private function slider_elements(){