mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-24 19:04:29 +01:00
Add loading screen
This commit is contained in:
Roland Rytz
parent
5f35484eb5
commit
de9c5c7179
8 changed files with 260 additions and 13 deletions
50
combined.js
50
combined.js
|
|
@ -24,6 +24,19 @@
|
|||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener("error", function(e){
|
||||
console.log(e);
|
||||
var errorMessage = "<p class=\"error\">An error has occurred:</p>";
|
||||
errorMessage += "<p class=\"errorBody\">"+e.message+"</p>";
|
||||
errorMessage += "<p class=\"errorBody\">on line "+e.lineno+"</p>";
|
||||
errorMessage += "<p class=\"error\">If this keeps happening, feel free to send me a <a href=\"mailto:roland.rytz@gmail.com\">mail</a>.</p>";
|
||||
document.getElementById("loadingContent").innerHTML = errorMessage;
|
||||
});
|
||||
|
||||
|
||||
|
||||
var atlas = [
|
||||
{
|
||||
"id": 0,
|
||||
|
|
@ -83164,7 +83177,7 @@ var atlas = [
|
|||
756.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
}, /*{
|
||||
"id": 1414,
|
||||
"submitted_by": "MedicInDisquise",
|
||||
"name": "SS13 RevHead and Nuke Disk",
|
||||
|
|
@ -83176,7 +83189,7 @@ var atlas = [
|
|||
0.5
|
||||
],
|
||||
"path": []
|
||||
}, /*{
|
||||
},*/ /*{
|
||||
"id": 1415,
|
||||
"submitted_by": "MedicInDisquise",
|
||||
"name": "SS13 SecHud",
|
||||
|
|
@ -85197,10 +85210,35 @@ var atlas = [
|
|||
"website": "http://diamondclub.tv/",
|
||||
"subreddit": "/r/DiamondClub/",
|
||||
"center": [
|
||||
0.5,
|
||||
0.5
|
||||
433.5,
|
||||
318.5
|
||||
],
|
||||
"path": []
|
||||
"path": [
|
||||
[
|
||||
443.5,
|
||||
313.5
|
||||
],
|
||||
[
|
||||
431.5,
|
||||
313.5
|
||||
],
|
||||
[
|
||||
424.5,
|
||||
320.5
|
||||
],
|
||||
[
|
||||
424.5,
|
||||
324.5
|
||||
],
|
||||
[
|
||||
435.5,
|
||||
324.5
|
||||
],
|
||||
[
|
||||
443.5,
|
||||
317.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
"id": 1453,
|
||||
"submitted_by": "Reddit-Mengzy",
|
||||
|
|
@ -88058,6 +88096,8 @@ function init(){
|
|||
}
|
||||
}
|
||||
|
||||
document.getElementById("loading").style.display = "none";
|
||||
|
||||
document.getElementById("zoomInButton").addEventListener("click", function(e){
|
||||
|
||||
/*if(zoomAnimationFrame){
|
||||
|
|
|
|||
92
smallifier.html
Normal file
92
smallifier.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
|
||||
<!--
|
||||
========================================================================
|
||||
The /r/place Atlas
|
||||
|
||||
An Atlas of Reddit's /r/place, with information to each
|
||||
artwork of the canvas provided by the community.
|
||||
|
||||
Copyright (C) 2017 Roland Rytz <roland@draemm.li>
|
||||
Licensed under the GNU Affero General Public License Version 3
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||
For more information, see:
|
||||
https://draemm.li/various/place-atlas/license.txt
|
||||
|
||||
========================================================================
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
This shrinks the atlas by making it arrays instead of objects, but
|
||||
the difference in size is only about 100k, so it's probably not
|
||||
worth the effort
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
Smallifier
|
||||
</title>
|
||||
<style>
|
||||
html, body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#output{
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<textarea id="output"></textarea>
|
||||
|
||||
<script type="text/javascript" src="./web/_js/atlas.js?version=1.0.50"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var smallifiedAtlas = [];
|
||||
|
||||
for(var i = 0; i < atlas.length; i++){
|
||||
|
||||
smallifiedAtlas.push([
|
||||
atlas[i].id
|
||||
,atlas[i].name
|
||||
,atlas[i].description
|
||||
,atlas[i].website
|
||||
,atlas[i].subreddit
|
||||
,atlas[i].center
|
||||
,atlas[i].path
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
console.log(atlas.length, smallifiedAtlas.length);
|
||||
|
||||
var jsonString = JSON.stringify(smallifiedAtlas, null, 0);
|
||||
var textarea = document.getElementById("output");
|
||||
textarea.innerHTML = "var atlas = "+jsonString+";";
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -242,6 +242,66 @@ #container{
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#loading{
|
||||
position: absolute;
|
||||
background-color: rgba(10, 10, 10, 0.9);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#loading > div{
|
||||
margin: 80px auto;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#loading > div > div{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 200px;
|
||||
border: 7px #CCCCCC solid;
|
||||
display: inline-block;
|
||||
border-top-color: #FFAA00;
|
||||
|
||||
animation-duration: 3s;
|
||||
animation-name: spinner;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
from {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error{
|
||||
color: #FFFFFF;
|
||||
font-size: 23px;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.errorBody{
|
||||
color: #CC8888;
|
||||
font-family: monospace;
|
||||
font-size: 20px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
noscript{
|
||||
color: #FFFFFF;
|
||||
font-size: 23px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.listHidden #container{
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 2.6 KiB |
|
|
@ -24,6 +24,19 @@
|
|||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener("error", function(e){
|
||||
console.log(e);
|
||||
var errorMessage = "<p class=\"error\">An error has occurred:</p>";
|
||||
errorMessage += "<p class=\"errorBody\">"+e.message+"</p>";
|
||||
errorMessage += "<p class=\"errorBody\">on line "+e.lineno+"</p>";
|
||||
errorMessage += "<p class=\"error\">If this keeps happening, feel free to send me a <a href=\"mailto:roland.rytz@gmail.com\">mail</a>.</p>";
|
||||
document.getElementById("loadingContent").innerHTML = errorMessage;
|
||||
});
|
||||
|
||||
|
||||
|
||||
var atlas = [
|
||||
{
|
||||
"id": 0,
|
||||
|
|
@ -83164,7 +83177,7 @@ var atlas = [
|
|||
756.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
}, /*{
|
||||
"id": 1414,
|
||||
"submitted_by": "MedicInDisquise",
|
||||
"name": "SS13 RevHead and Nuke Disk",
|
||||
|
|
@ -83176,7 +83189,7 @@ var atlas = [
|
|||
0.5
|
||||
],
|
||||
"path": []
|
||||
}, /*{
|
||||
},*/ /*{
|
||||
"id": 1415,
|
||||
"submitted_by": "MedicInDisquise",
|
||||
"name": "SS13 SecHud",
|
||||
|
|
@ -85197,10 +85210,35 @@ var atlas = [
|
|||
"website": "http://diamondclub.tv/",
|
||||
"subreddit": "/r/DiamondClub/",
|
||||
"center": [
|
||||
0.5,
|
||||
0.5
|
||||
433.5,
|
||||
318.5
|
||||
],
|
||||
"path": []
|
||||
"path": [
|
||||
[
|
||||
443.5,
|
||||
313.5
|
||||
],
|
||||
[
|
||||
431.5,
|
||||
313.5
|
||||
],
|
||||
[
|
||||
424.5,
|
||||
320.5
|
||||
],
|
||||
[
|
||||
424.5,
|
||||
324.5
|
||||
],
|
||||
[
|
||||
435.5,
|
||||
324.5
|
||||
],
|
||||
[
|
||||
443.5,
|
||||
317.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
"id": 1453,
|
||||
"submitted_by": "Reddit-Mengzy",
|
||||
|
|
|
|||
|
|
@ -111,6 +111,8 @@ function init(){
|
|||
}
|
||||
}
|
||||
|
||||
document.getElementById("loading").style.display = "none";
|
||||
|
||||
document.getElementById("zoomInButton").addEventListener("click", function(e){
|
||||
|
||||
/*if(zoomAnimationFrame){
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -26,7 +26,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="./_css/style.css?version=1.0.21" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="./_css/style.css?version=1.0.22" rel="stylesheet" type="text/css" media="all">
|
||||
<title>
|
||||
The /r/place Atlas
|
||||
</title>
|
||||
|
|
@ -66,6 +66,17 @@ <h1>The /r/place Atlas</h1>
|
|||
</header-->
|
||||
|
||||
<div id="container">
|
||||
<div id="loading">
|
||||
<div id="loadingContent">
|
||||
<div></div><br>
|
||||
<span> Hang on...</span>
|
||||
<noscript>
|
||||
<p>Sorry, you need JavaScript to view the Atlas.</p>
|
||||
<p>All JavaScript on this site is licensed under either the MIT or AGPL license.</p>
|
||||
<p><a href="https://github.com/RolandR/place-atlas/">See the source on GitHub</a></p>
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="linesCanvas"></canvas>
|
||||
<div id="innerContainer">
|
||||
<canvas id="highlightCanvas" width="1000" height="1000"></canvas>
|
||||
|
|
@ -175,7 +186,7 @@ <h2>Tux</h2>
|
|||
<script type="text/javascript" src="./_js/main.js?version=1.0.3"></script>
|
||||
-->
|
||||
|
||||
<script type="text/javascript" src="./_js/minified.js?version=1.0.81"></script>
|
||||
<script type="text/javascript" src="./_js/minified.js?version=1.0.82"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue