mirror of https://github.com/placeAtlas/atlas.git
Add list of entries and search function
This commit is contained in:
Roland Rytz
parent
114d8dc2b0
commit
02904ef1ed
|
|
@ -138,6 +138,41 @@ header nav a.current{
|
|||
outline: none;
|
||||
}
|
||||
|
||||
select{
|
||||
background: none;
|
||||
background-image: linear-gradient(to bottom, #888888, #666666);
|
||||
border: 1px #222222 outset;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
select{
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url(../_img/arrowDown.svg), linear-gradient(to bottom, #888888, #666666);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: calc(100% - 10px) center, 0 0;
|
||||
background-size: 10px, cover;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
select:hover{
|
||||
background-image: url(../_img/arrowDown.svg), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(180, 180, 180, 0.5));
|
||||
}
|
||||
|
||||
select:active{
|
||||
background-image: url(../_img/arrowDown.svg), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(180, 180, 180, 0.8));
|
||||
}
|
||||
|
||||
option,
|
||||
optgroup{
|
||||
background-color: #555555;
|
||||
font-size: 16px;
|
||||
border-color: #BBBBBB
|
||||
}
|
||||
|
||||
#linesCanvas{
|
||||
position: absolute;
|
||||
height: calc(100% - 50px);
|
||||
|
|
@ -192,6 +227,7 @@ header nav a.current{
|
|||
border: 1px #000000 solid;
|
||||
margin: 10px 0px 0px 10px;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.object *{
|
||||
|
|
@ -368,7 +404,7 @@ input[type="checkbox"]{
|
|||
#zoomControls{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
right: 320px;
|
||||
display: flex;
|
||||
width: 90px;
|
||||
}
|
||||
|
|
@ -408,6 +444,56 @@ button#zoomResetButton{
|
|||
background-image: url(../_img/minus.svg?version=1.0.0);
|
||||
}
|
||||
|
||||
#entriesListContainer{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 60px;
|
||||
bottom: 40px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#entriesListControls{
|
||||
background-color: #444444;
|
||||
border: 1px #000000 solid;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#atlasSize{
|
||||
display: block;
|
||||
margin: 3px 0px 5px 0px;
|
||||
}
|
||||
|
||||
#searchList{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sortContainer{
|
||||
|
||||
}
|
||||
|
||||
#sortContainer label{
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
#sort{
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#entriesListControls{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#entriesList{
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#entriesList .object{
|
||||
margin: 0px 5px 10px 0px;
|
||||
}
|
||||
|
||||
#author{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="15.26367"
|
||||
height="15.3125"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.5 r10040"
|
||||
sodipodi:docname="arrowDown.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="32"
|
||||
inkscape:cx="3.928197"
|
||||
inkscape:cy="7.033037"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1596"
|
||||
inkscape:window-height="877"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="19"
|
||||
inkscape:window-maximized="0" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-188.36328,-392.51062)">
|
||||
<g
|
||||
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Open Sans;-inkscape-font-specification:Open Sans"
|
||||
id="text2985">
|
||||
<path
|
||||
d="m 188.36328,392.51062 15.26367,0 -7.63672,15.3125 -7.62695,-15.3125"
|
||||
id="path2990"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff;fill-opacity:0.63274336" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -5080,7 +5080,7 @@ var atlas = [
|
|||
},
|
||||
{
|
||||
"id": 100,
|
||||
"name": "\"Menacing\"",
|
||||
"name": "Menacing",
|
||||
"description": "This is the Japanese katakana ゴゴゴゴ or \"gogogo\" in romanji which emulates a \"Menacing\" sound effect that is used frequently by the popular anime/manga series JoJo’s Bizarre Adventure. \"Is that a JoJo reference!?\"",
|
||||
"website": "",
|
||||
"subreddit": "/r/StardustCrusaders/",
|
||||
|
|
@ -7485,7 +7485,7 @@ var atlas = [
|
|||
},
|
||||
{
|
||||
"id": 145,
|
||||
"name": "/r/Parahumans Banner",
|
||||
"name": "Parahumans",
|
||||
"description": "Banner for /r/parahumans, fan subreddit for web serials by Wildbow. Read Worm!",
|
||||
"website": "https://parahumans.wordpress.com",
|
||||
"subreddit": "/r/parahumans",
|
||||
|
|
@ -13549,8 +13549,8 @@ var atlas = [
|
|||
"id": 241,
|
||||
"name": "Rickroll QR code",
|
||||
"description": "Intended to be QR code leading to <a class=\"inline\" target=\"_blank\" href=\"https://goo.gl/vcgo0O\">goo.gl/vcgo0O</a>, which, in turn, leads to <a class=\"inline\" target=\"_blank\" href=\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\">YouTube</a><br>Was vandalized during the last moments, and no longer works.\nVideo of the QR code in action during the times of its glory: <a class=\"inline\" target=\"_blank\" href=\"https://www.youtube.com/watch?v=S-GFbM0vN3g\">YouTube</a>",
|
||||
"website": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
||||
"subreddit": "/r/place/comments/62zs4y/rick_roll_qr_code_idea/",
|
||||
"website": "https://reddit.com/r/place/comments/62zs4y/rick_roll_qr_code_idea/",
|
||||
"subreddit": "",
|
||||
"center": [
|
||||
15.5,
|
||||
51.5
|
||||
|
|
@ -17138,7 +17138,7 @@ var atlas = [
|
|||
730.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
}, /* {
|
||||
"id": 284,
|
||||
"name": "/r/reddevils",
|
||||
"description": "Supporter subreddit for the English Premier League football team Manchester United",
|
||||
|
|
@ -17178,7 +17178,7 @@ var atlas = [
|
|||
124.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
}, */ {
|
||||
"id": 285,
|
||||
"name": "AMD Radeo, Ryzen, and ATI",
|
||||
"description": "AMD is a computer hardware company that manufactures graphics cards and CPUs for PCs. RYZEN is its latest CPU architecture, and Radeon is the name of its GPU lineup.",
|
||||
|
|
@ -27547,8 +27547,8 @@ var atlas = [
|
|||
]
|
||||
}, {
|
||||
"id": 405,
|
||||
"name": "",
|
||||
"description": "Crown of the Crown- Prince of Norway. A show of solidarity between the Crusader Kings and Norway",
|
||||
"name": "Crown of Haakon",
|
||||
"description": "Crown of the Crown Prince of Norway. A show of solidarity between the Crusader Kings and Norway",
|
||||
"website": "",
|
||||
"subreddit": "",
|
||||
"center": [
|
||||
|
|
@ -31510,7 +31510,7 @@ var atlas = [
|
|||
]
|
||||
}, {
|
||||
"id": 476,
|
||||
"name": "",
|
||||
"name": "Kinda Funny",
|
||||
"description": "Kinda Funny is an online entertainment company that produces videos on video game culture, film, television, and comics.",
|
||||
"website": "https://www.kindafunny.com/",
|
||||
"subreddit": "/r/kindafunny",
|
||||
|
|
@ -50754,7 +50754,7 @@ var atlas = [
|
|||
}, {
|
||||
"id": 781,
|
||||
"submitted_by": "Gnome_of_Nome",
|
||||
"name": "/r/TFLS",
|
||||
"name": "TFLS",
|
||||
"description": "the label for /r/thefarleftside",
|
||||
"website": "",
|
||||
"subreddit": "/r/thefarleftside",
|
||||
|
|
@ -51022,7 +51022,7 @@ var atlas = [
|
|||
622.5
|
||||
]
|
||||
]
|
||||
}, */ {
|
||||
}, *//* {
|
||||
"id": 788,
|
||||
"submitted_by": "insert_funny_here",
|
||||
"name": "/r/Weezer advertisement",
|
||||
|
|
@ -51055,7 +51055,7 @@ var atlas = [
|
|||
945.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
}, */ {
|
||||
"id": 789,
|
||||
"submitted_by": "BrennanofOrange",
|
||||
"name": "2112",
|
||||
|
|
@ -58537,7 +58537,7 @@ var atlas = [
|
|||
"submitted_by": "Swordficsh",
|
||||
"name": "Toucan",
|
||||
"description": "le toucan has arrived sheepoToucan",
|
||||
"website": "twitch.tv/sheepsticked",
|
||||
"website": "https://twitch.tv/sheepsticked",
|
||||
"subreddit": "",
|
||||
"center": [
|
||||
830.5,
|
||||
|
|
@ -64243,7 +64243,7 @@ var atlas = [
|
|||
},*/ {
|
||||
"id": 1037,
|
||||
"submitted_by": "amoliski",
|
||||
"name": "\"Weon\"",
|
||||
"name": "Weon",
|
||||
"description": "Slang word said in Chile. Can be used as: \na)dude \nb)screwing around \nc)thing or object\n",
|
||||
"website": "http://www.urbandictionary.com/define.php?term=weon",
|
||||
"subreddit": "",
|
||||
|
|
|
|||
|
|
@ -35,6 +35,16 @@ var zoomOrigin = [0, 50];
|
|||
var dragging = false;
|
||||
var lastPosition = [0, 0];
|
||||
|
||||
function applyView(){
|
||||
|
||||
//console.log(zoom);
|
||||
|
||||
innerContainer.style.height = (zoom*1000)+"px";
|
||||
innerContainer.style.width = (zoom*1000)+"px";
|
||||
|
||||
innerContainer.style.left = (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0])+"px";
|
||||
innerContainer.style.top = (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1])+"px";
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
|
|
@ -58,6 +68,9 @@ function init(){
|
|||
document.getElementById("aboutLink").className = "";
|
||||
document.getElementById("drawControls").style.display = "none";
|
||||
document.getElementById("aboutContainer").style.display = "none";
|
||||
document.getElementById("entriesListContainer").style.display = "flex";
|
||||
//document.getElementById("author").style.right = "320px";
|
||||
document.getElementById("zoomControls").style.right = "320px";
|
||||
|
||||
initView();
|
||||
|
||||
|
|
@ -67,6 +80,9 @@ function init(){
|
|||
document.getElementById("aboutLink").className = "";
|
||||
document.getElementById("drawControls").style.display = "block";
|
||||
document.getElementById("aboutContainer").style.display = "none";
|
||||
document.getElementById("entriesListContainer").style.display = "none";
|
||||
//document.getElementById("author").style.right = "10px";
|
||||
document.getElementById("zoomControls").style.right = "10px";
|
||||
|
||||
initDraw();
|
||||
} else if(mode=="about"){
|
||||
|
|
@ -75,21 +91,13 @@ function init(){
|
|||
document.getElementById("aboutLink").className = "current";
|
||||
document.getElementById("drawControls").style.display = "none";
|
||||
document.getElementById("aboutContainer").style.display = "block";
|
||||
document.getElementById("entriesListContainer").style.display = "none";
|
||||
//document.getElementById("author").style.right = "10px";
|
||||
document.getElementById("zoomControls").style.right = "10px";
|
||||
}
|
||||
|
||||
applyView();
|
||||
|
||||
function applyView(){
|
||||
|
||||
//console.log(zoom);
|
||||
|
||||
innerContainer.style.height = (zoom*1000)+"px";
|
||||
innerContainer.style.width = (zoom*1000)+"px";
|
||||
|
||||
innerContainer.style.left = (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0])+"px";
|
||||
innerContainer.style.top = (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1])+"px";
|
||||
}
|
||||
|
||||
function zoomOut(x, y){
|
||||
|
||||
zoomOrigin[0] += x - container.clientWidth/2;//((x/container.clientWidth)*2-1);
|
||||
|
|
|
|||
250
web/_js/view.js
250
web/_js/view.js
|
|
@ -36,6 +36,20 @@ function initView(){
|
|||
backgroundCanvas.height = 1000;
|
||||
var backgroundContext = backgroundCanvas.getContext("2d");
|
||||
|
||||
var filterInput = document.getElementById("searchList");
|
||||
|
||||
var entriesList = document.getElementById("entriesList");
|
||||
|
||||
var entriesLimit = 50;
|
||||
var entriesOffset = 0;
|
||||
var moreEntriesButton = document.createElement("button");
|
||||
moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
|
||||
moreEntriesButton.id = "moreEntriesButton";
|
||||
moreEntriesButton.onclick = function(){
|
||||
buildObjectsList();
|
||||
};
|
||||
//entriesList.appendChild(moreEntriesButton);
|
||||
|
||||
var hovered = [];
|
||||
|
||||
var lastPos = [0, 0];
|
||||
|
|
@ -45,10 +59,30 @@ function initView(){
|
|||
renderBackground();
|
||||
render();
|
||||
|
||||
buildObjectsList();
|
||||
|
||||
container.addEventListener("mousemove", function(e){
|
||||
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());
|
||||
|
||||
});
|
||||
|
||||
function updateHovering(e){
|
||||
if(!dragging && !fixed){
|
||||
var pos = [
|
||||
|
|
@ -56,7 +90,7 @@ function initView(){
|
|||
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom
|
||||
];
|
||||
|
||||
if(pos[0] <= 1000 && pos[0] >= 0 && pos[0] <= 1000 && pos[0] >= 0){
|
||||
if(pos[0] <= 1100 && pos[0] >= -100 && pos[0] <= 1100 && pos[0] >= -100){
|
||||
var newHovered = [];
|
||||
for(var i = 0; i < atlas.length; i++){
|
||||
if(pointIsInPolygon(pos, atlas[i].path)){
|
||||
|
|
@ -79,6 +113,36 @@ function initView(){
|
|||
|
||||
if(changed){
|
||||
hovered = newHovered;
|
||||
|
||||
objectsContainer.innerHTML = "";
|
||||
|
||||
for(var i in hovered){
|
||||
var element = document.createElement("div");
|
||||
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);
|
||||
|
||||
hovered[i].element = element;
|
||||
}
|
||||
|
||||
|
||||
render();
|
||||
}
|
||||
}
|
||||
|
|
@ -113,12 +177,147 @@ function initView(){
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
switch(sort){
|
||||
case "alphaAsc":
|
||||
sortFunction = function(a, b){
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
// a must be equal to b
|
||||
return 0;
|
||||
}
|
||||
break;
|
||||
case "alphaDesc":
|
||||
sortFunction = function(a, b){
|
||||
if (a.name > b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name < b.name) {
|
||||
return 1;
|
||||
}
|
||||
// a must be equal to b
|
||||
return 0;
|
||||
}
|
||||
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 = document.createElement("div");
|
||||
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.addEventListener("mouseenter", function(e){
|
||||
objectsContainer.innerHTML = "";
|
||||
zoomOrigin = [
|
||||
(-(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)
|
||||
]
|
||||
applyView();
|
||||
hovered = [this.foo];
|
||||
render();
|
||||
hovered[0].element = this;
|
||||
updateLines();
|
||||
|
||||
});
|
||||
|
||||
element.addEventListener("mouseleave", function(e){
|
||||
hovered = [];
|
||||
fixed = false;
|
||||
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);
|
||||
|
||||
objectsContainer.innerHTML = "";
|
||||
|
||||
if(hovered.length > 0){
|
||||
container.style.cursor = "pointer";
|
||||
} else {
|
||||
|
|
@ -128,30 +327,6 @@ function initView(){
|
|||
|
||||
for(var i = 0; i < hovered.length; i++){
|
||||
|
||||
var element = document.createElement("div");
|
||||
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);
|
||||
|
||||
hovered[i].element = element;
|
||||
|
||||
|
||||
var path = hovered[i].path;
|
||||
|
||||
|
|
@ -173,8 +348,6 @@ function initView(){
|
|||
context.fill();
|
||||
}
|
||||
|
||||
updateLines();
|
||||
|
||||
context.globalCompositeOperation = "source-out";
|
||||
context.drawImage(backgroundCanvas, 0, 0);
|
||||
|
||||
|
|
@ -219,14 +392,18 @@ function initView(){
|
|||
linesCanvas.width = container.clientWidth;
|
||||
linesCanvas.height = container.clientHeight;
|
||||
linesContext.lineCap = "round";
|
||||
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 1);
|
||||
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 1)*2;
|
||||
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.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
|
||||
linesContext.moveTo(
|
||||
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
);
|
||||
linesContext.lineTo(
|
||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft// + container.clientWidth/2 - innerContainer.clientWidth/2
|
||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop - 50// + container.clientHeight/2 - innerContainer.clientHeight/2
|
||||
|
|
@ -234,14 +411,17 @@ function initView(){
|
|||
linesContext.stroke();
|
||||
}
|
||||
|
||||
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 1);
|
||||
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 1)*2;
|
||||
linesContext.strokeStyle = "#FFFFFF";
|
||||
|
||||
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
|
||||
);
|
||||
linesContext.lineTo(
|
||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft// + container.clientWidth/2 - innerContainer.clientWidth/2
|
||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop - 50// + container.clientHeight/2 - innerContainer.clientHeight/2
|
||||
|
|
@ -267,6 +447,10 @@ function initView(){
|
|||
toggleFixed(e);
|
||||
}
|
||||
});
|
||||
|
||||
objectsContainer.addEventListener("scroll", function(e){
|
||||
updateLines();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="./_css/style.css?version=1.0.4" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="./_css/style.css?version=1.0.5" rel="stylesheet" type="text/css" media="all">
|
||||
<title>
|
||||
The /r/place Atlas
|
||||
</title>
|
||||
|
|
@ -56,6 +56,24 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="entriesListContainer">
|
||||
<div id="entriesListControls">
|
||||
<input id="searchList" type="text" placeholder="Search...">
|
||||
<span id="atlasSize"></span>
|
||||
<div id="sortContainer"><label>Sort:</label>
|
||||
<select id="sort">
|
||||
<option value="alphaAsc" selected>↓ Alphabetical</option>
|
||||
<option value="alphaDesc">↑ Alphabetical</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="oldest">Oldest</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="entriesList">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="zoomControls">
|
||||
<button title="Zoom In" id="zoomInButton"></button>
|
||||
<button title="Reset View" id="zoomResetButton"></button>
|
||||
|
|
@ -763,10 +781,10 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
|
||||
<script type="text/javascript" src="./_js/atlas-min.js?version=1.0.42"></script>
|
||||
<script type="text/javascript" src="./_js/view.js?version=1.0.1"></script>
|
||||
<script type="text/javascript" src="./_js/atlas-min.js?version=1.0.43"></script>
|
||||
<script type="text/javascript" src="./_js/view.js?version=1.0.2"></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.1"></script>
|
||||
<script type="text/javascript" src="./_js/main.js?version=1.0.2"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue