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

Add text input property for empty type

pull/36/head
Artur Arseniev 10 years ago
parent
3a77338bf8
commit
dbb2950cfc
7 changed files with 40 additions and 20 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. 4
      src/demo.js
  2. 4
      src/style_manager/templates/propertyInput.html
  3. 20
      src/style_manager/view/PropertySelectView.js
  4. 17
      src/style_manager/view/PropertyView.js
  5. 2
      styles/css/main.css
  6. 2
      styles/scss/main.scss
  7. 11
      test/specs/style_manager/view/PropertyView.js

4
src/demo.js
View File

@ -317,6 +317,10 @@ require(['src/config/require-config.js'], function() {
sectors: [{ sectors: [{
name: 'General', name: 'General',
properties:[{ properties:[{
name : 'Test',
property : 'test',
defaults : 'testDef',
},{
name : 'Alignment', name : 'Alignment',
property : 'float', property : 'float',
type : 'radio', type : 'radio',

4
src/style_manager/templates/propertyInput.html
View File

@ -0,0 +1,4 @@
<div class="<%= pfx %>field <%= pfx %>input">
<span id='<%= pfx %>input-holder'></span>
</div>
<div style="clear:both"></div>

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

@ -1,30 +1,32 @@
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),
/** @inheritdoc */ /** @inheritdoc */
renderInput: function() { renderInput: function() {
var pfx = this.pfx; var pfx = this.pfx;
if(!this.$input){ if(!this.$input){
if(this.list && this.list.length){ if(this.list && this.list.length){
this.input = '<select>'; this.input = '<select>';
_.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;') : '';
this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>'; this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>';
},this); },this);
this.input += '</select>'; this.input += '</select>';
this.$input = $(this.input); this.$input = $(this.input);
this.$el.find('#'+ pfx +'input-holder').html(this.$input); this.$el.find('#'+ pfx +'input-holder').html(this.$input);
} }
} }
this.setValue(this.componentValue, 0); this.setValue(this.componentValue, 0);
}, },
}); });
}); });

17
src/style_manager/view/PropertyView.js
View File

@ -1,12 +1,12 @@
define(['backbone', 'text!./../templates/propertyLabel.html'], define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templates/propertyInput.html'],
function (Backbone, propertyTemplate) { function (Backbone, propertyLabel, propertyTemplate) {
/** /**
* @class PropertyView * @class PropertyView
* */ * */
return Backbone.View.extend({ return Backbone.View.extend({
template: _.template(propertyTemplate), template: _.template(propertyTemplate),
templateLabel: _.template(propertyTemplate), templateLabel: _.template(propertyLabel),
events: { events: {
'change' : 'valueChanged', 'change' : 'valueChanged',
@ -30,6 +30,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
this.list = this.model.get('list'); this.list = this.model.get('list');
this.input = this.$input = null; this.input = this.$input = null;
this.className = this.pfx + 'property'; this.className = this.pfx + 'property';
this.inputHolderId = '#' + this.pfx + 'input-holder';
this.listenTo( this.propTarget, 'update', this.targetUpdated); this.listenTo( this.propTarget, 'update', this.targetUpdated);
this.listenTo( this.model ,'change:value', this.valueChanged); this.listenTo( this.model ,'change:value', this.valueChanged);
}, },
@ -169,7 +170,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
icon : this.model.get('icon'), icon : this.model.get('icon'),
info : this.model.get('info'), info : this.model.get('info'),
label : this.model.get('name'), label : this.model.get('name'),
}) ); }));
}, },
/** /**
@ -197,7 +198,13 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
* Renders input, to override * Renders input, to override
* */ * */
renderInput: function(){ renderInput: function(){
console.warn("No render input implemented for '"+this.model.get('type')+"'"); if(!this.$input){
this.$input = $('<input>', {
placeholder: this.defaultValue,
type: 'text'
});
this.$el.find(this.inputHolderId).html(this.$input);
}
}, },
/** /**

2
styles/css/main.css
View File

@ -3030,7 +3030,7 @@ ol.example li.placeholder:before {
bottom: 4px; } bottom: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow { .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
bottom: 7px; } bottom: 7px; }
.wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field { .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-input, .wte-clm-tags .wte-sm-field.wte-sm-input, .wte-sm-sector .wte-sm-input.wte-clm-field, .wte-clm-tags .wte-sm-input.wte-clm-field {
background-color: #333333; background-color: #333333;
/*353535*/ /*353535*/
border: 1px solid #292929; border: 1px solid #292929;

2
styles/scss/main.scss
View File

@ -533,7 +533,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
} }
.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; } .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite { &.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite, &.#{$sm-prefix}input {
background-color: darken($mainDkColor, 2.5%);/*353535*/ background-color: darken($mainDkColor, 2.5%);/*353535*/
border: 1px solid darken($mainDkColor, 6.5%);/*292929*/ border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/ box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/

11
test/specs/style_manager/view/PropertyView.js
View File

@ -41,10 +41,13 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
prop.querySelector('.label').should.be.ok; prop.querySelector('.label').should.be.ok;
}); });
it('Rendered correctly', function() { it.skip('Update target on value change', function() {
var prop = view.el; });
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok; it.skip('Update value on target swap', function() {
});
it.skip('Get target style', function() {
}); });
}); });

Write Preview
Loading…
Cancel
Save