local editing, simplified index that works locally as well
This commit is contained in:
Michael Murtaugh
9
README.md
Normal file
9
README.md
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
|
||||
|
||||
Development
|
||||
===============
|
||||
|
||||
To rebuild the javascript, you need to use node + rollup.
|
||||
|
||||
npm install
|
||||
3
dist/wikimaptotal.js
vendored
3
dist/wikimaptotal.js
vendored
@@ -4932,7 +4932,7 @@ var wikimap = (function (exports) {
|
||||
seconds = date.getUTCSeconds(),
|
||||
milliseconds = date.getUTCMilliseconds();
|
||||
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"
|
||||
: seconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 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);
|
||||
}
|
||||
}
|
||||
|
||||
if (page === this.active_page) {
|
||||
// console.log("page is already the active page", page, this.active_page);
|
||||
return;
|
||||
|
||||
200
index.html
200
index.html
@@ -1,91 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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 charset="utf-8">
|
||||
<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>
|
||||
<body>
|
||||
<div id="page">
|
||||
<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="bottompage">
|
||||
<div id="menubar">
|
||||
@@ -113,124 +37,6 @@
|
||||
</div>
|
||||
</body>
|
||||
<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>
|
||||
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>
|
||||
<script src="index.js"></script>
|
||||
</html>
|
||||
|
||||
127
index.js
Normal file
127
index.js
Normal 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);
|
||||
})
|
||||
@@ -205,7 +205,6 @@ export class SimpleMap {
|
||||
console.log("wikimap.set_active_node: page not found", pagename);
|
||||
}
|
||||
}
|
||||
|
||||
if (page === this.active_page) {
|
||||
// console.log("page is already the active page", page, this.active_page);
|
||||
return;
|
||||
|
||||
123
style.css
123
style.css
@@ -73,6 +73,15 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f1f2f3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.links line {
|
||||
/*stroke: #aaa;*/
|
||||
stroke: none;
|
||||
@@ -110,7 +119,11 @@
|
||||
fill: aqua;
|
||||
}
|
||||
|
||||
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 0;
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
@@ -132,7 +145,35 @@ svg g.mouse text {
|
||||
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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@@ -164,19 +205,19 @@ svg g.mouse text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
#cats .contents {
|
||||
overflow: auto;
|
||||
height: 50vh;
|
||||
min-width: 300px;
|
||||
}
|
||||
#cats .contents .scroll {
|
||||
}
|
||||
#cats .contents .scroll {}
|
||||
|
||||
#cats .botright {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#cats .botright .thumb {
|
||||
position: absolute;
|
||||
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 {
|
||||
fill: #FFF;
|
||||
stroke: red;
|
||||
#page.touched {
|
||||
background: #444;
|
||||
}
|
||||
.active text {
|
||||
stroke: black;
|
||||
#bottompane {
|
||||
position: absolute;
|
||||
top: 60vh;
|
||||
left: 0; right: 0;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
}
|
||||
.active2 use {
|
||||
fill: #FFF;
|
||||
stroke: red;
|
||||
#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;
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user