- egdi logo
- npm updates - full responsive design - LayerControl wit the option for defining a parent div
This commit is contained in:
Arno Kaimbacher
parent
572e6f41b5
commit
5c40b845bb
12 changed files with 1424 additions and 244 deletions
665
src/css/page.css
665
src/css/page.css
|
|
@ -1,4 +1,86 @@
|
|||
/*@charset "UTF-8";*/
|
||||
@import "../../node_modules/normalize.css/normalize.css";
|
||||
|
||||
/* html, body
|
||||
{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-size-adjust: 100%;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* body {
|
||||
padding-top: 65px;
|
||||
} */
|
||||
|
||||
section {
|
||||
text-align: left;
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
.main {
|
||||
padding-top: 51px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
/* height: 100%; */
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll
|
||||
}
|
||||
.canvas-area {
|
||||
/* flex: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; */
|
||||
height: 100%;
|
||||
/* margin: 10px; */
|
||||
}
|
||||
|
||||
.input-area {
|
||||
/* flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; */
|
||||
/* margin: 10px; */
|
||||
}
|
||||
|
||||
.btnDownloadMeme {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#div-map {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#webgl {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mapDesktop {
|
||||
overflow: hidden;
|
||||
|
|
@ -74,11 +156,9 @@
|
|||
}
|
||||
|
||||
|
||||
.gba-control-home span {
|
||||
/*padding: 2px;*/
|
||||
.gba-control-home span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
/*background-color: rgba(102,102,102,0.80);*/
|
||||
height: 30px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
|
@ -86,11 +166,584 @@
|
|||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=') /*img/home.png*/;
|
||||
/*opacity : 0.8;*/
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
h1 { font-size: 5.0rem; }
|
||||
h2 { font-size: 4.2rem; }
|
||||
h3 { font-size: 3.6rem; }
|
||||
h4 { font-size: 3.0rem; }
|
||||
h5 { font-size: 2.4rem; }
|
||||
h6 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.one.column,
|
||||
.one.columns { width: 4.66666666667%; }
|
||||
.two.columns { width: 13.3333333333%; }
|
||||
.three.columns { width: 22%; }
|
||||
.four.columns { width: 30.6666666667%; }
|
||||
.five.columns { width: 39.3333333333%; }
|
||||
.six.columns { width: 48%; }
|
||||
.seven.columns { width: 56.6666666667%; }
|
||||
.eight.columns { width: 65.3333333333%; }
|
||||
.nine.columns { width: 74.0%; }
|
||||
.ten.columns { width: 82.6666666667%; }
|
||||
.eleven.columns { width: 91.3333333333%; }
|
||||
.twelve.columns { width: 100%; margin-left: 0; }
|
||||
|
||||
.one-third.column { width: 30.6666666667%; }
|
||||
.two-thirds.column { width: 65.3333333333%; }
|
||||
|
||||
.one-half.column { width: 48%; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { margin-left: 26%; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { margin-left: 52%; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { margin-left: 52%; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
/* =Navigation
|
||||
-------- */
|
||||
/* .header {
|
||||
background-color: #fff;
|
||||
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
} */
|
||||
/* .header .menu {
|
||||
clear: both;
|
||||
max-height: 0;
|
||||
transition: max-height .2s ease-out;
|
||||
} */
|
||||
.header .menu-icon {
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
line-height: 1em;
|
||||
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
padding: 20px;
|
||||
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header .menu-icon.active {
|
||||
background-color: rgba(0,0,0, .3);
|
||||
}
|
||||
.header .menu-icon:hover {
|
||||
color: #222;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
line-height: 1em;
|
||||
/* position: absolute;
|
||||
padding: 22px;
|
||||
color: black; */
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navigation.active {
|
||||
/* make visible visible */
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
-o-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: fixed;
|
||||
|
||||
top: 0; left: 0; bottom: none;
|
||||
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
-o-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
|
||||
-webkit-transition: all .5s ease-in-out;
|
||||
-moz-transition: all .5s ease-in-out;
|
||||
-ms-transition: all .5s ease-in-out;
|
||||
-o-transition: all .5s ease-in-out;
|
||||
transition: all .5s ease-in-out;
|
||||
/* background:#3ad29f; */
|
||||
color: #757575;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
/* border-bottom: 1px solid #dcdcdc; */
|
||||
}
|
||||
|
||||
.navigation ul {
|
||||
/* display:none; */
|
||||
width:100%;
|
||||
list-style:none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
.header ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navigation ul li a {
|
||||
color: #757575;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.navigation ul li a {
|
||||
display: block;
|
||||
padding:1em;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
nav ul li a.current,
|
||||
nav ul li a:hover {
|
||||
background-color: #eee;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
/* nav ul li a.current,
|
||||
nav ul li a:hover {
|
||||
background: #2dc592;
|
||||
} */
|
||||
|
||||
/* Float right the list item that should be right aligned */
|
||||
.navigation ul li.right { float: right; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #E1E1E1; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* Media Queries
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
Note: The best way to structure the use of media queries is to create the queries
|
||||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||
on small devices, paste the mobile query code up in the buttons section and style it
|
||||
there.
|
||||
*/
|
||||
|
||||
|
||||
/* Larger than mobile */
|
||||
@media (min-width: 400px) {}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
@media (min-width: 550px) {}
|
||||
|
||||
/* Larger than tablet */
|
||||
@media (min-width: 750px) {
|
||||
|
||||
.header .navigation {
|
||||
/* clear: none;
|
||||
float: right;
|
||||
max-height: none; */
|
||||
/* always visible */
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
-o-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
}
|
||||
/* smaller than tablet */
|
||||
@media (max-width: 750px) {
|
||||
.header ul li {
|
||||
display: list-item;
|
||||
float: none;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
.header li a {
|
||||
/* padding: 20px 30px; */
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.header .logo {
|
||||
/* display: inline; */
|
||||
display: none;
|
||||
position: unset;
|
||||
}
|
||||
.navigation a.menu-icon {
|
||||
display: inline;
|
||||
}
|
||||
.header .navigation {
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
.navigation ul li:hover ul {
|
||||
border: none;
|
||||
}
|
||||
.navigation ul li.right {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Larger than desktop */
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
|
||||
.tab-content {
|
||||
min-height: 390px;
|
||||
}
|
||||
|
||||
ul.tab-nav {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #bbb;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
ul.tab-nav li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
ul.tab-nav li span.button {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: -1px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul.tab-nav li span.active.button {
|
||||
border-bottom: 0.175em solid #fff;
|
||||
border-bottom-color: #00bfffcc;
|
||||
color: #00bfffcc;
|
||||
/* background-color: #6c6e6b; */
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab-content .tab-pane {
|
||||
display: none;
|
||||
/* visibility: hidden; */
|
||||
}
|
||||
|
||||
.tab-content .tab-pane.active {
|
||||
display: block;
|
||||
/* visibility: visible; */
|
||||
}
|
||||
|
|
@ -39,6 +39,14 @@
|
|||
background: #eaeaea;
|
||||
}
|
||||
|
||||
.gba-controllayers-parent-expanded .gba-controllayers-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.gba-controllayers-parent-expanded {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.gba-controllayers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
|
|
@ -58,25 +66,20 @@
|
|||
|
||||
|
||||
|
||||
.gbaLegendServiceLabel {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gbaLegendLayerLabel {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.checkboxFive {
|
||||
position: relative;
|
||||
width:35px;
|
||||
height: 31py;
|
||||
|
||||
vertical-align: super;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height:1px;
|
||||
width:1px;
|
||||
/* height:1px;
|
||||
width:1px; */
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
|
|
@ -86,12 +89,15 @@ input[type=checkbox] {
|
|||
.checkboxFive label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
background: #eee;
|
||||
border: 1px solid #ddd;
|
||||
/* border: 1px solid #ddd; */
|
||||
}
|
||||
/* Display the tick inside the checkbox */
|
||||
.checkboxFive label:after {
|
||||
|
|
@ -101,7 +107,7 @@ input[type=checkbox] {
|
|||
width: 8px;
|
||||
height: 5px;
|
||||
background: transparent;
|
||||
top: 3px;
|
||||
top: 5px;
|
||||
left: 3px;
|
||||
border: 3px solid #333;
|
||||
border-top: none;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export class LayerControl extends Control {
|
|||
};
|
||||
|
||||
//private class fileds:
|
||||
_container;
|
||||
_mainMap;
|
||||
_scene;
|
||||
_objectGroup;
|
||||
|
|
@ -42,13 +43,28 @@ export class LayerControl extends Control {
|
|||
onAdd(map) {
|
||||
this._mainMap = map;
|
||||
|
||||
let className = "gba-controllayers"
|
||||
let container = this._container = dom.createDom("div", { "class": className });
|
||||
let className = "gba-controllayers";
|
||||
let container;
|
||||
let toggleable = false;
|
||||
|
||||
if (this.options.parentDiv) {
|
||||
container = this._container = document.getElementById(this.options.parentDiv);
|
||||
dom.addClass(container, className);
|
||||
toggleable = false;
|
||||
} else {
|
||||
container = this._container = dom.createDom("div", { "class": className });
|
||||
toggleable = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
domEvent.on(container, 'click', domEvent.stopPropagation);
|
||||
|
||||
let layerContainer = this._layerContainer = dom.createDom('div', { "class": className + '-container' }, container);
|
||||
|
||||
if (this.options.collapsed) {
|
||||
if (this.options.collapsed && toggleable == true) {
|
||||
domEvent.on(container, 'mouseenter', this._expand, this);
|
||||
domEvent.on(container, 'mouseleave', this._collapse, this);
|
||||
|
||||
|
|
@ -58,17 +74,20 @@ export class LayerControl extends Control {
|
|||
domEvent.on(this._layersLink, 'focus', this._expand, this);
|
||||
}
|
||||
else {
|
||||
this._expand();
|
||||
// this._expand();
|
||||
this._container.classList.add("gba-controllayers-parent-expanded");
|
||||
}
|
||||
this._baseLayersList = dom.createDom('div', { "class": className + '-base' }, layerContainer);
|
||||
this._separator = dom.createDom('div', { "class": className + '-separator' }, layerContainer);
|
||||
//this._overlaysList = dom.createDom('div', { "class": className + '-overlays' }, layerContainer);
|
||||
var overlayTable = dom.createDom("table", { cellpadding: 0, cellspacing: 0, width: "95%", "class": className + '-overlays' }, layerContainer);
|
||||
var overlayTable = dom.createDom("table", { cellpadding: 0, cellspacing: 0, width: "95%", "class": className + '-overlays u-full-width' }, layerContainer);
|
||||
this._overlaysList = dom.createDom("tbody", {}, overlayTable);
|
||||
|
||||
this._updateLayerList();
|
||||
|
||||
return container;
|
||||
if (toggleable == true) {
|
||||
return container;
|
||||
}
|
||||
}
|
||||
|
||||
_addLayer(layer, name, overlay) {
|
||||
|
|
@ -112,21 +131,26 @@ export class LayerControl extends Control {
|
|||
var legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container);
|
||||
//domStyle.set(legendEntryRow, 'display', rowVisibility);
|
||||
//dom.setProperties(legendEntryRow, { style: "display: row-table;" });
|
||||
|
||||
var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;"}, legendEntryRow);
|
||||
let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;"}, legendDataCell);
|
||||
legendDiv.style.backgroundColor = "#" + obj.layer.color;
|
||||
|
||||
var chkDataCell = dom.createDom("td", { "class": "checkboxFive" }, legendEntryRow);
|
||||
var lblDataCell = dom.createDom("td", {}, legendEntryRow);
|
||||
var lblDataCell = dom.createDom("td", {"style": "vertical-align: top;"}, legendEntryRow);
|
||||
|
||||
|
||||
var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
|
||||
input.layerId = util.stamp(obj.layer);
|
||||
domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
|
||||
var chkLabel = dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
|
||||
dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
|
||||
|
||||
//var span = dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell);
|
||||
dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell);
|
||||
//legend entry label
|
||||
var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
|
||||
var _tbody = dom.createDom("tbody", {}, _table);
|
||||
var _tr = dom.createDom("tr", {}, _tbody);
|
||||
var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
|
||||
// var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
|
||||
// var _tbody = dom.createDom("tbody", {}, _table);
|
||||
// var _tr = dom.createDom("tr", {}, _tbody);
|
||||
// var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -86,6 +86,43 @@ export function setProperties(element, properties) {
|
|||
}
|
||||
}
|
||||
|
||||
// @function addClass(el: HTMLElement, name: String)
|
||||
// Adds `name` to the element's class attribute.
|
||||
export function addClass(el, name) {
|
||||
if (el.classList !== undefined) {
|
||||
var classes = util.trim(name).split(/\s+/);
|
||||
for (var i = 0, len = classes.length; i < len; i++) {
|
||||
el.classList.add(classes[i]);
|
||||
}
|
||||
} else if (!hasClass(el, name)) {
|
||||
var className = getClass(el);
|
||||
setClass(el, (className ? className + ' ' : '') + name);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @function setClass(el: HTMLElement, name: String)
|
||||
// Sets the element's class.
|
||||
export function setClass(el, name) {
|
||||
if (el.className.baseVal === undefined) {
|
||||
el.className = name;
|
||||
} else {
|
||||
// in case of SVG element
|
||||
el.className.baseVal = name;
|
||||
}
|
||||
}
|
||||
|
||||
// @function getClass(el: HTMLElement): String
|
||||
// Returns the element's class.
|
||||
export function getClass(el) {
|
||||
// Check if the element is an SVGElementInstance and use the correspondingElement instead
|
||||
// (Required for linked SVG elements in IE11.)
|
||||
if (el.correspondingElement) {
|
||||
el = el.correspondingElement;
|
||||
}
|
||||
return el.className.baseVal === undefined ? el.className : el.className.baseVal;
|
||||
}
|
||||
|
||||
let ATTRIBUTE_MAP = {
|
||||
'cellpadding': 'cellPadding',
|
||||
'cellspacing': 'cellSpacing',
|
||||
|
|
|
|||
|
|
@ -166,3 +166,9 @@ export function hasTouch () {
|
|||
|| window.navigator.msMaxTouchPoints;
|
||||
return isTouchDevice;
|
||||
}
|
||||
|
||||
// @function trim(str: String): String
|
||||
// Compatibility polyfill for [String.prototype.trim](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
|
||||
export function trim(str) {
|
||||
return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
|
||||
}
|
||||
161
src/js/main.js
161
src/js/main.js
|
|
@ -13,6 +13,7 @@ import { LayerControl } from './controls/LayerControl';
|
|||
import { Mesh } from 'three/src/objects/Mesh';
|
||||
import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
|
||||
import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
|
||||
import * as util from './core/utilities';
|
||||
|
||||
import '../css/page.css'; /* style loader will import it */
|
||||
|
||||
|
|
@ -22,6 +23,9 @@ class Application {
|
|||
this.container = container;
|
||||
this.running = false;
|
||||
this.wireframeMode = false;
|
||||
this.canvas;
|
||||
this._canvasImageUrl;
|
||||
this.downloadButton
|
||||
|
||||
this.objects = [];
|
||||
|
||||
|
|
@ -35,7 +39,17 @@ class Application {
|
|||
this._fullWindow = true;
|
||||
}
|
||||
|
||||
// this.canvas = document.querySelector('#imgCanvas');
|
||||
// this.$topTextInput = document.querySelector('#topText');
|
||||
// this.$bottomTextInput = document.querySelector('#bottomText');
|
||||
// this.$imageInput = document.querySelector('#image');
|
||||
this.downloadButton = document.querySelector('#btnDownloadCanvasImage');
|
||||
this.menuIcon = document.querySelector('#menu-icon');
|
||||
this.navigation = document.getElementsByClassName('navigation')[0];
|
||||
// this.addEventListeners();
|
||||
|
||||
this.createScene();
|
||||
this.addEventListeners();
|
||||
}
|
||||
|
||||
createScene() {
|
||||
|
|
@ -49,7 +63,7 @@ class Application {
|
|||
/* Renderer */
|
||||
// var bgcolor = 0xfdfdfd;
|
||||
let bgcolor = 0xfdfdfd;
|
||||
this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
|
||||
this.renderer = new WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
// this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
// document.body.appendChild(this.renderer.domElement);
|
||||
|
|
@ -106,12 +120,14 @@ class Application {
|
|||
// this.map.maxDistance = size*15;
|
||||
|
||||
//add map controls:
|
||||
let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
|
||||
// coordinates.addListener('onPoint', (vector) => {
|
||||
// this.queryMarker.position.set(vector.x, vector.y, vector.z);
|
||||
// // this.queryMarker.updateMatrixWorld();
|
||||
// this.animate();
|
||||
// }, this);
|
||||
if (!util.hasTouch) {
|
||||
let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
|
||||
// coordinates.addListener('onPoint', (vector) => {
|
||||
// this.queryMarker.position.set(vector.x, vector.y, vector.z);
|
||||
// // this.queryMarker.updateMatrixWorld();
|
||||
// this.animate();
|
||||
// }, this);
|
||||
}
|
||||
this.northArrow = new NortArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
|
||||
|
||||
let dxf134Layer = new TinLayer({
|
||||
|
|
@ -145,12 +161,13 @@ class Application {
|
|||
this.map.addLayer(dxf140Layer);
|
||||
|
||||
new LayerControl(this.map.layers, {
|
||||
collapsed: true
|
||||
collapsed: true,
|
||||
parentDiv: 'layer-control-parent-id'
|
||||
}).addTo(this.map);
|
||||
|
||||
|
||||
domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
domEvent.on(window, 'keydown', this.keydown, this);
|
||||
// domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
// domEvent.on(window, 'keydown', this.keydown, this);
|
||||
this.start();
|
||||
}
|
||||
|
||||
|
|
@ -237,6 +254,130 @@ class Application {
|
|||
this.renderer.render(this.scene, this.camera);
|
||||
this.northArrow.animate();
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
|
||||
domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
domEvent.on(window, 'keydown', this.keydown, this);
|
||||
|
||||
// let inputNodes = [this.$topTextInput, this.$bottomTextInput, this.$imageInput];
|
||||
// inputNodes.forEach(element => domEvent.on(element, 'keyup', this.createMeme, this));
|
||||
// //if image is changed
|
||||
// inputNodes.forEach(element => domEvent.on(element, 'change', this.createMeme, this));
|
||||
|
||||
domEvent.on(this.downloadButton, 'click', this.downloadMapImage, this);
|
||||
|
||||
domEvent.on(this.menuIcon, 'click', function (e) {
|
||||
e.preventDefault();
|
||||
this.navigation.classList.toggle("active");
|
||||
}, this);
|
||||
|
||||
var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li span.button'));
|
||||
|
||||
tabButtons.map(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
document.querySelector('li span.active.button').classList.remove('active');
|
||||
button.classList.add('active');
|
||||
|
||||
document.querySelector('.tab-pane.active').classList.remove('active');
|
||||
document.querySelector(button.getAttribute('name')).classList.add('active');
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
downloadMapImage() {
|
||||
// if(!this.$imageInput.files[0]) {
|
||||
// this.$imageInput.parentElement.classList.add('has-error');
|
||||
// return;
|
||||
// }
|
||||
// if(this.$bottomTextInput.value === '') {
|
||||
// this.$imageInput.parentElement.classList.remove('has-error');
|
||||
// this.$bottomTextInput.parentElement.classList.add('has-error');
|
||||
// return;
|
||||
// }
|
||||
// this.$imageInput.parentElement.classList.remove('has-error');
|
||||
// this.$bottomTextInput.parentElement.classList.remove('has-error');
|
||||
|
||||
// const imageSource = this.renderer.domElement.toDataURL('image/png');
|
||||
// const att = document.createAttribute('href');
|
||||
// att.value = imageSource.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
|
||||
// this.downloadButton.setAttributeNode(att);
|
||||
// this.renderer.preserveDrawingBuffer = true;
|
||||
// this.renderer.render(this.scene, this.camera);
|
||||
this.saveCanvasImage(this.renderer.domElement);
|
||||
}
|
||||
|
||||
saveCanvasImage(canvas) {
|
||||
// !HTMLCanvasElement.prototype.toBlob
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement.toBlob
|
||||
// decode the String
|
||||
var binStr = atob(canvas.toDataURL("image/png").split(',')[1]);
|
||||
var len = binStr.length;
|
||||
var arr = new Uint8Array(len);
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
arr[i] = binStr.charCodeAt(i);
|
||||
}
|
||||
|
||||
this.saveBlob(new Blob([arr], { type: "image/png" }));
|
||||
|
||||
|
||||
}
|
||||
|
||||
saveBlob(blob) {
|
||||
// ie
|
||||
if (window.navigator.msSaveBlob !== undefined) {
|
||||
window.navigator.msSaveBlob(blob, filename);
|
||||
//app.popup.hide();
|
||||
}
|
||||
else {
|
||||
// create object url
|
||||
if (this._canvasImageUrl) {
|
||||
URL.revokeObjectURL(this._canvasImageUrl);
|
||||
}
|
||||
this._canvasImageUrl = URL.createObjectURL(blob);
|
||||
// display a link to save the image
|
||||
var e = this.downloadButton;//document.createElement("a");
|
||||
e.href = this._canvasImageUrl;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
createMeme() {
|
||||
let context = this.$canvas.getContext('2d');
|
||||
|
||||
// font size of top and bottom text
|
||||
let fontSize = ((this.canvas.width + this.canvas.height) / 2) * 4 / 100;
|
||||
context.font = `${fontSize}pt sans-serif`;
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'top';
|
||||
|
||||
/**
|
||||
* Stroke Text Style
|
||||
*/
|
||||
context.lineWidth = fontSize / 5;
|
||||
context.strokeStyle = 'black';
|
||||
/**
|
||||
* Fill Text Style
|
||||
*/
|
||||
context.fillStyle = 'white';
|
||||
// Fix lines over M
|
||||
context.lineJoin = 'round';
|
||||
|
||||
// get he value of the top text an dbottom text from the input fields
|
||||
let topText = this.$topTextInput.value.toUpperCase();
|
||||
let bottomText = this.$bottomTextInput.value.toUpperCase();
|
||||
|
||||
// Top Text: first parameter text, second and thir parameters contain location where the text should start rendering
|
||||
context.strokeText(topText, this.canvas.width / 2, this.canvas.height * (5 / 100));
|
||||
context.fillText(topText, this.canvas.width / 2, this.canvas.height * (5 / 100));
|
||||
|
||||
// Bottom Text
|
||||
context.strokeText(bottomText, this.canvas.width / 2, this.canvas.height * (90 / 100));
|
||||
context.fillText(bottomText, this.canvas.width / 2, this.canvas.height * (90 / 100));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var container = document.getElementById("webgl");
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue