diff --git a/index.html b/index.html index d8de8adbe..41656e5f5 100755 --- a/index.html +++ b/index.html @@ -1388,89 +1388,6 @@ var defaultModel = defaultType.model; var defaultView = defaultType.view; - - const COUNTDOWN_TYPE = 'countdown'; - bm.add('link-block', { - label: 'Countdown', - category: 'Extra', - content: { - type: 'countdown', - startfrom: 'May 5, 2018 20:00:00', - activeOnRender: 1, - }, - attributes: { - class:'fa fa-clock-o' - } - }); - - domc.addType(COUNTDOWN_TYPE, { - model: defaultModel.extend({ - - defaults: Object.assign({}, defaultModel.prototype.defaults, { - startfrom: 'Nov 25, 2018 15:00:00', - endText: 'EXPIRED', - droppable: false, - traits: [{ - label: 'Start', - name: 'startfrom', - changeProp: 1, - },{ - label: 'End text', - name: 'endText', - changeProp: 1, - }], - script: function() { - var startfrom = '{[ startfrom ]}'; - var endTxt = '{[ endText ]}'; - var countDownDate = new Date(startfrom).getTime(); - var el = this.querySelector('#countdown-c'); - var oldInterval = el.gjs_countdown_interval; - oldInterval && clearInterval(oldInterval); - - var moveTimer = function() { - var now = new Date().getTime(); - var distance = countDownDate - now; - // Time calculations for days, hours, minutes and seconds - var days = Math.floor(distance / (1000 * 60 * 60 * 24)); - var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); - var seconds = Math.floor((distance % (1000 * 60)) / 1000); - - el.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; - // If the count down is finished, write some text - if (distance < 0) { - clearInterval(interval); - el.innerHTML = endTxt; - } - }; - - var interval = setInterval(moveTimer, 1000); - el.gjs_countdown_interval = interval; - moveTimer(); - } - }), - - init() { - this.listenTo(this, 'change:startfrom', this.updateScript); - this.get('components').add(''); - }, - - updateScript() { - this.view.updateScript(); - }, - }, { - isComponent(el) { - if(el.getAttribute && - el.getAttribute('data-gjs-type') == COUNTDOWN_TYPE) { - return { - type: COUNTDOWN_TYPE - }; - } - }, - }), - view: defaultView, - }); - /* domc.addType('default', { model: defaultModel.extend({ diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 43635aa2f..82445672e 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -255,8 +255,7 @@ module.exports = Backbone.Model.extend({ * */ getName() { if(!this.name){ - var id = this.cid.replace(/\D/g,''), - type = this.get('type'); + var type = this.get('type'); var tag = this.get('tagName'); tag = tag == 'div' ? 'box' : tag; tag = type ? type : tag; @@ -297,9 +296,8 @@ module.exports = Backbone.Model.extend({ strCls = strCls !== '' ? ' class="' + strCls.trim() + '"' : ''; // If style is not empty I need an ID attached to the component - // TODO: need to refactor in case of 'ID Trait' if(!_.isEmpty(m.get('style'))) - attrId = ' id="' + m.cid + '" '; + attrId = ' id="' + m.getId() + '" '; code += '<' + tag + strCls + attrId + strAttr + (sTag ? '/' : '') + '>' + m.get('content'); @@ -360,6 +358,10 @@ module.exports = Backbone.Model.extend({ getScriptString(script) { var scr = script || this.get('script'); + if (!scr) { + return scr; + } + // Need to convert script functions to strings if (typeof scr == 'function') { var scrStr = scr.toString().trim(); @@ -369,9 +371,10 @@ module.exports = Backbone.Model.extend({ scr = lines.join('\n'); } - var varTagStart = escapeRegExp('{[ '); - var varTagEnd = escapeRegExp(' ]}'); - var reg = new RegExp(`${varTagStart}(\\w+)${varTagEnd}`, 'g'); + var config = this.sm.config || {}; + var tagVarStart = escapeRegExp(config.tagVarStart || '{[ '); + var tagVarEnd = escapeRegExp(config.tagVarEnd || ' ]}'); + var reg = new RegExp(`${tagVarStart}(\\w+)${tagVarEnd}`, 'g'); scr = scr.replace(reg, (match, v) => { // If at least one match is found I have to track this change for a // better optimization inside JS generator diff --git a/src/editor/config/config.js b/src/editor/config/config.js index a284eeedd..947a4ad58 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -62,6 +62,12 @@ module.exports = { // Comes handy for mobile-first cases mediaCondition: 'max-width', + // Starting tag for variable inside scripts in Components + tagVarStart: '{[ ', + + // Ending tag for variable inside scripts in Components + tagVarEnd: ' ]}', + // This option makes available custom component types also for loaded // elements inside canvas loadCompsOnRender: 1,