From ab7e6049b96598c1b917918ab86d031dc6454abb Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 31 Mar 2017 03:15:30 +0200 Subject: [PATCH] Group JS of the same type --- src/code_manager/main.js | 4 +- src/code_manager/model/JsGenerator.js | 70 +++++++++++++++++++++++++++ src/demo.js | 16 ++++-- src/dom_components/model/Component.js | 8 +++ src/editor/model/Editor.js | 20 ++------ 5 files changed, 97 insertions(+), 21 deletions(-) create mode 100644 src/code_manager/model/JsGenerator.js diff --git a/src/code_manager/main.js b/src/code_manager/main.js index a84161bb1..33400046a 100644 --- a/src/code_manager/main.js +++ b/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; -}); \ No newline at end of file +}); diff --git a/src/code_manager/model/JsGenerator.js b/src/code_manager/model/JsGenerator.js new file mode 100644 index 000000000..e238bff53 --- /dev/null +++ b/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; + }, + + }); +}); diff --git a/src/demo.js b/src/demo.js index 8f5a9385e..211777613 100644 --- a/src/demo.js +++ b/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(''); }, + 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) { diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 41d94c5aa..f936efad1 100644 --- a/src/dom_components/model/Component.js +++ b/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 */ diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 1d155d410..052559d9f 100644 --- a/src/editor/model/Editor.js +++ b/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); }, /**