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.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"); };