iimog/atravelblog
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add time range slider to pins page

Browse source
This commit is contained in:
Markus Ankenbrand 2017-02-25 09:41:16 +01:00
parent d110071d4d
commit 6d5273f1c8
2 changed files with 32 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

25
js/page-pins-map.js
View file

@ -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) {

8
page-pins.php
View file

@ -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');
?>