Group JS of the same type

src/code_manager/main.js

@@ -26,6 +26,7 @@ define(function(require) {
 		gHtml = require('./model/HtmlGenerator'),
 		gCss = require('./model/CssGenerator'),
 		gJson = require('./model/JsonGenerator'),
+    gJs = require('./model/JsGenerator'),
 		eCM = require('./model/CodeMirrorEditor'),
 		editorView = require('./view/EditorView');
 
@@ -69,6 +70,7 @@ define(function(require) {
 				defGenerators.html = new gHtml();
 				defGenerators.css	= new gCss();
 				defGenerators.json = new gJson();
+        defGenerators.js = new gJs();
 
 				defViewers.CodeMirror = new eCM();
         return this;
@@ -222,4 +224,4 @@ define(function(require) {
 
 	return CodeManager;
 
-});
+});

src/code_manager/model/JsGenerator.js

@@ -0,0 +1,70 @@
+define(['backbone'], function (Backbone) {
+
+    return Backbone.Model.extend({
+
+      mapModel: function (model) {
+        var code = '';
+        var script  = model.get('script');
+        var type  = model.get('type');
+        var comps  = model.get('components');
+
+        // TODO
+        var id = model.cid;
+
+        if (script) {
+          // If the component has scripts we need to expose his ID
+          var attr = model.get('attributes');
+          attr = _.extend({}, attr, {id: id});
+          model.set('attributes', attr);
+          // TODO put above html code or i will not see model changes
+
+          var scrStr = 'function(){' + script + '}';
+          scrStr = typeof script == 'function' ? script.toString() : scrStr;
+
+          // If the script was updated, I'll put its code in a separate container
+          if (model.get('scriptUpdated')) {
+              this.mapJs[type+'-'+id] = {ids: [id], code: scrStr};
+          } else {
+            var mapType = this.mapJs[type];
+
+            if(mapType) {
+              mapType.ids.push(id);
+            } else {
+              this.mapJs[type] = {ids: [id], code: scrStr};
+            }
+          }
+
+          /*
+          code = 'var item = document.getElementById("'+id+'");'+
+            '(' + scrStr + '.bind(item))();';
+          */
+        }
+
+        comps.each(function(model) {
+          code += this.mapModel(model);
+        }, this);
+
+        return code;
+      },
+
+      build: function(model) {
+        this.mapJs = {};
+        this.mapModel(model);
+
+        var code = '';
+
+        for(var type in this.mapJs) {
+          var mapType = this.mapJs[type];
+          var ids = '#' + mapType.ids.join(', #');
+          code += 'var items = document.querySelectorAll("'+ids+'");' +
+            'for (var i = 0, len = items.length; i < len; i++) {'+
+              '(' + mapType.code + '.bind(items[i]))();' +
+            '}';
+        }
+
+
+        return code;
+      },
+
+    });
+});

src/demo.js

@@ -431,11 +431,20 @@ require(['config/require-config'], function() {
 
         init: function () {
           this.listenTo(this, 'change:startfrom', this.buildScript);
-          this.listenTo(this, 'active', this.buildScript);
+          this.listenTo(this, 'active', this.activeScript);
           this.get('components').add('<span id="timer-c"></span>');
         },
 
+        activeScript: function () {
+          this.set({'script': this.getScript()}, {silent: 1});
+          this.view.updateScript();
+        },
+
         buildScript: function() {
+          this.set('script', this.getScript());
+        },
+
+        getScript: function() {
           var startfrom = this.get('startfrom');
           var fn = function () {
             var startfrom = $startfrom$;
@@ -461,9 +470,8 @@ require(['config/require-config'], function() {
             moveTimer();
           };
           var fnStr = this.getScriptString(fn);
-          fnStr = fnStr.replace('$startfrom$', '"'+startfrom+'"');
-          this.set('script', fnStr);
-        },
+          return fnStr.replace('$startfrom$', '"'+startfrom+'"');
+        }
 
       }, {
         isComponent: function(el) {

src/dom_components/model/Component.js

@@ -98,6 +98,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
         this.defaultCl = this.normalizeClasses(this.get('classes') || this.config.classes || []);
         this.components	= new Components(this.defaultC, opt);
         this.components.parent = this;
+        this.listenTo(this, 'change:script', this.scriptUpdated);
         this.set('attributes', this.get('attributes') || {});
         this.set('components', this.components);
         this.set('classes', new Selectors(this.defaultCl));
@@ -114,6 +115,13 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
        */
       init: function () {},
 
+      /**
+       * Script updated
+       */
+      scriptUpdated: function() {
+        this.set('scriptUpdated', 1);
+      },
+
       /**
        * Init toolbar
        */

src/editor/model/Editor.js

@@ -362,14 +362,8 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
        * @private
        */
       getHtml: function() {
-        var cmp = this.get('DomComponents');
-        var cm = this.get('CodeManager');
-
-        if(!cmp || !cm)
-          return;
-
-        var wrp  = cmp.getComponent();
-        var html = cm.getCode(wrp, 'html');
+        var wrp  = this.get('DomComponents').getComponent();
+        var html = this.get('CodeManager').getCode(wrp, 'html');
 
         if (this.config.jsInHtml) {
           var js = this.getJs().trim();
@@ -385,17 +379,11 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
        * @private
        */
       getCss: function() {
-        var cmp = this.get('DomComponents');
-        var cm = this.get('CodeManager');
         var cssc = this.get('CssComposer');
-
-        if(!cmp || !cm || !cssc)
-          return;
-
-        var wrp = cmp.getComponent();
+        var wrp = this.get('DomComponents').getComponent();
         var protCss = this.config.protectedCss;
 
-        return protCss + cm.getCode(wrp, 'css', cssc);
+        return protCss + this.get('CodeManager').getCode(wrp, 'css', cssc);
       },
 
       /**