From 91281df1df2e0f26d5c342cb4897a72eae5b3293 Mon Sep 17 00:00:00 2001 From: mattiapezzotti Date: Wed, 10 Jul 2024 10:35:32 +0200 Subject: [PATCH] the slider works now. --- modules/renderer/photos.js | 8 ++-- modules/services/panoramax.js | 4 +- modules/svg/panoramax_images.js | 64 ++++++++++++++++----------- modules/ui/sections/photo_overlays.js | 7 ++- 4 files changed, 46 insertions(+), 37 deletions(-) diff --git a/modules/renderer/photos.js b/modules/renderer/photos.js index a1a8a4e8f..9a177afab 100644 --- a/modules/renderer/photos.js +++ b/modules/renderer/photos.js @@ -14,7 +14,7 @@ export function rendererPhotos(context) { var _fromDate; var _toDate; var _maxPhotoDate; - var _yearSlider; + var _yearSliderValue; var _usernames; function photos() {} @@ -52,8 +52,8 @@ export function rendererPhotos(context) { return _maxPhotoDate; }; - photos.yearSlider = function() { - return _yearSlider; + photos.yearSliderValue = function() { + return _yearSliderValue; }; photos.dateFilterValue = function(val) { @@ -110,7 +110,7 @@ export function rendererPhotos(context) { if (currYear){ var fromDate = new Date(currYear, 0, 1); photos.setDateFilter('fromDate', fromDate, updateUrl); - _yearSlider = currYear; + _yearSliderValue = currYear; } else { photos.setDateFilter('fromDate', null, updateUrl); } diff --git a/modules/services/panoramax.js b/modules/services/panoramax.js index ca99f8d2f..ecf925725 100644 --- a/modules/services/panoramax.js +++ b/modules/services/panoramax.js @@ -285,9 +285,7 @@ export default { }, getOldestDate: function(){ - if (_oldestDate){ - return _oldestDate.substr(0, 4); - } + return _oldestDate; }, // Get visible sequences diff --git a/modules/svg/panoramax_images.js b/modules/svg/panoramax_images.js index 0a191f3f4..616ec75e1 100644 --- a/modules/svg/panoramax_images.js +++ b/modules/svg/panoramax_images.js @@ -186,38 +186,49 @@ export function svgPanoramaxImages(projection, context, dispatch) { if (service) service.setStyles(context, null); } - function updateYearSlider(oldestDate){ + function updateYearSlider(minYear){ let maxYear = new Date(); maxYear = maxYear.getFullYear(); let slider = d3_select('.list-option-date-slider'); - let sliderWrap = slider.select(function() { return this.parentNode; }); + if (slider && minYear){ + let sliderWrap = slider.select(function() { return this.parentNode; }); + let sliderLabel = sliderWrap.select('.year-selected'); - sliderWrap.selectAll('datalist').remove(); + sliderWrap.selectAll('datalist').remove(); - let datalist = sliderWrap.append('datalist') - .attr('id', 'dateValues') - .attr('class', 'year-datalist'); + let datalist = sliderWrap.append('datalist') + .attr('id', 'dateValues') + .attr('class', 'year-datalist'); - if (oldestDate < maxOldestYear) oldestDate = maxOldestYear; + minYear = parseInt(minYear, 10); - if(slider.attr('value')){ - let currYear = parseInt(slider.attr('value'), 10); - currYear = oldestDate + (maxYear - currYear); - slider.attr('value', currYear) + if (minYear < maxOldestYear) minYear = maxOldestYear; + + let currYear = sliderLabel.html(); + currYear = currYear.substring(0, 4); + currYear = parseInt(currYear, 10); + + let sliderValue = maxYear - (currYear - minYear); + + if (minYear > currYear){ + sliderValue = maxYear; + sliderLabel.html(minYear + ' - ' + maxYear); + } + + slider.attr('value', sliderValue); + slider.attr('min', minYear); + + datalist + .append('option') + .attr('value', minYear) + .attr('label', minYear); + + datalist + .append('option') + .attr('value', maxYear) + .attr('label', maxYear); } - - slider.attr('min', oldestDate); - - datalist - .append('option') - .attr('value', oldestDate) - .attr('label', oldestDate); - - datalist - .append('option') - .attr('value', maxYear) - .attr('label', maxYear); } async function update() { @@ -227,13 +238,12 @@ export function svgPanoramaxImages(projection, context, dispatch) { const service = getService(); let sequences = (service ? service.sequences(projection, zoom) : []); let images = (service ? service.images(projection) : []); - let oldestDate = service.getOldestDate(); - - updateYearSlider(oldestDate); images = await filterImages(images); sequences = await filterSequences(sequences, service); + let oldestDate = (service ? service.getOldestDate() : null); + let traces = layer.selectAll('.sequences').selectAll('.sequence') .data(sequences, function(d) { return d.id; }); @@ -297,6 +307,8 @@ export function svgPanoramaxImages(projection, context, dispatch) { .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') .attr('d', viewfieldPath); + if (oldestDate) updateYearSlider(oldestDate.substring(0, 4)); + function viewfieldPath() { if (this.parentNode.__data__.isPano) { return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; diff --git a/modules/ui/sections/photo_overlays.js b/modules/ui/sections/photo_overlays.js index 266116649..a572b44eb 100644 --- a/modules/ui/sections/photo_overlays.js +++ b/modules/ui/sections/photo_overlays.js @@ -341,16 +341,16 @@ export function uiSectionPhotoOverlays(context) { function drawDateSlider(selection){ function filterEnabled() { - return context.photos().yearSlider(); + return context.photos().yearSliderValue(); } var maxYear = new Date(); maxYear = parseInt(maxYear.getFullYear(), 10); - let yearSlider = context.photos().yearSlider(); + let yearSliderValue = context.photos().yearSliderValue(); let currYear; - if (yearSlider) currYear = yearSlider; + if (yearSliderValue) currYear = yearSliderValue; else currYear = maxYear; var ul = selection @@ -402,7 +402,6 @@ export function uiSectionPhotoOverlays(context) { .append('input') .attr('type', 'range') .attr('max', maxYear) - .attr('value', currYear) .attr('list', 'dateValues') .attr('class', 'list-option-date-slider') .call(utilNoAuto)