mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
6 changed files with 910 additions and 864 deletions
@ -1,107 +1,111 @@ |
|||
define(['backbone','require'], |
|||
function(Backbone, require) { |
|||
|
|||
return Backbone.View.extend({ |
|||
return Backbone.View.extend({ |
|||
|
|||
initialize: function(o) { |
|||
this.opts = o || {}; |
|||
this.config = o.config || {}; |
|||
this.listenTo( this.collection, 'add', this.addTo ); |
|||
this.listenTo( this.collection, 'reset', this.render ); |
|||
}, |
|||
initialize: function(o) { |
|||
this.opts = o || {}; |
|||
this.config = o.config || {}; |
|||
this.listenTo( this.collection, 'add', this.addTo ); |
|||
this.listenTo( this.collection, 'reset', this.render ); |
|||
}, |
|||
|
|||
/** |
|||
* Add to collection |
|||
* @param {Object} Model |
|||
* |
|||
* @return void |
|||
* @private |
|||
* */ |
|||
addTo: function(model) { |
|||
var i = this.collection.indexOf(model); |
|||
this.addToCollection(model, null, i); |
|||
/** |
|||
* Add to collection |
|||
* @param {Object} Model |
|||
* |
|||
* @return void |
|||
* @private |
|||
* */ |
|||
addTo: function(model) { |
|||
var i = this.collection.indexOf(model); |
|||
this.addToCollection(model, null, i); |
|||
|
|||
if(this.config.em) { |
|||
this.config.em.trigger('add:component', model); |
|||
} |
|||
}, |
|||
if(this.config.em) { |
|||
this.config.em.trigger('add:component', model); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Add new object to collection |
|||
* @param {Object} Model |
|||
* @param {Object} Fragment collection |
|||
* @param {Integer} Index of append |
|||
* |
|||
* @return {Object} Object rendered |
|||
* @private |
|||
* */ |
|||
addToCollection: function(model, fragmentEl, index){ |
|||
if(!this.compView) |
|||
this.compView = require('./ComponentView'); |
|||
var fragment = fragmentEl || null, |
|||
viewObject = this.compView; |
|||
//console.log('Add to collection', model, 'Index',i);
|
|||
/** |
|||
* Add new object to collection |
|||
* @param {Object} Model |
|||
* @param {Object} Fragment collection |
|||
* @param {Integer} Index of append |
|||
* |
|||
* @return {Object} Object rendered |
|||
* @private |
|||
* */ |
|||
addToCollection: function(model, fragmentEl, index){ |
|||
if(!this.compView) |
|||
this.compView = require('./ComponentView'); |
|||
var fragment = fragmentEl || null, |
|||
viewObject = this.compView; |
|||
//console.log('Add to collection', model, 'Index',i);
|
|||
|
|||
var dt = this.opts.defaultTypes; |
|||
var ct = this.opts.componentTypes; |
|||
var dt = this.opts.defaultTypes; |
|||
var ct = this.opts.componentTypes; |
|||
|
|||
var type = model.get('type'); |
|||
var type = model.get('type'); |
|||
|
|||
for (var it = 0; it < dt.length; it++) { |
|||
var dtId = dt[it].id; |
|||
if(dtId == type) { |
|||
viewObject = dt[it].view; |
|||
break; |
|||
} |
|||
} |
|||
//viewObject = dt[type] ? dt[type].view : dt.default.view;
|
|||
for (var it = 0; it < dt.length; it++) { |
|||
var dtId = dt[it].id; |
|||
if(dtId == type) { |
|||
viewObject = dt[it].view; |
|||
break; |
|||
} |
|||
} |
|||
//viewObject = dt[type] ? dt[type].view : dt.default.view;
|
|||
|
|||
var view = new viewObject({ |
|||
model: model, |
|||
config: this.config, |
|||
defaultTypes: dt, |
|||
componentTypes: ct, |
|||
}); |
|||
var rendered = view.render().el; |
|||
if(view.model.get('type') == 'textnode') |
|||
rendered = document.createTextNode(view.model.get('content')); |
|||
var view = new viewObject({ |
|||
model: model, |
|||
config: this.config, |
|||
defaultTypes: dt, |
|||
componentTypes: ct, |
|||
}); |
|||
var rendered = view.render().el; |
|||
if(view.model.get('type') == 'textnode') |
|||
rendered = document.createTextNode(view.model.get('content')); |
|||
|
|||
if(fragment){ |
|||
fragment.appendChild(rendered); |
|||
}else{ |
|||
var p = this.$parent; |
|||
if(typeof index != 'undefined'){ |
|||
var method = 'before'; |
|||
// If the added model is the last of collection
|
|||
// need to change the logic of append
|
|||
if(p.children().length == index){ |
|||
index--; |
|||
method = 'after'; |
|||
} |
|||
// In case the added is new in the collection index will be -1
|
|||
if(index < 0){ |
|||
p.append(rendered); |
|||
}else |
|||
p.children().eq(index)[method](rendered); |
|||
}else{ |
|||
p.append(rendered); |
|||
} |
|||
} |
|||
if(fragment){ |
|||
fragment.appendChild(rendered); |
|||
}else{ |
|||
var p = this.$parent; |
|||
var pc = p.children; |
|||
if(typeof index != 'undefined'){ |
|||
var method = 'before'; |
|||
// If the added model is the last of collection
|
|||
// need to change the logic of append
|
|||
if(pc && p.children().length == index){ |
|||
index--; |
|||
method = 'after'; |
|||
} |
|||
// In case the added is new in the collection index will be -1
|
|||
if(index < 0) { |
|||
p.append(rendered); |
|||
}else { |
|||
if(pc) { |
|||
p.children().eq(index)[method](rendered); |
|||
} |
|||
} |
|||
}else{ |
|||
p.append(rendered); |
|||
} |
|||
} |
|||
|
|||
return rendered; |
|||
}, |
|||
return rendered; |
|||
}, |
|||
|
|||
render: function($p) { |
|||
var fragment = document.createDocumentFragment(); |
|||
this.$parent = $p || this.$el; |
|||
this.$el.empty(); |
|||
this.collection.each(function(model){ |
|||
this.addToCollection(model, fragment); |
|||
},this); |
|||
this.$el.append(fragment); |
|||
render: function($p) { |
|||
var fragment = document.createDocumentFragment(); |
|||
this.$parent = $p || this.$el; |
|||
this.$el.empty(); |
|||
this.collection.each(function(model){ |
|||
this.addToCollection(model, fragment); |
|||
},this); |
|||
this.$el.append(fragment); |
|||
|
|||
return this; |
|||
} |
|||
return this; |
|||
} |
|||
|
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
@ -1,50 +1,53 @@ |
|||
define(['backbone'], |
|||
function(Backbone){ |
|||
|
|||
return Backbone.View.extend({ |
|||
|
|||
initialize: function() { |
|||
this.pn = this.model.get('Panels'); |
|||
this.conf = this.model.config; |
|||
this.className = this.conf.stylePrefix + 'editor'; |
|||
this.model.on('loaded', function(){ |
|||
this.pn.active(); |
|||
this.model.runDefault(); |
|||
this.model.trigger('load'); |
|||
}, this); |
|||
}, |
|||
|
|||
render: function() { |
|||
var model = this.model; |
|||
var dComps = model.get('DomComponents'); |
|||
var config = model.get('Config'); |
|||
|
|||
if(config.loadCompsOnRender) { |
|||
dComps.getComponents().add(config.components); |
|||
dComps.onLoad(); |
|||
} |
|||
|
|||
var conf = this.conf; |
|||
var contEl = $(conf.el || ('body ' + conf.container)); |
|||
this.$el.empty(); |
|||
|
|||
if(conf.width) |
|||
contEl.css('width', conf.width); |
|||
|
|||
if(conf.height) |
|||
contEl.css('height', conf.height); |
|||
|
|||
// Canvas
|
|||
this.$el.append(model.get('Canvas').render()); |
|||
|
|||
// Panels
|
|||
this.$el.append(this.pn.render()); |
|||
this.$el.attr('class', this.className); |
|||
|
|||
contEl.addClass(conf.stylePrefix + 'editor-cont'); |
|||
contEl.html(this.$el); |
|||
|
|||
return this; |
|||
} |
|||
}); |
|||
return Backbone.View.extend({ |
|||
|
|||
initialize: function() { |
|||
this.pn = this.model.get('Panels'); |
|||
this.conf = this.model.config; |
|||
this.className = this.conf.stylePrefix + 'editor'; |
|||
this.model.on('loaded', function(){ |
|||
this.pn.active(); |
|||
this.model.runDefault(); |
|||
this.model.trigger('load'); |
|||
}, this); |
|||
}, |
|||
|
|||
render: function() { |
|||
var model = this.model; |
|||
var um = model.get('UndoManager'); |
|||
var dComps = model.get('DomComponents'); |
|||
var config = model.get('Config'); |
|||
|
|||
if(config.loadCompsOnRender) { |
|||
dComps.clear(); |
|||
dComps.getComponents().add(config.components); |
|||
um.clear(); |
|||
dComps.onLoad(); |
|||
} |
|||
|
|||
var conf = this.conf; |
|||
var contEl = $(conf.el || ('body ' + conf.container)); |
|||
this.$el.empty(); |
|||
|
|||
if(conf.width) |
|||
contEl.css('width', conf.width); |
|||
|
|||
if(conf.height) |
|||
contEl.css('height', conf.height); |
|||
|
|||
// Canvas
|
|||
this.$el.append(model.get('Canvas').render()); |
|||
|
|||
// Panels
|
|||
this.$el.append(this.pn.render()); |
|||
this.$el.attr('class', this.className); |
|||
|
|||
contEl.addClass(conf.stylePrefix + 'editor-cont'); |
|||
contEl.html(this.$el); |
|||
|
|||
return this; |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
Loading…
Reference in new issue