fixed age slider label, added current selected year label and maximum oldest year

This commit is contained in:
mattiapezzotti
2024-06-29 09:11:43 +02:00
parent 6d1a6c29a2
commit fd7534b175
3 changed files with 41 additions and 15 deletions

View File

@@ -186,21 +186,19 @@ export function svgPanoramaxImages(projection, context, dispatch) {
}
function updateSlider(oldestDate){
let maxOldestYear = 2010;
let currYear = new Date();
let slider = d3_select('.list-option-date-slider');
let label = slider.select(function() { return this.parentNode; })
let sliderWrap = slider.select(function() { return this.parentNode; })
label.selectAll('datalist').remove();
sliderWrap.selectAll('datalist').remove();
let datalist = label.append('datalist').attr('id', 'dateValues');
let datalist = sliderWrap.append('datalist')
.attr('id', 'dateValues')
.attr('class', 'year-datalist');
datalist
.append('option')
.attr('value', currYear.getFullYear())
.attr('label', currYear.getFullYear())
if(oldestDate){
if(oldestDate > maxOldestYear){
slider.attr('min', oldestDate);
datalist
@@ -208,6 +206,19 @@ export function svgPanoramaxImages(projection, context, dispatch) {
.attr('value', oldestDate)
.attr('label', oldestDate)
}
else{
slider.attr('min', maxOldestYear);
datalist
.append('option')
.attr('value', maxOldestYear)
.attr('label', maxOldestYear)
}
datalist
.append('option')
.attr('value', currYear.getFullYear())
.attr('label', currYear.getFullYear())
}
async function update() {

View File

@@ -383,7 +383,16 @@ export function uiSectionPhotoOverlays(context) {
.append('span')
.call(t.append('photo_overlays.age_slider_filter.title'));
labelEnter
let sliderWrap = labelEnter
.append('div')
.attr('class','slider-wrap')
let output = sliderWrap
.append('output')
.html(currYear)
.attr('class','year-selected');
sliderWrap
.append('input')
.attr('type', 'range')
.attr('max', currYear)
@@ -394,10 +403,12 @@ export function uiSectionPhotoOverlays(context) {
.on('change', function() {
var value = d3_select(this).property('value');
context.photos().setMaxPhotoYear(parseInt(value));
output.html(value);
});
let datalist = labelEnter
let datalist = sliderWrap
.append('datalist')
.attr('class', 'year-datalist')
.attr('id', 'dateValues')
datalist