Add getJs() method on top-level API

src/demo.js

@@ -390,8 +390,8 @@ require(['config/require-config'], function() {
       id: 'clean-all',
       className: 'fa fa-trash icon-blank',
       command:  function(editor, sender) {
-        if(sender) sender.set('active',false);
-        if(confirm('Are you sure to clean the canvas?')){
+        if(sender) sender.set('active', false);
+        if(confirm('Are you sure to clean the canvas?')) {
           var comps = editor.DomComponents.clear();
           localStorage.setItem('gjs-css', '');
           localStorage.setItem('gjs-html', '');
@@ -400,6 +400,82 @@ require(['config/require-config'], function() {
       attributes: { title: 'Empty canvas' }
     }]);
 
+    // Blocks
+    var bm = editor.BlockManager;
+    bm.add('timer', {
+      label: 'timer',
+      attributes: {class:'gjs-fonts gjs-f-text'},
+      content: {
+        type: 'timer',
+        startfrom: 'May 5, 2018 20:00:00',
+        activeOnRender: 1,
+      }
+    });
+
+    var domc = editor.DomComponents;
+    var defaultType = domc.getType('default');
+    var defaultModel = defaultType.model;
+    var defaultView = defaultType.view;
+
+    domc.addType('timer', {
+      model: defaultModel.extend({
+        defaults: _.extend({}, defaultModel.prototype.defaults, {
+          startfrom: 'Nov 25, 2018 15:00:00',
+          droppable: false,
+          traits: [{
+            label: 'Start',
+            name: 'startfrom',
+            changeProp: 1,
+          }],
+        }),
+
+        init: function () {
+          this.listenTo(this, 'change:startfrom', this.buildScript);
+          this.listenTo(this, 'active', this.buildScript);
+          this.get('components').add('<span id="timer-c"></span>');
+        },
+
+        buildScript: function() {
+          var startfrom = this.get('startfrom');
+          var fn = function () {
+            var startfrom = $startfrom$;
+            var countDownDate = new Date(startfrom).getTime();
+            var el = this.querySelector('#timer-c');
+            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(x);
+                el.innerHTML = "EXPIRED";
+              }
+            };
+            var x = setInterval(moveTimer, 1000);
+            moveTimer();
+          };
+          var fnStr = this.getScriptString(fn);
+          fnStr = fnStr.replace('$startfrom$', '"'+startfrom+'"');
+          this.set('script', fnStr);
+        },
+
+      }, {
+        isComponent: function(el) {
+          if(el.getAttribute &&
+            el.getAttribute('data-gjs-type') == 'timer') {
+            return {type: 'timer'};
+          }
+        },
+      }),
+      view: defaultView,
+    });
+
     editor.render();
   });
 });

src/dom_components/model/Component.js

@@ -298,18 +298,35 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
        */
       toJSON: function() {
         var obj = Backbone.Model.prototype.toJSON.apply(this, arguments);
-        var script = this.get('script');
+        var scriptStr = this.getScriptString();
+
+        if (scriptStr) {
+          obj.script = scriptStr;
+        }
+
+        return obj;
+      },
+
+      /**
+       * Return script in string format, cleans 'function() {..' from scripts
+       * if it's a function
+       * @param {string|Function} script
+       * @return {string}
+       * @private
+       */
+      getScriptString: function (script) {
+        var scr = script || this.get('script');
 
         // Need to cast script functions to string
-        if (typeof script == 'function') {
-          var scrStr = script.toString();
+        if (typeof scr == 'function') {
+          var scrStr = script.toString().trim();
           scrStr = scrStr.replace(/^function\s?\(\)\s?\{/, '');
           scrStr = scrStr.replace(/\}$/, '');
-          obj.script = scrStr;
+          scr = scrStr;
         }
 
-        return obj;
-      },
+        return scr;
+      }
 
     },{
 

src/editor/config/config.js

@@ -26,6 +26,9 @@ define(function () {
     // Clear the canvas when editor.render() is called
     clearOnRender: true,
 
+    // Return JS of components inside HTML from 'editor.getHtml()'
+    jsInHtml: true,
+
     // Height for the editor container
     height: '900px',
 

src/editor/main.js

@@ -3,6 +3,7 @@
  * * [getConfig](#getconfig)
  * * [getHtml](#gethtml)
  * * [getCss](#getcss)
+ * * [getJs](#getjs)
  * * [getComponents](#getcomponents)
  * * [setComponents](#setcomponents)
  * * [getStyle](#getstyle)
@@ -218,6 +219,14 @@ define(function (require){
           return em.getCss();
         },
 
+        /**
+         * Returns JS of all components
+         * @return {string} JS string
+         */
+        getJs: function(){
+          return em.getJs();
+        },
+
         /**
          * Returns components in JSON format object
          * @return {Object}

src/editor/model/Editor.js

@@ -361,7 +361,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
        * @return {string} HTML string
        * @private
        */
-      getHtml: function(){
+      getHtml: function() {
         var cmp = this.get('DomComponents');
         var cm = this.get('CodeManager');
 
@@ -369,7 +369,14 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
           return;
 
         var wrp  = cmp.getComponent();
-        return cm.getCode(wrp, 'html');
+        var html = cm.getCode(wrp, 'html');
+
+        if (this.config.jsInHtml) {
+          var js = this.getJs().trim();
+          html += js ? '<script>'+ js +'</script>' : '';
+        }
+
+        return html;
       },
 
       /**
@@ -377,7 +384,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
        * @return {string} CSS string
        * @private
        */
-      getCss: function(){
+      getCss: function() {
         var cmp = this.get('DomComponents');
         var cm = this.get('CodeManager');
         var cssc = this.get('CssComposer');
@@ -391,6 +398,16 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
         return protCss + cm.getCode(wrp, 'css', cssc);
       },
 
+      /**
+       * Returns JS of all components
+       * @return {string} JS string
+       * @private
+       */
+      getJs: function() {
+        var wrp = this.get('DomComponents').getWrapper();
+        return this.get('CodeManager').getCode(wrp, 'js');
+      },
+
       /**
        * Store data to the current storage
        * @param {Function} clb Callback function