MirrorHub
/
atlas
mirror of https://github.com/placeAtlas/atlas.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

Clean up code for switching modes and hiding the entries list

This commit is contained in:
Roland Rytz 2017-04-06 23:09:37 +02:00
parent ce43d968d8
commit ad617b6d54
4 changed files with 97 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/_css/style.css
View File

@ -245,6 +245,11 @@ optgroup{
overflow-y: hidden;
}
.listHidden #container{
width: 100%;
margin-left: 0px;
}
#innerContainer{
height: 1000px;
width: 1000px;
@ -362,6 +367,10 @@ optgroup{
padding: 0px 20px;
}
.draw #drawControlsContainer{
display: block;
}
#drawControls{
width: 250px;
padding: 15px;
@ -508,6 +517,10 @@ input[type="checkbox"]{
width: 90px;
}
.listHidden #zoomControls{
left: 10px;
}
#zoomControls button{
display: block;
height: 30px;
@ -554,6 +567,14 @@ button#zoomResetButton{
flex-direction: column;
}
.draw #entriesListContainer{
display: none;
}
.listHidden #entriesListContainer{
display: none;
}
#entriesListContainer > nav{
text-align: center;
margin: 10px 0px;
@ -591,6 +612,14 @@ button#zoomResetButton{
border-right: 1px #000000 solid;
}
.draw #entriesListBackground{
display: none;
}
.listHidden #entriesListBackground{
display: none;
}
#hideListButton{
position: absolute;
height: 100px;
@ -609,7 +638,11 @@ button#zoomResetButton{
background-color: #555555;
}
#hideListButton.reverse{
.draw #hideListButton{
display: none;
}
.listHidden #hideListButton{
background-image: url("data:image/svg+xml;utf8,%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20width%3D%22272.84375%22%0A%20%20%20height%3D%22177.59375%22%0A%20%20%20id%3D%22svg2%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20/%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata7%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C/dc%3Atitle%3E%0A%20%20%20%20%20%20%3C/cc%3AWork%3E%0A%20%20%20%20%3C/rdf%3ARDF%3E%0A%20%20%3C/metadata%3E%0A%20%20%3Cg%0A%20%20%20%20%20transform%3D%22translate%28-116.4375%2C-348.78125%29%22%0A%20%20%20%20%20id%3D%22layer1%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22M%20368.07001%2C380.00645%20252.85714%2C495.16383%20137.64427%2C380.00645%22%0A%20%20%20%20%20%20%20id%3D%22path2985%22%0A%20%20%20%20%20%20%20style%3D%22fill%3Anone%3Bstroke%3A%23ffffff%3Bstroke-width%3A30%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-opacity%3A1%3Bstroke-dasharray%3Anone%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
background-size: 15px;
top: 50px;

42
web/_js/main.js
View File

@ -70,31 +70,25 @@ function init(){
}
}
if(mode=="view"){
/*document.getElementById("viewLink").className = "current";
document.getElementById("drawLink").className = "";
document.getElementById("aboutLink").className = "";*/
if(mode == "view"){
document.getElementById("drawControlsContainer").style.display = "none";
document.getElementById("entriesListContainer").style.display = "flex";
document.getElementById("entriesListBackground").style.display = "block";
document.getElementById("hideListButton").style.display = "block";
document.getElementById("objectsList").style.display = "block";
/*
document.getElementById("container").style.width = "100vw";
document.getElementById("drawControls").style.display = "none";
document.getElementById("entriesListContainer").style.display = "none";
document.getElementById("entriesListBackground").style.display = "none";
document.getElementById("author").style.display = "none";
document.getElementById("zoomControls").style.right = "10px";
document.getElementById("zoomControls").style.top = "10px";
document.getElementById("hideListButton").style.display = "none";
document.getElementById("objectsList").style.display = "none";
*/
wrapper.className = wrapper.className.replace(/ drawMode/g, "");
initView();
} else if(mode=="draw"){
wrapper.className += " draw";
initDraw();
} else if(mode=="about"){
window.location = "./about.html";
}
if(mode=="view"){
} else if(mode=="draw"){
/*document.getElementById("viewLink").className = "";
document.getElementById("drawLink").className = "current";
@ -105,7 +99,7 @@ function init(){
document.getElementById("entriesListBackground").style.display = "none";
document.getElementById("hideListButton").style.display = "none";
initDraw();
} else if(mode=="about"){
window.location = "./about.html";
}
@ -208,8 +202,6 @@ function init(){
window.addEventListener("resize", function(){
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
applyView();
});

56
web/_js/view.js
View File

@ -25,6 +25,8 @@
function initView(){
var wrapper = document.getElementById("wrapper");
var objectsContainer = document.getElementById("objectsList");
var linesCanvas = document.getElementById("linesCanvas");
@ -49,7 +51,8 @@ function initView(){
moreEntriesButton.onclick = function(){
buildObjectsList();
};
//entriesList.appendChild(moreEntriesButton);
var viewportWidth = document.documentElement.clientWidth;
var hovered = [];
@ -69,6 +72,22 @@ function initView(){
highlightEntryFromUrl();
}*/
if(document.documentElement.clientWidth > 1000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
}
if(document.documentElement.clientWidth < 1000){
entriesListShown = false;
wrapper.className += " listHidden";
}
applyView();
render();
updateLines();
var args = window.location.search;
if(args){
id = args.split("id=")[1];
@ -102,19 +121,9 @@ function initView(){
hideListButton.addEventListener("click", function(e){
entriesListShown = !entriesListShown;
if(entriesListShown){
hideListButton.className = "";
document.getElementById("container").style.width = "calc(100% - 360px)";
document.getElementById("container").style.marginLeft = "360px";
document.getElementById("entriesListContainer").style.display = "flex";
document.getElementById("entriesListBackground").style.display = "block";
document.getElementById("zoomControls").style.left = "370px";
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
} else {
hideListButton.className = "reverse";
document.getElementById("container").style.width = "100%";
document.getElementById("container").style.marginLeft = "0px";
document.getElementById("entriesListContainer").style.display = "none";
document.getElementById("entriesListBackground").style.display = "none";
document.getElementById("zoomControls").style.left = "10px";
wrapper.className += " listHidden";
}
applyView();
updateHovering(e);
@ -523,4 +532,25 @@ function initView(){
updateLines();
});
window.addEventListener("resize", function(){
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
if(document.documentElement.clientWidth > 1000 && viewportWidth <= 1000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
}
if(document.documentElement.clientWidth < 1000 && viewportWidth >= 1000){
entriesListShown = false;
wrapper.className += " listHidden";
}
viewportWidth = document.documentElement.clientWidth;
applyView();
render();
updateLines();
});
}

6
web/index.html
View File

@ -165,13 +165,13 @@
</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/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.4"></script>
<!--script type="text/javascript" src="./_js/minified.js?version=1.0.5"></script-->
</body>
</html>