mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-06-09 14:59:14 +02:00
added linking to entries via url hash
This commit is contained in:
parent
02904ef1ed
commit
a5c609d14f
150
web/_js/view.js
150
web/_js/view.js
|
@ -4,10 +4,10 @@
|
||||||
/*
|
/*
|
||||||
========================================================================
|
========================================================================
|
||||||
The /r/place Atlas
|
The /r/place Atlas
|
||||||
|
|
||||||
An Atlas of Reddit's /r/place, with information to each
|
An Atlas of Reddit's /r/place, with information to each
|
||||||
artwork of the canvas provided by the community.
|
artwork of the canvas provided by the community.
|
||||||
|
|
||||||
Copyright (C) 2017 Roland Rytz <roland@draemm.li>
|
Copyright (C) 2017 Roland Rytz <roland@draemm.li>
|
||||||
Licensed under the GNU Affero General Public License Version 3
|
Licensed under the GNU Affero General Public License Version 3
|
||||||
This program is free software: you can redistribute it and/or modify
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
@ -19,10 +19,32 @@
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||||
For more information, see:
|
For more information, see:
|
||||||
https://draemm.li/various/place-atlas/license.txt
|
https://draemm.li/various/place-atlas/license.txt
|
||||||
|
|
||||||
========================================================================
|
========================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
function createInfoBlock(entry){
|
||||||
|
var element = document.createElement("div");
|
||||||
|
element.className = "object";
|
||||||
|
|
||||||
|
var html = '<h2><a href="#id'+entry.id+'">'+entry.name+'</a></h2>';
|
||||||
|
if(entry.description){
|
||||||
|
html += '<p>'+entry.description+'</p>';
|
||||||
|
}
|
||||||
|
if(entry.website){
|
||||||
|
html += '<a target="_blank" href='+entry.website+'>Website</a>';
|
||||||
|
}
|
||||||
|
if(entry.subreddit){
|
||||||
|
if(entry.subreddit.substring(0, 2) == "r/"){
|
||||||
|
entry.subreddit = "/" + entry.subreddit;
|
||||||
|
} else if(entry.subreddit.substring(0, 1) != "/"){
|
||||||
|
entry.subreddit = "/r/" + entry.subreddit;
|
||||||
|
}
|
||||||
|
html += '<a target="_blank" href=https://reddit.com'+entry.subreddit+'>'+entry.subreddit+'</a>';
|
||||||
|
}
|
||||||
|
element.innerHTML = html;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
function initView(){
|
function initView(){
|
||||||
|
|
||||||
|
@ -30,14 +52,14 @@ function initView(){
|
||||||
|
|
||||||
var linesCanvas = document.getElementById("linesCanvas");
|
var linesCanvas = document.getElementById("linesCanvas");
|
||||||
var linesContext = linesCanvas.getContext("2d");
|
var linesContext = linesCanvas.getContext("2d");
|
||||||
|
|
||||||
var backgroundCanvas = document.createElement("canvas");
|
var backgroundCanvas = document.createElement("canvas");
|
||||||
backgroundCanvas.width = 1000;
|
backgroundCanvas.width = 1000;
|
||||||
backgroundCanvas.height = 1000;
|
backgroundCanvas.height = 1000;
|
||||||
var backgroundContext = backgroundCanvas.getContext("2d");
|
var backgroundContext = backgroundCanvas.getContext("2d");
|
||||||
|
|
||||||
var filterInput = document.getElementById("searchList");
|
var filterInput = document.getElementById("searchList");
|
||||||
|
|
||||||
var entriesList = document.getElementById("entriesList");
|
var entriesList = document.getElementById("entriesList");
|
||||||
|
|
||||||
var entriesLimit = 50;
|
var entriesLimit = 50;
|
||||||
|
@ -61,6 +83,31 @@ function initView(){
|
||||||
|
|
||||||
buildObjectsList();
|
buildObjectsList();
|
||||||
|
|
||||||
|
// parse linked atlas entry id from link hash
|
||||||
|
if (window.location.hash.substring(3)){
|
||||||
|
var id = parseInt(window.location.hash.substring(3));
|
||||||
|
var entry = atlas.filter(function(e){
|
||||||
|
return e.id === id;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (entry.length === 1){
|
||||||
|
entry = entry[0];
|
||||||
|
var infoElement = createInfoBlock(entry);
|
||||||
|
objectsContainer.appendChild(infoElement);
|
||||||
|
|
||||||
|
zoomOrigin = [
|
||||||
|
(-(container.clientWidth/2 - innerContainer.clientWidth/2) + container.clientWidth/2 - entry.center[0]* zoom)
|
||||||
|
,(-(container.clientHeight/2 - innerContainer.clientHeight/2) + container.clientHeight/2 + 50 - entry.center[1]* zoom)
|
||||||
|
]
|
||||||
|
applyView();
|
||||||
|
hovered = [entry];
|
||||||
|
fixed = true;
|
||||||
|
render();
|
||||||
|
hovered[0].element = infoElement;
|
||||||
|
updateLines();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
container.addEventListener("mousemove", function(e){
|
container.addEventListener("mousemove", function(e){
|
||||||
updateHovering(e);
|
updateHovering(e);
|
||||||
});
|
});
|
||||||
|
@ -71,7 +118,7 @@ function initView(){
|
||||||
entriesList.appendChild(moreEntriesButton);
|
entriesList.appendChild(moreEntriesButton);
|
||||||
|
|
||||||
buildObjectsList(this.value.toLowerCase());
|
buildObjectsList(this.value.toLowerCase());
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("sort").addEventListener("input", function(e){
|
document.getElementById("sort").addEventListener("input", function(e){
|
||||||
|
@ -80,7 +127,7 @@ function initView(){
|
||||||
entriesList.appendChild(moreEntriesButton);
|
entriesList.appendChild(moreEntriesButton);
|
||||||
|
|
||||||
buildObjectsList(filterInput.value.toLowerCase());
|
buildObjectsList(filterInput.value.toLowerCase());
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateHovering(e){
|
function updateHovering(e){
|
||||||
|
@ -117,32 +164,14 @@ function initView(){
|
||||||
objectsContainer.innerHTML = "";
|
objectsContainer.innerHTML = "";
|
||||||
|
|
||||||
for(var i in hovered){
|
for(var i in hovered){
|
||||||
var element = document.createElement("div");
|
var element = createInfoBlock(hovered[i]);
|
||||||
element.className = "object";
|
|
||||||
|
|
||||||
var html = '<h2>'+hovered[i].name+'</h2>';
|
|
||||||
if(hovered[i].description){
|
|
||||||
html += '<p>'+hovered[i].description+'</p>';
|
|
||||||
}
|
|
||||||
if(hovered[i].website){
|
|
||||||
html += '<a target="_blank" href='+hovered[i].website+'>Website</a>';
|
|
||||||
}
|
|
||||||
if(hovered[i].subreddit){
|
|
||||||
if(hovered[i].subreddit.substring(0, 2) == "r/"){
|
|
||||||
hovered[i].subreddit = "/" + hovered[i].subreddit;
|
|
||||||
} else if(hovered[i].subreddit.substring(0, 1) != "/"){
|
|
||||||
hovered[i].subreddit = "/r/" + hovered[i].subreddit;
|
|
||||||
}
|
|
||||||
html += '<a target="_blank" href=https://reddit.com'+hovered[i].subreddit+'>'+hovered[i].subreddit+'</a>';
|
|
||||||
}
|
|
||||||
element.innerHTML = html;
|
|
||||||
|
|
||||||
objectsContainer.appendChild(element);
|
objectsContainer.appendChild(element);
|
||||||
|
|
||||||
hovered[i].element = element;
|
hovered[i].element = element;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -152,20 +181,20 @@ function initView(){
|
||||||
function renderBackground(){
|
function renderBackground(){
|
||||||
|
|
||||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
backgroundContext.fillStyle = "rgba(0, 0, 0, 0.6)";
|
backgroundContext.fillStyle = "rgba(0, 0, 0, 0.6)";
|
||||||
backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
|
backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
for(var i = 0; i < atlas.length; i++){
|
for(var i = 0; i < atlas.length; i++){
|
||||||
|
|
||||||
var path = atlas[i].path;
|
var path = atlas[i].path;
|
||||||
|
|
||||||
backgroundContext.beginPath();
|
backgroundContext.beginPath();
|
||||||
|
|
||||||
if(path[0]){
|
if(path[0]){
|
||||||
backgroundContext.moveTo(path[0][0], path[0][1]);
|
backgroundContext.moveTo(path[0][0], path[0][1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var p = 1; p < path.length; p++){
|
for(var p = 1; p < path.length; p++){
|
||||||
backgroundContext.lineTo(path[p][0], path[p][1]);
|
backgroundContext.lineTo(path[p][0], path[p][1]);
|
||||||
}
|
}
|
||||||
|
@ -251,40 +280,22 @@ function initView(){
|
||||||
}
|
}
|
||||||
|
|
||||||
sortedAtlas.sort(sortFunction);
|
sortedAtlas.sort(sortFunction);
|
||||||
|
|
||||||
for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){
|
for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){
|
||||||
|
|
||||||
if(i >= sortedAtlas.length){
|
if(i >= sortedAtlas.length){
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
var element = document.createElement("div");
|
var element = createInfoBlock(sortedAtlas[i]);
|
||||||
element.className = "object";
|
|
||||||
|
|
||||||
var html = '<h2>'+sortedAtlas[i].name+'</h2>';
|
|
||||||
if(sortedAtlas[i].description){
|
|
||||||
html += '<p>'+sortedAtlas[i].description+'</p>';
|
|
||||||
}
|
|
||||||
if(sortedAtlas[i].website){
|
|
||||||
html += '<a target="_blank" href='+sortedAtlas[i].website+'>Website</a>';
|
|
||||||
}
|
|
||||||
if(sortedAtlas[i].subreddit){
|
|
||||||
if(sortedAtlas[i].subreddit.substring(0, 2) == "r/"){
|
|
||||||
sortedAtlas[i].subreddit = "/" + sortedAtlas[i].subreddit;
|
|
||||||
} else if(sortedAtlas[i].subreddit.substring(0, 1) != "/"){
|
|
||||||
sortedAtlas[i].subreddit = "/r/" + sortedAtlas[i].subreddit;
|
|
||||||
}
|
|
||||||
html += '<a target="_blank" href=https://reddit.com'+sortedAtlas[i].subreddit+'>'+sortedAtlas[i].subreddit+'</a>';
|
|
||||||
}
|
|
||||||
element.innerHTML = html;
|
|
||||||
|
|
||||||
element.foo = sortedAtlas[i];
|
element.foo = sortedAtlas[i];
|
||||||
|
|
||||||
element.addEventListener("mouseenter", function(e){
|
element.addEventListener("mouseenter", function(e){
|
||||||
objectsContainer.innerHTML = "";
|
objectsContainer.innerHTML = "";
|
||||||
zoomOrigin = [
|
zoomOrigin = [
|
||||||
(-(container.clientWidth/2 - innerContainer.clientWidth/2) + container.clientWidth/2 - this.foo.center[0]* zoom)
|
(-(container.clientWidth/2 - innerContainer.clientWidth/2) + container.clientWidth/2 - this.foo.center[0]* zoom)
|
||||||
,(-(container.clientHeight/2 - innerContainer.clientHeight/2) + container.clientHeight/2 + 50 - this.foo.center[1]* zoom)
|
,(-(container.clientHeight/2 - innerContainer.clientHeight/2) + container.clientHeight/2 + 50 - this.foo.center[1]* zoom)
|
||||||
]
|
]
|
||||||
applyView();
|
applyView();
|
||||||
|
@ -292,7 +303,7 @@ function initView(){
|
||||||
render();
|
render();
|
||||||
hovered[0].element = this;
|
hovered[0].element = this;
|
||||||
updateLines();
|
updateLines();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
element.addEventListener("mouseleave", function(e){
|
element.addEventListener("mouseleave", function(e){
|
||||||
|
@ -323,19 +334,19 @@ function initView(){
|
||||||
} else {
|
} else {
|
||||||
container.style.cursor = "default";
|
container.style.cursor = "default";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
|
|
||||||
|
|
||||||
var path = hovered[i].path;
|
var path = hovered[i].path;
|
||||||
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
if(path[0]){
|
if(path[0]){
|
||||||
context.moveTo(path[0][0], path[0][1]);
|
context.moveTo(path[0][0], path[0][1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var p = 1; p < path.length; p++){
|
for(var p = 1; p < path.length; p++){
|
||||||
context.lineTo(path[p][0], path[p][1]);
|
context.lineTo(path[p][0], path[p][1]);
|
||||||
}
|
}
|
||||||
|
@ -352,15 +363,15 @@ function initView(){
|
||||||
context.drawImage(backgroundCanvas, 0, 0);
|
context.drawImage(backgroundCanvas, 0, 0);
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
|
|
||||||
var path = hovered[i].path;
|
var path = hovered[i].path;
|
||||||
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
|
|
||||||
if(path[0]){
|
if(path[0]){
|
||||||
context.moveTo(path[0][0], path[0][1]);
|
context.moveTo(path[0][0], path[0][1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var p = 1; p < path.length; p++){
|
for(var p = 1; p < path.length; p++){
|
||||||
context.lineTo(path[p][0], path[p][1]);
|
context.lineTo(path[p][0], path[p][1]);
|
||||||
}
|
}
|
||||||
|
@ -373,7 +384,7 @@ function initView(){
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFixed(e){
|
function toggleFixed(e){
|
||||||
|
@ -388,16 +399,16 @@ function initView(){
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateLines(){
|
function updateLines(){
|
||||||
|
|
||||||
linesCanvas.width = container.clientWidth;
|
linesCanvas.width = container.clientWidth;
|
||||||
linesCanvas.height = container.clientHeight;
|
linesCanvas.height = container.clientHeight;
|
||||||
linesContext.lineCap = "round";
|
linesContext.lineCap = "round";
|
||||||
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 1)*2;
|
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 1)*2;
|
||||||
linesContext.strokeStyle = "#000000";
|
linesContext.strokeStyle = "#000000";
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
var element = hovered[i].element;
|
var element = hovered[i].element;
|
||||||
|
|
||||||
linesContext.beginPath();
|
linesContext.beginPath();
|
||||||
//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
|
//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
|
||||||
linesContext.moveTo(
|
linesContext.moveTo(
|
||||||
|
@ -410,13 +421,13 @@ function initView(){
|
||||||
);
|
);
|
||||||
linesContext.stroke();
|
linesContext.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 1)*2;
|
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 1)*2;
|
||||||
linesContext.strokeStyle = "#FFFFFF";
|
linesContext.strokeStyle = "#FFFFFF";
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
var element = hovered[i].element;
|
var element = hovered[i].element;
|
||||||
|
|
||||||
linesContext.beginPath();
|
linesContext.beginPath();
|
||||||
linesContext.moveTo(
|
linesContext.moveTo(
|
||||||
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
||||||
|
@ -451,6 +462,5 @@ function initView(){
|
||||||
objectsContainer.addEventListener("scroll", function(e){
|
objectsContainer.addEventListener("scroll", function(e){
|
||||||
updateLines();
|
updateLines();
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue