You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
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 && up.link.includes("http")){
|
|
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 && left.link.includes("http")){
|
|
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.includes("http")){
|
|
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.includes("http")){
|
|
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");
|
|
};
|