mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-25 07:44:07 +01:00
Refactor to avoid code duplicates
This commit is contained in:
Hans5958
parent
331e7bdb5a
commit
a870d33cf8
4 changed files with 664 additions and 1241 deletions
|
|
@ -15,6 +15,12 @@
|
||||||
|
|
||||||
function initDraw(){
|
function initDraw(){
|
||||||
|
|
||||||
|
wrapper.classList.remove('listHidden')
|
||||||
|
|
||||||
|
window.render = render
|
||||||
|
window.renderBackground = renderBackground
|
||||||
|
window.updateHovering = updateHovering
|
||||||
|
|
||||||
var finishButton = document.getElementById("finishButton");
|
var finishButton = document.getElementById("finishButton");
|
||||||
var resetButton = document.getElementById("resetButton");
|
var resetButton = document.getElementById("resetButton");
|
||||||
var undoButton = document.getElementById("undoButton");
|
var undoButton = document.getElementById("undoButton");
|
||||||
|
|
@ -34,14 +40,10 @@ function initDraw(){
|
||||||
var lShiftPressed = false;
|
var lShiftPressed = false;
|
||||||
var shiftPressed = false;
|
var shiftPressed = false;
|
||||||
|
|
||||||
var backgroundCanvas = document.createElement("canvas");
|
|
||||||
backgroundCanvas.width = 2000;
|
|
||||||
backgroundCanvas.height = 2000;
|
|
||||||
var backgroundContext = backgroundCanvas.getContext("2d");
|
|
||||||
|
|
||||||
var highlightUncharted = true;
|
var highlightUncharted = true;
|
||||||
|
|
||||||
renderBackground();
|
renderBackground();
|
||||||
|
applyView();
|
||||||
|
|
||||||
container.style.cursor = "crosshair";
|
container.style.cursor = "crosshair";
|
||||||
|
|
||||||
|
|
@ -50,8 +52,6 @@ function initDraw(){
|
||||||
|
|
||||||
var undoHistory = [];
|
var undoHistory = [];
|
||||||
|
|
||||||
var lastPos = [0, 0];
|
|
||||||
|
|
||||||
render(path);
|
render(path);
|
||||||
|
|
||||||
container.addEventListener("mousedown", function(e){
|
container.addEventListener("mousedown", function(e){
|
||||||
|
|
@ -107,6 +107,8 @@ function initDraw(){
|
||||||
|
|
||||||
if(!dragging && drawing && path.length > 0){
|
if(!dragging && drawing && path.length > 0){
|
||||||
|
|
||||||
|
console.log(123)
|
||||||
|
|
||||||
var coords = getCanvasCoords(e.clientX, e.clientY);
|
var coords = getCanvasCoords(e.clientX, e.clientY);
|
||||||
render(path.concat([coords]));
|
render(path.concat([coords]));
|
||||||
}
|
}
|
||||||
|
|
@ -378,6 +380,18 @@ function initDraw(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateHovering(e, tapped){
|
||||||
|
if(!dragging && (!fixed || tapped)){
|
||||||
|
var pos = [
|
||||||
|
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
||||||
|
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
||||||
|
];
|
||||||
|
var coords_p = document.getElementById("coords_p");
|
||||||
|
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -114,6 +114,9 @@ async function init(){
|
||||||
|
|
||||||
document.body.dataset.mode = mode
|
document.body.dataset.mode = mode
|
||||||
|
|
||||||
|
initGlobal()
|
||||||
|
if (mode !== "draw") initViewGlobal()
|
||||||
|
|
||||||
if(mode === "draw"){
|
if(mode === "draw"){
|
||||||
initDraw();
|
initDraw();
|
||||||
} else if(mode === "about"){
|
} else if(mode === "about"){
|
||||||
|
|
|
||||||
|
|
@ -15,69 +15,18 @@
|
||||||
|
|
||||||
function initOverlap(){
|
function initOverlap(){
|
||||||
|
|
||||||
var wrapper = document.getElementById("wrapper");
|
window.renderBackground = renderBackground
|
||||||
|
|
||||||
var objectsContainer = document.getElementById("objectsList");
|
|
||||||
|
|
||||||
var linesCanvas = document.getElementById("linesCanvas");
|
|
||||||
var linesContext = linesCanvas.getContext("2d");
|
|
||||||
|
|
||||||
var backgroundCanvas = document.createElement("canvas");
|
|
||||||
backgroundCanvas.width = 2000;
|
|
||||||
backgroundCanvas.height = 2000;
|
|
||||||
var backgroundContext = backgroundCanvas.getContext("2d");
|
|
||||||
|
|
||||||
var filterInput = document.getElementById("searchList");
|
|
||||||
|
|
||||||
var entriesList = document.getElementById("entriesList");
|
|
||||||
var hideListButton = document.getElementById("hideListButton");
|
|
||||||
var entriesListShown = true;
|
|
||||||
|
|
||||||
var entriesLimit = 50;
|
|
||||||
var entriesOffset = 0;
|
|
||||||
var moreEntriesButton = document.createElement("button");
|
|
||||||
moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
|
|
||||||
moreEntriesButton.id = "moreEntriesButton";
|
|
||||||
moreEntriesButton.onclick = function(){
|
|
||||||
buildObjectsList();
|
|
||||||
};
|
|
||||||
|
|
||||||
var viewportWidth = document.documentElement.clientWidth;
|
|
||||||
|
|
||||||
var hovered = [];
|
var hovered = [];
|
||||||
|
|
||||||
var lastPos = [0, 0];
|
buildObjectsList(null, null);
|
||||||
|
renderBackground(atlas);
|
||||||
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
|
||||||
|
|
||||||
renderBackground();
|
|
||||||
render();
|
render();
|
||||||
|
|
||||||
buildObjectsList();
|
|
||||||
|
|
||||||
// parse linked atlas entry id from link hash
|
|
||||||
/*if (window.location.hash.substring(3)){
|
|
||||||
zoom = 4;
|
|
||||||
applyView();
|
|
||||||
highlightEntryFromUrl();
|
|
||||||
}*/
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth > 2000){
|
|
||||||
entriesListShown = true;
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth < 2000){
|
|
||||||
entriesListShown = false;
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
applyView();
|
applyView();
|
||||||
render();
|
render();
|
||||||
updateLines();
|
updateLines();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var args = window.location.search;
|
var args = window.location.search;
|
||||||
if(args){
|
if(args){
|
||||||
id = args.split("id=")[1];
|
id = args.split("id=")[1];
|
||||||
|
|
@ -86,138 +35,7 @@ function initOverlap(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
container.addEventListener("mousemove", function(e){
|
function renderBackground(atlas) {
|
||||||
updateHovering(e);
|
|
||||||
});
|
|
||||||
|
|
||||||
filterInput.addEventListener("input", function(e){
|
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
buildObjectsList(this.value.toLowerCase());
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("sort").addEventListener("input", function(e){
|
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
buildObjectsList(filterInput.value.toLowerCase());
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
hideListButton.addEventListener("click", function(e){
|
|
||||||
entriesListShown = !entriesListShown;
|
|
||||||
if(entriesListShown){
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
} else {
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
applyView();
|
|
||||||
updateHovering(e);
|
|
||||||
render();
|
|
||||||
updateLines();
|
|
||||||
});
|
|
||||||
|
|
||||||
function highlightEntryFromUrl(){
|
|
||||||
|
|
||||||
var objectsContainer = document.getElementById("objectsList");
|
|
||||||
|
|
||||||
var id = 0;
|
|
||||||
|
|
||||||
var args = window.location.search;
|
|
||||||
if(args){
|
|
||||||
id = args.split("id=")[1];
|
|
||||||
if(id){
|
|
||||||
id = id.split("&")[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//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.innerHTML = "";
|
|
||||||
objectsContainer.appendChild(infoElement);
|
|
||||||
|
|
||||||
//console.log(entry.center[0]);
|
|
||||||
//console.log(entry.center[1]);
|
|
||||||
|
|
||||||
zoom = 4;
|
|
||||||
applyView();
|
|
||||||
|
|
||||||
zoomOrigin = [
|
|
||||||
innerContainer.clientWidth/2 - entry.center[0]* zoom// + container.offsetLeft
|
|
||||||
,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
|
|
||||||
];
|
|
||||||
|
|
||||||
//console.log(zoomOrigin);
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
hovered = [entry];
|
|
||||||
render();
|
|
||||||
hovered[0].element = infoElement;
|
|
||||||
updateLines();
|
|
||||||
fixed = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHovering(e){
|
|
||||||
if(!dragging && !fixed){
|
|
||||||
var pos = [
|
|
||||||
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
|
||||||
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
|
||||||
];
|
|
||||||
|
|
||||||
if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
|
|
||||||
var newHovered = [];
|
|
||||||
for(var i = 0; i < atlas.length; i++){
|
|
||||||
if(pointIsInPolygon(pos, atlas[i].path)){
|
|
||||||
newHovered.push(atlas[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var changed = false;
|
|
||||||
|
|
||||||
if(hovered.length == newHovered.length){
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
|
||||||
if(hovered[i].id != newHovered[i].id){
|
|
||||||
changed = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
changed = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(changed){
|
|
||||||
hovered = newHovered;
|
|
||||||
|
|
||||||
objectsContainer.innerHTML = "";
|
|
||||||
|
|
||||||
for(var i in hovered){
|
|
||||||
var element = createInfoBlock(hovered[i]);
|
|
||||||
|
|
||||||
objectsContainer.appendChild(element);
|
|
||||||
|
|
||||||
hovered[i].element = element;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderBackground(){
|
|
||||||
|
|
||||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
|
@ -256,277 +74,4 @@ function initOverlap(){
|
||||||
console.log(blank+" blank pixels, which are "+Math.round(blank/100)/100+"% of the canvas ("+(100-Math.round(blank/100)/100)+"% mapped)");
|
console.log(blank+" blank pixels, which are "+Math.round(blank/100)/100+"% of the canvas ("+(100-Math.round(blank/100)/100)+"% mapped)");
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildObjectsList(filter){
|
|
||||||
|
|
||||||
if(entriesList.contains(moreEntriesButton)){
|
|
||||||
entriesList.removeChild(moreEntriesButton);
|
|
||||||
}
|
|
||||||
|
|
||||||
var sortedAtlas;
|
|
||||||
|
|
||||||
if(filter){
|
|
||||||
sortedAtlas = atlas.filter(function(value){
|
|
||||||
return (value.name.toLowerCase().indexOf(filter) !== -1);
|
|
||||||
});
|
|
||||||
document.getElementById("atlasSize").innerHTML = "Found "+sortedAtlas.length+" entries.";
|
|
||||||
} else {
|
|
||||||
sortedAtlas = atlas.concat();
|
|
||||||
document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries.";
|
|
||||||
}
|
|
||||||
|
|
||||||
var sort = document.getElementById("sort").value;
|
|
||||||
|
|
||||||
var sortFunction;
|
|
||||||
|
|
||||||
//console.log(sort);
|
|
||||||
|
|
||||||
switch(sort){
|
|
||||||
case "alphaAsc":
|
|
||||||
sortFunction = function(a, b){
|
|
||||||
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "alphaDesc":
|
|
||||||
sortFunction = function(a, b){
|
|
||||||
return b.name.toLowerCase().localeCompare(a.name.toLowerCase());
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "newest":
|
|
||||||
sortFunction = function(a, b){
|
|
||||||
if (a.id > b.id) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (a.id < b.id) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
// a must be equal to b
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "oldest":
|
|
||||||
sortFunction = function(a, b){
|
|
||||||
if (a.id < b.id) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (a.id > b.id) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
// a must be equal to b
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
sortedAtlas.sort(sortFunction);
|
|
||||||
|
|
||||||
for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){
|
|
||||||
|
|
||||||
if(i >= sortedAtlas.length){
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var element = createInfoBlock(sortedAtlas[i]);
|
|
||||||
|
|
||||||
element.entry = sortedAtlas[i];
|
|
||||||
|
|
||||||
element.addEventListener("mouseenter", function(e){
|
|
||||||
if(!fixed && !dragging){
|
|
||||||
objectsContainer.innerHTML = "";
|
|
||||||
zoomOrigin = [
|
|
||||||
innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft
|
|
||||||
,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
|
|
||||||
]
|
|
||||||
|
|
||||||
//console.log(zoomOrigin);
|
|
||||||
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
hovered = [this.entry];
|
|
||||||
render();
|
|
||||||
hovered[0].element = this;
|
|
||||||
updateLines();
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
element.addEventListener("mouseleave", function(e){
|
|
||||||
if(!fixed && !dragging){
|
|
||||||
hovered = [];
|
|
||||||
updateLines();
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
entriesList.appendChild(element);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
entriesOffset += entriesLimit;
|
|
||||||
|
|
||||||
if(sortedAtlas.length > entriesOffset){
|
|
||||||
moreEntriesButton.innerHTML = "Show "+Math.min(entriesLimit, sortedAtlas.length - entriesOffset)+" more";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function render(){
|
|
||||||
context.globalCompositeOperation = "source-over";
|
|
||||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
if(hovered.length > 0){
|
|
||||||
container.style.cursor = "pointer";
|
|
||||||
} else {
|
|
||||||
container.style.cursor = "default";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
|
||||||
|
|
||||||
|
|
||||||
var path = hovered[i].path;
|
|
||||||
|
|
||||||
context.beginPath();
|
|
||||||
|
|
||||||
if(path[0]){
|
|
||||||
context.moveTo(path[0][0], path[0][1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
for(var p = 1; p < path.length; p++){
|
|
||||||
context.lineTo(path[p][0], path[p][1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
context.closePath();
|
|
||||||
|
|
||||||
context.globalCompositeOperation = "source-over";
|
|
||||||
|
|
||||||
context.fillStyle = "rgba(0, 0, 0, 1)";
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
context.globalCompositeOperation = "source-out";
|
|
||||||
context.drawImage(backgroundCanvas, 0, 0);
|
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
|
||||||
|
|
||||||
var path = hovered[i].path;
|
|
||||||
|
|
||||||
context.beginPath();
|
|
||||||
|
|
||||||
if(path[0]){
|
|
||||||
context.moveTo(path[0][0], path[0][1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
for(var p = 1; p < path.length; p++){
|
|
||||||
context.lineTo(path[p][0], path[p][1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
context.closePath();
|
|
||||||
|
|
||||||
context.globalCompositeOperation = "source-over";
|
|
||||||
|
|
||||||
context.strokeStyle = "rgba(0, 0, 0, 1)";
|
|
||||||
context.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleFixed(e){
|
|
||||||
if(!fixed && hovered.length == 0){
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
fixed = !fixed;
|
|
||||||
if(!fixed){
|
|
||||||
updateHovering(e);
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLines(){
|
|
||||||
|
|
||||||
linesCanvas.width = linesCanvas.clientWidth;
|
|
||||||
linesCanvas.height = linesCanvas.clientHeight;
|
|
||||||
linesContext.lineCap = "round";
|
|
||||||
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 6);
|
|
||||||
linesContext.strokeStyle = "#000000";
|
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
|
||||||
var element = hovered[i].element;
|
|
||||||
|
|
||||||
linesContext.beginPath();
|
|
||||||
//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
|
|
||||||
linesContext.moveTo(
|
|
||||||
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
|
||||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
|
|
||||||
);
|
|
||||||
linesContext.lineTo(
|
|
||||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
|
|
||||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
|
|
||||||
);
|
|
||||||
linesContext.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
|
|
||||||
linesContext.strokeStyle = "#FFFFFF";
|
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
|
||||||
var element = hovered[i].element;
|
|
||||||
|
|
||||||
linesContext.beginPath();
|
|
||||||
linesContext.moveTo(
|
|
||||||
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
|
||||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
|
|
||||||
);
|
|
||||||
linesContext.lineTo(
|
|
||||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
|
|
||||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
|
|
||||||
);
|
|
||||||
linesContext.stroke();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("resize", updateLines);
|
|
||||||
window.addEventListener("mousemove", updateLines);
|
|
||||||
window.addEventListener("dblClick", updateLines);
|
|
||||||
window.addEventListener("wheel", updateLines);
|
|
||||||
|
|
||||||
container.addEventListener("mousedown", function(e){
|
|
||||||
lastPos = [
|
|
||||||
e.clientX
|
|
||||||
,e.clientY
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
container.addEventListener("mouseup", function(e){
|
|
||||||
if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){
|
|
||||||
toggleFixed(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
objectsContainer.addEventListener("scroll", function(e){
|
|
||||||
updateLines();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener("resize", function(){
|
|
||||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
|
|
||||||
entriesListShown = true;
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
|
|
||||||
entriesListShown = false;
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
viewportWidth = document.documentElement.clientWidth;
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
render();
|
|
||||||
updateLines();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
813
web/_js/view.js
813
web/_js/view.js
|
|
@ -25,7 +25,147 @@ backgroundCanvas.width = 2000;
|
||||||
backgroundCanvas.height = 2000;
|
backgroundCanvas.height = 2000;
|
||||||
var backgroundContext = backgroundCanvas.getContext("2d");
|
var backgroundContext = backgroundCanvas.getContext("2d");
|
||||||
|
|
||||||
|
var wrapper = document.getElementById("wrapper");
|
||||||
|
|
||||||
|
var objectsContainer = document.getElementById("objectsList");
|
||||||
|
var closeObjectsListButton = document.getElementById("closeObjectsListButton");
|
||||||
|
|
||||||
|
var filterInput = document.getElementById("searchList");
|
||||||
|
|
||||||
|
var entriesList = document.getElementById("entriesList");
|
||||||
|
var hideListButton = document.getElementById("hideListButton");
|
||||||
|
var entriesListShown = false;
|
||||||
|
|
||||||
|
var sortedAtlas;
|
||||||
|
|
||||||
|
var entriesLimit = 50;
|
||||||
|
var entriesOffset = 0;
|
||||||
|
var moreEntriesButton = document.createElement("button");
|
||||||
|
moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
|
||||||
|
moreEntriesButton.id = "moreEntriesButton";
|
||||||
|
moreEntriesButton.onclick = function(){
|
||||||
|
buildObjectsList(null, null);
|
||||||
|
renderBackground();
|
||||||
|
render();
|
||||||
|
};
|
||||||
|
|
||||||
|
var defaultSort = "shuffle";
|
||||||
|
document.getElementById("sort").value = defaultSort;
|
||||||
|
|
||||||
|
var lastPos = [0, 0];
|
||||||
|
|
||||||
|
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
||||||
|
|
||||||
|
if(document.documentElement.clientWidth > 2000){
|
||||||
|
entriesListShown = true;
|
||||||
|
wrapper.classList.remove('listHidden')
|
||||||
|
}
|
||||||
|
|
||||||
|
if(document.documentElement.clientWidth < 2000){
|
||||||
|
entriesListShown = false;
|
||||||
|
wrapper.classList.add('listHidden')
|
||||||
|
}
|
||||||
|
|
||||||
|
filterInput.addEventListener("input", function(e){
|
||||||
|
entriesOffset = 0;
|
||||||
|
entriesList.innerHTML = "";
|
||||||
|
entriesList.appendChild(moreEntriesButton);
|
||||||
|
|
||||||
|
if(this.value === ""){
|
||||||
|
document.getElementById("relevantOption").disabled = true;
|
||||||
|
sortedAtlas = atlas.concat();
|
||||||
|
buildObjectsList(null, null);
|
||||||
|
} else {
|
||||||
|
document.getElementById("relevantOption").disabled = false;
|
||||||
|
buildObjectsList(this.value.toLowerCase(), "relevant");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("sort").addEventListener("input", function(e){
|
||||||
|
entriesOffset = 0;
|
||||||
|
entriesList.innerHTML = "";
|
||||||
|
entriesList.appendChild(moreEntriesButton);
|
||||||
|
|
||||||
|
if(this.value != "relevant"){
|
||||||
|
defaultSort = this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildObjectsList(filterInput.value.toLowerCase(), this.value);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
hideListButton.addEventListener("click", function(e){
|
||||||
|
entriesListShown = !entriesListShown;
|
||||||
|
if(entriesListShown){
|
||||||
|
wrapper.classList.remove('listHidden')
|
||||||
|
} else {
|
||||||
|
wrapper.classList.add('listHidden')
|
||||||
|
}
|
||||||
|
updateHovering();
|
||||||
|
applyView();
|
||||||
|
render();
|
||||||
|
updateLines();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
closeObjectsListButton.addEventListener("click", function(e){
|
||||||
|
hovered = [];
|
||||||
|
objectsContainer.innerHTML = "";
|
||||||
|
updateLines();
|
||||||
|
closeObjectsListButton.className = "hidden";
|
||||||
|
fixed = false;
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function toggleFixed(e, tapped){
|
||||||
|
if(!fixed && hovered.length == 0){
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
fixed = !fixed;
|
||||||
|
if(!fixed){
|
||||||
|
updateHovering(e, tapped);
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", updateLines);
|
||||||
|
window.addEventListener("mousemove", updateLines);
|
||||||
|
window.addEventListener("dblClick", updateLines);
|
||||||
|
window.addEventListener("wheel", updateLines);
|
||||||
|
|
||||||
|
|
||||||
|
objectsContainer.addEventListener("scroll", function(e){
|
||||||
|
updateLines();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("resize", function(){
|
||||||
|
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||||
|
|
||||||
|
var viewportWidth = document.documentElement.clientWidth;
|
||||||
|
|
||||||
|
if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
|
||||||
|
entriesListShown = true;
|
||||||
|
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
|
||||||
|
entriesListShown = false;
|
||||||
|
wrapper.className += " listHidden";
|
||||||
|
}
|
||||||
|
updateHovering();
|
||||||
|
|
||||||
|
viewportWidth = document.documentElement.clientWidth;
|
||||||
|
|
||||||
|
applyView();
|
||||||
|
render();
|
||||||
|
updateLines();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
function updateLines(){
|
function updateLines(){
|
||||||
|
console.log(8)
|
||||||
|
|
||||||
linesCanvas.width = linesCanvas.clientWidth;
|
linesCanvas.width = linesCanvas.clientWidth;
|
||||||
linesCanvas.height = linesCanvas.clientHeight;
|
linesCanvas.height = linesCanvas.clientHeight;
|
||||||
|
|
@ -76,6 +216,7 @@ function updateLines(){
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderBackground(atlas){
|
function renderBackground(atlas){
|
||||||
|
console.log(7)
|
||||||
|
|
||||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
|
@ -129,268 +270,8 @@ function renderBackground(atlas){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initView(){
|
function buildObjectsList(filter, sort){
|
||||||
|
console.log(6)
|
||||||
var wrapper = document.getElementById("wrapper");
|
|
||||||
|
|
||||||
var objectsContainer = document.getElementById("objectsList");
|
|
||||||
var closeObjectsListButton = document.getElementById("closeObjectsListButton");
|
|
||||||
|
|
||||||
var filterInput = document.getElementById("searchList");
|
|
||||||
|
|
||||||
var entriesList = document.getElementById("entriesList");
|
|
||||||
var hideListButton = document.getElementById("hideListButton");
|
|
||||||
var entriesListShown = true;
|
|
||||||
|
|
||||||
var sortedAtlas;
|
|
||||||
|
|
||||||
var entriesLimit = 50;
|
|
||||||
var entriesOffset = 0;
|
|
||||||
var moreEntriesButton = document.createElement("button");
|
|
||||||
moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
|
|
||||||
moreEntriesButton.id = "moreEntriesButton";
|
|
||||||
moreEntriesButton.onclick = function(){
|
|
||||||
buildObjectsList(null, null);
|
|
||||||
};
|
|
||||||
|
|
||||||
var defaultSort = "shuffle";
|
|
||||||
document.getElementById("sort").value = defaultSort;
|
|
||||||
|
|
||||||
var lastPos = [0, 0];
|
|
||||||
|
|
||||||
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
|
||||||
|
|
||||||
renderBackground(atlas);
|
|
||||||
render();
|
|
||||||
|
|
||||||
buildObjectsList(null, null);
|
|
||||||
|
|
||||||
timeCallback = (tempAtlas) => {
|
|
||||||
renderBackground(tempAtlas);
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
|
|
||||||
// parse linked atlas entry id from link hash
|
|
||||||
/*if (window.location.hash.substring(3)){
|
|
||||||
zoom = 4;
|
|
||||||
applyView();
|
|
||||||
highlightEntryFromUrl();
|
|
||||||
}*/
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth > 2000){
|
|
||||||
entriesListShown = true;
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth < 2000){
|
|
||||||
entriesListShown = false;
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
render();
|
|
||||||
updateLines();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var args = window.location.search;
|
|
||||||
if(args){
|
|
||||||
id = args.split("id=")[1];
|
|
||||||
if(id){
|
|
||||||
highlightEntryFromUrl();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
container.addEventListener("mousemove", function(e){
|
|
||||||
if(e.sourceCapabilities){
|
|
||||||
if(!e.sourceCapabilities.firesTouchEvents){
|
|
||||||
updateHovering(e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
updateHovering(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
filterInput.addEventListener("input", function(e){
|
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
if(this.value === ""){
|
|
||||||
document.getElementById("relevantOption").disabled = true;
|
|
||||||
sortedAtlas = atlas.concat();
|
|
||||||
buildObjectsList(null, null);
|
|
||||||
} else {
|
|
||||||
document.getElementById("relevantOption").disabled = false;
|
|
||||||
buildObjectsList(this.value.toLowerCase(), "relevant");
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("sort").addEventListener("input", function(e){
|
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
if(this.value != "relevant"){
|
|
||||||
defaultSort = this.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
buildObjectsList(filterInput.value.toLowerCase(), this.value);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
hideListButton.addEventListener("click", function(e){
|
|
||||||
entriesListShown = !entriesListShown;
|
|
||||||
if(entriesListShown){
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
} else {
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
updateHovering();
|
|
||||||
applyView();
|
|
||||||
render();
|
|
||||||
updateLines();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
closeObjectsListButton.addEventListener("click", function(e){
|
|
||||||
hovered = [];
|
|
||||||
objectsContainer.innerHTML = "";
|
|
||||||
updateLines();
|
|
||||||
closeObjectsListButton.className = "hidden";
|
|
||||||
fixed = false;
|
|
||||||
render();
|
|
||||||
});
|
|
||||||
|
|
||||||
function shuffle(){
|
|
||||||
//console.log("shuffled atlas");
|
|
||||||
for (var i = sortedAtlas.length - 1; i > 0; i--) {
|
|
||||||
var j = Math.floor(Math.random() * (i + 1));
|
|
||||||
var temp = sortedAtlas[i];
|
|
||||||
sortedAtlas[i] = sortedAtlas[j];
|
|
||||||
sortedAtlas[j] = temp;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function highlightEntryFromUrl(){
|
|
||||||
|
|
||||||
var objectsContainer = document.getElementById("objectsList");
|
|
||||||
|
|
||||||
var id = 0;
|
|
||||||
|
|
||||||
var args = window.location.search;
|
|
||||||
if(args){
|
|
||||||
id = args.split("id=")[1];
|
|
||||||
if(id){
|
|
||||||
id = id.split("&")[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//var id = parseInt(window.location.hash.substring(3));
|
|
||||||
|
|
||||||
var entries = atlas.filter(function(e){
|
|
||||||
return e.id === id;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (entries.length === 1){
|
|
||||||
let entry = entries[0];
|
|
||||||
|
|
||||||
document.title = entry.name + " on the 2022 /r/place Atlas";
|
|
||||||
|
|
||||||
var infoElement = createInfoBlock(entry);
|
|
||||||
objectsContainer.innerHTML = "";
|
|
||||||
objectsContainer.appendChild(infoElement);
|
|
||||||
|
|
||||||
//console.log(entry.center[0]);
|
|
||||||
//console.log(entry.center[1]);
|
|
||||||
|
|
||||||
zoom = 4;
|
|
||||||
renderBackground(atlas);
|
|
||||||
applyView();
|
|
||||||
|
|
||||||
zoomOrigin = [
|
|
||||||
innerContainer.clientWidth/2 - entry.center[0]* zoom// + container.offsetLeft
|
|
||||||
,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
|
|
||||||
];
|
|
||||||
|
|
||||||
scaleZoomOrigin = [
|
|
||||||
2000/2 - entry.center[0]// + container.offsetLeft
|
|
||||||
,2000/2 - entry.center[1]// + container.offsetTop
|
|
||||||
];
|
|
||||||
|
|
||||||
//console.log(zoomOrigin);
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
hovered = [entry];
|
|
||||||
render();
|
|
||||||
hovered[0].element = infoElement;
|
|
||||||
closeObjectsListButton.className = "";
|
|
||||||
updateLines();
|
|
||||||
fixed = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHovering(e, tapped){
|
|
||||||
|
|
||||||
if(!dragging && (!fixed || tapped)){
|
|
||||||
var pos = [
|
|
||||||
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
|
||||||
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
|
||||||
];
|
|
||||||
var coords_p = document.getElementById("coords_p");
|
|
||||||
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
|
||||||
|
|
||||||
if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
|
|
||||||
var newHovered = [];
|
|
||||||
for(var i = 0; i < atlas.length; i++){
|
|
||||||
if(pointIsInPolygon(pos, atlas[i].path)){
|
|
||||||
newHovered.push(atlas[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var changed = false;
|
|
||||||
|
|
||||||
if(hovered.length == newHovered.length){
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
|
||||||
if(hovered[i].id != newHovered[i].id){
|
|
||||||
changed = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
changed = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(changed){
|
|
||||||
hovered = newHovered.sort(function(a, b){
|
|
||||||
return calcPolygonArea(a.path) - calcPolygonArea(b.path);
|
|
||||||
});
|
|
||||||
|
|
||||||
objectsContainer.innerHTML = "";
|
|
||||||
|
|
||||||
for(var i in hovered){
|
|
||||||
var element = createInfoBlock(hovered[i]);
|
|
||||||
|
|
||||||
objectsContainer.appendChild(element);
|
|
||||||
|
|
||||||
hovered[i].element = element;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(hovered.length > 0){
|
|
||||||
closeObjectsListButton.className = "";
|
|
||||||
} else {
|
|
||||||
closeObjectsListButton.className = "hidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildObjectsList(filter, sort){
|
|
||||||
|
|
||||||
if(entriesList.contains(moreEntriesButton)){
|
if(entriesList.contains(moreEntriesButton)){
|
||||||
entriesList.removeChild(moreEntriesButton);
|
entriesList.removeChild(moreEntriesButton);
|
||||||
|
|
@ -615,9 +496,21 @@ function initView(){
|
||||||
moreEntriesButton.innerHTML = "Show "+Math.min(entriesLimit, sortedAtlas.length - entriesOffset)+" more";
|
moreEntriesButton.innerHTML = "Show "+Math.min(entriesLimit, sortedAtlas.length - entriesOffset)+" more";
|
||||||
entriesList.appendChild(moreEntriesButton);
|
entriesList.appendChild(moreEntriesButton);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function render(){
|
function shuffle(){
|
||||||
|
console.log(5)
|
||||||
|
//console.log("shuffled atlas");
|
||||||
|
for (var i = sortedAtlas.length - 1; i > 0; i--) {
|
||||||
|
var j = Math.floor(Math.random() * (i + 1));
|
||||||
|
var temp = sortedAtlas[i];
|
||||||
|
sortedAtlas[i] = sortedAtlas[j];
|
||||||
|
sortedAtlas[j] = temp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function render(){
|
||||||
|
console.log(4)
|
||||||
|
|
||||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
|
@ -722,25 +615,195 @@ function initView(){
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHovering(e, tapped){
|
||||||
|
console.log(3)
|
||||||
|
|
||||||
|
if(!dragging && (!fixed || tapped)){
|
||||||
|
var pos = [
|
||||||
|
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
||||||
|
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
||||||
|
];
|
||||||
|
var coords_p = document.getElementById("coords_p");
|
||||||
|
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
||||||
|
|
||||||
|
if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
|
||||||
|
var newHovered = [];
|
||||||
|
for(var i = 0; i < atlas.length; i++){
|
||||||
|
if(pointIsInPolygon(pos, atlas[i].path)){
|
||||||
|
newHovered.push(atlas[i]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFixed(e, tapped){
|
var changed = false;
|
||||||
if(!fixed && hovered.length == 0){
|
|
||||||
return 0;
|
if(hovered.length == newHovered.length){
|
||||||
|
for(var i = 0; i < hovered.length; i++){
|
||||||
|
if(hovered[i].id != newHovered[i].id){
|
||||||
|
changed = true;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
fixed = !fixed;
|
}
|
||||||
if(!fixed){
|
} else {
|
||||||
updateHovering(e, tapped);
|
changed = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(changed){
|
||||||
|
hovered = newHovered.sort(function(a, b){
|
||||||
|
return calcPolygonArea(a.path) - calcPolygonArea(b.path);
|
||||||
|
});
|
||||||
|
|
||||||
|
objectsContainer.innerHTML = "";
|
||||||
|
|
||||||
|
for(var i in hovered){
|
||||||
|
var element = createInfoBlock(hovered[i]);
|
||||||
|
|
||||||
|
objectsContainer.appendChild(element);
|
||||||
|
|
||||||
|
hovered[i].element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(hovered.length > 0){
|
||||||
|
closeObjectsListButton.className = "";
|
||||||
|
} else {
|
||||||
|
closeObjectsListButton.className = "hidden";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
window.addEventListener("resize", updateLines);
|
function highlightEntryFromUrl(){
|
||||||
window.addEventListener("mousemove", updateLines);
|
console.log(2)
|
||||||
window.addEventListener("dblClick", updateLines);
|
|
||||||
window.addEventListener("wheel", updateLines);
|
|
||||||
|
|
||||||
|
var objectsContainer = document.getElementById("objectsList");
|
||||||
|
|
||||||
|
var id = 0;
|
||||||
|
|
||||||
|
var args = window.location.search;
|
||||||
|
if(args){
|
||||||
|
id = args.split("id=")[1];
|
||||||
|
if(id){
|
||||||
|
id = id.split("&")[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//var id = parseInt(window.location.hash.substring(3));
|
||||||
|
|
||||||
|
var entries = atlas.filter(function(e){
|
||||||
|
return e.id === id;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (entries.length === 1){
|
||||||
|
let entry = entries[0];
|
||||||
|
|
||||||
|
document.title = entry.name + " on the 2022 /r/place Atlas";
|
||||||
|
|
||||||
|
var infoElement = createInfoBlock(entry);
|
||||||
|
objectsContainer.innerHTML = "";
|
||||||
|
objectsContainer.appendChild(infoElement);
|
||||||
|
|
||||||
|
//console.log(entry.center[0]);
|
||||||
|
//console.log(entry.center[1]);
|
||||||
|
|
||||||
|
zoom = 4;
|
||||||
|
renderBackground(atlas);
|
||||||
|
applyView();
|
||||||
|
|
||||||
|
zoomOrigin = [
|
||||||
|
innerContainer.clientWidth/2 - entry.center[0]* zoom// + container.offsetLeft
|
||||||
|
,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
|
||||||
|
];
|
||||||
|
|
||||||
|
scaleZoomOrigin = [
|
||||||
|
2000/2 - entry.center[0]// + container.offsetLeft
|
||||||
|
,2000/2 - entry.center[1]// + container.offsetTop
|
||||||
|
];
|
||||||
|
|
||||||
|
//console.log(zoomOrigin);
|
||||||
|
|
||||||
|
applyView();
|
||||||
|
hovered = [entry];
|
||||||
|
render();
|
||||||
|
hovered[0].element = infoElement;
|
||||||
|
closeObjectsListButton.className = "";
|
||||||
|
updateLines();
|
||||||
|
fixed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initView(){
|
||||||
|
console.log(1)
|
||||||
|
|
||||||
|
buildObjectsList(null, null);
|
||||||
|
renderBackground(atlas);
|
||||||
|
render();
|
||||||
|
|
||||||
|
timeCallback = (tempAtlas) => {
|
||||||
|
renderBackground(tempAtlas);
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
// parse linked atlas entry id from link hash
|
||||||
|
/*if (window.location.hash.substring(3)){
|
||||||
|
zoom = 4;
|
||||||
|
applyView();
|
||||||
|
highlightEntryFromUrl();
|
||||||
|
}*/
|
||||||
|
|
||||||
|
applyView();
|
||||||
|
render();
|
||||||
|
updateLines();
|
||||||
|
|
||||||
|
var args = window.location.search;
|
||||||
|
if(args){
|
||||||
|
id = args.split("id=")[1];
|
||||||
|
if(id){
|
||||||
|
highlightEntryFromUrl();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function initExplore(){
|
||||||
|
|
||||||
|
window.updateHovering = updateHovering
|
||||||
|
|
||||||
|
function updateHovering(e, tapped){
|
||||||
|
if(!dragging && (!fixed || tapped)){
|
||||||
|
var pos = [
|
||||||
|
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
||||||
|
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
||||||
|
];
|
||||||
|
var coords_p = document.getElementById("coords_p");
|
||||||
|
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderBackground(atlas);
|
||||||
|
|
||||||
|
applyView();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function initGlobal() {
|
||||||
|
container.addEventListener("mousemove", function(e){
|
||||||
|
if(e.sourceCapabilities){
|
||||||
|
if(!e.sourceCapabilities.firesTouchEvents){
|
||||||
|
updateHovering(e);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
updateHovering(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initViewGlobal() {
|
||||||
container.addEventListener("mousedown", function(e){
|
container.addEventListener("mousedown", function(e){
|
||||||
lastPos = [
|
lastPos = [
|
||||||
e.clientX
|
e.clientX
|
||||||
|
|
@ -783,206 +846,4 @@ function initView(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
objectsContainer.addEventListener("scroll", function(e){
|
|
||||||
updateLines();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener("resize", function(){
|
|
||||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
|
||||||
|
|
||||||
var viewportWidth = document.documentElement.clientWidth;
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
|
|
||||||
entriesListShown = true;
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
|
|
||||||
entriesListShown = false;
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
updateHovering();
|
|
||||||
|
|
||||||
viewportWidth = document.documentElement.clientWidth;
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
render();
|
|
||||||
updateLines();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function initExplore(){
|
|
||||||
|
|
||||||
var wrapper = document.getElementById("wrapper");
|
|
||||||
|
|
||||||
var objectsContainer = document.getElementById("objectsList");
|
|
||||||
var closeObjectsListButton = document.getElementById("closeObjectsListButton");
|
|
||||||
|
|
||||||
var filterInput = document.getElementById("searchList");
|
|
||||||
|
|
||||||
var entriesList = document.getElementById("entriesList");
|
|
||||||
var hideListButton = document.getElementById("hideListButton");
|
|
||||||
var entriesListShown = true;
|
|
||||||
|
|
||||||
var defaultSort = "shuffle";
|
|
||||||
document.getElementById("sort").value = defaultSort;
|
|
||||||
|
|
||||||
var lastPos = [0, 0];
|
|
||||||
|
|
||||||
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
|
||||||
|
|
||||||
renderBackground(atlas);
|
|
||||||
|
|
||||||
timeCallback = (tempAtlas) => {
|
|
||||||
renderBackground(tempAtlas);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth > 2000){
|
|
||||||
entriesListShown = true;
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth < 2000){
|
|
||||||
entriesListShown = false;
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
|
|
||||||
container.addEventListener("mousemove", function(e){
|
|
||||||
if(e.sourceCapabilities){
|
|
||||||
if(!e.sourceCapabilities.firesTouchEvents){
|
|
||||||
updateHovering(e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
updateHovering(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
filterInput.addEventListener("input", function(e){
|
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
if(this.value === ""){
|
|
||||||
document.getElementById("relevantOption").disabled = true;
|
|
||||||
sortedAtlas = atlas.concat();
|
|
||||||
} else {
|
|
||||||
document.getElementById("relevantOption").disabled = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("sort").addEventListener("input", function(e){
|
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
if(this.value != "relevant"){
|
|
||||||
defaultSort = this.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
hideListButton.addEventListener("click", function(e){
|
|
||||||
entriesListShown = !entriesListShown;
|
|
||||||
if(entriesListShown){
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
} else {
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
updateHovering();
|
|
||||||
applyView();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
closeObjectsListButton.addEventListener("click", function(e){
|
|
||||||
hovered = [];
|
|
||||||
objectsContainer.innerHTML = "";
|
|
||||||
closeObjectsListButton.className = "hidden";
|
|
||||||
fixed = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateHovering(e, tapped){
|
|
||||||
|
|
||||||
if(!dragging && (!fixed || tapped)){
|
|
||||||
var pos = [
|
|
||||||
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
|
||||||
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
|
||||||
];
|
|
||||||
var coords_p = document.getElementById("coords_p");
|
|
||||||
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleFixed(e, tapped){
|
|
||||||
if(!fixed && hovered.length == 0){
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
fixed = !fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.addEventListener("mousedown", function(e){
|
|
||||||
lastPos = [
|
|
||||||
e.clientX
|
|
||||||
,e.clientY
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
container.addEventListener("touchstart", function(e){
|
|
||||||
if(e.touches.length == 1){
|
|
||||||
lastPos = [
|
|
||||||
e.touches[0].clientX
|
|
||||||
,e.touches[0].clientY
|
|
||||||
];
|
|
||||||
}
|
|
||||||
},{passive: true} );
|
|
||||||
|
|
||||||
container.addEventListener("mouseup", function(e){
|
|
||||||
if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){
|
|
||||||
toggleFixed(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
container.addEventListener("touchend", function(e){
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
//console.log(e);
|
|
||||||
//console.log(e.changedTouches[0].clientX);
|
|
||||||
if(e.changedTouches.length == 1){
|
|
||||||
e = e.changedTouches[0];
|
|
||||||
//console.log(lastPos[0] - e.clientX);
|
|
||||||
if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){
|
|
||||||
//console.log("Foo!!");
|
|
||||||
dragging = false;
|
|
||||||
fixed = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener("resize", function(){
|
|
||||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
|
||||||
|
|
||||||
var viewportWidth = document.documentElement.clientWidth;
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
|
|
||||||
entriesListShown = true;
|
|
||||||
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
|
|
||||||
entriesListShown = false;
|
|
||||||
wrapper.className += " listHidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
viewportWidth = document.documentElement.clientWidth;
|
|
||||||
|
|
||||||
applyView();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue