XPUB
/
SI23
19
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

here comes the web quilt

Browse Source
main
joak 10 months ago
parent fa7a3354c2
commit 5ef669d38e
4 changed files with 213 additions and 2 deletions
Show Stats Download Patch File Download Diff File

4
web/index.html
Unescape Escape View File

@ -5,7 +5,6 @@
<head>
<title>quilt</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.38" />
</head>
<body>
<pre>
@ -37,5 +36,6 @@ special issue 23
january - march 2024
</pre>
</body>
<script src="quilt.js"></script>
<script src="quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
<link rel="stylesheet" type="text/css" href="quilt/quilt.css">
</html>

54
web/quilt/quilt.css
Unescape Escape View File

@ -0,0 +1,54 @@
.quiltnavigation{
position: fixed;
bottom: 80px;
right: 220px;
font-family: monospace;
font-size: 18px;
}
.quiltelement{
width: 100px;
height: 28px;
display: block;
background: #ddd;
color: #333;
position: absolute;
text-align: center;
border: 1px solid black;
box-shadow: 0px 0px 5px #300;
transition: all 0.2s;
text-decoration: none;
}
.quiltelement:hover{
box-shadow: 0px 0px 10px #900;
background: #777;
color: #ccc;
}
.quiltcenter{
box-shadow: 0px 0px 0px #300;
background: #777;
color: #ccc;
}
.quiltcenter:hover{
box-shadow: 0px 0px 0px #300;
}
.quiltup{
transform: translateY(-32px);
}
.quiltdown{
transform: translateY(32px);
}
.quiltleft{
transform: translateX(-104px);
}
.quiltright{
transform: translateX(104px);
}

44
web/quilt/quilt.html
Unescape Escape View File

@ -0,0 +1,44 @@
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="https://xpub.nl/">xpub.nl</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="https://hub.xpub.nl/chopchop/">chopchop</a></td>
<td><a href="https://issue.xpub.nl/23/">SI23</a></td>
<td><a href="">test</a></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

113
web/quilt/quilt.js
Unescape Escape View File

@ -0,0 +1,113 @@
function tableToARRAY(table) {
var row, rows = table.rows;
var grid = [];
var i = 0;
for (var x=0; x < rows.length; x++) {
for (var y=0; y < rows[x].cells.length; y++){
var input = rows[x].cells[y].innerHTML;//
try{
var link = input.match(/href="([^"]*)/)[1];
} catch {
var link = "empty";
}
try{
var name = input.replace(/<\s*[^>]*>/gi, '');;
} catch {
var name = "empty";
}
grid[i] = {"x": x, "y": y, "link": link, "name": name};
i++;
}
}
return grid;
}
var cutFileName = document.currentScript.getAttribute('data-cutFileName');
var wholeUrl = document.currentScript.getAttribute('data-wholeUrl');
console.log(cutFileName);
var table;
let xhr = new XMLHttpRequest();
xhr.open('GET', '/quilt/quilt.html');
xhr.send();
xhr.onload = function() {
if (xhr.status != 200) { //what its not a 200 :D
alert(`Error ${xhr.status}: ${xhr.statusText}`); // what is the error
} else { // its a 200
table = document.createElement('table'); //create a table
table.innerHTML = xhr.response; //add the response to the table
var grid = tableToARRAY(table); //convert to a ARRAY
var myUrl = window.location.href; //get current url
if (wholeUrl == "true") myUrl = window.location.host;
if (cutFileName == "true") myUrl = myUrl.substr(0, myUrl.lastIndexOf("\/"));
console.log(grid);
console.log(myUrl);
try{
var found = grid.find((element) => element.link == myUrl);
var NAVI = document.createElement("DIV"); //create div for navigation
NAVI.classList.add("quiltnavigation");
var up = grid.find((element) => element.x == found.x+1 && element.y == found.y );
if(up){
var UP = document.createElement('a');
UP.title = up.name;
UP.href = up.link;
UP.appendChild(document.createTextNode(up.name));
UP.classList.add("quiltup");
UP.classList.add("quiltelement");
NAVI.append(UP);
}
var left = grid.find((element) => element.x == found.x && element.y == found.y-1 );
if(left){
var LEFT = document.createElement('a');
LEFT.title = left.name;
LEFT.href = left.link;
LEFT.appendChild(document.createTextNode(left.name));
LEFT.classList.add("quiltleft");
LEFT.classList.add("quiltelement");
NAVI.append(LEFT);
}
var CENTER = document.createElement('a');
CENTER.title = found.name;
//CENTER.href = found.link;
CENTER.appendChild(document.createTextNode(found.name));
CENTER.classList.add("quiltcenter");
CENTER.classList.add("quiltelement");
NAVI.append(CENTER);
var right = grid.find((element) => element.x == found.x && element.y == found.y+1 );
if(right){
var RIGHT = document.createElement('a');
RIGHT.title = right.name;
RIGHT.href = right.link;
RIGHT.appendChild(document.createTextNode(right.name));
RIGHT.classList.add("quiltright");
RIGHT.classList.add("quiltelement");
NAVI.append(RIGHT);
}
var down = grid.find((element) => element.x == found.x-1 && element.y == found.y );
if(down){
var DOWN = document.createElement('a');
DOWN.title = down.name;
DOWN.href = down.link;
DOWN.appendChild(document.createTextNode(down.name));
DOWN.classList.add("quiltdown");
DOWN.classList.add("quiltelement");
NAVI.append(DOWN);
}
document.body.appendChild(NAVI);
} catch (e){
console.log("the web quilt isn't working: ",e);
}
}
};
// ERROR
xhr.onerror = function() {
alert("Request failed");
};
Write Preview
Loading…
Cancel
Save