mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-25 11:39:02 +02:00
Implement pinch zoom in a heroic six-hour battle
This commit is contained in:
Roland Rytz
parent
8bfa4256f1
commit
f80ce2cdd7
10 changed files with 4532 additions and 30 deletions
2181
combined.js
2181
combined.js
File diff suppressed because it is too large
Load diff
|
|
@ -9,11 +9,11 @@
|
|||
client_id = credentials.readline().strip(' \t\n\r')
|
||||
client_secret = credentials.readline().strip(' \t\n\r')
|
||||
|
||||
startId = 1393
|
||||
startId = 1411
|
||||
|
||||
reddit = praw.Reddit(client_id=client_id, client_secret=client_secret, user_agent='atlas_bot')
|
||||
|
||||
for submission in reddit.subreddit('placeAtlas').new(limit=28):
|
||||
for submission in reddit.subreddit('placeAtlas').new(limit=58):
|
||||
#print(dir(submission))
|
||||
if(submission.link_flair_text == "New Entry"):
|
||||
text = submission.selftext
|
||||
|
|
|
|||
1
users.py
1
users.py
|
|
@ -16,6 +16,7 @@
|
|||
# Manual entries:
|
||||
users.add("MoonShinez");
|
||||
users.add("Shovel_Ship");
|
||||
users.add("Zequez");
|
||||
|
||||
for submission in reddit.subreddit('placeAtlas').new(limit=10000):
|
||||
users.add(submission.author.name)
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ body{
|
|||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
font-family: sans;
|
||||
font-family: Sans-Serif, sans;
|
||||
background-color: #111111;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
|
|
|||
2210
web/_js/atlas.js
2210
web/_js/atlas.js
File diff suppressed because it is too large
Load diff
142
web/_js/main.js
142
web/_js/main.js
|
|
@ -23,7 +23,6 @@
|
|||
========================================================================
|
||||
*/
|
||||
|
||||
var mobile = false;
|
||||
|
||||
var innerContainer = document.getElementById("innerContainer");
|
||||
var container = document.getElementById("container");
|
||||
|
|
@ -31,7 +30,13 @@ var canvas = document.getElementById("highlightCanvas");
|
|||
var context = canvas.getContext("2d");
|
||||
|
||||
var zoom = 1;
|
||||
|
||||
if(window.devicePixelRatio){
|
||||
zoom = 1/window.devicePixelRatio;
|
||||
}
|
||||
|
||||
var zoomOrigin = [0, 0];
|
||||
var scaleZoomOrigin = [0, 0];
|
||||
|
||||
var dragging = false;
|
||||
var lastPosition = [0, 0];
|
||||
|
|
@ -42,11 +47,11 @@ function applyView(){
|
|||
|
||||
//console.log(zoom);
|
||||
|
||||
innerContainer.style.height = (zoom*1000)+"px";
|
||||
innerContainer.style.width = (zoom*1000)+"px";
|
||||
innerContainer.style.height = (~~(zoom*1000))+"px";
|
||||
innerContainer.style.width = (~~(zoom*1000))+"px";
|
||||
|
||||
innerContainer.style.left = (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft)+"px";
|
||||
innerContainer.style.top = (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop)+"px";
|
||||
innerContainer.style.left = ~~(container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft)+"px";
|
||||
innerContainer.style.top = ~~(container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop)+"px";
|
||||
}
|
||||
|
||||
init();
|
||||
|
|
@ -58,6 +63,10 @@ function init(){
|
|||
zoomOrigin = [0, 0];
|
||||
applyView();
|
||||
|
||||
var initialPinchDistance = 0;
|
||||
var initialPinchZoom = 0;
|
||||
var initialPinchZoomOrigin = [0, 0];
|
||||
|
||||
var mode = "view";
|
||||
|
||||
var args = window.location.search;
|
||||
|
|
@ -111,8 +120,8 @@ function init(){
|
|||
|
||||
function zoomOut(x, y){
|
||||
|
||||
zoomOrigin[0] += x - container.clientWidth/2;//((x/container.clientWidth)*2-1);
|
||||
zoomOrigin[1] += y - container.clientHeight/2;//((y/container.clientHeight)*2-1);
|
||||
zoomOrigin[0] += x - container.clientWidth/2;
|
||||
zoomOrigin[1] += y - container.clientHeight/2;
|
||||
|
||||
zoomOrigin[0] = zoomOrigin[0]/2;
|
||||
zoomOrigin[1] = zoomOrigin[1]/2;
|
||||
|
|
@ -127,8 +136,8 @@ function init(){
|
|||
zoomOrigin[0] = zoomOrigin[0]*2;
|
||||
zoomOrigin[1] = zoomOrigin[1]*2;
|
||||
|
||||
zoomOrigin[0] -= x - container.clientWidth/2;//((x/container.clientWidth)*2-1);
|
||||
zoomOrigin[1] -= y - container.clientHeight/2;//((y/container.clientHeight)*2-1);
|
||||
zoomOrigin[0] -= x - container.clientWidth/2;
|
||||
zoomOrigin[1] -= y - container.clientHeight/2;
|
||||
|
||||
zoom = zoom * 2;
|
||||
|
||||
|
|
@ -178,32 +187,127 @@ function init(){
|
|||
});
|
||||
|
||||
container.addEventListener("mousedown", function(e){
|
||||
lastPosition = [e.clientX, e.clientY];
|
||||
dragging = true;
|
||||
mousedown(e.clientX, e.clientY);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
container.addEventListener("touchstart", touchstart);
|
||||
|
||||
function mousedown(x, y){
|
||||
lastPosition = [x, y];
|
||||
dragging = true;
|
||||
}
|
||||
|
||||
function touchstart(e){
|
||||
|
||||
if(e.touches.length == 1){
|
||||
|
||||
mousedown(e.touches[0].clientX, e.touches[0].clientY);
|
||||
|
||||
} else if(e.touches.length == 2){
|
||||
|
||||
initialPinchDistance = Math.sqrt(
|
||||
Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
|
||||
+ Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
|
||||
);
|
||||
|
||||
initialPinchZoom = zoom;
|
||||
initialPinchZoomOrigin = [
|
||||
scaleZoomOrigin[0],
|
||||
scaleZoomOrigin[1]
|
||||
];
|
||||
|
||||
mousedown(
|
||||
(e.touches[0].clientX + e.touches[1].clientX)/2,
|
||||
(e.touches[0].clientY + e.touches[1].clientY)/2
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener("mousemove", function(e){
|
||||
mousemove(e.clientX, e.clientY);
|
||||
e.preventDefault();
|
||||
});
|
||||
window.addEventListener("touchmove", touchmove);
|
||||
|
||||
function mousemove(x, y){
|
||||
if(dragging){
|
||||
var deltaX = e.clientX - lastPosition[0];
|
||||
var deltaY = e.clientY - lastPosition[1];
|
||||
lastPosition = [e.clientX, e.clientY];
|
||||
var deltaX = x - lastPosition[0];
|
||||
var deltaY = y - lastPosition[1];
|
||||
lastPosition = [x, y];
|
||||
|
||||
zoomOrigin[0] += deltaX;
|
||||
zoomOrigin[1] += deltaY;
|
||||
|
||||
applyView();
|
||||
scaleZoomOrigin[0] += deltaX/zoom;
|
||||
scaleZoomOrigin[1] += deltaY/zoom;
|
||||
|
||||
e.preventDefault();
|
||||
applyView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function touchmove(e){
|
||||
|
||||
if(e.touches.length == 1){
|
||||
|
||||
mousemove(e.touches[0].clientX, e.touches[0].clientY);
|
||||
|
||||
} else if(e.touches.length == 2){
|
||||
|
||||
var newPinchDistance = Math.sqrt(
|
||||
Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
|
||||
+ Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
|
||||
);
|
||||
|
||||
zoom = initialPinchZoom * newPinchDistance / initialPinchDistance;
|
||||
|
||||
var x = (e.touches[0].clientX + e.touches[1].clientX)/2 - container.offsetLeft;
|
||||
var y = (e.touches[0].clientY + e.touches[1].clientY)/2 - container.offsetTop;
|
||||
|
||||
var deltaX = x - lastPosition[0];
|
||||
var deltaY = y - lastPosition[1];
|
||||
|
||||
var pinchTranslateX = (x - container.clientWidth/2 - deltaX)
|
||||
var pinchTranslateY = (y - container.clientHeight/2 - deltaY)
|
||||
|
||||
scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX/zoom + pinchTranslateX/zoom - pinchTranslateX/initialPinchZoom;
|
||||
scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY/zoom + pinchTranslateY/zoom - pinchTranslateY/initialPinchZoom;
|
||||
|
||||
zoomOrigin[0] = scaleZoomOrigin[0]*zoom;
|
||||
zoomOrigin[1] = scaleZoomOrigin[1]*zoom;
|
||||
|
||||
applyView();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener("mouseup", function(e){
|
||||
mouseup(e.clientX, e.clientY);
|
||||
e.preventDefault();
|
||||
});
|
||||
window.addEventListener("touchend", touchend);
|
||||
|
||||
function mouseup(x, y){
|
||||
if(dragging){
|
||||
dragging = false;
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function touchend(e){
|
||||
|
||||
if(e.touches.length == 0){
|
||||
|
||||
mouseup();
|
||||
|
||||
} else if(e.touches.length == 1){
|
||||
initialPinchZoom = zoom;
|
||||
lastPosition = [e.touches[0].clientX, e.touches[0].clientY];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener("resize", function(){
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -57,6 +57,7 @@ function initView(){
|
|||
var hovered = [];
|
||||
|
||||
var lastPos = [0, 0];
|
||||
var previousZoomOrigin = [0, 0];
|
||||
|
||||
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
|
||||
|
||||
|
|
@ -357,6 +358,7 @@ function initView(){
|
|||
element.addEventListener("mouseenter", function(e){
|
||||
if(!fixed && !dragging){
|
||||
objectsContainer.innerHTML = "";
|
||||
previousZoomOrigin = zoomOrigin;
|
||||
zoomOrigin = [
|
||||
innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft
|
||||
,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
|
||||
|
|
@ -376,6 +378,8 @@ function initView(){
|
|||
|
||||
element.addEventListener("mouseleave", function(e){
|
||||
if(!fixed && !dragging){
|
||||
zoomOrigin = previousZoomOrigin;
|
||||
applyView();
|
||||
hovered = [];
|
||||
updateLines();
|
||||
render();
|
||||
|
|
|
|||
|
|
@ -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 703 reddit users.</p>
|
||||
<p>The Atlas would not have been possible without the help of the following 704 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>
|
||||
|
|
@ -770,6 +770,7 @@ <h2>Contributors</h2>
|
|||
<a href="https://reddit.com/user/zang227" target="_blank">zang227</a>
|
||||
<a href="https://reddit.com/user/zaptoshicoolpikachu" target="_blank">zaptoshicoolpikachu</a>
|
||||
<a href="https://reddit.com/user/zenon_0" target="_blank">zenon_0</a>
|
||||
<a href="https://reddit.com/user/Zequez" target="_blank">Zequez</a>
|
||||
<a href="https://reddit.com/user/Zindu" target="_blank">Zindu</a>
|
||||
<a href="https://reddit.com/user/Zirr" target="_blank">Zirr</a>
|
||||
<a href="https://reddit.com/user/Zonisic" target="_blank">Zonisic</a>
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@
|
|||
<meta name="application-name" content="/r/place Atlas">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, user-scalable=no">
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header>
|
||||
<a href="./">
|
||||
<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
|
||||
<h1>The /r/place Atlas</h1>
|
||||
<h1 id="title">The /r/place Atlas</h1>
|
||||
</a>
|
||||
<!--nav>
|
||||
<a id="viewLink" href="./" class="current">View</a>
|
||||
|
|
@ -165,14 +165,16 @@ <h2>Tux</h2>
|
|||
|
||||
</div>
|
||||
|
||||
<!--script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
|
||||
<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/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/main.js?version=1.0.3"></script>
|
||||
|
||||
<script type="text/javascript" src="./_js/minified.js?version=1.0.6"></script>
|
||||
<!--
|
||||
<script type="text/javascript" src="./_js/minified.js?version=1.0.8"></script>
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue