Skip to content

Commit d6e971c

Browse files
lukasvinclavlukasvinclav
authored
feat: number slider filter input change event (#1598)
1 parent 360d0e8 commit d6e971c

File tree

6 files changed

+87
-47
lines changed

6 files changed

+87
-47
lines changed

‎src/unfold/contrib/filters/admin/numeric_filters.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@ def choices(self, changelist: ChangeList) -> tuple[dict[str, Any], ...]:
179179
),
180180
"form": self.form_class(
181181
name=self.parameter_name,
182+
min=min_value,
183+
max=max_value,
182184
data={
183185
self.parameter_name + "_from": self.used_parameters.get(
184186
self.parameter_name + "_from", min_value

‎src/unfold/contrib/filters/forms.py‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,22 +179,39 @@ def __init__(self, name: str, *args, **kwargs) -> None:
179179

180180

181181
class RangeNumericForm(forms.Form):
182-
def __init__(self, name: str, *args, **kwargs) -> None:
182+
def __init__(
183+
self, name: str, min: float = None, max: float = None, *args, **kwargs
184+
) -> None:
183185
self.name = name
184186
super().__init__(*args, **kwargs)
185187

188+
min_max = {}
189+
190+
if min:
191+
min_max["min"] = min
192+
if max:
193+
min_max["max"] = max
194+
186195
self.fields[self.name + "_from"] = forms.FloatField(
187196
label="",
188197
required=False,
189198
widget=forms.NumberInput(
190-
attrs={"placeholder": _("From"), "class": " ".join(INPUT_CLASSES)}
199+
attrs={
200+
"placeholder": _("From"),
201+
"class": " ".join(INPUT_CLASSES),
202+
**min_max,
203+
}
191204
),
192205
)
193206
self.fields[self.name + "_to"] = forms.FloatField(
194207
label="",
195208
required=False,
196209
widget=forms.NumberInput(
197-
attrs={"placeholder": _("To"), "class": " ".join(INPUT_CLASSES)}
210+
attrs={
211+
"placeholder": _("To"),
212+
"class": " ".join(INPUT_CLASSES),
213+
**min_max,
214+
}
198215
),
199216
)
200217

‎src/unfold/contrib/filters/static/unfold/filters/js/admin-numeric-filter.js‎

Lines changed: 62 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,69 @@
1-
document.addEventListener('DOMContentLoaded', function() {
2-
Array.from(document.getElementsByClassName('admin-numeric-filter-slider')).forEach(function(slider) {
3-
if (Array.from(slider.classList).includes("noUi-target")) {
4-
return;
5-
}
1+
document.addEventListener("DOMContentLoaded", function () {
2+
Array.from(
3+
document.getElementsByClassName("admin-numeric-filter-slider")
4+
).forEach(function (slider) {
5+
if (Array.from(slider.classList).includes("noUi-target")) {
6+
return;
7+
}
68

7-
var from = parseFloat(slider.closest('.admin-numeric-filter-wrapper').querySelectorAll('.admin-numeric-filter-wrapper-group input')[0].value);
8-
var to = parseFloat(slider.closest('.admin-numeric-filter-wrapper').querySelectorAll('.admin-numeric-filter-wrapper-group input')[1].value);
9+
const fromInput = slider
10+
.closest(".admin-numeric-filter-wrapper")
11+
.querySelectorAll(".admin-numeric-filter-wrapper-group input")[0];
912

10-
noUiSlider.create(slider, {
11-
start: [from, to],
12-
step: parseFloat(slider.getAttribute('data-step')),
13-
connect: true,
14-
format: wNumb({
15-
decimals: parseFloat(slider.getAttribute('data-decimals'))
16-
}),
17-
range: {
18-
'min': parseFloat(slider.getAttribute('data-min')),
19-
'max': parseFloat(slider.getAttribute('data-max'))
20-
}
21-
});
13+
const toInput = slider
14+
.closest(".admin-numeric-filter-wrapper")
15+
.querySelectorAll(".admin-numeric-filter-wrapper-group input")[1];
2216

23-
slider.noUiSlider.on('update', function(values, handle) {
24-
var parent = this.target.closest('.admin-numeric-filter-wrapper');
25-
var from = parent.querySelectorAll('.admin-numeric-filter-wrapper-group input')[0];
26-
var to = parent.querySelectorAll('.admin-numeric-filter-wrapper-group input')[1];
17+
noUiSlider.create(slider, {
18+
start: [parseFloat(fromInput.value), parseFloat(toInput.value)],
19+
step: parseFloat(slider.getAttribute("data-step")),
20+
connect: true,
21+
format: wNumb({
22+
decimals: parseFloat(slider.getAttribute("data-decimals")),
23+
}),
24+
range: {
25+
min: parseFloat(slider.getAttribute("data-min")),
26+
max: parseFloat(slider.getAttribute("data-max")),
27+
},
28+
});
29+
30+
/*************************************************************
31+
* Update slider when input values change
32+
*************************************************************/
33+
fromInput.addEventListener("keyup", function () {
34+
clearTimeout(this._sliderUpdateTimeout);
35+
this._sliderUpdateTimeout = setTimeout(() => {
36+
slider.noUiSlider.set([
37+
parseFloat(this.value),
38+
parseFloat(toInput.value),
39+
]);
40+
}, 500);
41+
});
42+
43+
toInput.addEventListener("keyup", function () {
44+
clearTimeout(this._sliderUpdateTimeout);
45+
this._sliderUpdateTimeout = setTimeout(() => {
46+
slider.noUiSlider.set([
47+
parseFloat(fromInput.value),
48+
parseFloat(this.value),
49+
]);
50+
}, 500);
51+
});
2752

28-
parent.querySelectorAll('.admin-numeric-filter-slider-tooltip-from')[0].innerHTML = values[0];
29-
parent.querySelectorAll('.admin-numeric-filter-slider-tooltip-to')[0].innerHTML = values[1];
53+
/*************************************************************
54+
* Updated inputs when slider is moved
55+
*************************************************************/
56+
slider.noUiSlider.on("update", function (values, handle) {
57+
const parent = this.target.closest(".admin-numeric-filter-wrapper");
58+
const from = parent.querySelectorAll(
59+
".admin-numeric-filter-wrapper-group input"
60+
)[0];
61+
const to = parent.querySelectorAll(
62+
".admin-numeric-filter-wrapper-group input"
63+
)[1];
3064

31-
from.value = values[0];
32-
to.value = values[1];
33-
});
65+
from.value = values[0];
66+
to.value = values[1];
3467
});
68+
});
3569
});

‎src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,13 @@ <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important
88
</h3>
99

1010
{% if choice.min is not None and choice.max is not None and choice.step %}
11-
<div class="admin-numeric-filter-slider-tooltips">
12-
<span class="admin-numeric-filter-slider-tooltip-from border border-base-200 cursor-not-allowed flex grow flex-row items-center mr-auto rounded-default shadow-xs px-3 py-2 w-full dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
13-
{{ choice.value_from }}
14-
</span>
1511

16-
<span class="admin-numeric-filter-slider-tooltip-to border border-base-200 cursor-not-allowed flex grow flex-row items-center rounded-default shadow-xs px-3 py-2 w-full dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
17-
{{ choice.value_to }}
18-
</span>
12+
<div class="admin-numeric-filter-wrapper-group flex flex-row gap-4 mb-4">
13+
{{ choice.form.as_p }}
1914
</div>
2015

2116
<div class="admin-numeric-filter-slider" data-min="{{ choice.min|unlocalize }}" data-max="{{ choice.max|unlocalize }}" data-decimals="{{ choice.decimals }}" data-step="{{ choice.step|unlocalize }}">
2217
</div>
23-
24-
<div class="admin-numeric-filter-wrapper-group hidden">
25-
{{ choice.form.as_p }}
26-
</div>
2718
{% else %}
2819
<div class="admin-numeric-filter-slider-error dark:text-font-default-dark">
2920
<p class="border border-base-300 border-dashed leading-[36px] h-[38px] rounded-default text-center dark:border-base-700">

‎src/unfold/static/unfold/css/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/unfold/styles.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -637,10 +637,6 @@ fieldset details[open] > summary:after {
637637
@apply bg-primary-600 border-0 h-1;
638638
}
639639

640-
#changelist-filter .admin-numeric-filter-slider-tooltips {
641-
@apply flex flex-row font-medium mb-5 space-x-4 text-base-500 text-sm;
642-
}
643-
644640
/*******************************************************
645641
Trix
646642
*******************************************************/

0 commit comments

Comments
 (0)