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

Externalize js from template file

Browse source
This commit is contained in:
Markus Ankenbrand 2017-02-20 23:06:13 +01:00
parent d465c574a1
commit c711de9201
2 changed files with 67 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

65
js/page-pins-map.js Normal file
View file

@ -0,0 +1,65 @@
var places = page_pins_map.places;
var map;
var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['lng']) };
var traveler = page_pins_map.traveler;
for(var i=0; i<traveler.length; i++){
var opt = document.createElement('OPTION');
var optTxt = document.createTextNode(traveler[i]);
opt.appendChild(optTxt);
document.getElementById('travelers-select').appendChild(opt);
}
var markers = [];
function initMap() {
markers = [];
map = new google.maps.Map(document.getElementById('map-stats'), {
center: map_center,
zoom: 15
});
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i < places.length; i++){
var marker = new google.maps.Marker({
position: {lat: parseFloat(places[i]['lat']), lng: parseFloat(places[i]['lng']) },
title: places[i]['title'],
url: "/?p="+places[i]['post'],
traveler: places[i]['traveler'],
map: map
});
marker.setVisible(true);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
window.setTimeout(function(){
if(map.getZoom() > 15){
map.setZoom(15);
}
}, 500);
}
function filterByTravelerClick(){
var options = document.getElementById('travelers-select').selectedOptions;
var travelers = [];
for(var i=0; i<options.length; i++){
travelers.push(options[i].value);
}
filterMarkersByTravelers(travelers);
}
function filterMarkersByTravelers(travelers){
for(var i=0; i<markers.length; i++){
markers[i].setVisible(false);
var all_there = true;
for(var j=0; j<travelers.length; j++){
if(markers[i]['traveler'].indexOf(travelers[j]) == -1){
all_there = false;
break;
}
}
if(all_there){
markers[i].setVisible(true);
}
}
}

71
page-pins.php
View file

@ -78,76 +78,9 @@
} }
} }
endwhile; endwhile;
var_dump($locations); wp_enqueue_script('page_pins_map', get_template_directory_uri() . '/js/page-pins-map.js', array('jquery'));
wp_localize_script('page_pins_map', 'page_pins_map', array('places' => $locations, 'traveler' => $traveler));
?> ?>
<script type='text/javascript'>
var places = <?php echo json_encode($locations); ?>;
var map;
var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['lng']) };
var traveler = <?php echo json_encode(array_values($traveler)); ?>;
for(var i=0; i<traveler.length; i++){
var opt = document.createElement('OPTION');
var optTxt = document.createTextNode(traveler[i]);
opt.appendChild(optTxt);
document.getElementById('travelers-select').appendChild(opt);
}
var markers = [];
function initMap() {
markers = [];
map = new google.maps.Map(document.getElementById('map-stats'), {
center: map_center,
zoom: 15
});
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i < places.length; i++){
var marker = new google.maps.Marker({
position: {lat: parseFloat(places[i]['lat']), lng: parseFloat(places[i]['lng']) },
title: places[i]['title'],
url: "/?p="+places[i]['post'],
traveler: places[i]['traveler'],
map: map
});
marker.setVisible(true);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
window.setTimeout(function(){
if(map.getZoom() > 15){
map.setZoom(15);
}
}, 500);
}
function filterByTravelerClick(){
var options = document.getElementById('travelers-select').selectedOptions;
var travelers = [];
for(var i=0; i<options.length; i++){
travelers.push(options[i].value);
}
filterMarkersByTravelers(travelers);
}
function filterMarkersByTravelers(travelers){
for(var i=0; i<markers.length; i++){
markers[i].setVisible(false);
var all_there = true;
for(var j=0; j<travelers.length; j++){
if(markers[i]['traveler'].indexOf(travelers[j]) == -1){
all_there = false;
break;
}
}
if(all_there){
markers[i].setVisible(true);
}
}
}
</script>
<?php get_footer(); ?> <?php get_footer(); ?>