SI23/web/quilt/quilt.js

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', 'https://issue.xpub.nl/23/quilt/quilt.html');
//xhr.open('GET', '/quilt/quilt.html');
xhr.send();
xhr.onload = function() {
	if (xhr.status != 200) { //what its not a 200 :D
		console.log(`Error ${xhr.status}: ${xhr.statusText}`); 	// what is the error
	} else { // its a 200
		table = document.createElement('table');   			//create a table
		var response = xhr.response.replace("<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");
};