|
let prevLoc, locName; |
|
|
|
function pathTravel(travelPath, pathDist, extra) { |
|
travelPath.animate([ |
|
{ strokeDashoffset: pathDist }, |
|
{ strokeDashoffset: '0' } |
|
], { |
|
duration: pathDist * 5, |
|
fill: 'forwards' |
|
}).onfinish = function() { |
|
if (extra) { |
|
pathTravel(si, si.pathLength.baseVal); |
|
} |
|
extra = false; |
|
} |
|
} |
|
|
|
function fillDesc(locName, desc) { |
|
var imageURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/", |
|
fileName = locName.split("."), |
|
longDesc = '<img src='+imageURL + locName.toLowerCase() +'.jpg srcset="'+imageURL + fileName[0].toLowerCase() +'.jpg 2x" alt>'; |
|
longDesc += "<h1>"+locName+"</h1>"; |
|
longDesc += "<p>"+desc+"</p>"; |
|
return longDesc; |
|
} |
|
|
|
nzmap.addEventListener("click", function(e) { |
|
let loc = e.target.parentNode; |
|
e.preventDefault(); |
|
let desc = loc.querySelector("desc").textContent; |
|
if (loc.nodeName == "a") { |
|
let locName = loc.querySelector("text").textContent; |
|
if (locName !== prevLoc) { |
|
if (locName == "Taranaki") { |
|
pathTravel(ni, ni.pathLength.baseVal); |
|
} |
|
if (locName == "Fiordland") { |
|
if (prevLoc == "Taranaki") { |
|
pathTravel(si, si.pathLength.baseVal); |
|
} else { |
|
pathTravel(ni, ni.pathLength.baseVal, "true"); |
|
} |
|
} |
|
description.classList.remove("active"); |
|
description.innerHTML = ""; |
|
prevLoc = locName; |
|
description.insertAdjacentHTML("afterbegin", fillDesc(locName, desc)); |
|
description.classList.add("active"); |
|
} |
|
} |
|
}); |
|
|
|
function showHide() { |
|
let locs = nzmap.getElementsByTagName("text"), |
|
descs = nzmap.getElementsByTagName("desc"); |
|
for (let i = 0; i < locs.length; i++) { |
|
description.insertAdjacentHTML("afterbegin", "<div>"+fillDesc(locs[i].textContent, descs[i].textContent)+"</div>"); |
|
} |
|
} |
|
|
|
var screencheck = window.matchMedia("(max-width: 790px)"); |
|
window.addEventListener("load", function() { |
|
if (screencheck.matches) { showHide(); } |
|
}); |