Add getId to the Component model

index.html

@@ -1388,6 +1388,89 @@
     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/canvas/view/CanvasView.js

@@ -245,10 +245,9 @@ module.exports = Backbone.View.extend({
     }
 
     var model = view.model;
-    var id = model.cid;
+    var id = model.getId();
     view.el.id = id;
     view.scriptContainer.html('');
-
     // In editor, I make use of setTimeout as during the append process of elements
     // those will not be available immediatly, therefore 'item' variable
     view.scriptContainer.append(`<script>

src/code_manager/model/JsGenerator.js

@@ -7,7 +7,7 @@ module.exports = Backbone.Model.extend({
     var script  = model.get('script');
     var type  = model.get('type');
     var comps  = model.get('components');
-    var id = model.cid;
+    var id = model.getId();
 
     if (script) {
       // If the component has scripts we need to expose his ID

src/dom_components/model/Component.js

@@ -342,6 +342,14 @@ module.exports = Backbone.Model.extend({
     return obj;
   },
 
+  /**
+   * Return model id
+   * @return {string}
+   */
+  getId() {
+    return this.cid;
+  },
+
   /**
    * Return script in string format, cleans 'function() {..' from scripts
    * if it's a function