From 6d5273f1c8977b7284b3b1de52f5636809d519dc Mon Sep 17 00:00:00 2001
From: Markus Ankenbrand <markus@ankenbrand.me>
Date: Sat, 25 Feb 2017 09:41:16 +0100
Subject: [PATCH] Add time range slider to pins page

---
 js/page-pins-map.js | 25 +++++++++++++++++++++++++
 page-pins.php       |  8 +++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/js/page-pins-map.js b/js/page-pins-map.js
index 21fb81b..c4bb16b 100644
--- a/js/page-pins-map.js
+++ b/js/page-pins-map.js
@@ -25,6 +25,7 @@ jQuery('document').ready(function(){
     });
     jQuery('#travelers-extend-button').on('click', toggleExtendTravelers);
     toggleExtendTravelers();
+    initTimeRangeSlider();
 });
 var markers = [];
 function initMap() {
@@ -40,6 +41,8 @@ function initMap() {
             title: places[i]['title'],
             url: "/?p="+places[i]['post'],
             traveler: places[i]['traveler'],
+            startYear: parseInt(places[i]['start'].substr(0,4)),
+            endYear: parseInt(places[i]['end'].substr(0,4)),
             map: map
         });
         marker.setVisible(true);
@@ -57,6 +60,28 @@ function initMap() {
     }, 500);
 }
 
+function initTimeRangeSlider(){
+    var minYear = 3000;
+    var maxYear = 0;
+    for(var i=0; i<places.length; i++){
+        var start = parseInt(places[i].start.substr(0,4));
+        var end = parseInt(places[i].end.substr(0,4));
+        minYear = (minYear < start ? minYear : start);
+        maxYear = (maxYear > end ? maxYear : end);
+    }
+    jQuery('#time-range-slider').slider({
+        range: true,
+        min: minYear,
+        max: maxYear,
+        values: [ minYear, maxYear ],
+        slide: function( event, ui ) {
+            jQuery( "#time-range" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
+        }
+    });
+    jQuery( "#time-range" ).val( jQuery( "#time-range-slider" ).slider( "values", 0 ) +
+        " - $" + jQuery( "#time-range-slider" ).slider( "values", 1 ) );
+}
+
 function filterByTravelerClick(){
     var travelers = [];
     jQuery('#travelers-select .ui-selected').each(function (i, elem) {
diff --git a/page-pins.php b/page-pins.php
index 9a93f77..852ace5 100644
--- a/page-pins.php
+++ b/page-pins.php
@@ -35,6 +35,12 @@
                 <ul id="travelers-select"></ul>
 
                 <div style="clear: both; float: left; display: block; position: relative;margin-top: 20px;">
+                    <p>
+                        <label for="time-range">Zeitraum:</label>
+                        <input type="text" id="time-range" readonly style="border:0; color:#f6931f; font-weight:bold;">
+                    </p>
+                    <div id="time-range-slider"></div>
+
                     <a class="button" style="color:white" id="travelers-filter-button">Filter</a>
                     <a class="button" style="color:white" id="travelers-reset-button">Reset</a>
                     <a class="button" style="color:white" id="travelers-extend-button">Erweitert</a>
@@ -92,7 +98,7 @@
     endwhile;
     wp_enqueue_style('toggle_switch_style', get_stylesheet_directory_uri() . '/css/tinytools.toggleswitch.min.css');
     wp_enqueue_script('toggle_switch', get_stylesheet_directory_uri() . '/js/tinytools.toggleswitch.min.js', array('jquery'));
-    wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery', 'jquery-ui-selectable', 'toggle_switch'));
+    wp_enqueue_script('page_pins_map', get_stylesheet_directory_uri() . '/js/page-pins-map.js', array('jquery', 'jquery-ui-selectable', 'jquery-ui-slider', 'toggle_switch'));
     wp_localize_script('page_pins_map', 'page_pins_map', array('places' => $locations, 'traveler' => array_values($traveler)));
     wp_enqueue_style('page_pins', get_stylesheet_directory_uri() . '/css/page-pins.css');
 ?>