Skip to content

Commit ea06bdf

Browse files
7evenk7evenk
committed
Remove number inputs and dispatch custom changed event
1 parent 1d90bbc commit ea06bdf

File tree

2 files changed

+86
-126
lines changed

2 files changed

+86
-126
lines changed

‎custom-elements.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,36 @@
2828
"fieldName": "value-max"
2929
}
3030
],
31+
"events": [
32+
{
33+
"name": "value-min-attribute-changed",
34+
"description": "Is raised when the min-value attribute changes",
35+
"type": {
36+
"title": "String"
37+
}
38+
},
39+
{
40+
"name": "value-max-attribute-changed",
41+
"description": "Is raised when the max-value attribute changes",
42+
"type": {
43+
"title": "String"
44+
}
45+
},
46+
{
47+
"name": "min-attribute-changed",
48+
"description": "Is raised when the min attribute changes",
49+
"type": {
50+
"title": "String"
51+
}
52+
},
53+
{
54+
"name": "max-changed",
55+
"description": "Is raised when the max attribute changes",
56+
"type": {
57+
"title": "String"
58+
}
59+
}
60+
],
3161
"superclass": {
3262
"name": "BaseCustomWebComponentConstructorAppend"
3363
},

‎src/slider/SliderWebcomponent.ts‎

Lines changed: 56 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,6 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
44

55
public static override readonly style = css`
66
7-
.inputs-wrapper {
8-
display: flex;
9-
font-size: 19px;
10-
color: #555;
11-
justify-content: space-between;
12-
margin-top: 10px;
13-
}
14-
15-
.input-field input {
16-
height: 35px;
17-
font-size: 15px;
18-
font-family: "DM Sans", sans-serif;
19-
border-radius: 9px;
20-
text-align: center;
21-
border: 0px;
22-
background: #e4e4e4;
23-
width: 100px;
24-
}
25-
26-
/* Remove Arrows/Spinners */
27-
input::-webkit-outer-spin-button,
28-
input::-webkit-inner-spin-button {
29-
appearance: none;
30-
margin: 0;
31-
}
32-
337
.slider-container {
348
width: 100%;
359
}
@@ -88,12 +62,8 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
8862

8963
public static override readonly template = html`
9064
91-
<div class="inputs-wrapper-container">
92-
93-
<div class="slider-container">
94-
<div id="slider">
95-
</div>
96-
</div>
65+
<div class="slider-container">
66+
<div id="slider"></div>
9767
</div>
9868
9969
<!-- Slider -->
@@ -102,22 +72,12 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
10272
<input type="range" class="max-range" step="1">
10373
</div>
10474
105-
<div class="inputs-wrapper">
106-
<div class="input-field">
107-
<input type="number" class="min-input">
108-
</div>
109-
<div class="input-field">
110-
<input type="number" class="max-input">
111-
</div>
112-
</div>
113-
11475
`;
11576

11677
public static readonly is = 'node-projects-slider';
11778

11879
static observedAttributes = ['value-min', 'value-max', 'min', 'max'];
11980

120-
private _numberInputs: HTMLInputElement[];
12181
private _rangeInputs: HTMLInputElement[];
12282
private _valuesGap: number = 1;
12383
private _suppressAttributeChange: boolean = false;
@@ -140,66 +100,25 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
140100
}
141101

142102
connectedCallback() {
143-
this._numberInputs = Array.from(this._getDomElements(".inputs-wrapper input"));
144103
this._rangeInputs = Array.from(this._getDomElements(".range-input input"));
145-
this.ready();
146104
}
147105

148106
disconnectedCallback() { }
149107

150108
ready() {
151109
this._parseAttributesToProperties();
152110

153-
for (let i = 0; i < this._numberInputs.length; i++) {
154-
this._numberInputs[i].addEventListener("blur", this._handleInputChange.bind(this));
155-
this._numberInputs[i].addEventListener("keydown", (e) => {
156-
if (e.key === "Enter") {
157-
this._handleInputChange(e);
158-
}
159-
});
160-
}
161-
162111
// Add event listeners to range input elements
163112
for (let i = 0; i < this._rangeInputs.length; i++) {
164113
this._rangeInputs[i].addEventListener("input", e => {
165-
let minVal = parseInt(this._rangeInputs[0].value);
166-
let maxVal = parseInt(this._rangeInputs[1].value);
167-
168-
let diff = maxVal - minVal;
169-
170-
// Check if the values gap is exceeded
171-
if (diff < this._valuesGap) {
172-
// Check if the input is the min range input
173-
if ((e.target as HTMLInputElement).className === "min-range") {
174-
this._rangeInputs[0].value = (maxVal - this._valuesGap).toString();
175-
} else {
176-
this._rangeInputs[1].value = (minVal + this._valuesGap).toString();
177-
}
178-
} else {
179-
// Update input values and range progress
180-
this._suppressAttributeChange = true;
181-
this.setAttribute('value-min', minVal.toString());
182-
this.setAttribute('value-max', maxVal.toString());
183-
this._suppressAttributeChange = false;
184-
this._updateSliderPosition(minVal, parseInt(this.getAttribute('max')), true);
185-
this._updateSliderPosition(maxVal, parseInt(this.getAttribute('max')), false);
186-
this._updateInputValues(); // Ensure number inputs are updated
187-
}
114+
this._handleRangeInput(e);
188115
});
189116

190117
this._rangeInputs[i].addEventListener("change", e => {
191-
let minVal = parseInt(this._rangeInputs[0].value);
192-
let maxVal = parseInt(this._rangeInputs[1].value);
193-
194-
this._suppressAttributeChange = true;
195-
this.setAttribute('value-min', minVal.toString());
196-
this.setAttribute('value-max', maxVal.toString());
197-
this._suppressAttributeChange = false;
198-
this._updateInputValues(); // Ensure number inputs are updated
118+
this._handleRangeChange(e);
199119
});
200120
}
201121

202-
this._updateInputValues();
203122
this._updateRangeInputsMinMax();
204123
this._updateRangeInputsValues();
205124
this._updateSliderPosition(parseInt(this.getAttribute('value-min')), parseInt(this.getAttribute('max')), true);
@@ -218,20 +137,23 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
218137
valueMax = Math.min(max, Math.max(parseInt(newValue), valueMin + this._valuesGap));
219138
}
220139

140+
const oldValueMin = parseInt(this.getAttribute('value-min'));
141+
const oldValueMax = parseInt(this.getAttribute('value-max'));
142+
221143
this._suppressAttributeChange = true;
222144
this.setAttribute('value-min', valueMin.toString());
223145
this.setAttribute('value-max', valueMax.toString());
224146
this._suppressAttributeChange = false;
225147

226-
this._updateInputValues();
227148
this._updateRangeInputsValues();
228149
this._updateSliderPosition(valueMin, max, true);
229150
this._updateSliderPosition(valueMax, max, false);
230-
}
231151

232-
private _updateInputValues() {
233-
this._numberInputs[0].value = this.getAttribute('value-min');
234-
this._numberInputs[1].value = this.getAttribute('value-max');
152+
if (changedAttr === 'value-min' && valueMin !== oldValueMin) {
153+
this._dispatchChangeEvent('value-min-changed', valueMin);
154+
} else if (changedAttr === 'value-max' && valueMax !== oldValueMax) {
155+
this._dispatchChangeEvent('value-max-changed', valueMax);
156+
}
235157
}
236158

237159
private _updateRangeInputsMinMax() {
@@ -246,50 +168,50 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
246168
this._rangeInputs[1].value = this.getAttribute('value-max');
247169
}
248170

249-
private _handleInputChange(e: Event) {
250-
const inputIndex = this._numberInputs.indexOf(e.target as HTMLInputElement);
251-
if (inputIndex === -1) return;
252-
253-
let minp = parseInt(this._numberInputs[0].value);
254-
let maxp = parseInt(this._numberInputs[1].value);
255-
256-
if (minp < parseInt(this.getAttribute('min'))) {
257-
console.log(`Minimum value cannot be less than ${this.getAttribute('min')}`);
258-
this._numberInputs[0].value = this.getAttribute('min');
259-
minp = parseInt(this.getAttribute('min'));
260-
}
171+
private _handleRangeInput(e: Event) {
172+
let minVal = parseInt(this._rangeInputs[0].value);
173+
let maxVal = parseInt(this._rangeInputs[1].value);
261174

262-
if (maxp > parseInt(this.getAttribute('max'))) {
263-
console.log(`Maximum value cannot be greater than ${this.getAttribute('max')}`)
264-
this._numberInputs[1].value = this.getAttribute('max');
265-
maxp = parseInt(this.getAttribute('max'));
266-
}
175+
let diff = maxVal - minVal;
267176

268-
if (minp + this._valuesGap > maxp) {
269-
if (inputIndex === 0) {
270-
minp = maxp - this._valuesGap;
271-
this._numberInputs[0].value = minp.toString();
177+
// Check if the values gap is exceeded
178+
if (diff < this._valuesGap) {
179+
// Check if the input is the min range input
180+
if ((e.target as HTMLInputElement).className === "min-range") {
181+
this._rangeInputs[0].value = (maxVal - this._valuesGap).toString();
272182
} else {
273-
maxp = minp + this._valuesGap;
274-
this._numberInputs[1].value = maxp.toString();
183+
this._rangeInputs[1].value = (minVal + this._valuesGap).toString();
275184
}
185+
} else {
186+
// Update input values and range progress
187+
this._suppressAttributeChange = true;
188+
this.setAttribute('value-min', minVal.toString());
189+
this.setAttribute('value-max', maxVal.toString());
190+
this._suppressAttributeChange = false;
191+
this._updateSliderPosition(minVal, parseInt(this.getAttribute('max')), true);
192+
this._updateSliderPosition(maxVal, parseInt(this.getAttribute('max')), false);
276193
}
194+
}
195+
196+
private _handleRangeChange(e: Event) {
197+
let minVal = parseInt(this._rangeInputs[0].value);
198+
let maxVal = parseInt(this._rangeInputs[1].value);
277199

278-
if (maxp - minp >= this._valuesGap) {
279-
if (inputIndex === 0) {
280-
this._rangeInputs[0].value = minp.toString();
281-
this._updateSliderPosition(minp, parseInt(this.getAttribute('max')), true);
200+
// Prevent duplicate event firing
201+
const currentMinVal = parseInt(this.getAttribute('value-min'));
202+
const currentMaxVal = parseInt(this.getAttribute('value-max'));
203+
204+
this._suppressAttributeChange = true;
205+
this.setAttribute('value-min', minVal.toString());
206+
this.setAttribute('value-max', maxVal.toString());
207+
this._suppressAttributeChange = false;
208+
209+
// Dispatch the appropriate event
210+
if ((e.target as HTMLInputElement).className === "min-range") {
211+
this._dispatchChangeEvent('value-min-changed', minVal);
282212
} else {
283-
this._rangeInputs[1].value = maxp.toString();
284-
this._updateSliderPosition(maxp, parseInt(this.getAttribute('max')), false);
213+
this._dispatchChangeEvent('value-max-changed', maxVal);
285214
}
286-
}
287-
this._suppressAttributeChange = true;
288-
this.setAttribute('value-min', this._rangeInputs[0].value);
289-
this.setAttribute('value-max', this._rangeInputs[1].value);
290-
this._suppressAttributeChange = false;
291-
this._validateValues(inputIndex === 0 ? 'value-min' : 'value-max', inputIndex === 0 ? minp.toString() : maxp.toString());
292-
this._updateInputValues(); // Ensure number inputs are updated
293215
}
294216

295217
private _updateSliderPosition(value: number, max: number, isMin: boolean) {
@@ -304,6 +226,14 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
304226
rangevalue.style.right = `${100 - (relativeValue / range) * 100}%`;
305227
}
306228
}
229+
230+
private _dispatchChangeEvent(eventName: string, value: number) {
231+
this.dispatchEvent(new CustomEvent(eventName, {
232+
detail: {
233+
value: value
234+
}
235+
}));
236+
}
307237
}
308238

309239
customElements.define(SliderWebcomponent.is, SliderWebcomponent);

0 commit comments

Comments
 (0)