wiki.erg.be/map
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

local editing, simplified index that works locally as well

Browse Source
This commit is contained in:
Michael Murtaugh
2019-06-13 11:35:02 +02:00
parent 8c1f6bba22
commit dc57068ad3
6 changed files with 245 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md Normal file
View File

@@ -0,0 +1,9 @@
Development
===============
To rebuild the javascript, you need to use node + rollup.
npm install

3
dist/wikimaptotal.js vendored
View File

@@ -4932,7 +4932,7 @@ var wikimap = (function (exports) {
seconds = date.getUTCSeconds(), seconds = date.getUTCSeconds(),
milliseconds = date.getUTCMilliseconds(); milliseconds = date.getUTCMilliseconds();
return isNaN(date) ? "Invalid Date" return isNaN(date) ? "Invalid Date"
: formatYear(date.getUTCFullYear()) + "-" + pad(date.getUTCMonth() + 1, 2) + "-" + pad(date.getUTCDate(), 2) : formatYear(date.getUTCFullYear(), 4) + "-" + pad(date.getUTCMonth() + 1, 2) + "-" + pad(date.getUTCDate(), 2)
+ (milliseconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "." + pad(milliseconds, 3) + "Z" + (milliseconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "." + pad(milliseconds, 3) + "Z"
: seconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "Z" : seconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "Z"
: minutes || hours ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + "Z" : minutes || hours ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + "Z"
@@ -5470,7 +5470,6 @@ var wikimap = (function (exports) {
console.log("wikimap.set_active_node: page not found", pagename); console.log("wikimap.set_active_node: page not found", pagename);
} }
} }
if (page === this.active_page) { if (page === this.active_page) {
// console.log("page is already the active page", page, this.active_page); // console.log("page is already the active page", page, this.active_page);
return; return;

200
index.html
View File

@@ -1,91 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>erg - école de recherche graphique</title> <title>école de recherche graphique</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
margin: 0;
padding: 0;
background: #f1f2f3;
overflow: hidden;
}
#page {
position: absolute;
left: 0; right: 0; top: 0;
height: 160vh;
text-align: center;
}
#page.touched {
background: #444;
}
#bottompane {
position: absolute;
top: 60vh;
left: 0; right: 0;
height: 100vh;
z-index: 2;
}
#bottompane #bottompage {
position: absolute;
left: 0; right: 0;
margin: 0 auto;
max-width: 800px;
background: white;
border: 1px solid #E6E6E6;
border-radius: 10px;
display: inline-block;
width: 100%;
height: 100%;
}
#bottompane #menubar {
height: 48px;
width: 100%;
}
#wikiframediv {
position: absolute;
left: 0; top: 48px;
right: 0; bottom: 0;
}
#bottompane iframe {
border: none;
width: 100%;
height: 100%;
}
#debug {
width: 300px;
font-size: 10px;
height: 8em;
overflow: auto;
}
#cats {
display: none;
}
svg {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
#searchinput {
min-width: 220px;
font-family: "combinedregular";
font-size: 11px;
}
#menubar {
text-align: center;
}
#menubar img {
position: relative;
top: 10px;
}
</style>
</head> </head>
<body> <body>
<div id="page"> <div id="page">
<svg id="svg"></svg> <svg id="svg"></svg>
<pre id="debug" style="position: absolute; left: 10px; top: 10px; z-index:23"></pre> <pre id="debug"></pre>
<div id="bottompane"> <div id="bottompane">
<div id="bottompage"> <div id="bottompage">
<div id="menubar"> <div id="menubar">
@@ -113,124 +37,6 @@
</div> </div>
</body> </body>
<script src="custom_scroller_menu.js"></script> <script src="custom_scroller_menu.js"></script>
<script>
custom_scroller_menu(document.scrollingElement, document.getElementById("menubar"), document.getElementById("debug"));
</script>
<script type="text/javascript" src="dist/wikimaptotal.js"></script> <script type="text/javascript" src="dist/wikimaptotal.js"></script>
<script> <script src="index.js"></script>
var svg = document.querySelector("#svg"),
iframe = document.querySelector("iframe#wikiframe"),
cats = document.querySelector("#cats"),
cats_contents = document.querySelector("#cats .body"),
cats_thumb = document.querySelector("#cats .thumb"),
allcatscb = document.querySelector("input#allcats"),
historycb = document.querySelector("input#history"),
current_title = null,
loaded = false;
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 symbols = {
"Orientations": "symbols.svg#Orientations",
"Ateliers pluridisciplinaires": "symbols.svg#Ateliers_pluridisciplinaires",
"Cours de soutien à l'orientation": "symbols.svg#Cours_de_soutien_a_l'orientation",
"Cours de soutien spécifique": "symbols.svg#Cours_de_soutien_specifique",
"Cours techniques": "symbols.svg#Cours_techniques",
"Cours théoriques": "symbols.svg#Cours_theoriques",
"Enseignants": "symbols.svg#Enseignants",
"default": "symbols.svg#Main"
};
var map = new wikimap.SimpleMap(symbols);
map.init_svg("#svg");
async function doload () {
console.log("loading map");
await map.load_json("sitemap.json");
return;
console.log("loading categories");
await map.load_cats("cats.json", cats_contents);
console.log("LOADED!");
loaded = true;
if (current_title) {
map.set_active_title(current_title);
}
}
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://wiki.erg.be/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://wiki.erg.be/mw/index.php/"+encodeURI(title.replace(/ /g, "_"));
}
window.addEventListener("DOMContentLoaded", 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) {
current_title = title;
if (loaded) {
map.set_active_title(title);
}
}
// attempt to map url to wiki page title and update the map if it is one
});
cats_thumb.addEventListener("click", function () {
cats.classList.toggle("expanded");
});
// allcats checkbox
// match current state & respond to change events
// console.log("setting checked to", cats.classList.contains("showall"))
allcatscb.checked = cats.classList.contains("showall");
allcatscb.addEventListener("change", function () {
// console.log("allcats", allcatscb);
if (allcatscb.checked) {
cats.classList.add("showall")
} else {
cats.classList.remove("showall")
}
})
historycb.addEventListener("change", function () {
// console.log("history", historycb.checked);
map.set_show_history(historycb.checked);
})
</script>
</html> </html>

127
index.js Normal file
View File

@@ -0,0 +1,127 @@
custom_scroller_menu(
document.scrollingElement,
document.getElementById("menubar"),
document.getElementById("debug"));
var svg = document.querySelector("#svg"),
iframe = document.querySelector("iframe#wikiframe"),
cats = document.querySelector("#cats"),
cats_contents = document.querySelector("#cats .body"),
cats_thumb = document.querySelector("#cats .thumb"),
allcatscb = document.querySelector("input#allcats"),
historycb = document.querySelector("input#history"),
current_title = null,
loaded = false,
wikibaseurl,
wikibasepat;
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 symbols = {
"Orientations": "symbols.svg#Orientations",
"Ateliers pluridisciplinaires": "symbols.svg#Ateliers_pluridisciplinaires",
"Cours de soutien à l'orientation": "symbols.svg#Cours_de_soutien_a_l'orientation",
"Cours de soutien spécifique": "symbols.svg#Cours_de_soutien_specifique",
"Cours techniques": "symbols.svg#Cours_techniques",
"Cours théoriques": "symbols.svg#Cours_theoriques",
"Enseignants": "symbols.svg#Enseignants",
"default": "symbols.svg#Main"
};
var map = new wikimap.SimpleMap(symbols);
map.init_svg("#svg");
async function doload () {
console.log("loading map");
await map.load_json("sitemap.json");
// console.log("loading categories");
// await map.load_cats("cats.json", cats_contents);
console.log("LOADED!");
loaded = true;
if (current_title) {
map.set_active_title(current_title);
}
}
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);
// }
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 = wikibasepat.exec(href);
if (m !== null) {
return decodeURI(m[1]).replace(/_/g, " ");
}
console.log("m", m);
}
function wiki_title_to_url (title) {
return wikibaseurl+encodeURI(title.replace(/ /g, "_"));
}
window.addEventListener("DOMContentLoaded", doload);
function strip_title_from_wiki_url (url) {
return url.substr(0, url.lastIndexOf("/")+1);
}
iframe.addEventListener("load", function () {
var href = strip_fragment(iframe.contentWindow.location.href);
if (!wikibaseurl) {
wikibaseurl = strip_title_from_wiki_url(href);
wikibasepat = new RegExp(wikibaseurl+"(.+)");
}
console.log("iframe loaded", href);
var title = url_to_wiki_title(href);
console.log("title", title);
if (title) {
current_title = title;
if (loaded) {
map.set_active_title(title);
}
}
// attempt to map url to wiki page title and update the map if it is one
});
cats_thumb.addEventListener("click", function () {
cats.classList.toggle("expanded");
});
// allcats checkbox
// match current state & respond to change events
// console.log("setting checked to", cats.classList.contains("showall"))
allcatscb.checked = cats.classList.contains("showall");
allcatscb.addEventListener("change", function () {
// console.log("allcats", allcatscb);
if (allcatscb.checked) {
cats.classList.add("showall")
} else {
cats.classList.remove("showall")
}
})
historycb.addEventListener("change", function () {
// console.log("history", historycb.checked);
map.set_show_history(historycb.checked);
})

1
src/wikimapsimple.js
View File

@@ -205,7 +205,6 @@ export class SimpleMap {
console.log("wikimap.set_active_node: page not found", pagename); console.log("wikimap.set_active_node: page not found", pagename);
} }
} }
if (page === this.active_page) { if (page === this.active_page) {
// console.log("page is already the active page", page, this.active_page); // console.log("page is already the active page", page, this.active_page);
return; return;

123
style.css
View File

@@ -73,6 +73,15 @@
} }
body {
margin: 0;
padding: 0;
background: #f1f2f3;
overflow: hidden;
}
.links line { .links line {
/*stroke: #aaa;*/ /*stroke: #aaa;*/
stroke: none; stroke: none;
@@ -110,7 +119,11 @@
fill: aqua; fill: aqua;
} }
svg { svg {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
font: 10px sans-serif; font: 10px sans-serif;
} }
@@ -132,7 +145,35 @@ svg g.mouse text {
visibility: visible; visibility: visible;
} }
use {
fill: #EEE;
stroke: black;
}
.active use {
fill: #FFF;
stroke: red;
}
.active text {
stroke: black;
}
.active2 use {
fill: #FFF;
stroke: red;
}
.highlight use {
fill: #FFF;
stroke: orange;
}
/* Categories */
#cats { #cats {
display: none;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
@@ -164,19 +205,19 @@ svg g.mouse text {
display: inline; display: inline;
} }
#cats .contents { #cats .contents {
overflow: auto; overflow: auto;
height: 50vh; height: 50vh;
min-width: 300px; min-width: 300px;
} }
#cats .contents .scroll { #cats .contents .scroll {}
}
#cats .botright { #cats .botright {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
#cats .botright .thumb { #cats .botright .thumb {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -207,22 +248,68 @@ svg g.mouse text {
} }
use {
fill: #EEE;
stroke: black; #page {
position: absolute;
left: 0; right: 0; top: 0;
height: 160vh;
text-align: center;
} }
.active use { #page.touched {
fill: #FFF; background: #444;
stroke: red;
} }
.active text { #bottompane {
stroke: black; position: absolute;
top: 60vh;
left: 0; right: 0;
height: 100vh;
z-index: 2;
} }
.active2 use { #bottompane #bottompage {
fill: #FFF; position: absolute;
stroke: red; left: 0; right: 0;
margin: 0 auto;
max-width: 800px;
background: white;
border: 1px solid #E6E6E6;
border-radius: 10px;
display: inline-block;
width: 100%;
height: 100%;
}
#bottompane #menubar {
height: 48px;
width: 100%;
}
#wikiframediv {
position: absolute;
left: 0; top: 48px;
right: 0; bottom: 0;
}
#bottompane iframe {
border: none;
width: 100%;
height: 100%;
}
#debug {
width: 300px;
font-size: 10px;
height: 8em;
overflow: auto;
position: absolute; left: 10px; top: 10px; z-index:23
}
#searchinput {
min-width: 220px;
font-family: "combinedregular";
font-size: 11px;
}
#menubar {
text-align: center;
}
#menubar img {
position: relative;
top: 10px;
} }
.highlight use {
fill: #FFF;
stroke: orange;
}