diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index 836bd3f67..5ee66f4cf 100644
--- a/src/canvas/view/CanvasView.js
+++ b/src/canvas/view/CanvasView.js
@@ -173,6 +173,8 @@ function(Backbone, FrameView) {
view.el.id = id;
view.scriptContainer.html('');
+
+ // TODO isolate
view.scriptContainer.append('');
diff --git a/src/demo.js b/src/demo.js
index 8daabcfb8..938a9fce5 100644
--- a/src/demo.js
+++ b/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();
});
});
diff --git a/src/dom_components/main.js b/src/dom_components/main.js
index fcc88cfc3..48d2d8899 100644
--- a/src/dom_components/main.js
+++ b/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'),
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index a92c98ee8..9869e74c3 100644
--- a/src/dom_components/model/Component.js
+++ b/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.
,
, etc.
void: false,
diff --git a/src/dom_components/model/ComponentScript.js b/src/dom_components/model/ComponentScript.js
new file mode 100644
index 000000000..d82cbcaaf
--- /dev/null
+++ b/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;
+ }
+ },
+
+ });
+});
diff --git a/src/dom_components/view/ComponentScriptView.js b/src/dom_components/view/ComponentScriptView.js
new file mode 100644
index 000000000..6dd3e0a49
--- /dev/null
+++ b/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;
+ },
+
+ });
+});
diff --git a/src/navigator/view/ItemsView.js b/src/navigator/view/ItemsView.js
index e789f10f3..d3ea6fb8f 100644
--- a/src/navigator/view/ItemsView.js
+++ b/src/navigator/view/ItemsView.js
@@ -1,125 +1,127 @@
define(['backbone','./ItemView'],
- function (Backbone, ItemView) {
- /**
- * @class ItemsView
- * */
- return Backbone.View.extend({
+ function (Backbone, ItemView) {
+ /**
+ * @class ItemsView
+ * */
+ return Backbone.View.extend({
- initialize: function(o) {
- this.opt = o;
- this.config = o.config;
- this.preview = o.preview;
- this.ppfx = o.config.pStylePrefix || '';
- this.pfx = o.config.stylePrefix || '';
- this.parent = o.parent;
- this.listenTo(this.collection, 'add', this.addTo);
- this.listenTo(this.collection, 'reset resetNavigator', this.render);
- this.className = this.pfx + 'items';
+ initialize: function(o) {
+ this.opt = o;
+ this.config = o.config;
+ this.preview = o.preview;
+ this.ppfx = o.config.pStylePrefix || '';
+ this.pfx = o.config.stylePrefix || '';
+ this.parent = o.parent;
+ this.listenTo(this.collection, 'add', this.addTo);
+ this.listenTo(this.collection, 'reset resetNavigator', this.render);
+ this.className = this.pfx + 'items';
- if(this.config.sortable && !this.opt.sorter){
- var pfx = this.pfx;
- var utils = this.config.em.get('Utils');
- this.opt.sorter = new utils.Sorter({
- container: this.el,
- containerSel: '.' + pfx + 'items',
- itemSel: '.' + pfx + 'item',
- ppfx: this.ppfx,
- pfx: pfx,
- nested: 1
- });
- }
+ if(this.config.sortable && !this.opt.sorter){
+ var pfx = this.pfx;
+ var utils = this.config.em.get('Utils');
+ this.opt.sorter = new utils.Sorter({
+ container: this.el,
+ containerSel: '.' + pfx + 'items',
+ itemSel: '.' + pfx + 'item',
+ ppfx: this.ppfx,
+ pfx: pfx,
+ nested: 1
+ });
+ }
- this.sorter = this.opt.sorter || '';
+ this.sorter = this.opt.sorter || '';
- if(!this.parent)
- this.className += ' ' + this.pfx + this.config.containerId;
+ if(!this.parent)
+ this.className += ' ' + this.pfx + this.config.containerId;
- // For the sorter
- this.$el.data('collection', this.collection);
- },
+ // For the sorter
+ this.$el.data('collection', this.collection);
+ },
- /**
- * Add to collection
- * @param Object Model
- *
- * @return Object
- * */
- addTo: function(model){
- var i = this.collection.indexOf(model);
- this.addToCollection(model, null, i);
- },
+ /**
+ * Add to collection
+ * @param Object Model
+ *
+ * @return Object
+ * */
+ addTo: function(model){
+ var i = this.collection.indexOf(model);
+ this.addToCollection(model, null, i);
+ },
- /**
- * Add new object to collection
- * @param Object Model
- * @param Object Fragment collection
- * @param integer Index of append
- *
- * @return Object Object created
- * */
- addToCollection: function(model, fragmentEl, index){
- var fragment = fragmentEl || null;
- var viewObject = ItemView;
+ /**
+ * Add new object to collection
+ * @param Object Model
+ * @param Object Fragment collection
+ * @param integer Index of append
+ *
+ * @return Object Object created
+ * */
+ addToCollection: function(model, fragmentEl, index){
+ var fragment = fragmentEl || null;
+ var viewObject = ItemView;
- var view = new viewObject({
- model: model,
- config: this.config,
- sorter: this.sorter,
- isCountable: this.isCountable,
- opened: this.opt.opened,
- });
- var rendered = view.render().el;
+ var view = new viewObject({
+ model: model,
+ config: this.config,
+ sorter: this.sorter,
+ isCountable: this.isCountable,
+ opened: this.opt.opened,
+ });
+ var rendered = view.render().el;
- if(fragment){
- fragment.appendChild(rendered);
- }else{
- if(typeof index != 'undefined'){
- var method = 'before';
- // If the added model is the last of collection
- // need to change the logic of append
- if(this.$el.children().length == index){
- index--;
- method = 'after';
- }
- // In case the added is new in the collection index will be -1
- if(index < 0){
- this.$el.append(rendered);
- }else
- this.$el.children().eq(index)[method](rendered);
- }else
- this.$el.append(rendered);
- }
+ if(fragment){
+ fragment.appendChild(rendered);
+ }else{
+ if(typeof index != 'undefined'){
+ var method = 'before';
+ // If the added model is the last of collection
+ // need to change the logic of append
+ if(this.$el.children().length == index){
+ index--;
+ method = 'after';
+ }
+ // In case the added is new in the collection index will be -1
+ if(index < 0){
+ this.$el.append(rendered);
+ }else
+ this.$el.children().eq(index)[method](rendered);
+ }else
+ this.$el.append(rendered);
+ }
- return rendered;
- },
+ return rendered;
+ },
- /**
- * Check if the model could be count by the navigator
- * @param {Object} model
- * @return {Boolean}
- * @private
- */
- isCountable: function(model, hide) {
- var type = model.get('type');
- var tag = model.get('tagName');
- if((type == 'textnode' || tag == 'br') && hide)
- return false;
- return true;
- },
+ /**
+ * Check if the model could be count by the navigator
+ * @param {Object} model
+ * @return {Boolean}
+ * @private
+ */
+ isCountable: function(model, hide) {
+ var type = model.get('type');
+ var tag = model.get('tagName');
+ if( ((type == 'textnode' || tag == 'br') && hide) ||
+ model.get('hiddenLayer')) {
+ return false;
+ }
+ return true;
+ },
- render: function() {
- var fragment = document.createDocumentFragment();
- this.$el.empty();
+ render: function() {
+ var fragment = document.createDocumentFragment();
+ this.$el.empty();
- this.collection.each(function(model) {
- if(!this.isCountable(model, this.config.hideTextnode))
- return;
- this.addToCollection(model, fragment);
- }, this);
+ this.collection.each(function(model) {
+ if(!this.isCountable(model, this.config.hideTextnode))
+ return;
+ this.addToCollection(model, fragment);
+ }, this);
- this.$el.append(fragment);
- this.$el.attr('class', _.result(this, 'className'));
- return this;
- }
- });
+ this.$el.append(fragment);
+ this.$el.attr('class', _.result(this, 'className'));
+ return this;
+ }
+ });
});