Skip to content

Commit f1de7fe

Browse files
7evenk7evenk
committed
Refactoring
- Set attributes from internal via a central method. - Update slider, range values, ... always via attributeChangedCallback
1 parent ee6034a commit f1de7fe

File tree

1 file changed

+53
-75
lines changed

1 file changed

+53
-75
lines changed

‎src/slider/SliderWebcomponent.ts

Lines changed: 53 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -80,15 +80,11 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
8080

8181
private _rangeInputs: HTMLInputElement[];
8282
private _valuesGap: number = 1;
83-
private _suppressAttributeChange: boolean = false;
84-
private _currentMinVal: number;
85-
private _currentMaxVal: number;
8683

8784
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
88-
if (this._suppressAttributeChange) return;
89-
85+
if (newValue === 'undefined') return;
9086
if (name === "value-min" || name === "value-max") {
91-
this._validateValues(name, newValue);
87+
this._validateMinMaxValuesAfterAttributeChangedCallback(name, newValue);
9288
}
9389

9490
if (name === "min" || name === "max") {
@@ -108,60 +104,55 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
108104

109105
this._parseAttributesToProperties();
110106

111-
// Initialize current values
112-
this._currentMinVal = parseInt(this.getAttribute('value-min'));
113-
this._currentMaxVal = parseInt(this.getAttribute('value-max'));
114-
115107
// Add event listeners to range input elements
116108
for (let i = 0; i < this._rangeInputs.length; i++) {
117109
this._rangeInputs[i].addEventListener("input", e => {
118-
this._handleRangeInput(e);
110+
this._handleRangeInputInputEvent(e);
119111
});
120112

121113
this._rangeInputs[i].addEventListener("change", e => {
122-
this._handleRangeChange(e);
114+
this._handleRangeInputChangeEvent(e);
123115
});
124116
}
125117

126118
this._updateRangeInputsMinMax();
127-
this._updateRangeInputsValues();
128-
this._updateSliderPosition(this._currentMinVal, parseInt(this.getAttribute('max')), true);
129-
this._updateSliderPosition(this._currentMaxVal, parseInt(this.getAttribute('max')), false);
119+
this._rangeInputs[0].value = this.getAttribute('value-min');
120+
this._rangeInputs[1].value = this.getAttribute('value-max');
121+
this._updateSliderPosition(parseInt(this.getAttribute('value-min')), parseInt(this.getAttribute('max')), true);
122+
this._updateSliderPosition(parseInt(this.getAttribute('value-max')), parseInt(this.getAttribute('max')), false);
130123
}
131124

132-
private _validateValues(changedAttr: string, newValue: string) {
125+
private _validateMinMaxValuesAfterAttributeChangedCallback(changedAttr: string, newValue: string) {
133126
let min = parseInt(this.getAttribute('min'));
134127
let max = parseInt(this.getAttribute('max'));
135128
let valueMin = parseInt(this.getAttribute('value-min'));
136129
let valueMax = parseInt(this.getAttribute('value-max'));
137130

138131
if (changedAttr === 'value-min') {
132+
if (parseInt(newValue) < min) {
133+
this._overwriteOutOfRangeAttributeValue('value-min', min.toString());
134+
return;
135+
}
139136
valueMin = Math.max(min, Math.min(parseInt(newValue), valueMax - this._valuesGap));
137+
this._updateSliderPosition(valueMin, max, true);
138+
if (this._rangeInputs) {
139+
this._rangeInputs[0].value = valueMin.toString();
140+
}
140141
} else if (changedAttr === 'value-max') {
142+
if (parseInt(newValue) > max) {
143+
this._overwriteOutOfRangeAttributeValue('value-max', max.toString());
144+
return;
145+
}
141146
valueMax = Math.min(max, Math.max(parseInt(newValue), valueMin + this._valuesGap));
147+
this._updateSliderPosition(valueMax, max, false);
148+
if (this._rangeInputs) {
149+
this._rangeInputs[1].value = valueMax.toString();
150+
}
142151
}
152+
}
143153

144-
const oldValueMin = parseInt(this.getAttribute('value-min'));
145-
const oldValueMax = parseInt(this.getAttribute('value-max'));
146-
147-
this._suppressAttributeChange = true;
148-
if (valueMin !== oldValueMin) {
149-
this.setAttribute('value-min', valueMin.toString());
150-
}
151-
if (valueMax !== oldValueMax) {
152-
this.setAttribute('value-max', valueMax.toString());
153-
}
154-
this._suppressAttributeChange = false;
155-
156-
this._updateRangeInputsValues();
157-
this._updateSliderPosition(valueMin, max, true);
158-
this._updateSliderPosition(valueMax, max, false);
159-
160-
if (changedAttr === 'value-min' && valueMin !== oldValueMin) {
161-
this._dispatchChangeEvent('value-min-changed', valueMin);
162-
} else if (changedAttr === 'value-max' && valueMax !== oldValueMax) {
163-
this._dispatchChangeEvent('value-max-changed', valueMax);
164-
}
154+
private _overwriteOutOfRangeAttributeValue(name: string, value: string) {
155+
this._setAttributeFromInternal(name, value);
165156
}
166157

167158
private _updateRangeInputsMinMax() {
@@ -170,60 +161,47 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
170161
rangeInput.min = this.getAttribute('min');
171162
rangeInput.max = this.getAttribute('max');
172163
});
164+
this._updateSliderPosition(parseInt(this.getAttribute('value-min')), parseInt(this.getAttribute('max')), true);
165+
this._updateSliderPosition(parseInt(this.getAttribute('value-max')), parseInt(this.getAttribute('max')), false);
173166
}
174167
}
175168

176-
private _updateRangeInputsValues() {
177-
if (this._rangeInputs) {
178-
this._rangeInputs[0].value = this.getAttribute('value-min');
179-
this._rangeInputs[1].value = this.getAttribute('value-max');
180-
}
181-
}
182-
183-
private _handleRangeInput(e: Event) {
184-
let minVal = parseInt(this._rangeInputs[0].value);
185-
let maxVal = parseInt(this._rangeInputs[1].value);
169+
private _handleRangeInputInputEvent(e: Event) {
170+
let minRangeInputMinVal = parseInt(this._rangeInputs[0].value);
171+
let maxRangeInputMaxVal = parseInt(this._rangeInputs[1].value);
186172

187-
let diff = maxVal - minVal;
173+
let diff = maxRangeInputMaxVal - minRangeInputMinVal;
188174

189175
// Check if the values gap is exceeded
190176
if (diff < this._valuesGap) {
191-
// Check if the input is the min range input
192177
if ((e.target as HTMLInputElement).className === "min-range") {
193-
this._rangeInputs[0].value = (maxVal - this._valuesGap).toString();
178+
this._rangeInputs[0].value = (maxRangeInputMaxVal - this._valuesGap).toString();
194179
} else {
195-
this._rangeInputs[1].value = (minVal + this._valuesGap).toString();
180+
this._rangeInputs[1].value = (minRangeInputMinVal + this._valuesGap).toString();
196181
}
197182
} else {
198-
// Update input values and range progress
199-
this._suppressAttributeChange = true;
200-
if (parseInt(this.getAttribute('value-min')) !== minVal) {
201-
this.setAttribute('value-min', minVal.toString());
202-
}
203-
if (parseInt(this.getAttribute('value-max')) !== maxVal) {
204-
this.setAttribute('value-max', maxVal.toString());
205-
}
206-
this._suppressAttributeChange = false;
207-
this._updateSliderPosition(minVal, parseInt(this.getAttribute('max')), true);
208-
this._updateSliderPosition(maxVal, parseInt(this.getAttribute('max')), false);
183+
if ((e.target as HTMLInputElement).className === "min-range") {
184+
this._setAttributeFromInternal('value-min', minRangeInputMinVal.toString());
185+
186+
} else if ((e.target as HTMLInputElement).className === "max-range") {
187+
this._setAttributeFromInternal('value-max', maxRangeInputMaxVal.toString());
188+
}
209189
}
210190
}
211191

212-
private _handleRangeChange(e: Event) {
213-
let minVal = parseInt(this._rangeInputs[0].value);
214-
let maxVal = parseInt(this._rangeInputs[1].value);
192+
private _setAttributeFromInternal(name: string, value: string) {
193+
this.setAttribute(name,value);
194+
}
215195

216-
// Check if values actually changed
217-
if (minVal !== this._currentMinVal || maxVal !== this._currentMaxVal) {
218-
this._currentMinVal = minVal;
219-
this._currentMaxVal = maxVal;
196+
private _handleRangeInputChangeEvent(e: Event) {
197+
let minRangeInputMinVal = parseInt(this._rangeInputs[0].value);
198+
let maxRangeInputMaxVal = parseInt(this._rangeInputs[1].value);
220199

221-
// Dispatch the appropriate event
222-
if ((e.target as HTMLInputElement).className === "min-range") {
223-
this._dispatchChangeEvent('value-min-changed', minVal);
224-
} else {
225-
this._dispatchChangeEvent('value-max-changed', maxVal);
226-
}
200+
// Dispatch the appropriate event
201+
if ((e.target as HTMLInputElement).className === "min-range") {
202+
this._dispatchChangeEvent('value-min-changed', minRangeInputMinVal);
203+
} else if ((e.target as HTMLInputElement).className === "max-range") {
204+
this._dispatchChangeEvent('value-max-changed', maxRangeInputMaxVal);
227205
}
228206
}
229207

0 commit comments

Comments
 (0)