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 10 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
Split 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) {
PropertyView.prototype.initialize.apply(this, arguments);
_.bindAll(this, 'moveIncrement', 'upIncrement');
this.min = this.model.get('min') || this.model.get('min')===0 ? this.model.get('min') : -5000;
this.max = this.model.get('max') || this.model.get('max')===0 ? this.model.get('max') : 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') : null;
this.units = this.model.get('units');
this.unit = this.model.get('unit') ? this.model.get('unit') : (this.units.length ? this.units[0] : '');
this.events['click .'+this.pfx+'u-arrow'] = 'upArrowClick';
@ -27,11 +27,33 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
valueUpdated: function(){
if(this.$input && this.$unit)
this.model.set({
value: this.$input.val(),
value: this.validateValue(this.$input.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
* @param Event
@ -40,8 +62,8 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* */
upArrowClick: function(e){
var value = this.model.get('value');
value = isNaN(value) ? 1 : parseInt(value,10) + 1;
value = value > this.max ? this.max : value;
value = isNaN(value) ? 1 : parseInt(value,10) + 1;
value = value > this.max ? this.max : value;
this.model.set('value',value);
},
@ -53,8 +75,8 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* */
downArrowClick: function(e){
var value = this.model.get('value');
value = isNaN(value) ? 0 : parseInt(value,10) - 1;
value = value < this.min ? this.min : value;
value = isNaN(value) ? 0 : parseInt(value,10) - 1;
value = value < this.min ? this.min : value;
this.model.set('value',value);
},
@ -66,9 +88,9 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* */
downIncrement: function(e) {
e.preventDefault();
this.moved = 0;
var value = this.model.get('value');
value = isNaN(value) ? 0 : parseInt(value,10);
this.moved = 0;
var value = this.model.get('value');
value = isNaN(value) ? 0 : parseInt(value,10);
var current = {y: e.pageY, val: value };
$(document).mouseup(current, this.upIncrement);
$(document).mousemove(current, this.moveIncrement);
@ -80,8 +102,9 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
* @return bool
* */
moveIncrement: function (ev) {
this.moved = 1;
this.prValue = Math.max(this.min, Math.min(this.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10) ) );
this.moved = 1;
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 });
return false;
},
@ -123,16 +146,15 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
},
/** @inheritdoc */
setValue: function(value)
{
setValue: function(value){
var u = this.unit,
v = this.model.get('value') || this.defaultValue;
if(value){
// Make it suitable for replace
value += '';
v = parseFloat(value.replace(',', '.'));
v = !isNaN(v) ? v : this.defaultValue;
v = parseFloat(value.replace(',', '.'));
v = !isNaN(v) ? v : this.defaultValue;
var uN = value.replace(v,'');
// Check if exists as unit
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
* */
valueChanged: function(e, val, opt){
var mVal = this.model.get('value');
var mVal = this.getValueForTarget(),
avSt = opt ? opt.avoidStore : 0;
if(this.$input)
this.setValue(mVal);
//this.$input.val(mVal);
if(!this.selectedComponent)
return;
@ -143,12 +143,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
if(!this.isTargetStylable())
return;
var v = e && e.currentTarget ? this.getInputValue() : this.model.get('value'),
u = this.$unit ? this.$unit.val() : '',
value = v + u,
avSt = opt ? opt.avoidStore : 0;
this.model.set({ value : v, unit: u }, { silent : true });
value = this.getValueForTarget();
if(this.func)
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 defValue = 'test2value';
var units = ['px', '%', 'em'];
var minValue = -15;
var maxValue = 15;
before(function () {
$fixtures = $("#fixtures");
@ -86,7 +88,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
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.model.get('value').should.equal(parseFloat(intValue));
view.model.get('unit').should.equal(unitValue);
@ -94,6 +96,16 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
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() {
view.model.set('value', intValue);
view.getInputValue().should.equal(intValue);
@ -101,7 +113,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
view.model.set('value', intValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
@ -144,7 +156,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
});
})
/*
describe('Init property', function() {
beforeEach(function () {
@ -154,6 +166,8 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
units: units,
property: propName,
defaults: intValue,
min: minValue,
max: maxValue,
unit: units[1],
});
view = new PropertyIntegerView({
@ -173,8 +187,20 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
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