still working on the slider

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);

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();

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);