symbols!
This commit is contained in:
Michael Murtaugh
140
index.html
140
index.html
@@ -1,78 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<title>erg - é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 {
|
||||
overflow: hidden;
|
||||
background: pink;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
right: 0;
|
||||
height: 160vh;
|
||||
z-index: 0;
|
||||
background: gray;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f1f2f3;
|
||||
overflow: hidden;
|
||||
}
|
||||
#map #radio {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
width: 360px;
|
||||
height: 60px;
|
||||
}
|
||||
#map a {
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 200px;
|
||||
}
|
||||
#pagediv {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
bottom: 0; right: 0;
|
||||
z-index: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* https://stackoverflow.com/questions/24859452/css-how-to-center-absolute-position-div-with-max-width-in-ie9-10-11 */
|
||||
#page {
|
||||
position: absolute;
|
||||
top: 60vh;
|
||||
height: 100vh;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
/*left: 80px; right: 80px;*/
|
||||
left: 0; right: 0; top: 0;
|
||||
height: 160vh;
|
||||
text-align: center;
|
||||
}
|
||||
#page iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
#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%;
|
||||
margin: 0 auto;
|
||||
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="pagediv">
|
||||
<div id="map">
|
||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
|
||||
|
||||
<!-- <div id="radio"><iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&feed=%2FErgote_Radio%2Fmagma-reclaim-the-climax-publication-exposition-documentation%2F" frameborder="0" ></iframe></div>
|
||||
-->
|
||||
</div>
|
||||
<div id="page">
|
||||
<iframe id="wikiframe" src="/mw"></iframe>
|
||||
<div id="page">
|
||||
<svg id="svg"></svg>
|
||||
<pre id="debug" style="position: absolute; left: 10px; top: 10px; z-index:23"></pre>
|
||||
<div id="bottompane">
|
||||
<div id="bottompage">
|
||||
<div id="menubar">
|
||||
<span id="menu"><img src="img/symhamburger.png"></span>
|
||||
<input id="searchinput" type="input" placeholder="école de recherche graphique" />
|
||||
<label for="searchinput" id="search"><img src="img/symsearch.png"></label>
|
||||
<img src="img/symup.png" />
|
||||
</div>
|
||||
<div id="wikiframediv">
|
||||
<iframe id="wikiframe" src="/mw"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cats" class="expanded">
|
||||
@@ -88,6 +112,10 @@
|
||||
<div class="botright"><div class="thumb"></div></div>
|
||||
</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"),
|
||||
@@ -100,6 +128,7 @@
|
||||
current_title = null,
|
||||
loaded = false;
|
||||
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
function resize() {
|
||||
var w = window,
|
||||
@@ -110,9 +139,10 @@
|
||||
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
|
||||
svg.setAttribute("width", x);
|
||||
svg.setAttribute("height", y);
|
||||
console.log("resize", x, y);
|
||||
//console.log("resize", x, y);
|
||||
}
|
||||
resize();
|
||||
|
||||
// console.log("mediawikiapi", mediawikiapi);
|
||||
var symbols = {
|
||||
"Orientations": "symbols.svg#Orientations",
|
||||
@@ -125,10 +155,12 @@
|
||||
"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!");
|
||||
@@ -166,6 +198,8 @@
|
||||
return "http://wiki.erg.be/mw/index.php/"+encodeURI(title.replace(/ /g, "_"));
|
||||
}
|
||||
window.addEventListener("DOMContentLoaded", doload);
|
||||
</script>
|
||||
<noscript>
|
||||
iframe.addEventListener("load", function () {
|
||||
var href = strip_fragment(iframe.contentWindow.location.href);
|
||||
console.log("iframe loaded", href);
|
||||
@@ -200,5 +234,5 @@
|
||||
// console.log("history", historycb.checked);
|
||||
map.set_show_history(historycb.checked);
|
||||
})
|
||||
</script>
|
||||
</noscript>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user