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