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

Update radio and select rendering in Style Manager

pull/79/merge
Artur Arseniev 10 years ago
parent
f86b9824de
commit
33365e9ace
5 changed files with 100 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      bower.json
  2. 4
      dist/grapes.min.js
  3. 2
      package.json
  4. 126
      src/style_manager/view/PropertyRadioView.js
  5. 61
      src/style_manager/view/PropertySelectView.js

2
bower.json
View File

@ -1,7 +1,7 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"description": "Open source Web Template Editor", "description": "Open source Web Template Editor",
"version": "0.5.23", "version": "0.5.24",
"author": "Artur Arseniev", "author": "Artur Arseniev",
"homepage": "http://grapesjs.com", "homepage": "http://grapesjs.com",
"main": [ "main": [

4
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"description": "Open source Web Template Editor", "description": "Open source Web Template Editor",
"version": "0.5.23", "version": "0.5.24",
"author": "Artur Arseniev", "author": "Artur Arseniev",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"homepage": "http://grapesjs.com", "homepage": "http://grapesjs.com",

126
src/style_manager/view/PropertyRadioView.js
View File

@ -1,63 +1,67 @@
define(['backbone','./PropertyView', 'text!./../templates/propertyRadio.html'], define(['backbone','./PropertyView', 'text!./../templates/propertyRadio.html'],
function (Backbone, PropertyView, propertyTemplate) { function (Backbone, PropertyView, propertyTemplate) {
/** /**
* @class PropertyRadioView * @class PropertyRadioView
* */ * */
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.list = this.model.get('list') || []; this.list = this.model.get('list') || [];
this.className = this.className + ' '+ this.pfx +'list'; this.className = this.className + ' '+ this.pfx +'list';
}, },
/** @inheritdoc */ /** @inheritdoc */
renderInput: function() { renderInput: function() {
var pfx = this.pfx; var pfx = this.pfx;
var ppfx = this.ppfx; var ppfx = this.ppfx;
var itemCls = ppfx + 'radio-item-label'; var itemCls = ppfx + 'radio-item-label';
if(!this.$input){ var prop = this.property;
if(this.list && this.list.length){
this.input = ''; if(!this.$input) {
_.each(this.list,function(el){ if(this.list && this.list.length) {
var cl = el.className ? el.className + ' ' + pfx + 'icon ' + itemCls : '', var input = '';
id = this.property + '-' + el.value, _.each(this.list, function(el) {
labelTxt = el.name ? el.name : el.value; var cl = el.className ? el.className + ' ' + pfx + 'icon ' + itemCls : '',
titleAttr = el.title ? 'title="' + el.title + '"': ''; id = prop + '-' + el.value,
this.input += '<div class="' + ppfx + 'radio-item">'+ labelTxt = el.name ? el.name : el.value;
'<input class="'+pfx+'radio" type="radio" id="'+ id +'" name="'+this.property+'" value="'+el.value+'" />'+ titleAttr = el.title ? 'title="' + el.title + '"': '';
'<label class="'+(cl ? cl : itemCls)+'" ' + titleAttr + ' for="'+ id +'">' + (cl ? '' : labelTxt) + '</label></div>'; input += '<div class="' + ppfx + 'radio-item">'+
},this); '<input class="'+pfx+'radio" type="radio" id="'+ id +'" name="'+prop+'" value="'+el.value+'" />'+
this.$inputEl = $(this.input); '<label class="'+(cl ? cl : itemCls)+'" ' + titleAttr + ' for="'+ id +'">' + (cl ? '' : labelTxt) + '</label></div>';
this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl); });
this.$input = this.$inputEl.find('input[name="'+this.property+'"]'); this.input = input;
} this.$inputEl = $(this.input);
} this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl);
this.setValue(this.componentValue); this.$input = this.$inputEl.find('input[name="'+this.property+'"]');
}, }
}
/**
* Returns value from input this.setValue(this.componentValue);
* @return {string} },
*/
getInputValue: function(){ /**
return this.$input ? this.$el.find('input:checked').val() : ''; * Returns value from input
}, * @return {string}
*/
/** @inheritdoc */ getInputValue: function(){
setValue: function(value){ return this.$input ? this.$el.find('input:checked').val() : '';
var v = this.model.get('value') || this.defaultValue; },
if(value) /** @inheritdoc */
v = value; setValue: function(value){
var v = this.model.get('value') || this.defaultValue;
if(this.$input)
this.$input.filter('[value="'+v+'"]').prop('checked', true); if(value)
v = value;
this.model.set({value: v},{silent: true});
}, if(this.$input)
this.$input.filter('[value="'+v+'"]').prop('checked', true);
});
this.model.set({value: v},{silent: true});
},
});
}); });

61
src/style_manager/view/PropertySelectView.js
View File

@ -1,38 +1,39 @@
define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'], define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'],
function (Backbone, PropertyView, propertyTemplate) { function (Backbone, PropertyView, propertyTemplate) {
/** /**
* @class PropertySelectView * @class PropertySelectView
* */ * */
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.list = this.model.get('list') || []; this.list = this.model.get('list') || [];
}, },
/** @inheritdoc */ /** @inheritdoc */
renderInput: function() { renderInput: function() {
var pfx = this.pfx; var pfx = this.pfx;
if(!this.$input){ if(!this.$input){
this.input = '<select>'; var input = '<select>';
if(this.list && this.list.length){ if (this.list && this.list.length) {
_.each(this.list,function(el){ _.each(this.list, function(el) {
var name = el.name ? el.name : el.value; var name = el.name ? el.name : el.value;
var style = el.style ? el.style.replace(/"/g,'&quot;') : ''; var style = el.style ? el.style.replace(/"/g,'&quot;') : '';
var styleAttr = style ? 'style="' + style + '"' : ''; var styleAttr = style ? 'style="' + style + '"' : '';
this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" ' + styleAttr + '>'+name+'</option>'; input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" ' + styleAttr + '>'+name+'</option>';
}, this); });
} }
this.input += '</select>'; input += '</select>';
this.$input = $(this.input); this.input = input;
this.$el.find('#'+ pfx +'input-holder').html(this.$input); this.$input = $(this.input);
} this.$el.find('#'+ pfx +'input-holder').html(this.$input);
this.setValue(this.componentValue, 0); }
}, this.setValue(this.componentValue, 0);
},
}); });
}); });

Write Preview
Loading…
Cancel
Save