mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
16 changed files with 640 additions and 553 deletions
File diff suppressed because one or more lines are too long
@ -1,31 +1,32 @@ |
|||
define(['backbone'], |
|||
function(Backbone) { |
|||
function(Backbone) { |
|||
|
|||
return Backbone.Model.extend({ |
|||
return Backbone.Model.extend({ |
|||
|
|||
defaults: { |
|||
index: '', |
|||
active: true, |
|||
value: '', |
|||
values: {}, |
|||
preview: false, |
|||
}, |
|||
defaults: { |
|||
index: '', |
|||
value: '', |
|||
values: {}, |
|||
active: true, |
|||
preview: false, |
|||
}, |
|||
|
|||
initialize: function(){ |
|||
var value = this.get('value'); |
|||
initialize: function(){ |
|||
var value = this.get('value'); |
|||
|
|||
// If there is no value I'll try to get it from values
|
|||
// I need value setted to make preview working
|
|||
if(!value){ |
|||
var val = ''; |
|||
var values = this.get('values'); |
|||
// If there is no value I'll try to get it from values
|
|||
// I need value setted to make preview working
|
|||
if(!value){ |
|||
var val = ''; |
|||
var values = this.get('values'); |
|||
|
|||
for(var prop in values) |
|||
val += ' ' + values[prop]; |
|||
for (var prop in values) { |
|||
val += ' ' + values[prop]; |
|||
} |
|||
|
|||
this.set('value', val.trim()); |
|||
} |
|||
this.set('value', val.trim()); |
|||
} |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
@ -1,175 +1,180 @@ |
|||
define(['backbone', 'text!./../templates/layer.html'], |
|||
function (Backbone, layerTemplate) { |
|||
/** |
|||
* @class LayerView |
|||
* */ |
|||
return Backbone.View.extend({ |
|||
|
|||
events:{ |
|||
'click': 'updateIndex', |
|||
}, |
|||
|
|||
template: _.template(layerTemplate), |
|||
|
|||
initialize: function(o) { |
|||
this.stackModel = o.stackModel || {}; |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix || ''; |
|||
this.className = this.pfx + 'layer'; |
|||
this.sorter = o.sorter || null; |
|||
this.listenTo(this.model, 'destroy remove', this.remove); |
|||
this.listenTo(this.model, 'change:value', this.valueChanged); |
|||
this.listenTo(this.model, 'change:props', this.showProps); |
|||
this.events['click #' + this.pfx + 'close-layer'] = 'remove'; |
|||
this.events['mousedown > #' + this.pfx + 'move'] = 'initSorter'; |
|||
|
|||
if( !this.model.get('preview') ){ |
|||
this.$el.addClass(this.pfx + 'no-preview'); |
|||
} |
|||
this.$el.data('model', this.model); |
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
/** |
|||
* Delegate sorting |
|||
* @param {Event} e |
|||
* */ |
|||
initSorter: function(e){ |
|||
if(this.sorter) |
|||
this.sorter.startSort(this.el); |
|||
}, |
|||
|
|||
/** |
|||
* Returns properties |
|||
* @return {Collection|null} |
|||
*/ |
|||
getProps: function(){ |
|||
if(this.stackModel.get) |
|||
return this.stackModel.get('properties'); |
|||
else |
|||
return null; |
|||
}, |
|||
|
|||
/** |
|||
* Emitted when the value is changed |
|||
*/ |
|||
valueChanged: function(){ |
|||
var preview = this.model.get('preview'); |
|||
|
|||
if(!preview) |
|||
return; |
|||
|
|||
if(!this.$preview) |
|||
this.$preview = this.$el.find('#' + this.pfx + 'preview'); |
|||
|
|||
var prw = ''; |
|||
if(typeof preview === "function") |
|||
preview(this.getProps(), this.$preview); |
|||
else |
|||
this.onPreview(this.getProps(), this.$preview); |
|||
}, |
|||
|
|||
/** |
|||
* Default method for changing preview box |
|||
* @param {Collection} props |
|||
* @param {Element} $el |
|||
*/ |
|||
onPreview: function(props, $el){ |
|||
var aV = this.model.get('value').split(' '); |
|||
var lim = 3; |
|||
var nV = ''; |
|||
props.each(function(p, index){ |
|||
var v = aV[index] || ''; |
|||
if(v){ |
|||
if(p.get('type') == 'integer'){ |
|||
var vI = parseInt(v, 10), |
|||
u = v.replace(vI,''); |
|||
vI = !isNaN(vI) ? vI : 0; |
|||
if(vI > lim) |
|||
vI = lim; |
|||
if(vI < -lim) |
|||
vI = -lim; |
|||
v = vI + u; |
|||
} |
|||
} |
|||
nV += v + ' '; |
|||
}); |
|||
|
|||
if(this.stackModel.get){ |
|||
var property = this.stackModel.get('property'); |
|||
if(property) |
|||
this.$preview.get(0).style[property] = nV; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Show inputs on this layer |
|||
* */ |
|||
showProps:function(){ |
|||
this.$props = this.model.get('props'); |
|||
this.$el.find('#' + this.pfx + 'inputs').html(this.$props.show()); |
|||
this.model.set({props: null }, {silent: true }); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
remove: function(e){ |
|||
// Prevent from revoming all events on props
|
|||
if(this.$props) |
|||
this.$props.detach(); |
|||
|
|||
if(e && e.stopPropagation) |
|||
e.stopPropagation(); |
|||
|
|||
Backbone.View.prototype.remove.apply(this, arguments); |
|||
|
|||
//---
|
|||
if(this.model.collection.contains(this.model)) |
|||
this.model.collection.remove(this.model); |
|||
|
|||
if(this.stackModel && this.stackModel.set){ |
|||
this.stackModel.set({stackIndex: null}, {silent: true}); |
|||
this.stackModel.trigger('updateValue'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Update index |
|||
* @param Event |
|||
* |
|||
* @return void |
|||
* */ |
|||
updateIndex: function(e){ |
|||
var i = this.getIndex(); |
|||
this.stackModel.set('stackIndex', i); |
|||
|
|||
if(this.model.collection) |
|||
this.model.collection.trigger('deselectAll'); |
|||
|
|||
this.$el.addClass(this.pfx + 'active'); |
|||
}, |
|||
|
|||
/** |
|||
* Fetch model index |
|||
* @return {number} Index |
|||
*/ |
|||
getIndex: function(){ |
|||
var index = 0; |
|||
|
|||
if(this.model.collection) |
|||
index = this.model.collection.indexOf(this.model); |
|||
|
|||
return index; |
|||
}, |
|||
|
|||
render : function(){ |
|||
this.$el.html( this.template({ |
|||
label: 'Layer ' + this.model.get('index'), |
|||
pfx: this.pfx, |
|||
})); |
|||
this.$el.attr('class', this.className); |
|||
this.valueChanged(); |
|||
return this; |
|||
}, |
|||
|
|||
}); |
|||
function (Backbone, layerTemplate) { |
|||
/** |
|||
* @class LayerView |
|||
* */ |
|||
return Backbone.View.extend({ |
|||
|
|||
events:{ |
|||
'click': 'updateIndex', |
|||
}, |
|||
|
|||
template: _.template(layerTemplate), |
|||
|
|||
initialize: function(o) { |
|||
this.stackModel = o.stackModel || {}; |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix || ''; |
|||
this.className = this.pfx + 'layer'; |
|||
this.sorter = o.sorter || null; |
|||
this.listenTo(this.model, 'destroy remove', this.remove); |
|||
this.listenTo(this.model, 'change:value', this.valueChanged); |
|||
this.listenTo(this.model, 'change:props', this.showProps); |
|||
this.events['click #' + this.pfx + 'close-layer'] = 'remove'; |
|||
this.events['mousedown > #' + this.pfx + 'move'] = 'initSorter'; |
|||
|
|||
if( !this.model.get('preview') ){ |
|||
this.$el.addClass(this.pfx + 'no-preview'); |
|||
} |
|||
this.$el.data('model', this.model); |
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
/** |
|||
* Delegate sorting |
|||
* @param {Event} e |
|||
* */ |
|||
initSorter: function(e){ |
|||
if(this.sorter) |
|||
this.sorter.startSort(this.el); |
|||
}, |
|||
|
|||
/** |
|||
* Returns properties |
|||
* @return {Collection|null} |
|||
*/ |
|||
getProps: function(){ |
|||
if(this.stackModel.get) |
|||
return this.stackModel.get('properties'); |
|||
else |
|||
return null; |
|||
}, |
|||
|
|||
/** |
|||
* Emitted when the value is changed |
|||
*/ |
|||
valueChanged: function() { |
|||
var preview = this.model.get('preview'); |
|||
|
|||
if(!preview) |
|||
return; |
|||
|
|||
if(!this.$preview) |
|||
this.$preview = this.$el.find('#' + this.pfx + 'preview'); |
|||
|
|||
var prw = ''; |
|||
var props = this.getProps(); |
|||
var previewEl = this.$preview; |
|||
if (typeof preview === 'function') { |
|||
preview(props, previewEl); |
|||
} else { |
|||
this.onPreview(props, previewEl); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Default method for changing preview box |
|||
* @param {Collection} props |
|||
* @param {Element} $el |
|||
*/ |
|||
onPreview: function(props, $el) { |
|||
var aV = this.model.get('value').split(' '); |
|||
var lim = 3; |
|||
var nV = ''; |
|||
props.each(function(p, index){ |
|||
var v = aV[index] || ''; |
|||
if(v){ |
|||
if(p.get('type') == 'integer'){ |
|||
var vI = parseInt(v, 10), |
|||
u = v.replace(vI,''); |
|||
vI = !isNaN(vI) ? vI : 0; |
|||
if(vI > lim) |
|||
vI = lim; |
|||
if(vI < -lim) |
|||
vI = -lim; |
|||
v = vI + u; |
|||
} |
|||
} |
|||
nV += v + ' '; |
|||
}); |
|||
|
|||
if(this.stackModel.get){ |
|||
var property = this.stackModel.get('property'); |
|||
if(property) |
|||
this.$preview.get(0).style[property] = nV; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Show inputs on this layer |
|||
* */ |
|||
showProps:function(){ |
|||
this.$props = this.model.get('props'); |
|||
this.$el.find('#' + this.pfx + 'inputs').html(this.$props.show()); |
|||
this.model.set({props: null }, {silent: true }); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
remove: function(e){ |
|||
// Prevent from revoming all events on props
|
|||
if(this.$props) |
|||
this.$props.detach(); |
|||
|
|||
if(e && e.stopPropagation) |
|||
e.stopPropagation(); |
|||
|
|||
Backbone.View.prototype.remove.apply(this, arguments); |
|||
|
|||
//---
|
|||
if(this.model.collection.contains(this.model)) |
|||
this.model.collection.remove(this.model); |
|||
|
|||
if(this.stackModel && this.stackModel.set){ |
|||
this.stackModel.set({stackIndex: null}, {silent: true}); |
|||
this.stackModel.trigger('updateValue'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Update index |
|||
* @param Event |
|||
* |
|||
* @return void |
|||
* */ |
|||
updateIndex: function(e) { |
|||
var i = this.getIndex(); |
|||
this.stackModel.set('stackIndex', i); |
|||
|
|||
if(this.model.collection) |
|||
this.model.collection.trigger('deselectAll'); |
|||
|
|||
this.$el.addClass(this.pfx + 'active'); |
|||
}, |
|||
|
|||
/** |
|||
* Fetch model index |
|||
* @return {number} Index |
|||
*/ |
|||
getIndex: function() { |
|||
var index = 0; |
|||
var model = this.model; |
|||
|
|||
if (model.collection) { |
|||
index = model.collection.indexOf(model); |
|||
} |
|||
|
|||
return index; |
|||
}, |
|||
|
|||
render : function(){ |
|||
this.$el.html( this.template({ |
|||
label: 'Layer ' + this.model.get('index'), |
|||
pfx: this.pfx, |
|||
})); |
|||
this.$el.attr('class', this.className); |
|||
this.valueChanged(); |
|||
return this; |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
|
|||
@ -1,142 +1,145 @@ |
|||
define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html','require'], |
|||
function (Backbone, PropertyView, propertyTemplate, require) { |
|||
/** |
|||
* @class PropertyCompositeView |
|||
* */ |
|||
return PropertyView.extend({ |
|||
|
|||
template: _.template(propertyTemplate), |
|||
|
|||
initialize: function(o) { |
|||
PropertyView.prototype.initialize.apply(this, arguments); |
|||
_.bindAll(this, 'build'); |
|||
this.config = o.config || {}; |
|||
this.className = this.className + ' '+ this.pfx +'composite'; |
|||
}, |
|||
|
|||
/** |
|||
* Fired when the input value is updated |
|||
*/ |
|||
valueUpdated: function(){ |
|||
if(!this.model.get('detached')) |
|||
PropertyView.prototype.valueUpdated.apply(this, arguments); |
|||
}, |
|||
|
|||
/** |
|||
* Renders input |
|||
* */ |
|||
renderInput: function() { |
|||
var props = this.model.get('properties'); |
|||
var detached = this.model.get('detached'); |
|||
if(props && props.length){ |
|||
if(!this.$input) |
|||
this.$input = $('<input>', {value: 0, type: 'hidden' }); |
|||
|
|||
if(!this.props){ |
|||
this.props = this.model.get('properties'); |
|||
} |
|||
|
|||
if(!this.$props){ |
|||
//Not yet supported nested composite
|
|||
this.props.each(function(prop, index){ |
|||
if(prop && prop.get('type') == 'composite'){ |
|||
this.props.remove(prop); |
|||
console.warn('Nested composite types not yet allowed.'); |
|||
} |
|||
}, this); |
|||
|
|||
var PropertiesView = require('./PropertiesView'); |
|||
var propsView = new PropertiesView(this.getPropsConfig()); |
|||
this.$props = propsView.render().$el; |
|||
this.$el.find('#'+ this.pfx +'input-holder').html(this.$props); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Returns configurations that should be past to properties |
|||
* @param {Object} opts |
|||
* @return {Object} |
|||
*/ |
|||
getPropsConfig: function(opts){ |
|||
var that = this; |
|||
|
|||
result = { |
|||
config: this.config, |
|||
collection: this.props, |
|||
target: this.target, |
|||
propTarget: this.propTarget, |
|||
// On any change made to children I need to update composite value
|
|||
onChange: function(el, view, opts){ |
|||
var result = that.build(); |
|||
that.model.set('value', result, opts); |
|||
}, |
|||
// Each child property will receive a full composite string, eg. '0px 0px 10px 0px'
|
|||
// I need to extract from that string the corresponding one to that property.
|
|||
customValue: function(property, mIndex){ |
|||
return that.valueOnIndex(mIndex, property); |
|||
}, |
|||
}; |
|||
|
|||
// If detached let follow its standard flow
|
|||
if(this.model.get('detached')) |
|||
delete result.onChange; |
|||
|
|||
return result; |
|||
}, |
|||
|
|||
/** |
|||
* Get default value of the property |
|||
* @return {string} |
|||
* */ |
|||
getDefaultValue: function(){ |
|||
var str = ''; |
|||
this.props.each(function(prop, index){ |
|||
str += prop.get('defaults') + prop.get('unit') + ' '; |
|||
}); |
|||
return str.replace(/ +$/,''); |
|||
}, |
|||
|
|||
/** |
|||
* Extract string from composite value |
|||
* @param {number} index Index |
|||
* @param {Object} view Property view |
|||
* @return {string} |
|||
* */ |
|||
valueOnIndex: function(index, view){ |
|||
var result = null; |
|||
var a = this.getComponentValue().split(' '); |
|||
if(a.length && a[index]){ |
|||
result = a[index]; |
|||
if(view && view.model && view.model.get('functionName')){ |
|||
var v = this.fetchFromFunction(result); |
|||
if(v) |
|||
result = v; |
|||
} |
|||
} |
|||
return result; |
|||
}, |
|||
|
|||
/** |
|||
* Build composite value |
|||
* @param {Object} selectedEl Selected element |
|||
* @param {Object} propertyView Property view |
|||
* @param {Object} opts Options |
|||
* @return {string} |
|||
* */ |
|||
build: function(selectedEl, propertyView, opts){ |
|||
var result = ''; |
|||
this.model.get('properties').each(function(prop){ |
|||
var v = prop.getValue(); |
|||
func = prop.get('functionName'); |
|||
|
|||
if(func) |
|||
v = func + '(' + v + ')'; |
|||
|
|||
result += v + ' '; |
|||
}); |
|||
return result.replace(/ +$/,''); |
|||
}, |
|||
|
|||
}); |
|||
function (Backbone, PropertyView, propertyTemplate, require) { |
|||
/** |
|||
* @class PropertyCompositeView |
|||
* */ |
|||
return PropertyView.extend({ |
|||
|
|||
template: _.template(propertyTemplate), |
|||
|
|||
initialize: function(o) { |
|||
PropertyView.prototype.initialize.apply(this, arguments); |
|||
_.bindAll(this, 'build'); |
|||
this.config = o.config || {}; |
|||
this.className = this.className + ' '+ this.pfx +'composite'; |
|||
}, |
|||
|
|||
/** |
|||
* Fired when the input value is updated |
|||
*/ |
|||
valueUpdated: function(){ |
|||
if(!this.model.get('detached')) |
|||
PropertyView.prototype.valueUpdated.apply(this, arguments); |
|||
}, |
|||
|
|||
/** |
|||
* Renders input |
|||
* */ |
|||
renderInput: function() { |
|||
var model = this.model; |
|||
var props = model.get('properties') || []; |
|||
var self = this; |
|||
|
|||
if (props.length) { |
|||
if(!this.$input) |
|||
this.$input = $('<input>', {value: 0, type: 'hidden' }); |
|||
|
|||
if (!this.props) { |
|||
this.props = model.get('properties'); |
|||
} |
|||
|
|||
if (!this.$props) { |
|||
//Not yet supported nested composite
|
|||
this.props.each(function(prop, index) { |
|||
if(prop && prop.get('type') == 'composite') { |
|||
this.props.remove(prop); |
|||
console.warn('Nested composite types not yet allowed.'); |
|||
} |
|||
prop.parent = model; |
|||
}, this); |
|||
|
|||
var PropertiesView = require('./PropertiesView'); |
|||
var propsView = new PropertiesView(this.getPropsConfig()); |
|||
this.$props = propsView.render().$el; |
|||
this.$el.find('#'+ this.pfx +'input-holder').html(this.$props); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Returns configurations that should be past to properties |
|||
* @param {Object} opts |
|||
* @return {Object} |
|||
*/ |
|||
getPropsConfig: function(opts){ |
|||
var that = this; |
|||
|
|||
result = { |
|||
config: this.config, |
|||
collection: this.props, |
|||
target: this.target, |
|||
propTarget: this.propTarget, |
|||
// On any change made to children I need to update composite value
|
|||
onChange: function(el, view, opts){ |
|||
var result = that.build(); |
|||
that.model.set('value', result, opts); |
|||
}, |
|||
// Each child property will receive a full composite string, eg. '0px 0px 10px 0px'
|
|||
// I need to extract from that string the corresponding one to that property.
|
|||
customValue: function(property, mIndex){ |
|||
return that.valueOnIndex(mIndex, property); |
|||
}, |
|||
}; |
|||
|
|||
// If detached let follow its standard flow
|
|||
if(this.model.get('detached')) |
|||
delete result.onChange; |
|||
|
|||
return result; |
|||
}, |
|||
|
|||
/** |
|||
* Get default value of the property |
|||
* @return {string} |
|||
* */ |
|||
getDefaultValue: function(){ |
|||
var str = ''; |
|||
this.props.each(function(prop, index){ |
|||
str += prop.get('defaults') + prop.get('unit') + ' '; |
|||
}); |
|||
return str.replace(/ +$/,''); |
|||
}, |
|||
|
|||
/** |
|||
* Extract string from composite value |
|||
* @param {number} index Index |
|||
* @param {Object} view Property view |
|||
* @return {string} |
|||
* */ |
|||
valueOnIndex: function(index, view){ |
|||
var result = null; |
|||
var a = this.getComponentValue().split(' '); |
|||
if(a.length && a[index]){ |
|||
result = a[index]; |
|||
if(view && view.model && view.model.get('functionName')){ |
|||
var v = this.fetchFromFunction(result); |
|||
if(v) |
|||
result = v; |
|||
} |
|||
} |
|||
return result; |
|||
}, |
|||
|
|||
/** |
|||
* Build composite value |
|||
* @param {Object} selectedEl Selected element |
|||
* @param {Object} propertyView Property view |
|||
* @param {Object} opts Options |
|||
* @return {string} |
|||
* */ |
|||
build: function(selectedEl, propertyView, opts){ |
|||
var result = ''; |
|||
this.model.get('properties').each(function(prop){ |
|||
var v = prop.getValue(); |
|||
func = prop.get('functionName'); |
|||
|
|||
if(func) |
|||
v = func + '(' + v + ')'; |
|||
|
|||
result += v + ' '; |
|||
}); |
|||
return result.replace(/ +$/,''); |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
|
|||
@ -1,134 +1,133 @@ |
|||
define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'], |
|||
function (Backbone, PropertyView, propertyTemplate) { |
|||
/** |
|||
* @class PropertyColorView |
|||
* */ |
|||
return PropertyView.extend({ |
|||
|
|||
template: _.template(propertyTemplate), |
|||
|
|||
initialize: function(options) { |
|||
PropertyView.prototype.initialize.apply(this, arguments); |
|||
this.assets = this.target.get('assets'); |
|||
this.modal = this.target.get('Modal'); |
|||
this.am = this.target.get('AssetManager'); |
|||
this.className = this.className + ' '+ this.pfx +'file'; |
|||
this.events['click #'+this.pfx+'close'] = 'removeFile'; |
|||
this.events['click #'+this.pfx+'images'] = 'openAssetManager'; |
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
renderInput: function() { |
|||
|
|||
if(!this.$input){ |
|||
this.$input = $('<input>', {placeholder: this.defaultValue, type: 'text' }); |
|||
} |
|||
|
|||
if(!this.$preview){ |
|||
this.$preview = this.$el.find('#' + this.pfx + 'preview-file'); |
|||
} |
|||
|
|||
if(!this.$previewBox){ |
|||
this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box'); |
|||
} |
|||
|
|||
if(!this.componentValue || this.componentValue == this.defaultValue) |
|||
this.setPreviewView(0); |
|||
else |
|||
this.setPreviewView(1); |
|||
|
|||
this.setValue(this.componentValue,0); |
|||
}, |
|||
|
|||
/** |
|||
* Change visibility of the preview box |
|||
* @param bool Visibility |
|||
* |
|||
* @return void |
|||
* */ |
|||
setPreviewView: function(v){ |
|||
if(!this.$previewBox) |
|||
return; |
|||
if(v) |
|||
this.$previewBox.addClass(this.pfx + 'show'); |
|||
else |
|||
this.$previewBox.removeClass(this.pfx + 'show'); |
|||
}, |
|||
|
|||
/** |
|||
* Spread url |
|||
* @param string Url |
|||
* |
|||
* @return void |
|||
* */ |
|||
spreadUrl: function(url){ |
|||
this.setValue('url("'+url+'")'); |
|||
this.setPreviewView(1); |
|||
}, |
|||
|
|||
/** |
|||
* Shows file preview |
|||
* @param string Value |
|||
* */ |
|||
setPreview: function(v){ |
|||
if(this.$preview) |
|||
this.$preview.css('background-image',v); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
setValue: function(value, f){ |
|||
PropertyView.prototype.setValue.apply(this, arguments); |
|||
this.setPreview(value); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
renderTemplate: function(){ |
|||
this.$el.append( this.template({ |
|||
upload : 'Upload', |
|||
assets : 'Images', |
|||
pfx : this.pfx |
|||
})); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
cleanValue: function(){ |
|||
this.setPreviewView(0); |
|||
this.model.set({value: ''},{silent: true}); |
|||
}, |
|||
|
|||
/** |
|||
* Remove file from input |
|||
* |
|||
* @return void |
|||
* */ |
|||
removeFile:function(){ |
|||
this.model.set('value',this.defaultValue); |
|||
PropertyView.prototype.cleanValue.apply(this, arguments); |
|||
this.setPreviewView(0); |
|||
}, |
|||
|
|||
/** |
|||
* Open dialog for image selecting |
|||
* @param {Object} e Event |
|||
* |
|||
* @return void |
|||
* */ |
|||
openAssetManager: function(e){ |
|||
var that = this; |
|||
if(this.modal && this.am){ |
|||
this.modal.setTitle('Select image'); |
|||
this.modal.setContent(this.am.render()); |
|||
this.am.setTarget(null); |
|||
this.modal.open(); |
|||
this.am.onSelect(function(model){ |
|||
that.modal.close(); |
|||
that.spreadUrl(model.get('src')); |
|||
that.valueChanged(e); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
|
|||
}); |
|||
function (Backbone, PropertyView, propertyTemplate) { |
|||
/** |
|||
* @class PropertyColorView |
|||
* */ |
|||
return PropertyView.extend({ |
|||
|
|||
template: _.template(propertyTemplate), |
|||
|
|||
initialize: function(options) { |
|||
PropertyView.prototype.initialize.apply(this, arguments); |
|||
this.assets = this.target.get('assets'); |
|||
this.modal = this.target.get('Modal'); |
|||
this.am = this.target.get('AssetManager'); |
|||
this.className = this.className + ' '+ this.pfx +'file'; |
|||
this.events['click #'+this.pfx+'close'] = 'removeFile'; |
|||
this.events['click #'+this.pfx+'images'] = 'openAssetManager'; |
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
renderInput: function() { |
|||
if (!this.$input) { |
|||
this.$input = $('<input>', {placeholder: this.defaultValue, type: 'text' }); |
|||
} |
|||
|
|||
if (!this.$preview) { |
|||
this.$preview = this.$el.find('#' + this.pfx + 'preview-file'); |
|||
} |
|||
|
|||
if (!this.$previewBox) { |
|||
this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box'); |
|||
} |
|||
|
|||
if(!this.componentValue || this.componentValue == this.defaultValue) |
|||
this.setPreviewView(0); |
|||
else |
|||
this.setPreviewView(1); |
|||
|
|||
this.setValue(this.componentValue, 0); |
|||
}, |
|||
|
|||
/** |
|||
* Change visibility of the preview box |
|||
* @param bool Visibility |
|||
* |
|||
* @return void |
|||
* */ |
|||
setPreviewView: function(v){ |
|||
if(!this.$previewBox) |
|||
return; |
|||
if(v) |
|||
this.$previewBox.addClass(this.pfx + 'show'); |
|||
else |
|||
this.$previewBox.removeClass(this.pfx + 'show'); |
|||
}, |
|||
|
|||
/** |
|||
* Spread url |
|||
* @param string Url |
|||
* |
|||
* @return void |
|||
* */ |
|||
spreadUrl: function(url) { |
|||
this.setValue(url); |
|||
this.setPreviewView(1); |
|||
}, |
|||
|
|||
/** |
|||
* Shows file preview |
|||
* @param string Value |
|||
* */ |
|||
setPreview: function(url) { |
|||
if(this.$preview) |
|||
this.$preview.css('background-image', "url(" + url + ")"); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
setValue: function(value, f){ |
|||
PropertyView.prototype.setValue.apply(this, arguments); |
|||
this.setPreview(value); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
renderTemplate: function(){ |
|||
this.$el.append( this.template({ |
|||
upload : 'Upload', |
|||
assets : 'Images', |
|||
pfx : this.pfx |
|||
})); |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
cleanValue: function(){ |
|||
this.setPreviewView(0); |
|||
this.model.set({value: ''},{silent: true}); |
|||
}, |
|||
|
|||
/** |
|||
* Remove file from input |
|||
* |
|||
* @return void |
|||
* */ |
|||
removeFile:function(){ |
|||
this.model.set('value',this.defaultValue); |
|||
PropertyView.prototype.cleanValue.apply(this, arguments); |
|||
this.setPreviewView(0); |
|||
}, |
|||
|
|||
/** |
|||
* Open dialog for image selecting |
|||
* @param {Object} e Event |
|||
* |
|||
* @return void |
|||
* */ |
|||
openAssetManager: function(e){ |
|||
var that = this; |
|||
if(this.modal && this.am){ |
|||
this.modal.setTitle('Select image'); |
|||
this.modal.setContent(this.am.render()); |
|||
this.am.setTarget(null); |
|||
this.modal.open(); |
|||
this.am.onSelect(function(model){ |
|||
that.modal.close(); |
|||
that.spreadUrl(model.get('src')); |
|||
that.valueChanged(e); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
|
|||
}); |
|||
}); |
|||
|
|||
@ -1,40 +1,41 @@ |
|||
define(['backbone','./PropertyView', 'Abstract/ui/InputNumber'], |
|||
function (Backbone, PropertyView, InputNumber) { |
|||
function (Backbone, PropertyView, InputNumber) { |
|||
|
|||
return PropertyView.extend({ |
|||
return PropertyView.extend({ |
|||
|
|||
initialize: function(options) { |
|||
PropertyView.prototype.initialize.apply(this, arguments); |
|||
this.listenTo( this.model ,'change:unit', this.valueChanged); |
|||
}, |
|||
initialize: function(options) { |
|||
PropertyView.prototype.initialize.apply(this, arguments); |
|||
this.listenTo( this.model ,'change:unit', this.valueChanged); |
|||
}, |
|||
|
|||
/** |
|||
* Returns value from inputs |
|||
* @return {string} |
|||
*/ |
|||
getValueForTarget: function(){ |
|||
return this.model.get('value') + this.model.get('unit'); |
|||
}, |
|||
/** |
|||
* Returns value from inputs |
|||
* @return {string} |
|||
*/ |
|||
getValueForTarget: function() { |
|||
var model = this.model; |
|||
return model.get('value') + model.get('unit'); |
|||
}, |
|||
|
|||
renderInput: function() { |
|||
if (!this.input) { |
|||
var inputNumber = new InputNumber({ |
|||
model: this.model, |
|||
ppfx: this.ppfx |
|||
}); |
|||
this.input = inputNumber.render(); |
|||
this.$el.append(this.input.$el); |
|||
this.$input = this.input.inputEl; |
|||
this.$unit = this.input.unitEl; |
|||
} |
|||
this.setValue(this.componentValue); |
|||
}, |
|||
renderInput: function() { |
|||
if (!this.input) { |
|||
var inputNumber = new InputNumber({ |
|||
model: this.model, |
|||
ppfx: this.ppfx |
|||
}); |
|||
this.input = inputNumber.render(); |
|||
this.$el.append(this.input.$el); |
|||
this.$input = this.input.inputEl; |
|||
this.$unit = this.input.unitEl; |
|||
} |
|||
this.setValue(this.componentValue); |
|||
}, |
|||
|
|||
renderTemplate: function(){}, |
|||
renderTemplate: function(){}, |
|||
|
|||
setValue: function(value) { |
|||
this.input.setValue(value, {silent: 1}); |
|||
}, |
|||
setValue: function(value) { |
|||
this.input.setValue(value, {silent: 1}); |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
Loading…
Reference in new issue