diff --git a/web/index.html b/web/index.html index ae503ce..12dbf0e 100644 --- a/web/index.html +++ b/web/index.html @@ -5,7 +5,6 @@ quilt - 
@@ -37,5 +36,6 @@ special issue 23
 january - march 2024
- + + diff --git a/web/quilt/quilt.css b/web/quilt/quilt.css new file mode 100644 index 0000000..8885aee --- /dev/null +++ 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); +} diff --git a/web/quilt/quilt.html b/web/quilt/quilt.html new file mode 100644 index 0000000..760da24 --- /dev/null +++ b/web/quilt/quilt.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + xpub.nl + + + + + + chopchop + SI23 + test + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/quilt/quilt.js b/web/quilt/quilt.js new file mode 100644 index 0000000..766ddf6 --- /dev/null +++ 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"); +};