|
|
@@ -83,11 +83,12 @@ module INSPECTOR {
|
|
|
private _escapeInputHandler: EventListener;
|
|
|
/** Handler used on focus out */
|
|
|
private _focusOutInputHandler: EventListener;
|
|
|
- private _input_checkbox: HTMLInputElement;
|
|
|
/** Handler used to get mouse position */
|
|
|
private _onMouseDownHandler: EventListener;
|
|
|
private _onMouseDragHandler: EventListener;
|
|
|
private _onMouseUpHandler: EventListener;
|
|
|
+
|
|
|
+ private _textValue: HTMLElement;
|
|
|
/** Save previous Y mouse position */
|
|
|
private _prevY: number;
|
|
|
/**Save value while slider is on */
|
|
|
@@ -108,7 +109,7 @@ module INSPECTOR {
|
|
|
// Value
|
|
|
this._valueDiv = Helpers.CreateDiv('prop-value', this._div);
|
|
|
|
|
|
- if (typeof this.value !== 'boolean') {
|
|
|
+ if (typeof this.value !== 'boolean' && !this._isSliderType()) {
|
|
|
this._valueDiv.textContent = this._displayValueContent() || '-'; // Init value text node
|
|
|
}
|
|
|
|
|
|
@@ -119,10 +120,11 @@ module INSPECTOR {
|
|
|
}
|
|
|
|
|
|
this._updateValue();
|
|
|
-
|
|
|
// If the property type is not simple, add click event to unfold its children
|
|
|
if (typeof this.value === 'boolean') {
|
|
|
this._checkboxInput();
|
|
|
+ } else if (this._isSliderType()) {
|
|
|
+ this._rangeInput();
|
|
|
} else if (!this._isSimple()) {
|
|
|
this._valueDiv.classList.add('clickable');
|
|
|
this._valueDiv.addEventListener('click', this._addDetails.bind(this));
|
|
|
@@ -175,18 +177,19 @@ module INSPECTOR {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- public validateInput(value: any): void {
|
|
|
+ public validateInput(value: any, forceupdate:boolean = true): void {
|
|
|
this.updateObject();
|
|
|
-
|
|
|
if (typeof this._property.value === 'number') {
|
|
|
this._property.value = parseFloat(value);
|
|
|
} else {
|
|
|
this._property.value = value;
|
|
|
}
|
|
|
// Remove input
|
|
|
- this.update();
|
|
|
- // resume scheduler
|
|
|
- Scheduler.getInstance().pause = false;
|
|
|
+ if (forceupdate) {
|
|
|
+ this.update();
|
|
|
+ // resume scheduler
|
|
|
+ Scheduler.getInstance().pause = false;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -204,21 +207,23 @@ module INSPECTOR {
|
|
|
/** Removes the input without validating the new value */
|
|
|
private _removeInputWithoutValidating() {
|
|
|
Helpers.CleanDiv(this._valueDiv);
|
|
|
- if (typeof this.value !== 'boolean') {
|
|
|
+ if (typeof this.value !== 'boolean' && !this._isSliderType()) {
|
|
|
this._valueDiv.textContent = "-";
|
|
|
}
|
|
|
// restore elements
|
|
|
for (let elem of this._elements) {
|
|
|
this._valueDiv.appendChild(elem.toHtml());
|
|
|
}
|
|
|
- this._valueDiv.addEventListener('click', this._displayInputHandler);
|
|
|
+
|
|
|
+ if (typeof this.value !== 'boolean' && !this._isSliderType()) {
|
|
|
+ this._valueDiv.addEventListener('click', this._displayInputHandler);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/** Replaces the default display with an input */
|
|
|
private _displayInput(e) {
|
|
|
// Remove the displayInput event listener
|
|
|
- this._valueDiv.removeEventListener('click', this._displayInputHandler);
|
|
|
-
|
|
|
+ this._valueDiv.removeEventListener('click', this._displayInputHandler);
|
|
|
// Set input value
|
|
|
let valueTxt = this._valueDiv.textContent;
|
|
|
this._valueDiv.textContent = "";
|
|
|
@@ -226,15 +231,11 @@ module INSPECTOR {
|
|
|
this._valueDiv.appendChild(this._input);
|
|
|
this._input.focus();
|
|
|
|
|
|
- if (typeof this.value === 'number') {
|
|
|
- // Slider
|
|
|
- // let slider = Helpers.CreateDiv('slider-number', this._valueDiv);
|
|
|
- // slider.style.background = '#303030';
|
|
|
- // slider.style.cursor = 'ew-resize';
|
|
|
- // slider.innerHTML = 'HELLO'
|
|
|
+ if (typeof this.value !== 'boolean' && !this._isSliderType()) {
|
|
|
+ this._input.addEventListener('focusout', this._focusOutInputHandler);
|
|
|
+ } else if (typeof this.value === 'number') {
|
|
|
this._input.addEventListener('mousedown', this._onMouseDownHandler);
|
|
|
}
|
|
|
- this._input.addEventListener('focusout', this._focusOutInputHandler);
|
|
|
|
|
|
// Pause the scheduler
|
|
|
Scheduler.getInstance().pause = true;
|
|
|
@@ -340,6 +341,8 @@ module INSPECTOR {
|
|
|
// this._valueDiv.textContent = " "; // TOFIX this removes the elements after
|
|
|
if (typeof this.value === 'boolean') {
|
|
|
this._checkboxInput();
|
|
|
+ } else if (this._isSliderType()) { // Add slider when parent have slider property
|
|
|
+ this._rangeInput();
|
|
|
} else {
|
|
|
this._valueDiv.childNodes[0].nodeValue = this._displayValueContent();
|
|
|
}
|
|
|
@@ -397,6 +400,7 @@ module INSPECTOR {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
/**
|
|
|
* Add sub properties in case of a complex type
|
|
|
*/
|
|
|
@@ -464,14 +468,54 @@ module INSPECTOR {
|
|
|
*/
|
|
|
private _checkboxInput() {
|
|
|
if(this._valueDiv.childElementCount < 1) { // Prevent display two checkbox
|
|
|
- this._input_checkbox = Helpers.CreateInput('checkbox-element', this._valueDiv);
|
|
|
- this._input_checkbox.type = 'checkbox'
|
|
|
- this._input_checkbox.checked = this.value;
|
|
|
- this._input_checkbox.addEventListener('change', () => {
|
|
|
+ this._input = Helpers.CreateInput('checkbox-element', this._valueDiv);
|
|
|
+ this._input.type = 'checkbox'
|
|
|
+ this._input.checked = this.value;
|
|
|
+ this._input.addEventListener('change', () => {
|
|
|
Scheduler.getInstance().pause = true;
|
|
|
this.validateInput(!this.value)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ private _rangeInput() {
|
|
|
+ if(this._valueDiv.childElementCount < 1) { // Prevent display two input range
|
|
|
+ this._input = Helpers.CreateInput('slider-element', this._valueDiv);
|
|
|
+ this._input.type = 'range';
|
|
|
+ this._input.style.display = 'inline-block';
|
|
|
+ this._input.min = this._getSliderProperty().min;
|
|
|
+ this._input.max = this._getSliderProperty().max;
|
|
|
+ this._input.step = this._getSliderProperty().step;
|
|
|
+ this._input.value = this.value;
|
|
|
+
|
|
|
+ this._validateInputHandler = this._rangeHandler.bind(this)
|
|
|
+ this._input.addEventListener('input', this._validateInputHandler)
|
|
|
+ this._input.addEventListener('change', () => {
|
|
|
+ Scheduler.getInstance().pause = false;
|
|
|
+ })
|
|
|
+
|
|
|
+ this._textValue = Helpers.CreateDiv('value-text', this._valueDiv);
|
|
|
+ this._textValue.innerText = this.value;
|
|
|
+ this._textValue.style.paddingLeft = '10px';
|
|
|
+ this._textValue.style.display = 'inline-block';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ private _rangeHandler() {
|
|
|
+ Scheduler.getInstance().pause = true;
|
|
|
+ this._textValue.innerText = this._input.value;
|
|
|
+ this.validateInput(this._input.value, false);
|
|
|
+ }
|
|
|
+
|
|
|
+ private _isSliderType() { //Check if property have slider definition
|
|
|
+ return this._property &&
|
|
|
+ PROPERTIES.hasOwnProperty(this._property.obj.constructor.name) &&
|
|
|
+ PROPERTIES[this._property.obj.constructor.name].hasOwnProperty('slider') &&
|
|
|
+ PROPERTIES[this._property.obj.constructor.name].slider.hasOwnProperty(this.name);
|
|
|
+ }
|
|
|
+
|
|
|
+ private _getSliderProperty() {
|
|
|
+ return PROPERTIES[this._property.obj.constructor.name].slider[this.name]
|
|
|
+ }
|
|
|
}
|
|
|
}
|
QuentinRillet