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
Split 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",
"description": "Open source Web Template Editor",
"version": "0.5.23",
"version": "0.5.24",
"author": "Artur Arseniev",
"homepage": "http://grapesjs.com",
"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",
"description": "Open source Web Template Editor",
"version": "0.5.23",
"version": "0.5.24",
"author": "Artur Arseniev",
"license": "BSD-3-Clause",
"homepage": "http://grapesjs.com",

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

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

Write Preview
Loading…
Cancel
Save