mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
4 changed files with 189 additions and 162 deletions
@ -1,69 +1,70 @@ |
|||
define(['backbone', './Layers', 'require'], |
|||
function(Backbone, Layers, require) { |
|||
function(Backbone, Layers, require) { |
|||
|
|||
return Backbone.Model.extend({ |
|||
return Backbone.Model.extend({ |
|||
|
|||
defaults: { |
|||
name: '', |
|||
property: '', |
|||
type: '', |
|||
units: [], |
|||
unit: '', |
|||
defaults: '', |
|||
info: '', |
|||
value: '', |
|||
icon: '', |
|||
preview: false, |
|||
detached: false, |
|||
functionName: '', |
|||
properties: [], |
|||
layers: [], |
|||
list: [], |
|||
fixedValues: ['initial', 'inherit'], |
|||
}, |
|||
defaults: { |
|||
name: '', |
|||
property: '', |
|||
type: '', |
|||
units: [], |
|||
unit: '', |
|||
defaults: '', |
|||
info: '', |
|||
value: '', |
|||
icon: '', |
|||
preview: false, |
|||
detached: false, |
|||
visible: true, |
|||
functionName: '', |
|||
properties: [], |
|||
layers: [], |
|||
list: [], |
|||
fixedValues: ['initial', 'inherit'], |
|||
}, |
|||
|
|||
initialize: function(opt) { |
|||
var o = opt || {}; |
|||
var type = this.get('type'); |
|||
var name = this.get('name'); |
|||
var prop = this.get('property'); |
|||
var props = this.get('properties'); |
|||
initialize: function(opt) { |
|||
var o = opt || {}; |
|||
var type = this.get('type'); |
|||
var name = this.get('name'); |
|||
var prop = this.get('property'); |
|||
var props = this.get('properties'); |
|||
|
|||
if(!name) |
|||
this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g,' ')); |
|||
if(!name) |
|||
this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g,' ')); |
|||
|
|||
if(props.length){ |
|||
var Properties = require('./Properties'); |
|||
this.set('properties', new Properties(props)); |
|||
} |
|||
if(props.length){ |
|||
var Properties = require('./Properties'); |
|||
this.set('properties', new Properties(props)); |
|||
} |
|||
|
|||
switch(type){ |
|||
case 'stack': |
|||
this.set('layers', new Layers()); |
|||
break; |
|||
} |
|||
}, |
|||
switch(type){ |
|||
case 'stack': |
|||
this.set('layers', new Layers()); |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Return value |
|||
* @return {string} Value |
|||
* @private |
|||
*/ |
|||
getValue: function() { |
|||
var result = ''; |
|||
var type = this.get('type'); |
|||
/** |
|||
* Return value |
|||
* @return {string} Value |
|||
* @private |
|||
*/ |
|||
getValue: function() { |
|||
var result = ''; |
|||
var type = this.get('type'); |
|||
|
|||
switch(type){ |
|||
case 'integer': |
|||
result = this.get('value') + this.get('unit'); |
|||
break; |
|||
default: |
|||
result = this.get('value'); |
|||
break; |
|||
} |
|||
switch(type){ |
|||
case 'integer': |
|||
result = this.get('value') + this.get('unit'); |
|||
break; |
|||
default: |
|||
result = this.get('value'); |
|||
break; |
|||
} |
|||
|
|||
return result; |
|||
}, |
|||
return result; |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
@ -1,93 +1,106 @@ |
|||
define(['backbone', './PropertiesView', 'text!./../templates/sector.html'], |
|||
function (Backbone, PropertiesView, sectorTemplate) { |
|||
/** |
|||
* @class SectorView |
|||
* */ |
|||
return Backbone.View.extend({ |
|||
function (Backbone, PropertiesView, sectorTemplate) { |
|||
/** |
|||
* @class SectorView |
|||
* */ |
|||
return Backbone.View.extend({ |
|||
|
|||
template: _.template(sectorTemplate), |
|||
template: _.template(sectorTemplate), |
|||
|
|||
events:{}, |
|||
events:{}, |
|||
|
|||
initialize: function(o) { |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix || ''; |
|||
this.target = o.target || {}; |
|||
this.propTarget = o.propTarget || {}; |
|||
this.open = this.model.get('open'); |
|||
this.caretR = 'fa-caret-right'; |
|||
this.caretD = 'fa-caret-down'; |
|||
this.listenTo( this.model ,'change:open', this.updateOpen); |
|||
this.events['click .' + this.pfx + 'title'] = 'toggle'; |
|||
this.delegateEvents(); |
|||
}, |
|||
initialize: function(o) { |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix || ''; |
|||
this.target = o.target || {}; |
|||
this.propTarget = o.propTarget || {}; |
|||
this.open = this.model.get('open'); |
|||
this.caretR = 'fa-caret-right'; |
|||
this.caretD = 'fa-caret-down'; |
|||
this.listenTo(this.model, 'change:open', this.updateOpen); |
|||
this.listenTo(this.model, 'updateVisibility', this.updateVisibility); |
|||
this.events['click .' + this.pfx + 'title'] = 'toggle'; |
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
/** |
|||
* Update visibility |
|||
*/ |
|||
updateOpen: function() |
|||
{ |
|||
if(this.model.get('open')) |
|||
this.show(); |
|||
else |
|||
this.hide(); |
|||
}, |
|||
/** |
|||
* If all properties are hidden this will hide the sector |
|||
*/ |
|||
updateVisibility: function () { |
|||
var show; |
|||
this.model.get('properties').each(function(prop) { |
|||
if (prop.get('visible')) |
|||
show = 1; |
|||
}); |
|||
this.el.style.display = show ? 'block' : 'none'; |
|||
}, |
|||
|
|||
/** |
|||
* Show the content of the sector |
|||
* */ |
|||
show : function() |
|||
{ |
|||
this.$el.addClass(this.pfx + "open"); |
|||
this.$el.find('.' + this.pfx + 'properties').show(); |
|||
this.$caret.removeClass(this.caretR).addClass(this.caretD); |
|||
}, |
|||
/** |
|||
* Update visibility |
|||
*/ |
|||
updateOpen: function() |
|||
{ |
|||
if(this.model.get('open')) |
|||
this.show(); |
|||
else |
|||
this.hide(); |
|||
}, |
|||
|
|||
/** |
|||
* Hide the content of the sector |
|||
* */ |
|||
hide : function() |
|||
{ |
|||
this.$el.removeClass(this.pfx + "open"); |
|||
this.$el.find('.' + this.pfx + 'properties').hide(); |
|||
this.$caret.removeClass(this.caretD).addClass(this.caretR); |
|||
}, |
|||
/** |
|||
* Show the content of the sector |
|||
* */ |
|||
show : function() |
|||
{ |
|||
this.$el.addClass(this.pfx + "open"); |
|||
this.$el.find('.' + this.pfx + 'properties').show(); |
|||
this.$caret.removeClass(this.caretR).addClass(this.caretD); |
|||
}, |
|||
|
|||
/** |
|||
* Toggle visibility |
|||
* */ |
|||
toggle: function() |
|||
{ |
|||
var v = this.model.get('open') ? 0 : 1; |
|||
this.model.set('open', v); |
|||
}, |
|||
/** |
|||
* Hide the content of the sector |
|||
* */ |
|||
hide : function() |
|||
{ |
|||
this.$el.removeClass(this.pfx + "open"); |
|||
this.$el.find('.' + this.pfx + 'properties').hide(); |
|||
this.$caret.removeClass(this.caretD).addClass(this.caretR); |
|||
}, |
|||
|
|||
render : function() |
|||
{ |
|||
this.$el.html(this.template({ |
|||
pfx: this.pfx, |
|||
label: this.model.get('name'), |
|||
})); |
|||
this.$caret = this.$el.find('#' + this.pfx + 'caret'); |
|||
this.renderProperties(); |
|||
this.$el.attr('class', this.pfx + 'sector no-select'); |
|||
this.updateOpen(); |
|||
return this; |
|||
}, |
|||
/** |
|||
* Toggle visibility |
|||
* */ |
|||
toggle: function() |
|||
{ |
|||
var v = this.model.get('open') ? 0 : 1; |
|||
this.model.set('open', v); |
|||
}, |
|||
|
|||
renderProperties: function() |
|||
{ |
|||
var objs = this.model.get('properties'); |
|||
render : function() |
|||
{ |
|||
this.$el.html(this.template({ |
|||
pfx: this.pfx, |
|||
label: this.model.get('name'), |
|||
})); |
|||
this.$caret = this.$el.find('#' + this.pfx + 'caret'); |
|||
this.renderProperties(); |
|||
this.$el.attr('class', this.pfx + 'sector no-select'); |
|||
this.updateOpen(); |
|||
return this; |
|||
}, |
|||
|
|||
if(objs){ |
|||
var view = new PropertiesView({ |
|||
collection: objs, |
|||
target: this.target, |
|||
propTarget: this.propTarget, |
|||
config: this.config, |
|||
}); |
|||
this.$el.append(view.render().el); |
|||
} |
|||
}, |
|||
}); |
|||
renderProperties: function() |
|||
{ |
|||
var objs = this.model.get('properties'); |
|||
|
|||
if(objs){ |
|||
var view = new PropertiesView({ |
|||
collection: objs, |
|||
target: this.target, |
|||
propTarget: this.propTarget, |
|||
config: this.config, |
|||
}); |
|||
this.$el.append(view.render().el); |
|||
} |
|||
}, |
|||
}); |
|||
}); |
|||
|
|||
Loading…
Reference in new issue