Add tagVarStart and tagVarEnd configuration options

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('<span id="countdown-c"></span>');
-      },
-
-      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({

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

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,