158 lines
5.5 KiB
HTML
158 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<title>Mapa - Pruebas</title>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
|
<meta charset="utf-8" />
|
|
|
|
<style data-type="text/css" data-language="CSS3" rel="stylesheet" charset="utf-8">
|
|
|
|
html,body{
|
|
margin : 0px;
|
|
height : 100%;
|
|
overflow : auto;
|
|
}
|
|
svg>*:not(#ocean){
|
|
/* display : block;
|
|
top : 0px;
|
|
left : 0px; */
|
|
fill : #FBB;
|
|
}
|
|
svg>*:not(#ocean):hover{
|
|
fill : #F88;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
|
|
|
|
MapaPruebas = function(){
|
|
|
|
const self = this;
|
|
|
|
const construct = () => {
|
|
|
|
load_map();
|
|
|
|
};
|
|
|
|
const load_map = () => {
|
|
|
|
let ended = false;
|
|
const ajax = new XMLHttpRequest();
|
|
end = () => {
|
|
!ended &&
|
|
(ended = true) &&
|
|
build_map(ajax.responseText);
|
|
};
|
|
|
|
ajax.open("get", "../data/World Map.svg", true);
|
|
ajax.timeout = 2000;
|
|
ajax.onreadystatechange = () => {
|
|
if(ended)
|
|
return;
|
|
if(ajax.readyState == 4)
|
|
end();
|
|
};
|
|
ajax.send(null);
|
|
|
|
};
|
|
|
|
const build_map = svg => {
|
|
|
|
let preload = setInterval(() => {
|
|
|
|
const body = document.querySelector("body");
|
|
|
|
if(!body)
|
|
return;
|
|
clearInterval(preload);
|
|
|
|
body.innerHTML = svg.replace(/<style((?!<\/style>)(.|[\r\n]))+<\/style>|<!\-{2}((?!\-{2}>)(.|[\r\n]))+(-{2}>)?|\/\*((?!\*\!)(.|[\r\n]))+(\*\/)?/, "");
|
|
|
|
preload = setInterval(() => {
|
|
if(document.querySelector("svg>#tk")){
|
|
clearInterval(preload);
|
|
body.setAttribute("onmousemove", "mapa_pruebas.test_country_move(this, event);");
|
|
document.querySelectorAll("svg>*").forEach(country => {
|
|
if(country.hasAttribute("id") && country.getAttribute("id") == "ocean")
|
|
return;
|
|
country.setAttribute("onclick", "mapa_pruebas.test_country_click(this, event);");
|
|
country.setAttribute("onmousedown", "mapa_pruebas.test_country_select(this, event);");
|
|
country.setAttribute("onmouseup", "mapa_pruebas.test_country_unselect(this, event);");
|
|
})
|
|
}
|
|
}, 1000 / 24);
|
|
|
|
}, 1000 / 24);
|
|
|
|
};
|
|
|
|
this.test_country_click = (item, event) => {
|
|
|
|
const time = Date.now();
|
|
|
|
if(time - (item.hasAttribute("data-last-click") ? Number(item.getAttribute("data-last-click")) : 0) < 500)
|
|
alert(item.querySelector("title").innerHTML + ", " + item.getAttribute("id"));
|
|
item.setAttribute("data-last-click", time);
|
|
|
|
};
|
|
|
|
const unselect_all = () => document.querySelectorAll("svg [data-pressed=true]").forEach(item => item.setAttribute("data-pressed", false));
|
|
|
|
const get_country_item = item => {
|
|
|
|
while(item && item.parentNode.tagName.toLowerCase() != "svg" && (item.parentNode));
|
|
|
|
return item;
|
|
};
|
|
|
|
this.test_country_select = (item, event, pressed) => {
|
|
|
|
const aexis = [0, 0];
|
|
|
|
unselect_all();
|
|
|
|
if(item.style.transform){
|
|
|
|
const matches = item.style.transform.match(/\-?([0-9]+)px,\s*\-?([0-9]+)/);
|
|
|
|
[0, 1].forEach(i => aexis[i] = Number(matches[i + 1]));
|
|
|
|
};
|
|
|
|
item.setAttribute("data-pressed", true);
|
|
item.setAttribute("data-origin", JSON.stringify([event.pageX + aexis[0], event.pageY + aexis[1]]));
|
|
|
|
};
|
|
this.test_country_unselect = (item, event, pressed) => item.setAttribute("data-pressed", false);
|
|
|
|
this.test_country_move = (body, event) => {
|
|
if(event.pageY < 5 || event.pageX < 5 || event.pageY > body.offsetHeight - 10 || event.pageX > body.offsetWidth - 10){
|
|
unselect_all();
|
|
return;
|
|
};
|
|
|
|
const item = body.querySelector("svg [data-pressed=true]");
|
|
|
|
if(item){
|
|
|
|
const [x, y] = JSON.parse(item.getAttribute("data-origin"));
|
|
|
|
item.style.transform = "translate(" + (event.pageX - x) + "px," + (event.pageY - y) + "px)";
|
|
|
|
};
|
|
|
|
};
|
|
|
|
construct();
|
|
|
|
};
|
|
|
|
mapa_pruebas = new MapaPruebas();
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body></body>
|
|
</html> |