Add Script Component

src/canvas/view/CanvasView.js

@@ -173,6 +173,8 @@ function(Backbone, FrameView) {
 
       view.el.id = id;
       view.scriptContainer.html('');
+
+      // TODO isolate
       view.scriptContainer.append('<script>'+
         'var item = document.getElementById("'+id+'");'+
         '(function(){' + script + '}.bind(item))()</script>');

src/demo.js

@@ -12,10 +12,12 @@ require(['config/require-config'], function() {
       noticeOnUnload: 0,
       container  : '#gjs',
       height: '100%',
-      //fromElement: true,
+      fromElement: true,
 
+      /*
       components: [{
-        script: 'this.innerHTML= "test1";',
+        //script: 'var el = this; setInterval(function(){el.style.marginLeft = Math.random() * 50 +"px";}, 1000)',
+        script: 'loadScript = function(){console.log("loaded INSIDE", $);}',
         style: {
           background: 'red',
           width:'500px',
@@ -67,7 +69,7 @@ require(['config/require-config'], function() {
           content: " More text node  ---   ",
         }],
       }],
-
+*/
       storageManager:{
         autoload: 0,
         storeComponents: 1,
@@ -398,5 +400,7 @@ require(['config/require-config'], function() {
     }]);
 
     editor.render();
+
+    var dc = editor.DomComponents.getComponents();
   });
 });

src/dom_components/main.js

@@ -78,6 +78,11 @@ define(function(require) {
         model: require('./model/ComponentImage'),
         view: require('./view/ComponentImageView'),
       },
+      {
+        id: 'script',
+        model: require('./model/ComponentScript'),
+        view: require('./view/ComponentScriptView'),
+      },
       {
         id: 'textnode',
         model: require('./model/ComponentTextNode'),

src/dom_components/model/Component.js

@@ -37,6 +37,9 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
         // Allow to edit the content of the component (used on Text components)
         editable: false,
 
+        // Hide the component inside Layers
+        hiddenLayer: false,
+
         // This property is used by the HTML exporter as void elements do not
         // have closing tag, eg. <br/>, <hr/>, etc.
         void: false,

src/dom_components/model/ComponentScript.js

@@ -0,0 +1,29 @@
+define(['./Component'],
+  function (Component) {
+
+    return Component.extend({
+
+      defaults: _.extend({}, Component.prototype.defaults, {
+        type: 'script',
+        droppable: false,
+        draggable: false,
+        hiddenLayer: true,
+      }),
+
+    }, {
+
+      isComponent: function(el) {
+        if (el.tagName == 'SCRIPT') {
+          var result = {type: 'script'};
+
+          if (el.src) {
+            result.src = el.src;
+            result.onload = el.onload;
+          }
+
+          return result;
+        }
+      },
+
+    });
+});

src/dom_components/view/ComponentScriptView.js

@@ -0,0 +1,30 @@
+define(['backbone', './ComponentImageView'],
+  function (Backbone, ComponentView) {
+
+  return ComponentView.extend({
+
+    tagName: 'script',
+
+    events: {},
+
+    render: function() {
+      var model = this.model;
+      var src = model.get('src');
+      var content = '';
+
+      // If it's an external script
+      if(src) {
+        content = "var script = document.createElement('script');" +
+          "script.onload = " + model.get('onload') + ";" +
+          "script.src = '" + src + "';"+
+          "document.body.appendChild(script);";
+      } else {
+        content = model.get('content');
+      }
+
+      this.el.innerHTML = content;
+      return this;
+    },
+
+  });
+});

src/navigator/view/ItemsView.js

@@ -1,125 +1,127 @@
 define(['backbone','./ItemView'],
-	function (Backbone, ItemView) {
+  function (Backbone, ItemView) {
-	/**
+  /**
-	 * @class ItemsView
+   * @class ItemsView
-	 * */
+   * */
-	return Backbone.View.extend({
+  return Backbone.View.extend({
 
-		initialize: function(o) {
+    initialize: function(o) {
-			this.opt = o;
+      this.opt = o;
-			this.config = o.config;
+      this.config = o.config;
-			this.preview = o.preview;
+      this.preview = o.preview;
-			this.ppfx = o.config.pStylePrefix || '';
+      this.ppfx = o.config.pStylePrefix || '';
-			this.pfx = o.config.stylePrefix || '';
+      this.pfx = o.config.stylePrefix || '';
-			this.parent = o.parent;
+      this.parent = o.parent;
-			this.listenTo(this.collection, 'add', this.addTo);
+      this.listenTo(this.collection, 'add', this.addTo);
-			this.listenTo(this.collection, 'reset resetNavigator', this.render);
+      this.listenTo(this.collection, 'reset resetNavigator', this.render);
-			this.className 	= this.pfx + 'items';
+      this.className   = this.pfx + 'items';
 
-			if(this.config.sortable && !this.opt.sorter){
+      if(this.config.sortable && !this.opt.sorter){
-				var pfx = this.pfx;
+        var pfx = this.pfx;
-				var utils = this.config.em.get('Utils');
+        var utils = this.config.em.get('Utils');
-				this.opt.sorter = new utils.Sorter({
+        this.opt.sorter = new utils.Sorter({
-					container: this.el,
+          container: this.el,
-					containerSel: '.' + pfx + 'items',
+          containerSel: '.' + pfx + 'items',
-					itemSel: '.' + pfx + 'item',
+          itemSel: '.' + pfx + 'item',
-					ppfx: this.ppfx,
+          ppfx: this.ppfx,
-					pfx: pfx,
+          pfx: pfx,
-					nested: 1
+          nested: 1
-				});
+        });
-			}
+      }
 
-			this.sorter = this.opt.sorter || '';
+      this.sorter = this.opt.sorter || '';
 
-			if(!this.parent)
+      if(!this.parent)
-				this.className	+= ' ' + this.pfx + this.config.containerId;
+        this.className  += ' ' + this.pfx + this.config.containerId;
 
-			// For the sorter
+      // For the sorter
-			this.$el.data('collection', this.collection);
+      this.$el.data('collection', this.collection);
-		},
+    },
 
-		/**
+    /**
-		 * Add to collection
+     * Add to collection
-		 * @param Object Model
+     * @param Object Model
-		 *
+     *
-		 * @return Object
+     * @return Object
-		 * */
+     * */
-		addTo: function(model){
+    addTo: function(model){
-			var i	= this.collection.indexOf(model);
+      var i  = this.collection.indexOf(model);
-			this.addToCollection(model, null, i);
+      this.addToCollection(model, null, i);
-		},
+    },
 
-		/**
+    /**
-		 * Add new object to collection
+     * Add new object to collection
-		 * @param	Object	Model
+     * @param  Object  Model
-		 * @param	Object 	Fragment collection
+     * @param  Object   Fragment collection
-		 * @param	integer	Index of append
+     * @param  integer  Index of append
-		 *
+     *
-		 * @return Object Object created
+     * @return Object Object created
-		 * */
+     * */
-		addToCollection: function(model, fragmentEl, index){
+    addToCollection: function(model, fragmentEl, index){
-			var fragment	= fragmentEl || null;
+      var fragment  = fragmentEl || null;
-			var viewObject	= ItemView;
+      var viewObject  = ItemView;
 
-			var view = new viewObject({
+      var view = new viewObject({
-				model: model,
+        model: model,
-				config: this.config,
+        config: this.config,
-				sorter: this.sorter,
+        sorter: this.sorter,
-				isCountable: this.isCountable,
+        isCountable: this.isCountable,
-				opened: this.opt.opened,
+        opened: this.opt.opened,
-			});
+      });
-			var rendered	= view.render().el;
+      var rendered  = view.render().el;
 
-			if(fragment){
+      if(fragment){
-				fragment.appendChild(rendered);
+        fragment.appendChild(rendered);
-			}else{
+      }else{
-				if(typeof index != 'undefined'){
+        if(typeof index != 'undefined'){
-					var method	= 'before';
+          var method  = 'before';
-					// If the added model is the last of collection
+          // If the added model is the last of collection
-					// need to change the logic of append
+          // need to change the logic of append
-					if(this.$el.children().length == index){
+          if(this.$el.children().length == index){
-						index--;
+            index--;
-						method	= 'after';
+            method  = 'after';
-					}
+          }
-					// In case the added is new in the collection index will be -1
+          // In case the added is new in the collection index will be -1
-					if(index < 0){
+          if(index < 0){
-						this.$el.append(rendered);
+            this.$el.append(rendered);
-					}else
+          }else
-						this.$el.children().eq(index)[method](rendered);
+            this.$el.children().eq(index)[method](rendered);
-				}else
+        }else
-					this.$el.append(rendered);
+          this.$el.append(rendered);
-			}
+      }
 
-			return rendered;
+      return rendered;
-		},
+    },
 
-		/**
+    /**
-		 * Check if the model could be count by the navigator
+     * Check if the model could be count by the navigator
-		 * @param  {Object}  model
+     * @param  {Object}  model
-		 * @return {Boolean}
+     * @return {Boolean}
-		 * @private
+     * @private
-		 */
+     */
-		isCountable: function(model, hide) {
+    isCountable: function(model, hide) {
-			var type = model.get('type');
+      var type = model.get('type');
-			var tag = model.get('tagName');
+      var tag = model.get('tagName');
-			if((type == 'textnode' || tag == 'br') && hide)
+      if( ((type == 'textnode' || tag == 'br') && hide) ||
-				return false;
+          model.get('hiddenLayer')) {
-			return true;
+        return false;
-		},
+      }
+      return true;
+    },
 
-		render: function() {
+    render: function() {
-			var fragment = document.createDocumentFragment();
+      var fragment = document.createDocumentFragment();
-			this.$el.empty();
+      this.$el.empty();
 
-			this.collection.each(function(model) {
+      this.collection.each(function(model) {
-				if(!this.isCountable(model, this.config.hideTextnode))
+        if(!this.isCountable(model, this.config.hideTextnode))
-					return;
+          return;
-				this.addToCollection(model, fragment);
+        this.addToCollection(model, fragment);
-			}, this);
+      }, this);
 
-			this.$el.append(fragment);
+      this.$el.append(fragment);
-			this.$el.attr('class', _.result(this, 'className'));
+      this.$el.attr('class', _.result(this, 'className'));
-			return this;
+      return this;
-		}
+    }
-	});
+  });
 });