Browse Source

Update slider property in style manager

pull/487/head
Artur Arseniev 8 years ago
parent
commit
43c0a347d3
  1. 14
      src/style_manager/view/PropertySliderView.js
  2. 3
      src/style_manager/view/PropertyView.js

14
src/style_manager/view/PropertySliderView.js

@ -3,10 +3,11 @@ const Property = require('./PropertyIntegerView');
module.exports = Property.extend({ module.exports = Property.extend({
events: { events: {
'change': 'inputValueChanged', 'change [type=range]': 'inputValueChanged',
'input': 'inputValueChangedSoft', 'input [type=range]': 'inputValueChangedSoft',
}, },
templateInput(model) { templateInput(model) {
const ppfx = this.ppfx; const ppfx = this.ppfx;
return ` return `
@ -19,6 +20,7 @@ module.exports = Property.extend({
`; `;
}, },
getSliderEl() { getSliderEl() {
if (!this.slider) { if (!this.slider) {
this.slider = this.el.querySelector('input[type=range]'); this.slider = this.el.querySelector('input[type=range]');
@ -27,32 +29,34 @@ module.exports = Property.extend({
return this.slider; return this.slider;
}, },
inputValueChanged() { inputValueChanged() {
const model = this.model; const model = this.model;
const step = model.get('step'); const step = model.get('step');
console.log('slider ', this.getSliderEl().value, ' input', this.getInputEl().value);
this.getInputEl().value = this.getSliderEl().value; this.getInputEl().value = this.getSliderEl().value;
const value = this.getInputValue() - step; const value = this.getInputValue() - step;
model.set('value', value, {avoidStore: 1}).set('value', value + step); model.set('value', value, {avoidStore: 1}).set('value', value + step);
this.elementUpdated(); this.elementUpdated();
}, },
inputValueChangedSoft() { inputValueChangedSoft() {
this.getInputEl().value = this.getSliderEl().value; this.getInputEl().value = this.getSliderEl().value;
this.model.set('value', this.getInputValue(), {avoidStore: 1}); this.model.set('value', this.getInputValue(), {avoidStore: 1});
this.elementUpdated(); this.elementUpdated();
}, },
setValue(value) { setValue(value) {
this.getSliderEl().value = value; this.getSliderEl().value = value;
this.inputInst.setValue(value, {silent: 1}); this.inputInst.setValue(value, {silent: 1});
}, },
onRender() { onRender() {
Property.prototype.onRender.apply(this, arguments); Property.prototype.onRender.apply(this, arguments);
const model = this.model;
if (!model.get('showInput')) { if (!this.model.get('showInput')) {
this.inputInst.el.style.display = 'none'; this.inputInst.el.style.display = 'none';
} }
} }

3
src/style_manager/view/PropertyView.js

@ -151,7 +151,8 @@ module.exports = Backbone.View.extend({
* Triggers when the value of element input/s is changed, so have to update * Triggers when the value of element input/s is changed, so have to update
* the value of the model which will propogate those changes to the target * the value of the model which will propogate those changes to the target
*/ */
inputValueChanged() { inputValueChanged(e) {
e.stopPropagation();
this.model.set('value', this.getInputValue()); this.model.set('value', this.getInputValue());
this.elementUpdated(); this.elementUpdated();
}, },

Loading…
Cancel
Save