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

Update PropertyView

pull/36/head
Artur Arseniev 11 years ago
parent
d8520c318f
commit
b747c8a645
3 changed files with 71 additions and 28 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. 54
      src/style_manager/view/PropertyIntegerView.js
  2. 11
      src/style_manager/view/PropertyView.js
  3. 34
      test/specs/style_manager/view/PropertyIntegerView.js

54
src/style_manager/view/PropertyIntegerView.js
View File

@ -10,8 +10,8 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
initialize: function(options) { initialize: function(options) {
PropertyView.prototype.initialize.apply(this, arguments); PropertyView.prototype.initialize.apply(this, arguments);
_.bindAll(this, 'moveIncrement', 'upIncrement'); _.bindAll(this, 'moveIncrement', 'upIncrement');
this.min = this.model.get('min') || this.model.get('min')===0 ? this.model.get('min') : -5000; this.min = this.model.get('min') || this.model.get('min')===0 ? this.model.get('min') : null;
this.max = this.model.get('max') || this.model.get('max')===0 ? this.model.get('max') : 5000; this.max = this.model.get('max') || this.model.get('max')===0 ? this.model.get('max') : null;
this.units = this.model.get('units'); this.units = this.model.get('units');
this.unit = this.model.get('unit') ? this.model.get('unit') : (this.units.length ? this.units[0] : ''); this.unit = this.model.get('unit') ? this.model.get('unit') : (this.units.length ? this.units[0] : '');
this.events['click .'+this.pfx+'u-arrow'] = 'upArrowClick'; this.events['click .'+this.pfx+'u-arrow'] = 'upArrowClick';
@ -27,11 +27,33 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
valueUpdated: function(){ valueUpdated: function(){
if(this.$input && this.$unit) if(this.$input && this.$unit)
this.model.set({ this.model.set({
value: this.$input.val(), value: this.validateValue(this.$input.val()),
unit: this.$unit.val() unit: this.$unit.val()
}); });
}, },
/**
* Validate input value
* @param {integer|float} value Raw value
* @return {string} Validated string
*/
validateValue: function(value){
var val = value;
if(this.max !== null)
val = val > this.max ? this.max : val;
if(this.min !== null)
val = val < this.min ? this.min : val;
return val;
},
/**
* Returns value from inputs
* @return {string}
*/
getValueForTarget: function(){
return this.model.get('value') + this.model.get('unit');
},
/** /**
* Invoked when the up arrow is clicked * Invoked when the up arrow is clicked
* @param Event * @param Event
@ -40,8 +62,8 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* */ * */
upArrowClick: function(e){ upArrowClick: function(e){
var value = this.model.get('value'); var value = this.model.get('value');
value = isNaN(value) ? 1 : parseInt(value,10) + 1; value = isNaN(value) ? 1 : parseInt(value,10) + 1;
value = value > this.max ? this.max : value; value = value > this.max ? this.max : value;
this.model.set('value',value); this.model.set('value',value);
}, },
@ -53,8 +75,8 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* */ * */
downArrowClick: function(e){ downArrowClick: function(e){
var value = this.model.get('value'); var value = this.model.get('value');
value = isNaN(value) ? 0 : parseInt(value,10) - 1; value = isNaN(value) ? 0 : parseInt(value,10) - 1;
value = value < this.min ? this.min : value; value = value < this.min ? this.min : value;
this.model.set('value',value); this.model.set('value',value);
}, },
@ -66,9 +88,9 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* */ * */
downIncrement: function(e) { downIncrement: function(e) {
e.preventDefault(); e.preventDefault();
this.moved = 0; this.moved = 0;
var value = this.model.get('value'); var value = this.model.get('value');
value = isNaN(value) ? 0 : parseInt(value,10); value = isNaN(value) ? 0 : parseInt(value,10);
var current = {y: e.pageY, val: value }; var current = {y: e.pageY, val: value };
$(document).mouseup(current, this.upIncrement); $(document).mouseup(current, this.upIncrement);
$(document).mousemove(current, this.moveIncrement); $(document).mousemove(current, this.moveIncrement);
@ -80,8 +102,9 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* @return bool * @return bool
* */ * */
moveIncrement: function (ev) { moveIncrement: function (ev) {
this.moved = 1; this.moved = 1;
this.prValue = Math.max(this.min, Math.min(this.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10) ) ); var pos = parseInt(ev.data.val - ev.pageY + ev.data.y, 10);
this.prValue = this.validateValue(pos);//Math.max(this.min, Math.min(this.max, pos) );
this.model.set( 'value', this.prValue, { avoidStore: 1 }); this.model.set( 'value', this.prValue, { avoidStore: 1 });
return false; return false;
}, },
@ -123,16 +146,15 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
}, },
/** @inheritdoc */ /** @inheritdoc */
setValue: function(value) setValue: function(value){
{
var u = this.unit, var u = this.unit,
v = this.model.get('value') || this.defaultValue; v = this.model.get('value') || this.defaultValue;
if(value){ if(value){
// Make it suitable for replace // Make it suitable for replace
value += ''; value += '';
v = parseFloat(value.replace(',', '.')); v = parseFloat(value.replace(',', '.'));
v = !isNaN(v) ? v : this.defaultValue; v = !isNaN(v) ? v : this.defaultValue;
var uN = value.replace(v,''); var uN = value.replace(v,'');
// Check if exists as unit // Check if exists as unit
if(_.indexOf(this.units, uN) > -1) if(_.indexOf(this.units, uN) > -1)

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

@ -130,11 +130,11 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
* @param {Object} opt Options * @param {Object} opt Options
* */ * */
valueChanged: function(e, val, opt){ valueChanged: function(e, val, opt){
var mVal = this.model.get('value'); var mVal = this.getValueForTarget(),
avSt = opt ? opt.avoidStore : 0;
if(this.$input) if(this.$input)
this.setValue(mVal); this.setValue(mVal);
//this.$input.val(mVal);
if(!this.selectedComponent) if(!this.selectedComponent)
return; return;
@ -143,12 +143,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
if(!this.isTargetStylable()) if(!this.isTargetStylable())
return; return;
var v = e && e.currentTarget ? this.getInputValue() : this.model.get('value'), value = this.getValueForTarget();
u = this.$unit ? this.$unit.val() : '',
value = v + u,
avSt = opt ? opt.avoidStore : 0;
this.model.set({ value : v, unit: u }, { silent : true });
if(this.func) if(this.func)
value = this.func + '(' + value + ')'; value = this.func + '(' + value + ')';

34
test/specs/style_manager/view/PropertyIntegerView.js
View File

@ -19,6 +19,8 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
var propValue = intValue + unitValue; var propValue = intValue + unitValue;
var defValue = 'test2value'; var defValue = 'test2value';
var units = ['px', '%', 'em']; var units = ['px', '%', 'em'];
var minValue = -15;
var maxValue = 15;
before(function () { before(function () {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
@ -86,7 +88,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
view.model.get('unit').should.equal('px'); view.model.get('unit').should.equal('px');
}); });
it('Update model on input change', function() { it('Update model on setValue', function() {
view.setValue(intValue + unitValue); view.setValue(intValue + unitValue);
view.model.get('value').should.equal(parseFloat(intValue)); view.model.get('value').should.equal(parseFloat(intValue));
view.model.get('unit').should.equal(unitValue); view.model.get('unit').should.equal(unitValue);
@ -94,6 +96,16 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
view.$unit.val().should.equal(unitValue); view.$unit.val().should.equal(unitValue);
}); });
it('Update model on input change', function() {
view.$input.val(123).trigger('change');
view.model.get('value').should.equal(123);
});
it('Update model on unit change', function() {
view.$unit.val(units[1]).trigger('change');
view.model.get('unit').should.equal(units[1]);
});
it('Update input on value change', function() { it('Update input on value change', function() {
view.model.set('value', intValue); view.model.set('value', intValue);
view.getInputValue().should.equal(intValue); view.getInputValue().should.equal(intValue);
@ -101,7 +113,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
it('Update target on value change', function() { it('Update target on value change', function() {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', propValue); view.model.set('value', intValue);
var compStyle = view.selectedComponent.get('style'); var compStyle = view.selectedComponent.get('style');
var assertStyle = {}; var assertStyle = {};
assertStyle[propName] = propValue; assertStyle[propName] = propValue;
@ -144,7 +156,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
}); });
}) })
/*
describe('Init property', function() { describe('Init property', function() {
beforeEach(function () { beforeEach(function () {
@ -154,6 +166,8 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
units: units, units: units,
property: propName, property: propName,
defaults: intValue, defaults: intValue,
min: minValue,
max: maxValue,
unit: units[1], unit: units[1],
}); });
view = new PropertyIntegerView({ view = new PropertyIntegerView({
@ -173,8 +187,20 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
view.$unit.val().should.equal(units[1]); view.$unit.val().should.equal(units[1]);
}); });
}); it('Input follows min', function() {
view.$input.val(minValue - 50).trigger('change');
view.model.get('value').should.equal(minValue);
view.$input.val().should.equal(minValue + "");
});
it('Input follows max', function() {
view.$input.val(maxValue + 50).trigger('change');
view.model.get('value').should.equal(maxValue);
view.$input.val().should.equal(maxValue + "");
});
});
*/
}); });
} }
}; };

Write Preview
Loading…
Cancel
Save