From a6c667d9a916d659ecdb1208f92cd127e763ecfb Mon Sep 17 00:00:00 2001 From: mattiapezzotti Date: Sun, 7 Jul 2024 15:19:13 +0200 Subject: [PATCH] still working on the slider --- modules/renderer/photos.js | 19 +++++----- modules/svg/panoramax_images.js | 34 +++++++++--------- modules/ui/sections/photo_overlays.js | 52 +++++++++++++-------------- 3 files changed, 53 insertions(+), 52 deletions(-) diff --git a/modules/renderer/photos.js b/modules/renderer/photos.js index 97ed7225a..a1a8a4e8f 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 _maxPhotoYear; + var _yearSlider; var _usernames; function photos() {} @@ -52,8 +52,8 @@ export function rendererPhotos(context) { return _maxPhotoDate; }; - photos.maxPhotoYear = function() { - return _maxPhotoYear; + photos.yearSlider = function() { + return _yearSlider; }; photos.dateFilterValue = function(val) { @@ -106,14 +106,15 @@ export function rendererPhotos(context) { } }; - photos.setFromYearFilter = function(year, updateUrl){ - if (year){ - var fromDate = new Date(year, 0, 1); + photos.setFromYearFilter = function(currYear, updateUrl){ + if (currYear){ + var fromDate = new Date(currYear, 0, 1); photos.setDateFilter('fromDate', fromDate, updateUrl); - _maxPhotoYear = year; + _yearSlider = currYear; } else { photos.setDateFilter('fromDate', null, updateUrl); } + setUrlFilterValue('slider_date', currYear); }; @@ -220,7 +221,9 @@ export function rendererPhotos(context) { var parts = /^(.*)[–_](.*)$/g.exec(hash.photo_dates.trim()); this.setDateFilter('fromDate', parts && parts.length >= 2 && parts[1], false); this.setDateFilter('toDate', parts && parts.length >= 3 && parts[2], false); - this.setFromYearFilter(parts && parts.length >= 2 && parts[1], false); + } + if (hash.slider_date){ + this.setFromYearFilter(hash.slider_date, false); } if (hash.photo_username) { this.setUsernameFilter(hash.photo_username, false); diff --git a/modules/svg/panoramax_images.js b/modules/svg/panoramax_images.js index 7c311c007..0a191f3f4 100644 --- a/modules/svg/panoramax_images.js +++ b/modules/svg/panoramax_images.js @@ -187,7 +187,8 @@ export function svgPanoramaxImages(projection, context, dispatch) { } function updateYearSlider(oldestDate){ - let currYear = new Date(); + let maxYear = new Date(); + maxYear = maxYear.getFullYear(); let slider = d3_select('.list-option-date-slider'); let sliderWrap = slider.select(function() { return this.parentNode; }); @@ -198,27 +199,26 @@ export function svgPanoramaxImages(projection, context, dispatch) { .attr('id', 'dateValues') .attr('class', 'year-datalist'); - if (oldestDate > maxOldestYear){ - slider.attr('min', oldestDate); + if (oldestDate < maxOldestYear) oldestDate = maxOldestYear; - datalist - .append('option') - .attr('value', oldestDate) - .attr('label', oldestDate); - } else { - slider.attr('min', maxOldestYear); + if(slider.attr('value')){ + let currYear = parseInt(slider.attr('value'), 10); + currYear = oldestDate + (maxYear - currYear); + slider.attr('value', currYear) + } - datalist - .append('option') - .attr('value', maxOldestYear) - .attr('label', maxOldestYear); - }; + slider.attr('min', oldestDate); datalist .append('option') - .attr('value', currYear.getFullYear()) - .attr('label', currYear.getFullYear()); - }; + .attr('value', oldestDate) + .attr('label', oldestDate); + + datalist + .append('option') + .attr('value', maxYear) + .attr('label', maxYear); + } async function update() { const zoom = ~~context.map().zoom(); diff --git a/modules/ui/sections/photo_overlays.js b/modules/ui/sections/photo_overlays.js index 6cc44bca2..266116649 100644 --- a/modules/ui/sections/photo_overlays.js +++ b/modules/ui/sections/photo_overlays.js @@ -340,12 +340,18 @@ export function uiSectionPhotoOverlays(context) { function drawDateSlider(selection){ - function filterEnabled(d) { - return context.photos().maxPhotoYear(d); + function filterEnabled() { + return context.photos().yearSlider(); } - var currYear = new Date(); - currYear = parseInt(currYear.getFullYear(), 10); + var maxYear = new Date(); + maxYear = parseInt(maxYear.getFullYear(), 10); + + let yearSlider = context.photos().yearSlider(); + let currYear; + + if (yearSlider) currYear = yearSlider; + else currYear = maxYear; var ul = selection .selectAll('.layer-list-date-slider') @@ -369,15 +375,15 @@ export function uiSectionPhotoOverlays(context) { .append('li') .attr('class', 'list-item-date-slider'); - var labelEnter = liEnter - .append('label') - .each(function() { - d3_select(this) - .call(uiTooltip() - .title(() => t.append('photo_overlays.age_slider_filter.tooltip')) - .placement('top') - ); - }); + var labelEnter = liEnter + .append('label') + .each(function() { + d3_select(this) + .call(uiTooltip() + .title(() => t.append('photo_overlays.age_slider_filter.tooltip')) + .placement('top') + ); + }); labelEnter .append('span') @@ -389,33 +395,25 @@ export function uiSectionPhotoOverlays(context) { let output = sliderWrap .append('output') - .attr('class','year-selected'); + .attr('class','year-selected') + .html(currYear + ' - ' + maxYear); sliderWrap .append('input') .attr('type', 'range') - .attr('max', currYear) + .attr('max', maxYear) + .attr('value', currYear) .attr('list', 'dateValues') .attr('class', 'list-option-date-slider') .call(utilNoAuto) .on('change', function() { let value = parseInt(d3_select(this).property('value'), 10); let minYear = parseInt(d3_select(this).property('min'), 10); - value = minYear + (currYear - value); + value = minYear + (maxYear - value); context.photos().setFromYearFilter(value, true); - output.html(value + ' - ' + currYear); + output.html(value + ' - ' + maxYear); }); - let datalist = sliderWrap - .append('datalist') - .attr('class', 'year-datalist') - .attr('id', 'dateValues'); - - datalist - .append('option') - .attr('value', currYear) - .attr('label', currYear); - li .merge(liEnter) .classed('active', filterEnabled);