mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-05-28 17:14:03 +02:00
Change entry linking to use ?id=42 instead of #id42 due to problems in firefox
This commit is contained in:
parent
f1031a9035
commit
1984ba1f58
|
@ -248,14 +248,26 @@ .object *{
|
||||||
}
|
}
|
||||||
|
|
||||||
.object h2{
|
.object h2{
|
||||||
|
display: block;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: #666666;
|
background-color: #666666;
|
||||||
text-shadow: 1px 1px 0px #000000;
|
text-shadow: 1px 1px 0px #000000;
|
||||||
padding: 3px 10px;
|
|
||||||
margin: 0px -10px 10px -10px;
|
margin: 0px -10px 10px -10px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.object h2 a{
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 3px 10px;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.object h2 a:hover{
|
||||||
|
color: #FFAA00;
|
||||||
|
}
|
||||||
|
|
||||||
.object a{
|
.object a{
|
||||||
background-color: #666666;
|
background-color: #666666;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
156
web/_js/view.js
156
web/_js/view.js
|
@ -23,29 +23,6 @@
|
||||||
========================================================================
|
========================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function createInfoBlock(entry){
|
|
||||||
var element = document.createElement("div");
|
|
||||||
element.className = "object";
|
|
||||||
|
|
||||||
var html = '<h2><a href="#id'+entry.id+'">'+entry.name+'</a></h2>';
|
|
||||||
if(entry.description){
|
|
||||||
html += '<p>'+entry.description+'</p>';
|
|
||||||
}
|
|
||||||
if(entry.website){
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
html += '<a target="_blank" href=https://reddit.com'+entry.subreddit+'>'+entry.subreddit+'</a>';
|
|
||||||
}
|
|
||||||
element.innerHTML = html;
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
function initView(){
|
function initView(){
|
||||||
|
|
||||||
var objectsContainer = document.getElementById("objectsList");
|
var objectsContainer = document.getElementById("objectsList");
|
||||||
|
@ -84,27 +61,19 @@ function initView(){
|
||||||
buildObjectsList();
|
buildObjectsList();
|
||||||
|
|
||||||
// parse linked atlas entry id from link hash
|
// parse linked atlas entry id from link hash
|
||||||
if (window.location.hash.substring(3)){
|
/*if (window.location.hash.substring(3)){
|
||||||
var id = parseInt(window.location.hash.substring(3));
|
zoom = 4;
|
||||||
var entry = atlas.filter(function(e){
|
applyView();
|
||||||
return e.id === id;
|
highlightEntryFromUrl();
|
||||||
});
|
}*/
|
||||||
|
|
||||||
if (entry.length === 1){
|
var args = window.location.search;
|
||||||
entry = entry[0];
|
if(args){
|
||||||
var infoElement = createInfoBlock(entry);
|
id = args.split("id=")[1];
|
||||||
objectsContainer.appendChild(infoElement);
|
if(id){
|
||||||
|
zoom = 4;
|
||||||
zoomOrigin = [
|
|
||||||
(-(container.clientWidth/2 - innerContainer.clientWidth/2) + container.clientWidth/2 - entry.center[0]* zoom)
|
|
||||||
,(-(container.clientHeight/2 - innerContainer.clientHeight/2) + container.clientHeight/2 + 50 - entry.center[1]* zoom)
|
|
||||||
]
|
|
||||||
applyView();
|
applyView();
|
||||||
hovered = [entry];
|
highlightEntryFromUrl();
|
||||||
fixed = true;
|
|
||||||
render();
|
|
||||||
hovered[0].element = infoElement;
|
|
||||||
updateLines();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -130,6 +99,70 @@ function initView(){
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function createInfoBlock(entry){
|
||||||
|
var element = document.createElement("div");
|
||||||
|
element.className = "object";
|
||||||
|
|
||||||
|
var html = '<h2><a href="?id='+entry.id+'">'+entry.name+'</a></h2>';
|
||||||
|
|
||||||
|
if(entry.description){
|
||||||
|
html += '<p>'+entry.description+'</p>';
|
||||||
|
}
|
||||||
|
if(entry.website){
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
html += '<a target="_blank" href=https://reddit.com'+entry.subreddit+'>'+entry.subreddit+'</a>';
|
||||||
|
}
|
||||||
|
element.innerHTML += html;
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = parseInt(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);
|
||||||
|
|
||||||
|
zoomOrigin = [
|
||||||
|
(innerContainer.clientWidth/2 - entry.center[0]* zoom)
|
||||||
|
,(innerContainer.clientWidth/2 + 50 - entry.center[1]* zoom)
|
||||||
|
]
|
||||||
|
applyView();
|
||||||
|
hovered = [entry];
|
||||||
|
render();
|
||||||
|
hovered[0].element = infoElement;
|
||||||
|
updateLines();
|
||||||
|
fixed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function updateHovering(e){
|
function updateHovering(e){
|
||||||
if(!dragging && !fixed){
|
if(!dragging && !fixed){
|
||||||
var pos = [
|
var pos = [
|
||||||
|
@ -243,11 +276,11 @@ function initView(){
|
||||||
break;
|
break;
|
||||||
case "alphaDesc":
|
case "alphaDesc":
|
||||||
sortFunction = function(a, b){
|
sortFunction = function(a, b){
|
||||||
if (a.name > b.name) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (a.name < b.name) {
|
if (a.name < b.name) {
|
||||||
return 1;
|
return 1;
|
||||||
|
}
|
||||||
|
if (a.name > b.name) {
|
||||||
|
return -1;
|
||||||
}
|
}
|
||||||
// a must be equal to b
|
// a must be equal to b
|
||||||
return 0;
|
return 0;
|
||||||
|
@ -290,27 +323,30 @@ function initView(){
|
||||||
|
|
||||||
var element = createInfoBlock(sortedAtlas[i]);
|
var element = createInfoBlock(sortedAtlas[i]);
|
||||||
|
|
||||||
element.foo = sortedAtlas[i];
|
element.entry = sortedAtlas[i];
|
||||||
|
|
||||||
element.addEventListener("mouseenter", function(e){
|
element.addEventListener("mouseenter", function(e){
|
||||||
objectsContainer.innerHTML = "";
|
if(!fixed){
|
||||||
zoomOrigin = [
|
objectsContainer.innerHTML = "";
|
||||||
(-(container.clientWidth/2 - innerContainer.clientWidth/2) + container.clientWidth/2 - this.foo.center[0]* zoom)
|
zoomOrigin = [
|
||||||
,(-(container.clientHeight/2 - innerContainer.clientHeight/2) + container.clientHeight/2 + 50 - this.foo.center[1]* zoom)
|
(innerContainer.clientWidth/2 - this.entry.center[0]* zoom)
|
||||||
]
|
,(innerContainer.clientWidth/2 + 50 - this.entry.center[1]* zoom)
|
||||||
applyView();
|
]
|
||||||
hovered = [this.foo];
|
applyView();
|
||||||
render();
|
hovered = [this.entry];
|
||||||
hovered[0].element = this;
|
render();
|
||||||
updateLines();
|
hovered[0].element = this;
|
||||||
|
updateLines();
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
element.addEventListener("mouseleave", function(e){
|
element.addEventListener("mouseleave", function(e){
|
||||||
hovered = [];
|
if(!fixed){
|
||||||
fixed = false;
|
hovered = [];
|
||||||
updateLines();
|
updateLines();
|
||||||
render();
|
render();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
entriesList.appendChild(element);
|
entriesList.appendChild(element);
|
||||||
|
|
Loading…
Reference in a new issue