diff --git a/index.html b/index.html
index 41656e5f5..d8de8adbe 100755
--- a/index.html
+++ b/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('');
+ },
+
+ 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/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index 3f4739976..907749f05 100644
--- a/src/canvas/view/CanvasView.js
+++ b/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(`