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
Split 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: [{
name: 'General',
properties:[{
name : 'Test',
property : 'test',
defaults : 'testDef',
},{
name : 'Alignment',
property : 'float',
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) {
/**
/**
* @class PropertySelectView
* */
return PropertyView.extend({
template: _.template(propertyTemplate),
/** @inheritdoc */
renderInput: function() {
var pfx = this.pfx;
if(!this.$input){
if(this.list && this.list.length){
this.input = '<select>';
_.each(this.list,function(el){
var name = el.name ? el.name : el.value;
var style = el.style ? el.style.replace(/"/g,'&quot;') : '';
this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>';
var name = el.name ? el.name : el.value;
var style = el.style ? el.style.replace(/"/g,'&quot;') : '';
this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>';
},this);
this.input += '</select>';
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);
},
},
});
});

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

@ -1,12 +1,12 @@
define(['backbone', 'text!./../templates/propertyLabel.html'],
function (Backbone, propertyTemplate) {
define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templates/propertyInput.html'],
function (Backbone, propertyLabel, propertyTemplate) {
/**
* @class PropertyView
* */
return Backbone.View.extend({
template: _.template(propertyTemplate),
templateLabel: _.template(propertyTemplate),
templateLabel: _.template(propertyLabel),
events: {
'change' : 'valueChanged',
@ -30,6 +30,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
this.list = this.model.get('list');
this.input = this.$input = null;
this.className = this.pfx + 'property';
this.inputHolderId = '#' + this.pfx + 'input-holder';
this.listenTo( this.propTarget, 'update', this.targetUpdated);
this.listenTo( this.model ,'change:value', this.valueChanged);
},
@ -169,7 +170,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
icon : this.model.get('icon'),
info : this.model.get('info'),
label : this.model.get('name'),
}) );
}));
},
/**
@ -197,7 +198,13 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
* Renders input, to override
* */
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; }
.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; }
.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;
/*353535*/
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}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*/
border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
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;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
it.skip('Update target on value change', function() {
});
it.skip('Update value on target swap', function() {
});
it.skip('Get target style', function() {
});
});

Write Preview
Loading…
Cancel
Save