here comes the web quilt

8 months ago · 5ef669d38e
parent fa7a3354c2
commit 5ef669d38e
4 changed files with 213 additions and 2 deletions
--- a/web/index.html
+++ b/web/index.html
@ -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>
--- a/web/quilt/quilt.css
+++ b/web/quilt/quilt.css
@ -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);
+}
--- a/web/quilt/quilt.html
+++ b/web/quilt/quilt.html
@ -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>
--- a/web/quilt/quilt.js
+++ b/web/quilt/quilt.js
@ -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");
+};