here comes the web quilt
joak
10 months ago
parent
fa7a3354c2
commit
5ef669d38e
@ -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);
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><a href="https://xpub.nl/">xpub.nl</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><a href="https://hub.xpub.nl/chopchop/">chopchop</a></td>
|
||||
<td><a href="https://issue.xpub.nl/23/">SI23</a></td>
|
||||
<td><a href="">test</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -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");
|
||||
};
|
||||
Loading…
Reference in New Issue