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