84 lines
2.8 KiB
HTML
84 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title></title>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" type="text/css" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div id="controls">
|
||
<a href="http://localhost/mw/api.php" id="mediawikiapi"></a><input id="startpage" value="Bienvenue à l’erg" autofocus /><button id="button">ok</button>
|
||
</div>
|
||
<div id="content">
|
||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
|
||
</div>
|
||
<div id="wiki">
|
||
<iframe src="http://localhost/mw/"></iframe>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="dist/wikimap.js"></script>
|
||
<script>
|
||
var mediawikiapi = document.querySelector("#mediawikiapi").href,
|
||
startpage = document.querySelector("#startpage"),
|
||
button = document.querySelector("#button"),
|
||
svg = document.querySelector("#svg"),
|
||
iframe = document.querySelector("iframe");
|
||
|
||
window.addEventListener("resize", resize);
|
||
function resize() {
|
||
var w = window,
|
||
d = document,
|
||
e = d.documentElement,
|
||
g = d.getElementsByTagName('body')[0],
|
||
x = w.innerWidth || e.clientWidth || g.clientWidth,
|
||
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
|
||
svg.setAttribute("width", x);
|
||
svg.setAttribute("height", y);
|
||
console.log("resize", x, y);
|
||
}
|
||
resize();
|
||
// console.log("mediawikiapi", mediawikiapi);
|
||
var map = new wikimap.Map(mediawikiapi);
|
||
map.init_svg("#svg");
|
||
map.on("page", function (title) {
|
||
console.log("map.page", title);
|
||
var url = wiki_title_to_url(title);
|
||
iframe.src = url;
|
||
})
|
||
async function doload() {
|
||
map.set_active_node(startpage.value);
|
||
}
|
||
var URLPAT = new RegExp("http://localhost/mw/index.php/(.+)");
|
||
function strip_fragment (href) {
|
||
var spos = href.indexOf("#");
|
||
if (spos >= 0) {
|
||
return href.substr(0, href.indexOf("#"))
|
||
}
|
||
return href;
|
||
}
|
||
function url_to_wiki_title (href) {
|
||
href = strip_fragment(href);
|
||
var m = URLPAT.exec(href);
|
||
if (m !== null) {
|
||
return decodeURI(m[1]).replace(/_/g, " ");
|
||
}
|
||
console.log("m", m);
|
||
}
|
||
function wiki_title_to_url (title) {
|
||
return "http://localhost/mw/index.php/"+encodeURI(title.replace(/ /g, "_"));
|
||
}
|
||
// window.addEventListener("DOMContentLoaded", doload);
|
||
button.addEventListener("click", doload);
|
||
iframe.addEventListener("load", function () {
|
||
var href = strip_fragment(iframe.contentWindow.location.href);
|
||
console.log("iframe loaded", href);
|
||
var title = url_to_wiki_title(href);
|
||
console.log("title", title);
|
||
if (title) {
|
||
map.set_active_title(title);
|
||
}
|
||
// attempt to map url to wiki page title and update the map if it is one
|
||
|
||
})
|
||
</script>
|
||
</html> |