tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add Script Component

pull/67/head
Artur Arseniev 9 years ago
parent
9cd774f9d8
commit
2eceb53c20
7 changed files with 187 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/canvas/view/CanvasView.js
  2. 10
      src/demo.js
  3. 5
      src/dom_components/main.js
  4. 3
      src/dom_components/model/Component.js
  5. 29
      src/dom_components/model/ComponentScript.js
  6. 30
      src/dom_components/view/ComponentScriptView.js
  7. 220
      src/navigator/view/ItemsView.js

2
src/canvas/view/CanvasView.js
View File

@ -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>');

10
src/demo.js
View File

@ -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();
});
});

5
src/dom_components/main.js
View File

@ -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'),

3
src/dom_components/model/Component.js
View File

@ -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,

29
src/dom_components/model/ComponentScript.js
View File

@ -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;
}
},
});
});

30
src/dom_components/view/ComponentScriptView.js
View File

@ -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;
},
});
});

220
src/navigator/view/ItemsView.js
View File

@ -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;
}
});
});

Write Preview
Loading…
Cancel
Save