ecs.js
6 years ago
ecs_admin_bar_menu.js
6 years ago
ecs_ajax_pagination.js
5 years ago
ecs_preview.js
6 years ago
ecs_preview.js
121 lines
| 1 | var ecsExecTime = new Date().getTime(); |
| 2 | var EleCustomSkinPreview = elementorModules.frontend.handlers.Base.extend({ |
| 3 | |
| 4 | loadedTemplates:{ |
| 5 | article:`<article class="elementor-post elementor-grid-item post type-post status-publish format-standard has-post-thumbnail hentry"> |
| 6 | [content]</article>`, |
| 7 | wrapper:`<div id="ecs-preview" class="elementor-element elementor-posts--thumbnail-top elementor-grid-[columns] elementor-grid-tablet-[columns_tablet] elementor-grid-mobile-[columns_mobile] elementor-widget elementor-widget-posts" data-element_type="widget" data-settings="{"custom_is_display_conditions":"yes","custom_columns":"[columns]","custom_columns_tablet":"[columns_tablet]","custom_columns_mobile":"[columns_mobile]","custom_row_gap":{"unit":"px","size":35,"sizes":[]}}" data-widget_type="posts.custom"> |
| 8 | <style> |
| 9 | #ecs-preview article{margin:7px; } |
| 10 | </style> |
| 11 | <h1>Preview</h1> |
| 12 | <div class="elementor-widget-container"> <div class="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-custom"> |
| 13 | [content] |
| 14 | </div></div> |
| 15 | </div>` |
| 16 | }, |
| 17 | wrapper_template:{ |
| 18 | header:"", |
| 19 | footer:"" |
| 20 | }, |
| 21 | article_template:{ |
| 22 | header:"", |
| 23 | footer:"" |
| 24 | }, |
| 25 | previewArguments:{ |
| 26 | columns:3, |
| 27 | columns_tablet:2, |
| 28 | columns_mobile:1 |
| 29 | }, |
| 30 | originalContent:"", |
| 31 | previewContent:"", |
| 32 | |
| 33 | parseTemplate: function parseTemplate(content){ |
| 34 | for (const [key, value] of Object.entries(this.previewArguments)) { |
| 35 | replace = '\\['+key+'\\]'; |
| 36 | re = new RegExp(replace,"g"); |
| 37 | content = content.replace(re, value); |
| 38 | } |
| 39 | //console.log(content); |
| 40 | return content; |
| 41 | }, |
| 42 | setTemplate:function setTemplate(target){ |
| 43 | var templatePart = this.loadedTemplates[target].split("[content]"); |
| 44 | |
| 45 | this[target + '_template'].header = templatePart[0]; |
| 46 | this[target + '_template'].footer = templatePart[1] ; |
| 47 | }, |
| 48 | generateArticles:function generateArticles(){ |
| 49 | for(i=0; i < this.previewArguments.columns; i++){ |
| 50 | this.previewContent += this.article_template.header + this.originalContent + this.article_template.footer; |
| 51 | } |
| 52 | }, |
| 53 | generateContent: function generateContent(){ |
| 54 | this.generateArticles(); |
| 55 | this.previewContent = this.parseTemplate(this.wrapper_template.header) + this.previewContent + this.wrapper_template.footer; |
| 56 | }, |
| 57 | destroyContent: function destroyContent(){ |
| 58 | this.previewContent=""; |
| 59 | jQuery('#ecs-preview').remove(); |
| 60 | }, |
| 61 | onInit: function onInit() { |
| 62 | |
| 63 | elementorModules.frontend.handlers.Base.prototype.onInit.apply(this, arguments); |
| 64 | this.initPreview(); |
| 65 | this.run(); |
| 66 | }, |
| 67 | initPreview: function initPreview(){ |
| 68 | this.setTemplate('wrapper'); |
| 69 | this.setTemplate('article'); |
| 70 | }, |
| 71 | writePreview: function writePreview(){ |
| 72 | jQuery( this.previewContent ).insertAfter( "#elementor-add-new-section" ); |
| 73 | jQuery('#ecs-preview .elementor-element-overlay').remove(); |
| 74 | jQuery('#ecs-preview .elementor-element-edit-mode').removeClass( "elementor-element-edit-mode" ); |
| 75 | jQuery('#ecs-preview .elementor-element-editable').removeClass( "elementor-element-editable" ); |
| 76 | }, |
| 77 | checkArguments: function checkArguments(){ |
| 78 | //add ability to add remove columns |
| 79 | columns = 4; |
| 80 | this.previewArguments.columns = columns; |
| 81 | }, |
| 82 | onElementChange: function onElementChange() { |
| 83 | var self = this; |
| 84 | setTimeout(function(){ |
| 85 | self.run(); |
| 86 | }, 2000); |
| 87 | }, |
| 88 | getOriginal: function getOriginal(){ |
| 89 | this.originalContent=jQuery('.page-content .elementor-section-wrap').html(); |
| 90 | }, |
| 91 | run: function run(){ |
| 92 | if(ecsRunEvery(2000)){ |
| 93 | this.destroyContent(); |
| 94 | this.checkArguments(); |
| 95 | this.getOriginal(); |
| 96 | this.generateContent(); |
| 97 | this.writePreview(); |
| 98 | //console.log(this.previewContent+" sunt aici"); |
| 99 | } |
| 100 | } |
| 101 | |
| 102 | }); |
| 103 | |
| 104 | //now let's see if we can call it |
| 105 | jQuery(window).on('elementor/frontend/init', () => { |
| 106 | |
| 107 | const addHandler = ($element) => { |
| 108 | elementorFrontend.elementsHandler.addHandler(EleCustomSkinPreview, { |
| 109 | $element, |
| 110 | }); |
| 111 | }; |
| 112 | elementorFrontend.hooks.addAction('frontend/element_ready/global', addHandler); |
| 113 | |
| 114 | }); |
| 115 | |
| 116 | function ecsRunEvery( miliseconds ){ |
| 117 | if(new Date().getTime() < ecsExecTime + miliseconds) return false; |
| 118 | ecsExecTime = new Date().getTime(); |
| 119 | return true; |
| 120 | |
| 121 | } |