MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-12-24 04:34:13 +01:00
Code Issues Projects Releases Wiki Activity

Fix a variety of scrolling bugs

Browse source
This commit is contained in:
Roland Rytz 2017-04-10 12:25:04 +02:00
parent 208374b89b
commit 0e0d870370
8 changed files with 2232 additions and 333 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1263
combined.js
View file

File diff suppressed because it is too large Load diff

6
web/_css/style.css
View file

@ -577,8 +577,8 @@ #zoomControls{
position: absolute;
bottom: 10px;
left: 370px;
display: flex;
width: 90px;
display: flex;
}
.listHidden #zoomControls{
@ -586,10 +586,10 @@ .listHidden #zoomControls{
}
#zoomControls button{
display: block;
display: inline-block;
height: 30px;
width: 30px;
margin-left: -1px;
width: 10px;
flex-grow: 1;
font-size: 20px;
line-height: 0px;

1065
web/_js/atlas.js
View file

File diff suppressed because it is too large Load diff

66
web/_js/main.js
View file

@ -47,8 +47,8 @@ var lastPosition = [0, 0];
var viewportSize = [0, 0];
function applyView(){
//console.log(zoom);
console.log(zoomOrigin, scaleZoomOrigin);
innerContainer.style.height = (~~(zoom*1000))+"px";
innerContainer.style.width = (~~(zoom*1000))+"px";
@ -127,9 +127,9 @@ function init(){
document.getElementById("zoomInButton").addEventListener("click", function(e){
if(zoomAnimationFrame){
/*if(zoomAnimationFrame){
window.cancelAnimationFrame(zoomAnimationFrame);
}
}*/
var x = container.clientWidth/2;
var y = container.clientHeight/2;
@ -142,18 +142,18 @@ function init(){
initialPinchZoom = zoom;
lastPosition = [x, y];
var desiredZoom = zoom * 2;
desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
zoom = zoom * 2;
zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
setDesiredZoom(x, y, desiredZoom);
applyZoom(x, y, zoom);
});
document.getElementById("zoomOutButton").addEventListener("click", function(e){
if(zoomAnimationFrame){
/*if(zoomAnimationFrame){
window.cancelAnimationFrame(zoomAnimationFrame);
}
}*/
var x = container.clientWidth/2;
var y = container.clientHeight/2;
@ -166,10 +166,10 @@ function init(){
initialPinchZoom = zoom;
lastPosition = [x, y];
var desiredZoom = zoom / 2;
desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
zoom = zoom / 2;
zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
setDesiredZoom(x, y, desiredZoom);
applyZoom(x, y, zoom);
});
document.getElementById("zoomResetButton").addEventListener("click", function(e){
@ -180,12 +180,12 @@ function init(){
});
container.addEventListener("dblclick", function(e){
if(zoomAnimationFrame){
/*if(zoomAnimationFrame){
window.cancelAnimationFrame(zoomAnimationFrame);
}
}*/
var x = e.layerX;
var y = e.layerY;
var x = e.clientX - container.offsetLeft;
var y = e.clientY - container.offsetTop;
initialPinchZoomOrigin = [
scaleZoomOrigin[0],
@ -196,19 +196,17 @@ function init(){
lastPosition = [x, y];
var desiredZoom = 0;
if(e.ctrlKey){
desiredZoom = zoom / 2;
zoom = zoom / 2;
} else {
desiredZoom = zoom * 2;
zoom = zoom * 2;
}
desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
setDesiredZoom(x, y, desiredZoom);
zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
applyZoom(x, y, zoom);
e.preventDefault();
});
@ -216,12 +214,12 @@ function init(){
container.addEventListener("wheel", function(e){
if(zoomAnimationFrame){
/*if(zoomAnimationFrame){
window.cancelAnimationFrame(zoomAnimationFrame);
}
}*/
var x = e.layerX;
var y = e.layerY;
var x = e.clientX - container.offsetLeft;
var y = e.clientY - container.offsetTop;
initialPinchZoomOrigin = [
scaleZoomOrigin[0],
@ -231,27 +229,25 @@ function init(){
initialPinchZoom = zoom;
lastPosition = [x, y];
var desiredZoom = 0;
if(e.deltaY > 0){
desiredZoom = zoom / 2;
zoom = zoom / 2;
} else if(e.deltaY < 0){
desiredZoom = zoom * 2;
zoom = zoom * 2;
}
desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
setDesiredZoom(x, y, desiredZoom);
zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
applyZoom(x, y, zoom);
e.preventDefault();
});
function setDesiredZoom(x, y, target){
/*function setDesiredZoom(x, y, target){
zoom = (zoom*2 + target)/3;
console.log(zoom);
//console.log(zoom);
if(Math.abs(1 - zoom/target) <= 0.01){
zoom = target;
}
@ -261,7 +257,7 @@ function init(){
setDesiredZoom(x, y, target);
});
}
}
}*/
container.addEventListener("mousedown", function(e){
mousedown(e.clientX, e.clientY);

5
web/_js/minified.js
View file

File diff suppressed because one or more lines are too long

132
web/_js/view.js
View file

@ -94,6 +94,8 @@ function initView(){
var hideListButton = document.getElementById("hideListButton");
var entriesListShown = true;
var sortedAtlas;
var entriesLimit = 50;
var entriesOffset = 0;
var moreEntriesButton = document.createElement("button");
@ -103,13 +105,12 @@ function initView(){
buildObjectsList(null, null);
};
var defaultSort = "alphaAsc";
var defaultSort = "shuffle";
document.getElementById("sort").value = defaultSort;
var viewportWidth = document.documentElement.clientWidth;
var lastPos = [0, 0];
var previousZoomOrigin = [0, 0];
var previousScaleZoomOrigin = [0, 0];
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
@ -160,6 +161,7 @@ function initView(){
if(this.value === ""){
document.getElementById("relevantOption").disabled = true;
sortedAtlas = atlas.concat();
buildObjectsList(null, null);
} else {
document.getElementById("relevantOption").disabled = false;
@ -203,6 +205,16 @@ function initView(){
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 createInfoBlock(entry){
var element = document.createElement("div");
element.className = "object";
@ -216,12 +228,17 @@ function initView(){
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;
var subreddits = entry.subreddit.split(",");
for(var i in subreddits){
var subreddit = subreddits[i].trim();
if(subreddit.substring(0, 2) == "r/"){
subreddit = "/" + subreddit;
} else if(subreddit.substring(0, 1) != "/"){
subreddit = "/r/" + subreddit;
}
html += '<a target="_blank" href=https://reddit.com'+subreddit+'>'+subreddit+'</a>';
}
html += '<a target="_blank" href=https://reddit.com'+entry.subreddit+'>'+entry.subreddit+'</a>';
}
element.innerHTML += html;
@ -265,6 +282,11 @@ function initView(){
,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
];
scaleZoomOrigin = [
1000/2 - entry.center[0]// + container.offsetLeft
,1000/2 - entry.center[1]// + container.offsetTop
];
//console.log(zoomOrigin);
applyView();
@ -277,8 +299,8 @@ function initView(){
}
}
function updateHovering(e){
if(!dragging && !fixed){
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
@ -365,7 +387,10 @@ function initView(){
entriesList.removeChild(moreEntriesButton);
}
var sortedAtlas;
if(!sortedAtlas){
sortedAtlas = atlas.concat();
document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries.";
}
if(filter){
sortedAtlas = atlas.filter(function(value){
@ -375,9 +400,7 @@ function initView(){
);
});
document.getElementById("atlasSize").innerHTML = "Found "+sortedAtlas.length+" entries.";
} else {
sortedAtlas = atlas.concat();
document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries.";
}
@ -397,6 +420,12 @@ function initView(){
//console.log(sort);
switch(sort){
case "shuffle":
sortFunction = null;
if(entriesOffset == 0){
shuffle();
}
break;
case "alphaAsc":
sortFunction = function(a, b){
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
@ -460,7 +489,9 @@ function initView(){
break;
}
sortedAtlas.sort(sortFunction);
if(sortFunction){
sortedAtlas.sort(sortFunction);
}
for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){
@ -477,11 +508,17 @@ function initView(){
if(!fixed && !dragging){
objectsContainer.innerHTML = "";
previousZoomOrigin = zoomOrigin;
previousScaleZoomOrigin = scaleZoomOrigin;
zoomOrigin = [
innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft
,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
]
scaleZoomOrigin = [
1000/2 - this.entry.center[0]
,1000/2 - this.entry.center[0]
]
//console.log(zoomOrigin);
@ -494,9 +531,48 @@ function initView(){
});
element.addEventListener("click", function(e){
toggleFixed(e);
if(document.documentElement.clientWidth < 500){
objectsContainer.innerHTML = "";
entriesListShown = false;
wrapper.className += " listHidden";
zoom = 4;
applyView();
zoomOrigin = [
innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft
,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
]
scaleZoomOrigin = [
1000/2 - this.entry.center[0]
,1000/2 - this.entry.center[0]
]
previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]];
previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]];
fixed = true;
hovered = [this.entry];
hovered[0].element = this;
applyView();
render();
updateLines();
}
});
element.addEventListener("mouseleave", function(e){
if(!fixed && !dragging){
zoomOrigin = previousZoomOrigin;
scaleZoomOrigin = previousScaleZoomOrigin;
applyView();
hovered = [];
updateLines();
@ -578,13 +654,13 @@ function initView(){
}
function toggleFixed(e){
function toggleFixed(e, tapped){
if(!fixed && hovered.length == 0){
return 0;
}
fixed = !fixed;
if(!fixed){
updateHovering(e);
updateHovering(e, tapped);
render();
}
}
@ -601,12 +677,34 @@ function initView(){
];
});
container.addEventListener("touchstart", function(e){
if(e.touches.length == 1){
lastPos = [
e.touches[0].clientX
,e.touches[0].clientY
];
}
});
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){
//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!!");
toggleFixed(e, true);
}
}
});
objectsContainer.addEventListener("scroll", function(e){
updateLines();
});
@ -614,6 +712,8 @@ function initView(){
window.addEventListener("resize", function(){
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
var viewportWidth = document.documentElement.clientWidth;
if(document.documentElement.clientWidth > 1000 && viewportWidth <= 1000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");

9
web/about.html
View file

@ -68,7 +68,7 @@ <h2>How to contribute</h2>
<p>Please read <a href="https://reddit.com/r/placeAtlas/comments/63afic/how_to_contribute/" target="_blank">this post on reddit</a> to learn how to submit a new entry.</p>
<p>The <a href="https://reddit.com/r/placeAtlas/" target="_blank">/r/placeAtlas</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
<h2>Contributors</h2>
<p>The Atlas would not have been possible without the help of the following 708 reddit users.</p>
<p>The Atlas would not have been possible without the help of the following 714 reddit users.</p>
<p>Thank you to everyone who contributed.</p>
<div id="contributors">
<a href="https://reddit.com/user/-Chowder-" target="_blank">-Chowder-</a>
@ -311,6 +311,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/GammaGames" target="_blank">GammaGames</a>
<a href="https://reddit.com/user/gaumut" target="_blank">gaumut</a>
<a href="https://reddit.com/user/GeneralHar" target="_blank">GeneralHar</a>
<a href="https://reddit.com/user/GigaArchiv" target="_blank">GigaArchiv</a>
<a href="https://reddit.com/user/gigazelle" target="_blank">gigazelle</a>
<a href="https://reddit.com/user/Ginephobie" target="_blank">Ginephobie</a>
<a href="https://reddit.com/user/giraffeking" target="_blank">giraffeking</a>
@ -361,6 +362,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/Irockz" target="_blank">Irockz</a>
<a href="https://reddit.com/user/Itonoma" target="_blank">Itonoma</a>
<a href="https://reddit.com/user/iveroi" target="_blank">iveroi</a>
<a href="https://reddit.com/user/j_sunrise" target="_blank">j_sunrise</a>
<a href="https://reddit.com/user/J-Nastee" target="_blank">J-Nastee</a>
<a href="https://reddit.com/user/J7ang" target="_blank">J7ang</a>
<a href="https://reddit.com/user/Jackflash01" target="_blank">Jackflash01</a>
@ -485,6 +487,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/mobiledove" target="_blank">mobiledove</a>
<a href="https://reddit.com/user/ModJon" target="_blank">ModJon</a>
<a href="https://reddit.com/user/MoonShinez" target="_blank">MoonShinez</a>
<a href="https://reddit.com/user/mossyymossyy" target="_blank">mossyymossyy</a>
<a href="https://reddit.com/user/mount2010" target="_blank">mount2010</a>
<a href="https://reddit.com/user/mpo9" target="_blank">mpo9</a>
<a href="https://reddit.com/user/mrbirtakim" target="_blank">mrbirtakim</a>
@ -500,6 +503,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/MyCommentingAcccount" target="_blank">MyCommentingAcccount</a>
<a href="https://reddit.com/user/Myers747" target="_blank">Myers747</a>
<a href="https://reddit.com/user/mylittleplaceholder" target="_blank">mylittleplaceholder</a>
<a href="https://reddit.com/user/n1c4o7a5" target="_blank">n1c4o7a5</a>
<a href="https://reddit.com/user/nasheedsaleensawarim" target="_blank">nasheedsaleensawarim</a>
<a href="https://reddit.com/user/needarb" target="_blank">needarb</a>
<a href="https://reddit.com/user/needefsfolder" target="_blank">needefsfolder</a>
@ -597,6 +601,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/Rufnok" target="_blank">Rufnok</a>
<a href="https://reddit.com/user/Ryonne" target="_blank">Ryonne</a>
<a href="https://reddit.com/user/s9meNiNE" target="_blank">s9meNiNE</a>
<a href="https://reddit.com/user/sackboylion" target="_blank">sackboylion</a>
<a href="https://reddit.com/user/Sahasrahla" target="_blank">Sahasrahla</a>
<a href="https://reddit.com/user/saikado" target="_blank">saikado</a>
<a href="https://reddit.com/user/SamsungGalaxyPlayer" target="_blank">SamsungGalaxyPlayer</a>
@ -730,6 +735,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/V900" target="_blank">V900</a>
<a href="https://reddit.com/user/Valandir" target="_blank">Valandir</a>
<a href="https://reddit.com/user/ValErk" target="_blank">ValErk</a>
<a href="https://reddit.com/user/valleyfall" target="_blank">valleyfall</a>
<a href="https://reddit.com/user/Vekter" target="_blank">Vekter</a>
<a href="https://reddit.com/user/VelvetCake101" target="_blank">VelvetCake101</a>
<a href="https://reddit.com/user/Verpous" target="_blank">Verpous</a>
@ -755,6 +761,7 @@ <h2>Contributors</h2>
<a href="https://reddit.com/user/WThieves" target="_blank">WThieves</a>
<a href="https://reddit.com/user/Wunderwaffe_" target="_blank">Wunderwaffe_</a>
<a href="https://reddit.com/user/Wuzh" target="_blank">Wuzh</a>
<a href="https://reddit.com/user/writeyourownsong" target="_blank">writeyourownsong</a>
<a href="https://reddit.com/user/xDUDSSx" target="_blank">xDUDSSx</a>
<a href="https://reddit.com/user/XHyp3rX" target="_blank">XHyp3rX</a>
<a href="https://reddit.com/user/Xisuthrus" target="_blank">Xisuthrus</a>

19
web/index.html
View file

@ -83,8 +83,9 @@ <h1>The /r/place Atlas</h1>
<span id="atlasSize"></span>
<div id="sortContainer"><label>Sort:</label>
<select id="sort">
<option value="shuffle">Random</option>
<option value="relevant" id="relevantOption" disabled>Relevant</option>
<option value="alphaAsc" selected>↓ Alphabetical</option>
<option value="alphaAsc">↓ Alphabetical</option>
<option value="alphaDesc">↑ Alphabetical</option>
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
@ -99,11 +100,7 @@ <h1>The /r/place Atlas</h1>
<button id="hideListButton"></button>
<div id="zoomControls">
<button title="Zoom In" id="zoomInButton"></button>
<button title="Reset View" id="zoomResetButton"></button>
<button title="Zoom Out" id="zoomOutButton"></button>
</div>
<div id="zoomControls"><button title="Zoom In" id="zoomInButton"></button><button title="Reset View" id="zoomResetButton"></button><button title="Zoom Out" id="zoomOutButton"></button></div>
<div id="drawControlsContainer">
<a id="drawBackButton" href="./">&lt; Back to the Atlas</a>
@ -171,19 +168,19 @@ <h2>Tux</h2>
<!--
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
<script type="text/javascript" src="./_js/atlas.js?version=1.0.49"></script>
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>
<script type="text/javascript" src="./_js/view.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/overlap.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/draw.js?version=1.0.3"></script>
<script type="text/javascript" src="./_js/main.js?version=1.0.3"></script>
-->
<script type="text/javascript" src="./_js/minified.js?version=1.0.67"></script>
<script type="text/javascript" src="./_js/minified.js?version=1.0.76"></script>
</body>
</html>