PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.5.0
Easy Elements for Elementor – Addons & Website Templates v1.5.0
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / includes / Template_Library / assets / js / easy-template-library.js

easy-template-library.js in Easy Elements for Elementor – Addons & Website Templates 1.5.0, at includes/Template_Library/assets/js/easy-template-library.js

568 lines 29.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 (function($) {
2
3 window.rtElementsTemplatesManager.cache = {};
4 (rtElementsTemplatesLibrary = {
5 getTemplatesModal: function () {
6 var e = this;
7 return (
8 e.modal ||
9 ((e.modal = elementor.dialogsManager.createWidget("lightbox", {
10 id: "rtElementsTemplatesLibrary",
11 message:
12 `<div class="dialog-content dialog-lightbox-content">
13
14 <div id="elementor-template-library-templates">
15 <div id="elementor-template-library-banner-ad">
16 <img src="${rtElementsTemplatesManager.bannerAdUrl}" alt="RtElements">
17 </div>
18 <div id="rt-elements-preloader">
19 <div class="rt-elements-preloader-inner">
20 <div class="rt-elements-preloader-rt-shape"><img src="${rtElementsTemplatesManager.logoUrl}" alt="RtElements"></div>
21 </div>
22 </div>
23 <div id="elementor-template-library-toolbar">
24 <div id="elementor-template-library-filter-toolbar-remote" class="elementor-template-library-filter-toolbar">
25 <div id="elementor-template-library-cat-filter">
26 <select id="rt-elements-template-library-filter-cat" class="elementor-template-library-cat-filter-select">
27 <option value="">All</option>
28 </select>
29 </div>
30 </div>
31 <div id="elementor-template-library-filter-text-wrapper" class="rt-elements-template-library-search-box">
32 <label for="elementor-template-library-filter-text" class="elementor-screen-only">Search Templates:</label>
33 <input id="elementor-template-library-filter-text" placeholder="Search">
34 <i class="eicon-search"></i>
35 </div>
36 </div>
37 <div id="elementor-template-library-templates-container-wrapper">
38 <div id="elementor-template-library-templates-container" class="rt-elements-template-library-templates-container"></div>
39 </div>
40 <div id="elementor-template-library-templates-preview" class="rt-elements-template-library-templates-preview"></div>
41 <div id="rt-elements-preloader-small">
42 <div class="rt-elements-preloader-inner">
43 <div class="rt-elements-preloader-rt-shape"><img src="${rtElementsTemplatesManager.logoUrl}" alt="RtElements"></div>
44 </div>
45 </div>
46 </div>
47 </div>`,
48 onShow: function () {
49
50 e.modal.getElements("widget").addClass("elementor-templates-modal");
51 e.modal.getElements("header").html('<div class="elementor-templates-modal__header"><div class="elementor-templates-modal__header__logo-area rt-elements-layout-library--logo-area"><div class="elementor-templates-modal__header__logo"><span class="elementor-templates-modal__header__logo__icon-wrapper e-logo-wrapper"><img src="'+rtElementsTemplatesManager.headerLogoUrl+'" alt="RtElements"></span><span class="elementor-templates-modal__header__logo__title">Easy Elements</span></div></div><div class="elementor-templates-modal__header__menu-area" data-disabled="false"><div id="elementor-template-library-header-menu"><div class="elementor-template-library-menu-item" data-tab="templates">Templates</div><div class="elementor-template-library-menu-item " data-tab="pages">Pages</div><div class="elementor-template-library-menu-item elementor-active" data-tab="sections">Sections</div></div></div><div class="elementor-templates-modal__header__items-area"><div class="elementor-templates-modal__header__close elementor-templates-modal__header__close--normal elementor-templates-modal__header__item"><i class="eicon-close" aria-hidden="true" title="Close"></i><span class="elementor-screen-only">Close</span></div></div></div>')
52
53 let activeTab = $('#rtElementsTemplatesLibrary .elementor-template-library-menu-item.elementor-active').data('tab'),
54 templatesContainer = $('#rtElementsTemplatesLibrary #elementor-template-library-templates-container'),
55 page = 1;
56
57 let catFilterDiv = $('#elementor-template-library-cat-filter');
58 $('#elementor-template-library-cat-filter').hide();
59
60 if (activeTab === 'sections') {
61 $('#elementor-template-library-cat-filter').show();
62 }
63
64
65 rtElementsTemplatesManager.templatesContainer = templatesContainer;
66
67 rtElementsTemplatesLibrary.getTemplates(activeTab, page)
68 .then((templates) => {
69 if (templates) {
70
71 window.rtElementsTemplatesManager.templates = templates;
72 rtElementsTemplatesLibrary.pushTemplatesHtml(templates, activeTab, 'html');
73
74 if(activeTab === 'sections'){
75
76 let optsEl = '<option value="">All</option>';
77 const categorySet = new Set();
78
79 templates.layouts.forEach(template => {
80 if (template.categories) {
81 Object.values(template.categories).forEach(cat => {
82 if (!categorySet.has(cat.slug)) {
83 categorySet.add(cat.slug);
84 optsEl += `<option value="${cat.slug}">${cat.title}</option>`;
85 }
86 });
87 }
88 });
89
90 $('#rt-elements-template-library-filter-cat').html(optsEl);
91 }
92
93 rtElementsTemplatesLibrary.loadMoreTemplates();
94 } else {
95 console.error('No templates returned');
96 }
97 })
98 .catch((error) => {
99 console.error('Error in template fetching:', error);
100 });
101
102 },
103 onHide: function () {
104 "currentRequest" in window.rtElementsTemplatesLibraryModal && window.rtElementsTemplatesLibraryModal.currentRequest.reject();
105 },
106 })),
107 (window.rtElementsTemplatesLibraryModal = e.modal)),
108 this.modal
109 );
110 },
111 switchTab: function () {
112
113 rtElementsTemplatesLibrary.showPreloader();
114
115 let activeTab = $(this).data('tab'),
116 templatesContainer = rtElementsTemplatesManager.templatesContainer;
117
118 rtElementsTemplatesManager.activeTab = activeTab;
119 rtElementsTemplatesLibrary.showHeaderLogo();
120 rtElementsTemplatesLibrary.removeBackToTemplatesButton();
121 rtElementsTemplatesLibrary.hidePreview();
122
123 $('.rt-elements-template-library-search-box input').val('');
124
125 $('#rtElementsTemplatesLibrary .elementor-template-library-menu-item').removeClass('elementor-active');
126 $(this).addClass('elementor-active');
127
128 templatesContainer = templatesContainer.html('');
129
130 rtElementsTemplatesLibrary.getTemplates(activeTab, 1)
131 .then((templates) => {
132 if (templates) {
133
134 rtElementsTemplatesLibrary.pushTemplatesHtml( templates, activeTab, 'html' );
135 } else {
136 console.error('No templates returned');
137 }
138 })
139 .catch((error) => {
140 console.error('Error in template fetching:', error);
141 });
142
143 },
144 pushTemplatesHtmlBySearch: function () {
145
146 let searchKey = $('.rt-elements-template-library-search-box input').val(),
147 activeTab = rtElementsTemplatesManager.activeTab,
148 page = 1;
149
150 rtElementsTemplatesManager.templatesContainer.html('');
151
152 rtElementsTemplatesLibrary.getTemplates(activeTab, page, '', '', searchKey)
153 .then((templates) => {
154 if (templates) {
155
156 // save to window objects rtElementsTemplatesManager
157 window.rtElementsTemplatesManager.templates = templates;
158 rtElementsTemplatesLibrary.pushTemplatesHtml(templates, activeTab, 'html');
159
160 } else {
161 console.error('No templates returned');
162 }
163 })
164 .catch((error) => {
165 console.error('Error in template fetching:', error);
166 });
167 },
168 pushTemplatesHtmlByGroup: function (page = 1) {
169 let group = $(this).data('template-group');
170
171 rtElementsTemplatesManager.templatesContainer.html('');
172 rtElementsTemplatesLibrary.hideHeaderLogo();
173 rtElementsTemplatesLibrary.addBackButton();
174
175 rtElementsTemplatesLibrary.getTemplates('pages', page, '', [group] )
176 .then((templates) => {
177 if (templates) {
178
179 rtElementsTemplatesLibrary.pushTemplatesHtml(templates, 'pages', 'html');
180
181 } else {
182 console.error('No templates returned');
183 }
184 })
185 .catch((error) => {
186 console.error('Error in template fetching:', error);
187 });
188
189 },
190 pushTemplatesHtmlByCat: function (page = 1) {
191 activeTab = rtElementsTemplatesManager.activeTab;
192 let cat = $('#rt-elements-template-library-filter-cat').val();
193
194 rtElementsTemplatesManager.templatesContainer.html('');
195
196 rtElementsTemplatesLibrary.getTemplates(activeTab, page, [cat])
197 .then((templates) => {
198 if (templates) {
199
200 // save to window objects rtElementsTemplatesManager
201 window.rtElementsTemplatesManager.templates = templates;
202 rtElementsTemplatesLibrary.pushTemplatesHtml(templates, activeTab, 'html');
203
204 } else {
205 console.error('No templates returned');
206 }
207 })
208 .catch((error) => {
209 console.error('Error in template fetching:', error);
210 });
211 },
212 requestIngStatusMessage: function (message = 'Loading...') {
213 const templatesContainer = $('.elementor-templates-modal .dialog-buttons-wrapper');
214 let templatesHtml = `
215 <strong class="rt-elements-template-requesting-status">${message}</strong>
216 `;
217 templatesContainer.html(templatesHtml).show();
218 setTimeout(() => {
219 templatesContainer.html('');
220 }, 2000);
221 },
222 pushTemplatesHtml: function (templates, activeTab = 'pages', insertCallback = 'append') {
223 const rtElementsTemplatesLibraryEl = $('#rtElementsTemplatesLibrary');
224 const templatesContainer = rtElementsTemplatesManager.templatesContainer;
225
226 console.log(JSON.stringify(templates, null, 2));
227 //console.log(JSON.stringify(templates.taxonomies.groups, null, 2));
228
229
230 const items = activeTab === 'templates' ? templates.taxonomies.groups : templates.layouts;
231
232 rtElementsTemplatesLibraryEl.attr('data-templates-tab', activeTab );
233
234 const canInsertPro = Boolean(rtElementsTemplatesManager.canInsertPro);
235 const proCta = rtElementsTemplatesManager.proCta || {};
236
237 const templatesHtml = items.map(template => {
238 const isTemplateTab = activeTab === 'templates';
239
240 const preview = isTemplateTab
241 ? ''
242 : template.preview?.url || rtElementsTemplatesManager.thumbnailPlaceholderUrl;
243
244 const easyPermalinkCustom = isTemplateTab
245 ? ''
246 : template.preview?.custom_permalink || '';
247
248 var thumbnail = rtElementsTemplatesManager.thumbnailPlaceholderUrl;
249
250 if( activeTab === 'templates' ) {
251 var thumbnail = template.image;
252 } else {
253 thumbnail = template.thumbnail || rtElementsTemplatesManager.thumbnailPlaceholderUrl;
254 }
255
256 const isPro = template.is_pro === "yes";
257
258 let insertBtnHtml;
259 if (isPro && !canInsertPro) {
260 // Premium templates listed in the free plugin link to the
261 // marketing/CTA URL provided by the JS config. The Pro
262 // plugin filters canInsertPro/proCta when it's active.
263 const ctaUrl = proCta.btnUrl || 'https://wpeasyelements.com/pricing/';
264 const ctaText = proCta.btnText || 'Get Pro';
265 const ctaTitle = proCta.title || 'Premium template';
266 insertBtnHtml = `<a href="${ctaUrl}" class="elementor-template-library-template-action rt-elements-template-insert elementor-button e-disabled" title="${ctaTitle}" target="_blank" rel="noopener"><i class="eicon-lock" aria-hidden="true"></i><span class="elementor-button-title">${ctaText}</span></a>`;
267 } else {
268 insertBtnHtml = `<a data-template-id="${template.id}" class="elementor-template-library-template-action rt-elements-template-insert elementor-button e-primary"><i class="eicon-file-download" aria-hidden="true"></i><span class="elementor-button-title">Insert</span></a>`;
269 }
270
271 const proClass = isPro ? 'easyel-pro' : '';
272
273 const attr = isTemplateTab
274 ? `data-template-group="${template.slug}"`
275 : `data-template-id="${template.id}" data-preview="${preview}" data-demo="${easyPermalinkCustom}"`;
276 const title = isTemplateTab ? template.name : template.title;
277
278 return `
279 <div ${attr}
280 class="easyel-template-library-item elementor-template-library-template elementor-template-library-template-remote elementor-template-library-template-${activeTab} elementor-template-library-free-template">
281 <div class="elementor-template-library-template-body easyel-template-library-body ${proClass}" data-template-id="${template.id}">
282 <img src="${thumbnail}" alt="Template Thumbnail">
283 <div class="elementor-template-library-template-preview">
284 <i class="eicon-zoom-in-bold" aria-hidden="true"></i>
285 </div>
286 </div>
287 <div class="elementor-template-library-template-footer">
288 ${insertBtnHtml}
289 <div class="elementor-template-library-template-name">${title}</div>
290 </div>
291 </div>
292 `;
293 }).join('');
294
295 // Insert the generated HTML into the container
296 if (insertCallback === 'html') {
297 templatesContainer.html(templatesHtml);
298 } else {
299 templatesContainer.append(templatesHtml);
300 }
301
302 // Reload the Isotope layout
303 rtElementsTemplatesLibrary.loadIsotop();
304
305 return templatesHtml;
306 },
307 loadMoreTemplates: function () {
308
309 let page = 2; // Start from page 2 since the first page is already loaded
310 loading = false, // Prevent multiple requests
311 scrollableElement = $('#rtElementsTemplatesLibrary #elementor-template-library-templates-container-wrapper'), // Target your scrollable element
312 debounceTimer = ''; // Add a debounced scroll event handler
313
314
315 scrollableElement.on('scroll', function () {
316
317
318
319 clearTimeout(debounceTimer);
320 debounceTimer = setTimeout(() => {
321 // Detect if scrolled to the bottom of the specific scrollable element
322 if (
323 scrollableElement.scrollTop() + scrollableElement.innerHeight() >= scrollableElement[0].scrollHeight - 40 &&
324 !loading
325 ) {
326 loading = true; // Lock further requests during loading
327
328
329 rtElementsTemplatesLibrary.requestIngStatusMessage();
330
331 let activeTab = $('#rtElementsTemplatesLibrary .elementor-template-library-menu-item.elementor-active').data('tab');
332
333 rtElementsTemplatesLibrary.getTemplates(activeTab, page)
334 .then((templates) => {
335 if (templates) {
336
337 if(templates.layouts.length > 0){
338 // Save to the window object rtElementsTemplatesManager
339 window.rtElementsTemplatesManager.templates = templates;
340 rtElementsTemplatesLibrary.pushTemplatesHtml(templates, activeTab, 'append');
341 page++; // Increment the page number
342
343 }else{
344 rtElementsTemplatesLibrary.requestIngStatusMessage('No more results found!');
345 }
346 } else {
347 console.error('No templates returned');
348 }
349 })
350 .catch((error) => {
351 console.error('Error fetching templates:', error);
352 })
353 .finally(() => {
354 loading = false; // Unlock further requests
355 });
356 }
357 }, 150); // Adjust debounce time as needed
358
359 });
360 },
361 getTemplates: function (tab = 'pages', page = 1, categories = [], groups = [], searchKey = '') {
362 let apiUrl = rtElementsTemplatesManager.apiUrl;
363
364 const params = {
365 tab: tab,
366 categories: categories,
367 groups: groups,
368 searchKey: searchKey,
369 postsPerPage: 50,
370 page: parseInt(page),
371 _ver: new Date().getTime()
372 };
373
374 const queryString = new URLSearchParams(params).toString();
375
376 return fetch(`${apiUrl}?${queryString}`, {
377 method: 'GET',
378 headers: {
379 'Cache-Control': 'no-cache',
380 'Pragma': 'no-cache'
381 }
382 })
383 .then((response) => {
384 if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
385 rtElementsTemplatesLibrary.hidePreloader();
386 return response.json();
387 })
388 .catch((error) => {
389 console.error('Error fetching API:', error);
390 return null;
391 });
392 },
393 loadIsotop: function () {
394 let grid = '#rtElementsTemplatesLibrary #elementor-template-library-templates-container';
395
396 let iso = new Isotope(grid, {
397 itemSelector: '#rtElementsTemplatesLibrary #elementor-template-library-templates-container .elementor-template-library-template',
398 layoutMode: 'masonry'
399 });
400
401 // Trigger layout after all images are loaded
402 imagesLoaded(grid, function() {
403 iso.layout();
404 });
405 },
406 insertTemplate: function () {
407
408 rtElementsTemplatesLibrary.showPreloader();
409
410 let apiUrl = rtElementsTemplatesManager.apiUrl + '/templatesData',
411 templateId = $(this).data('template-id');
412
413 // Example parameters
414 const params = {
415 templateId: templateId,
416 };
417
418 // Convert parameters to a query string
419 const queryString = new URLSearchParams(params).toString();
420
421 // Return the fetch promise
422 return fetch(`${apiUrl}?${queryString}`)
423 .then((response) => {
424 if (!response.ok) {
425 throw new Error(`HTTP error! Status: ${response.status}`);
426 }
427 return response.json();
428 })
429 .then((response) => {
430
431 $e.run("document/elements/import", { model: window.elementor.elementsModel, data: response, options: {} });
432 rtElementsTemplatesLibrary.hidePreloader();
433 rtElementsTemplatesLibrary.hideModal();
434 })
435 .catch((error) => {
436 console.error('Error fetching API:', error);
437 return null; // Return null if an error occurs
438 });
439 },
440 hidePreview: function (){
441 $('.rt-elements-template-library-templates-preview').hide();
442 $('.rt-elements-template-library-templates-container').show();
443 },
444 backToTemplates: function () {
445
446 let activeTab = rtElementsTemplatesManager.activeTab;
447
448 if($('.rt-elements-template-library-templates-preview').css('display') == 'none') $(`.elementor-template-library-menu-item[data-tab="${activeTab}"]`).trigger('click');
449
450 if((activeTab != 'templates') && $('.rt-elements-template-library-templates-preview').css('display') != 'none'){
451 rtElementsTemplatesLibrary.showHeaderLogo();
452 rtElementsTemplatesLibrary.removeBackToTemplatesButton();
453 }
454
455 rtElementsTemplatesLibrary.hidePreview();
456
457 },
458
459 previewTemplate: function() {
460
461 let $parent = $(this).parent();
462 let previewSrc = $parent.data('preview');
463 let demoUrl = "https://wpeasyelements.com/demotemplate/";
464 let activeTab = rtElementsTemplatesManager.activeTab;
465 let templateId = $(this).data('template-id');
466
467 let demoFinalUrl = '';
468
469 if (demoUrl && demoUrl !== '') {
470 demoFinalUrl = demoUrl + (demoUrl.includes('?') ? '&' : '?') + 'rt_template=' + templateId;
471 } else {
472 demoFinalUrl = previewSrc;
473 }
474
475
476 $('.rt-elements-template-library-templates-container').hide();
477
478 if (demoUrl && demoUrl !== '') {
479
480 $('.rt-elements-template-library-templates-preview').html(`
481 <div class="rt-preview-wrapper">
482 <iframe src="${demoFinalUrl}" frameborder="0" class="rt-preview-iframe"></iframe>
483 </div>
484 `).show();
485 } else {
486 $('.rt-elements-template-library-templates-preview').html(`<img src="${previewSrc}" alt="template-preview" class="preview-image"/>`).show();
487 }
488
489 const tabTextMap = {
490 pages: 'Back to pages',
491 sections: 'Back to sections',
492 };
493
494 let btnText = tabTextMap[activeTab] || 'Back to templates';
495 rtElementsTemplatesLibrary.hideHeaderLogo();
496 rtElementsTemplatesLibrary.addBackButton(btnText);
497 },
498
499
500
501 hideModal: function () {
502 window.rtElementsTemplatesLibraryModal.hide();
503 },
504 showTemplatesModal: function () {
505
506 rtElementsTemplatesLibrary.getTemplatesModal().show(),
507 $(window).trigger("resize");
508
509 },
510 showPreloader: function () {
511 $('#rt-elements-preloader').show();
512 },
513 hidePreloader: function () {
514 setTimeout(() => {
515 $('#rt-elements-preloader').hide();
516 }, 1000);
517 },
518 previewLoaded: function () {
519
520 rtElementsTemplatesLibrary.loadMoreTemplates();
521
522 let interval = setInterval(function () {
523 window.elementor.$previewContents.find(".elementor-add-new-section").length && (rtElementsTemplatesLibrary.addButton(), clearInterval(interval));
524 }, 100);
525
526 window.elementor.$previewContents.on("click.rtElementsTemplatesLibrary", ".easy-elements-add-template-button", rtElementsTemplatesLibrary.showTemplatesModal);
527
528 $( document )
529 .on( 'click.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary .elementor-template-library-menu-item', this.switchTab )
530 .on( 'click.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary .elementor-templates-modal__header__close', this.hideModal)
531 .on( 'click.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary .elementor-template-library-template-templates', this.pushTemplatesHtmlByGroup)
532 .on( 'click.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary #elementor-template-library-header-preview-back', this.backToTemplates)
533 .on( 'change.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary #rt-elements-template-library-filter-cat', this.pushTemplatesHtmlByCat)
534 .on( 'keyup.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary .rt-elements-template-library-search-box', this.pushTemplatesHtmlBySearch)
535 .on( 'click.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary .elementor-template-library-template[data-preview] .elementor-template-library-template-body', this.previewTemplate)
536 .on( 'click.rtElementsTemplatesLibrary', '#rtElementsTemplatesLibrary .rt-elements-template-insert', this.insertTemplate);
537
538 },
539 hideHeaderLogo: function () {
540 $(".rt-elements-layout-library--logo-area .elementor-templates-modal__header__logo").hide();
541 },
542 showHeaderLogo: function () {
543 $(".rt-elements-layout-library--logo-area .elementor-templates-modal__header__logo").show();
544 },
545 addButton: function () {
546 let elementorBtn = window.elementor.$previewContents.find(".elementor-add-template-button"),
547 rtBtn = $('<div class="easy-elements-add-template-button" title="Add Easy Elements Template"><img src="'+rtElementsTemplatesManager.buttonIcon+'" alt=""></div>');
548 elementorBtn.after(rtBtn);
549 },
550 addBackButton: function (buttonText = 'Back to templates') {
551 let BtnContainer = $(".rt-elements-layout-library--logo-area"),
552 btn = $(`<div id="elementor-template-library-header-preview-back"><i class="eicon-" aria-hidden="true"></i><span>${buttonText}</span></div>`);
553 $(BtnContainer).find('#elementor-template-library-header-preview-back').remove();
554 BtnContainer.append(btn);
555 },
556 removeBackToTemplatesButton: function () {
557 $(".rt-elements-layout-library--logo-area #elementor-template-library-header-preview-back").remove();
558 },
559
560 init: function () {
561 window.elementor.on("preview:loaded", window._.bind(rtElementsTemplatesLibrary.previewLoaded, rtElementsTemplatesLibrary));
562 },
563 }),
564 $(window).on("elementor:init", rtElementsTemplatesLibrary.init);
565
566
567
568 })(jQuery);