diff --git a/src/settings/slider-setting/README.md b/src/settings/slider-setting/README.md index 1a6c2644..1e61e744 100644 --- a/src/settings/slider-setting/README.md +++ b/src/settings/slider-setting/README.md @@ -8,9 +8,9 @@ Extends [UIPSetting](src/settings/setting/README.md). Setting behaves like 'range' input with value displayed below. It has the following attributes: -- *min* - minimum range value. -- *max* - maximum range value. -- *step* - step between range's values. +- *min* - minimum range value (default: 0). +- *max* - maximum range value (default: 0). +- *step* - step between range's values (default: 0). ## Example: diff --git a/src/settings/slider-setting/slider-setting.ts b/src/settings/slider-setting/slider-setting.ts index 87550398..4ff2fb71 100644 --- a/src/settings/slider-setting/slider-setting.ts +++ b/src/settings/slider-setting/slider-setting.ts @@ -1,56 +1,60 @@ import {UIPSetting} from '../setting/setting'; import {attr} from '@exadel/esl/modules/esl-base-element/core'; import {WARNING_MSG} from '../../utils/warning-msg'; +import {memoize} from '@exadel/esl/modules/esl-utils/decorators/memoize'; export class UIPSliderSetting extends UIPSetting { public static is = 'uip-slider-setting'; - /** CSS Class added when setting has inconsistent state. */ - public static inconsistencyClass = 'inconsistency-marker'; /** Setting's visible name. */ @attr({defaultValue: ''}) public label: string; /** Minimum range value. */ @attr({defaultValue: '0'}) public min: string; /** Maximum range value. */ - @attr({defaultValue: '100'}) public max: string; + @attr({defaultValue: '0'}) public max: string; /** Step for range. */ - @attr({defaultValue: '1'}) public step: string; - /** Range input to change setting's value. */ - protected $field: HTMLInputElement; - /** Range value displayed below. */ - protected $fieldValue: HTMLDivElement; + @attr({defaultValue: '0'}) public step: string; protected connectedCallback() { super.connectedCallback(); - if (this.$field) return; - this.initSlider(); - this.initSliderValue(); - const label = document.createElement('label'); - label.innerText = this.label; - label.appendChild(this.$field); - - this.innerHTML = ''; - this.append(label); + this.updateConfiguration(); + this.append(this.$label); this.append(this.$fieldValue); } - protected initSlider() { - this.$field = document.createElement('input'); - this.$field.type = 'range'; - this.$field.min = this.min; - this.$field.max = this.max; - this.$field.step = this.step; - this.$field.name = this.label; + @memoize() + protected get $field(): HTMLInputElement { + const $field = document.createElement('input'); + $field.type = 'range'; + + $field.min = this.min; + $field.max = this.max; + $field.step = this.step; + + return $field; + } + + @memoize() + protected get $label(): HTMLLabelElement { + const $label = document.createElement('label'); + $label.innerHTML = `${this.label}`; + return $label; } - protected initSliderValue() { - this.$fieldValue = document.createElement('div'); - this.$fieldValue.classList.add('slider-value'); - this.$field.addEventListener('input', () => this.updateSliderValue()); + protected updateConfiguration() { + this.$field.addEventListener('input', this.updateSliderValue); + this.$label.append(this.$field); } - protected updateSliderValue() { + @memoize() + protected get $fieldValue(): HTMLDivElement { + const $fieldValue = document.createElement('div'); + $fieldValue.classList.add('slider-value'); + return $fieldValue; + } + + protected updateSliderValue = () => { this.$fieldValue.textContent = `Value: ${this.$field.value}`; } @@ -59,12 +63,18 @@ export class UIPSliderSetting extends UIPSetting { } protected setValue(value: string | null): void { - this.$field.value = value || '0'; + this.$field.value = value || this.min; this.updateSliderValue(); } protected setInconsistency(msg = WARNING_MSG.inconsistent): void { - this.$field.value = '0'; + this.$field.value = this.min; this.$fieldValue.textContent = msg; } + + protected disconnectedCallback() { + this.$field.removeEventListener('input', this.updateSliderValue); + this.innerHTML = ''; + super.disconnectedCallback(); + } }