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.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 && up.link != "empty"){
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 && up.left != "empty"){
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 && right.link != "empty"){
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 && down.link != "empty"){
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");
};