- TinLayer.js: add scaleZ methode for z-exaggeration
- new RangeSlider.js and RangeSlider.css - new SliderControl.js and SliderControl.css - small changes in EventEmitter.js - change GetiefExplore.code-workspace for debugging - document formating for page.css
This commit is contained in:
Arno Kaimbacher
parent
8b57f1dcb8
commit
ca1a983665
|
|
@ -18,6 +18,7 @@
|
|||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"breakOnLoad": true,
|
||||
"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
|
||||
// "sourceMapPathOverrides": {
|
||||
// "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
|
||||
// "webpack:///./*": "${workspaceFolder}/*",
|
||||
|
|
|
|||
601
src/css/page.css
601
src/css/page.css
|
|
@ -1,5 +1,4 @@
|
|||
@import "../../node_modules/normalize.css/normalize.css";
|
||||
|
||||
/* html, body
|
||||
{
|
||||
height: 100%;
|
||||
|
|
@ -9,66 +8,63 @@
|
|||
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; }
|
||||
|
||||
|
||||
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* body {
|
||||
padding-top: 65px;
|
||||
} */
|
||||
|
||||
section {
|
||||
section {
|
||||
text-align: left;
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
.main {
|
||||
}
|
||||
|
||||
.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 {
|
||||
/* 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 {
|
||||
.input-area {
|
||||
/* flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; */
|
||||
/* margin: 10px; */
|
||||
}
|
||||
}
|
||||
|
||||
.btnDownloadMeme {
|
||||
.btnDownloadMeme {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#div-map {
|
||||
#div-map {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -79,9 +75,6 @@ overflow-y: scroll
|
|||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mapDesktop {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
|
@ -101,11 +94,8 @@ overflow-y: scroll
|
|||
/*background-color:lightcyan;*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.gba-control {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
|
|
@ -114,8 +104,7 @@ overflow-y: scroll
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.gba-top,
|
||||
.gba-bottom {
|
||||
.gba-top, .gba-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
|
|
@ -138,7 +127,6 @@ overflow-y: scroll
|
|||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.gba-right .gba-control {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -155,7 +143,6 @@ overflow-y: scroll
|
|||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
.gba-control-home span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -165,156 +152,241 @@ overflow-y: scroll
|
|||
user-select: none;
|
||||
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*/;
|
||||
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*/
|
||||
;
|
||||
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; }
|
||||
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; }
|
||||
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; }
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
color: #1EAEDB;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
color: #0FA0CE;
|
||||
}
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.column, .columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
/* For devices larger than 400px */
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
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%; }
|
||||
|
||||
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
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
|
||||
.container:after, .row:after, .u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
|
||||
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
|
|
@ -331,106 +403,84 @@ input[type="button"] {
|
|||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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; }
|
||||
|
||||
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 {
|
||||
|
||||
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 */
|
||||
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; }
|
||||
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 {
|
||||
|
||||
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; }
|
||||
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 {
|
||||
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 {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
label, legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
label>.label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* =Navigation
|
||||
/* =Navigation
|
||||
-------- */
|
||||
|
||||
/* .header {
|
||||
background-color: #fff;
|
||||
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
|
||||
|
|
@ -438,20 +488,20 @@ label > .label-body {
|
|||
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;
|
||||
|
|
@ -461,8 +511,9 @@ label > .label-body {
|
|||
}
|
||||
|
||||
.header .menu-icon.active {
|
||||
background-color: rgba(0,0,0, .3);
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.header .menu-icon:hover {
|
||||
color: #222;
|
||||
background-color: transparent;
|
||||
|
|
@ -481,8 +532,6 @@ label > .label-body {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navigation.active {
|
||||
/* make visible visible */
|
||||
-webkit-transform: translateX(0);
|
||||
|
|
@ -494,18 +543,16 @@ label > .label-body {
|
|||
|
||||
.navigation {
|
||||
position: fixed;
|
||||
|
||||
top: 0; left: 0; bottom: none;
|
||||
|
||||
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;
|
||||
|
|
@ -520,13 +567,13 @@ label > .label-body {
|
|||
|
||||
.navigation ul {
|
||||
/* display:none; */
|
||||
width:100%;
|
||||
list-style:none;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
|
||||
padding: 0;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.header ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
|
|
@ -541,13 +588,11 @@ label > .label-body {
|
|||
|
||||
.navigation ul li a {
|
||||
display: block;
|
||||
padding:1em;
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
nav ul li a.current,
|
||||
nav ul li a:hover {
|
||||
nav ul li a.current, nav ul li a:hover {
|
||||
background-color: #eee;
|
||||
color: #757575;
|
||||
}
|
||||
|
|
@ -558,14 +603,14 @@ nav ul li a:hover {
|
|||
} */
|
||||
|
||||
/* Float right the list item that should be right aligned */
|
||||
.navigation ul li.right { float: right; }
|
||||
|
||||
|
||||
|
||||
|
||||
.navigation ul li.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
|
|
@ -573,68 +618,71 @@ code {
|
|||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
|
||||
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; }
|
||||
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; }
|
||||
|
||||
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; }
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
float: right;
|
||||
}
|
||||
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Media Queries
|
||||
/* 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
|
||||
|
|
@ -642,16 +690,17 @@ on small devices, paste the mobile query code up in the buttons section and styl
|
|||
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) {
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.header .navigation {
|
||||
/* clear: none;
|
||||
float: right;
|
||||
|
|
@ -663,15 +712,15 @@ there.
|
|||
-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; */
|
||||
|
|
@ -689,8 +738,6 @@ there.
|
|||
.header .navigation {
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
.navigation ul li:hover ul {
|
||||
border: none;
|
||||
|
|
@ -701,9 +748,11 @@ there.
|
|||
}
|
||||
|
||||
/* Larger than desktop */
|
||||
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
|
||||
@media (min-width: 1200px) {}
|
||||
|
||||
.tab-content {
|
||||
|
|
|
|||
105
src/js/controls/SliderControl.css
Normal file
105
src/js/controls/SliderControl.css
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
.gba-control-slider {
|
||||
background: none repeat scroll 0 0 #FFF;
|
||||
}
|
||||
|
||||
.gba-control-slider.vertical {
|
||||
width: 26px;
|
||||
height: 100%;
|
||||
/* background-color: azure; */
|
||||
}
|
||||
|
||||
.gba-control-slider.horizontal {
|
||||
height: 26px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.gba-control-slider .leaflet-range-icon {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQogICAgPHBhdGggZD0iTTE1IDE3djJoMnYtMmgydi0yaC0ydi0yaC0ydjJoLTJ2Mmgyem01LTE1SDRjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTZjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnpNNSA1aDZ2Mkg1VjV6bTE1IDE1SDRMMjAgNHYxNnoiLz4NCjwvc3ZnPg==');
|
||||
}
|
||||
|
||||
.gba-control-slider input[type=range] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
z-index: 200;
|
||||
width: 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
background-color: #e6e6e6;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
|
||||
background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
|
||||
background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
|
||||
background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
|
||||
background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
|
||||
}
|
||||
|
||||
.gba-control-slider input[type=range][orient=horizontal] {
|
||||
margin-top: 5px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.gba-control-slider input[type=range][orient=vertical] {
|
||||
height: 150px;
|
||||
/* writing-mode: bt-lr; */
|
||||
|
||||
/*
|
||||
* -webkit-appearance is non-standard and may break in the future:
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
|
||||
* However, for now it's the only way to get a vertical range input on Chrome.
|
||||
*/
|
||||
/* -webkit-appearance: slider-vertical; */
|
||||
|
||||
writing-mode: bt-lr; /* IE */
|
||||
-webkit-appearance: slider-vertical; /* WebKit */
|
||||
|
||||
/* -webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg) */
|
||||
}
|
||||
|
||||
input[type=range].range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #FF0000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range].round {
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* .gba-control-slider span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAAAAeW/F+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeUlEQVQoz8XTIQ6AMAyF4d3/BrUkSA6CRcAJJoYYDgX5ESxhoi1goPZL9rp2C+JW+Ip3lzOLwz0w2AxAazFn2dmJ5LUWiQ8YqhyVRaR0ofGlGleqt8Ydl1NUrtIVLsq7e2eyPbUVgM1fqD3zBuiclYxM7lOcf/wGSh2kFUcUTGKFMQAAAABJRU5ErkJggg==');
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
} */
|
||||
|
||||
/*paragraph for showing the value*/
|
||||
.gba-control-slider p.gba-control-slider-value {
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
display: none;
|
||||
}
|
||||
158
src/js/controls/SliderControl.js
Normal file
158
src/js/controls/SliderControl.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import { Control } from "./Control";
|
||||
import * as dom from '../core/domUtil';
|
||||
import * as util from '../core/utilities';
|
||||
import * as domEvent from '../core/domEvent';
|
||||
import { RangeSlider } from '../core/RangeSlider';
|
||||
|
||||
import './SliderControl.css';
|
||||
|
||||
export class SliderControl extends Control {
|
||||
|
||||
options = {
|
||||
size: '100px',
|
||||
position: 'topright',
|
||||
min: 1,
|
||||
max: 5,
|
||||
step: 0.5,
|
||||
id: "slider",
|
||||
value: 1,
|
||||
collapsed: false,
|
||||
title: 'Z Slider',
|
||||
orientation: 'vertical',
|
||||
showValue: true,
|
||||
syncSlider: false,
|
||||
iconClass: 'leaflet-range-icon',
|
||||
icon: true
|
||||
};
|
||||
map;
|
||||
|
||||
constructor(options) {
|
||||
super(options);
|
||||
|
||||
util.setOptions(this, options);
|
||||
}
|
||||
|
||||
onAdd(map) {
|
||||
this.map = map;
|
||||
let container = this._container = this._initLayout();
|
||||
//this.update(this.options.value + "");
|
||||
return container;
|
||||
}
|
||||
|
||||
_initLayout() {
|
||||
|
||||
var className = 'gba-control-slider';
|
||||
var className2 = className + ' ' + this.options.orientation;
|
||||
//this._container = domUtil.create('div', className + ' ' + className + '-' + this.options.orientation);
|
||||
let container = this._container = dom.createDom("div", { "class": className2 });
|
||||
|
||||
///////////////// der eigentliche Button
|
||||
//this._sliderLink = domUtil.create('a', className + '-toggle', this._container);
|
||||
//this._sliderLink.setAttribute("title", this.options.title);
|
||||
//this._sliderLink.innerHTML = this.options.logo;
|
||||
this._sliderLink = dom.createDom("span", { "class": className + "-toggle", title: this.options.title }, container);
|
||||
|
||||
//if (this.options.showValue) {
|
||||
// this._sliderValue = L.DomUtil.create('p', className + '-value', this._container);
|
||||
// this._sliderValue.innerHTML = this.options.getValue(this.options.value);
|
||||
//}
|
||||
//show value
|
||||
this._sliderValue = dom.createDom("p", { "class": className + "-value", innerHTML: this.options.value }, container);
|
||||
|
||||
//if (this.options.increment) {
|
||||
// this._plus = L.DomUtil.create('a', className + '-plus', this._container);
|
||||
// this._plus.innerHTML = "+";
|
||||
// L.DomEvent.on(this._plus, 'click', this._increment, this);
|
||||
// L.DomUtil.addClass(this._container, 'leaflet-control-slider-incdec');
|
||||
//}
|
||||
|
||||
//this._sliderContainer = L.DomUtil.create('div', 'leaflet-slider-container', this._container);
|
||||
this._sliderContainer = dom.createDom('div', { "class": 'gba-slider-container' }, container);
|
||||
|
||||
// this.slider = dom.createDom('input', { "class": 'gba-slider round' }, this._sliderContainer);
|
||||
// if (this.options.orientation === 'vertical') { this.slider.setAttribute("orient", "vertical"); }
|
||||
// this.slider.setAttribute("title", this.options.title);
|
||||
// this.slider.setAttribute("id", this.options.id);
|
||||
// this.slider.setAttribute("type", "range");
|
||||
// this.slider.setAttribute("min", this.options.min);
|
||||
// this.slider.setAttribute("max", this.options.max);
|
||||
// this.slider.setAttribute("step", this.options.step);
|
||||
// this.slider.setAttribute("value", this.options.value);
|
||||
|
||||
this.slider = new RangeSlider(this._sliderContainer, {
|
||||
orientation: "vertical",
|
||||
value: 1,
|
||||
max: 5, min: 1,
|
||||
inverse: true,
|
||||
id: "z-slider"
|
||||
});
|
||||
|
||||
//if (this.options.syncSlider) {
|
||||
// L.DomEvent.on(this.slider, "input", function (e) {
|
||||
// this._updateValue();
|
||||
// }, this);
|
||||
//} else {
|
||||
// L.DomEvent.on(this.slider, "change", function (e) {
|
||||
// this._updateValue();
|
||||
// }, this);
|
||||
//}
|
||||
// domEvent.on(this.slider, "change", this._updateValue, this);
|
||||
|
||||
this.slider.addListener('slide', this._updateValue, this);
|
||||
|
||||
//if (this.options.increment) {
|
||||
// this._minus = L.DomUtil.create('a', className + '-minus', this._container);
|
||||
// this._minus.innerHTML = "-";
|
||||
// L.DomEvent.on(this._minus, 'click', this._decrement, this);
|
||||
//}
|
||||
|
||||
// if (this.options.showValue) {
|
||||
// if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation === 'vertical') {
|
||||
// this.slider.style.width = (this.options.size.replace('px', '') - 36) + 'px';
|
||||
// this._sliderContainer.style.height = (this.options.size.replace('px', '') - 36) + 'px';
|
||||
// }
|
||||
// else if (this.options.orientation === 'vertical') {
|
||||
// this._sliderContainer.style.height = (this.options.size.replace('px', '') - 36) + 'px';
|
||||
// }
|
||||
// else {
|
||||
// this._sliderContainer.style.width = (this.options.size.replace('px', '') - 25) + 'px';
|
||||
// }
|
||||
// }
|
||||
//else {
|
||||
// if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation == 'vertical') { this.slider.style.width = (this.options.size.replace('px', '') - 10) + 'px'; this._sliderContainer.style.height = (this.options.size.replace('px', '') - 10) + 'px'; }
|
||||
// else if (this.options.orientation == 'vertical') { this._sliderContainer.style.height = (this.options.size.replace('px', '') - 10) + 'px'; }
|
||||
// else { this._sliderContainer.style.width = (this.options.size.replace('px', '') - 25) + 'px'; }
|
||||
//}
|
||||
|
||||
//L.DomEvent.disableClickPropagation(this._container);
|
||||
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
_updateValue(e) {
|
||||
this.value = e.value;//this.slider.value;
|
||||
if (this.options.showValue) {
|
||||
this._sliderValue.innerHTML = this.value;
|
||||
}
|
||||
//this.options.layers[0].scaleZ(this.value);
|
||||
//this.update(this.value);
|
||||
|
||||
//this.options.layers.forEach(function (layer) {
|
||||
// layer.scaleZ(this.value);
|
||||
//},this);
|
||||
//this._map._layers.forEach(function (layer) {
|
||||
// layer.scaleZ(this.value);
|
||||
//},this);
|
||||
for (var prop in this._map._layers) {
|
||||
if (this._map._layers.hasOwnProperty(prop)) {
|
||||
var layer = this._map._layers[prop];
|
||||
// if (layer.declaredClass === "GridLayer" || layer.declaredClass === "DxfLayer" || layer.declaredClass === "DemLayer")
|
||||
layer.scaleZ(this.value);
|
||||
}
|
||||
}
|
||||
this._map.update();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -159,9 +159,9 @@ class EventEmitter {
|
|||
return this;
|
||||
}
|
||||
|
||||
var event = util.extend({}, data, { type: type, target: this });
|
||||
let event = util.extend({}, data, { type: type, target: this });
|
||||
|
||||
var events = this[eventsKey],
|
||||
let events = this[eventsKey],
|
||||
listeners, i, len, typeIndex, contextId;
|
||||
|
||||
if (events[type]) {
|
||||
|
|
|
|||
172
src/js/core/RangeSlider.css
Normal file
172
src/js/core/RangeSlider.css
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/* .range-slider-track .dragger {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: inherit;
|
||||
border: none;
|
||||
height: inherit;
|
||||
width: 14px;
|
||||
border-radius: 5%;
|
||||
background: #333;
|
||||
} */
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider.slider-vertical {
|
||||
height: 160px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.slider.slider-vertical .range-slider-track {
|
||||
cursor: pointer;
|
||||
/* cursor: pointer; */
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
/* margin-left: -5px; */
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius:0%;
|
||||
}
|
||||
|
||||
/* .slider-vertical .range-slider-track:before {
|
||||
top: 0;
|
||||
right: auto;
|
||||
left: 9px;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
.slider.slider-vertical .slider-handle {
|
||||
margin-left: -10px;
|
||||
/* margin-top: -10px; */
|
||||
}
|
||||
.slider.slider-vertical .slider-handle.triangle {
|
||||
border-width: 10px 0 10px 10px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: #0480be;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}*/
|
||||
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal .range-slider-track {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.slider.slider-horizontal .slider-selection {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal .slider-handle {
|
||||
margin-left: -10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.range-slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-color: #333;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
/*.slider.slider-horizontal .slider-handle.triangle {
|
||||
border-width: 0 10px 10px 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom-color: #0480be;
|
||||
margin-top: 0;
|
||||
}*/
|
||||
|
||||
|
||||
.slider input {
|
||||
display: none;
|
||||
}
|
||||
.slider .tooltip-inner {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
background-image: -moz-linear-gradient(top, #808080, rgba(0, 0, 0, 0.15));
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from( #808080), to(#f9f9f9));
|
||||
background-image: -webkit-linear-gradient(top, #808080, #f9f9f9);
|
||||
background-image: -o-linear-gradient(top, #808080, #f9f9f9);
|
||||
background-image: linear-gradient(to bottom, #808080, #f9f9f9);
|
||||
background-repeat: repeat-x;
|
||||
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#fff9f9f9', GradientType=0); */
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
/* background-color: #0e90d2; */
|
||||
background-color:black;
|
||||
/* background-image: -moz-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
|
||||
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: -o-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: linear-gradient(to bottom, #149bdf, #0480be);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); */
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
opacity: 0.8;
|
||||
border: 0 solid transparent;
|
||||
}
|
||||
|
||||
.slider-handle.round {
|
||||
/* border-radius: 20px; */
|
||||
}
|
||||
|
||||
.slider-handle.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
357
src/js/core/RangeSlider.js
Normal file
357
src/js/core/RangeSlider.js
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
import { EventEmitter } from './EventEmitter';
|
||||
import * as dom from '../core/domUtil';
|
||||
import * as util from '../core/utilities';
|
||||
import * as domEvent from '../core/domEvent';
|
||||
|
||||
import './RangeSlider.css';
|
||||
|
||||
class RangeSlider extends EventEmitter {
|
||||
|
||||
over = false;
|
||||
inDrag = false;
|
||||
|
||||
options = {
|
||||
value: 0, // set default value on initiation from `0` to `100` (percentage based)
|
||||
vertical: false, // vertical or horizontal?
|
||||
orientation: "horizontal",
|
||||
rangeClass: "", // add extra custom class for the range slider track
|
||||
draggerClass: "",// add extra custom class for the range slider dragger
|
||||
//min: -50,
|
||||
//max: 50,
|
||||
selection: 'before',
|
||||
tooltip: 'show',
|
||||
handle: 'round',
|
||||
step: 1
|
||||
};
|
||||
|
||||
constructor(elem, options) {
|
||||
super();
|
||||
|
||||
util.setOptions(this, options);
|
||||
this.value = this.options.value;
|
||||
|
||||
this.element = elem;
|
||||
|
||||
//this._initLayout();
|
||||
this.picker = dom.createDom("div", {
|
||||
"class": 'slider', innerHTML:
|
||||
'<div class="range-slider-track">' +
|
||||
'<div class="slider-selection"></div>' +
|
||||
'<div class="slider-handle"></div>' +
|
||||
'<div class="slider-handle"></div>' +
|
||||
'</div>' +
|
||||
'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
|
||||
}, this.element);
|
||||
|
||||
this.id = this.options.id;
|
||||
// var tooltip = this.options.tooltip;
|
||||
this.tooltip = this.picker.getElementsByClassName('tooltip')[0];
|
||||
this.tooltipInner = this.tooltip.getElementsByClassName('tooltip-inner')[0];
|
||||
this.sliderTrack = this.picker.getElementsByClassName('range-slider-track')[0];
|
||||
|
||||
this.orientation = this.options.orientation;
|
||||
|
||||
if (this.orientation === "horizontal") {
|
||||
dom.addClass(this.picker, "slider-horizontal");
|
||||
//.addClass('slider-horizontal')
|
||||
//.css('width', this.element.outerWidth());
|
||||
//$(this.picker).css('width', $(this.element).outerWidth());
|
||||
//this.picker.style.width = this.element['offsetWidth'] + 'px';
|
||||
this.orientation = 'horizontal';
|
||||
this.stylePos = 'left';
|
||||
this.mousePos = 'pageX';
|
||||
this.sizePos = 'offsetWidth';
|
||||
//this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
|
||||
dom.addClass(this.tooltip, "top");
|
||||
this.tooltip.style.top = -this.tooltip['offsetHeight'] - 14 + 'px';
|
||||
} else {
|
||||
dom.addClass(this.picker, "slider-vertical");
|
||||
this.stylePos = 'top';
|
||||
this.mousePos = 'pageY';
|
||||
this.sizePos = 'offsetHeight';
|
||||
// this.tooltip.addClass('right')[0].style.left = '100%';
|
||||
dom.addClass(this.tooltip, "right");
|
||||
this.tooltip.style.left = "100%";
|
||||
}
|
||||
|
||||
this.min = this.options.min;
|
||||
this.max = this.options.max;
|
||||
this.step = this.options.step;
|
||||
this.value = this.options.value;
|
||||
//if (this.value[1]) {
|
||||
// this.range = true;
|
||||
//}
|
||||
|
||||
this.selection = this.options.selection;
|
||||
this.selectionEl = this.picker.getElementsByClassName('slider-selection')[0];
|
||||
if (this.selection === 'none') {
|
||||
//this.selectionEl.addClass('hide');
|
||||
dom.addClass(this.selectionEl, "hide");
|
||||
}
|
||||
this.selectionElStyle = this.selectionEl.style;
|
||||
|
||||
this.handle1 = this.picker.getElementsByClassName('slider-handle')[0];
|
||||
this.handle1Stype = this.handle1.style;
|
||||
this.handle2 = this.picker.getElementsByClassName('slider-handle')[1];
|
||||
this.handle2Stype = this.handle2.style;
|
||||
|
||||
var handle = this.options.handle;
|
||||
switch (handle) {
|
||||
case 'round':
|
||||
dom.addClass(this.handle1, "round");
|
||||
dom.addClass(this.handle2, "round");
|
||||
break;
|
||||
case 'triangle':
|
||||
dom.addClass(this.handle1, "triangle");
|
||||
dom.addClass(this.handle2, "triangle");
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.range) {
|
||||
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
|
||||
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
|
||||
}
|
||||
{
|
||||
this.value = [Math.max(this.min, Math.min(this.max, this.value))];
|
||||
//this.handle2.addClass('hide');
|
||||
dom.addClass(this.handle2, "hide");
|
||||
if (this.selection === 'after') {
|
||||
this.value[1] = this.max;
|
||||
} else {
|
||||
this.value[1] = this.min;
|
||||
}
|
||||
}
|
||||
|
||||
this.diff = this.max - this.min;
|
||||
this.percentage = [
|
||||
(this.value[0] - this.min) * 100 / this.diff,
|
||||
(this.value[1] - this.min) * 100 / this.diff,
|
||||
this.step * 100 / this.diff
|
||||
];
|
||||
|
||||
//this.offset = this.picker.offset();
|
||||
// this.offset = $(this.picker).offset();
|
||||
this.offset = this._getOffset(this.picker);
|
||||
|
||||
this.size = this.picker[this.sizePos];
|
||||
|
||||
//this.formater = options.formater;
|
||||
|
||||
this.layout();
|
||||
|
||||
domEvent.on(this.picker, "mousedown", this.mousedown, this);
|
||||
dom.addClass(this.tooltip, "hide");
|
||||
}
|
||||
|
||||
layout() {
|
||||
this.handle1Stype[this.stylePos] = this.percentage[0] + '%';
|
||||
//this.handle2Stype[this.stylePos] = this.percentage[1] + '%';
|
||||
|
||||
if (this.orientation == 'vertical') {
|
||||
this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) + '%';
|
||||
this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) + '%';
|
||||
} else {
|
||||
this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) + '%';
|
||||
this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) + '%';
|
||||
}
|
||||
|
||||
//if (this.range) {
|
||||
// this.tooltipInner.text(
|
||||
// this.formater(this.value[0]) +
|
||||
// ' : ' +
|
||||
// this.formater(this.value[1])
|
||||
// );
|
||||
// this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0]) / 2) / 100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight() / 2 : this.tooltip.outerWidth() / 2) + 'px';
|
||||
//} else {
|
||||
// this.tooltipInner.text(
|
||||
// this.formater(this.value[0])
|
||||
// );
|
||||
// this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0] / 100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight() / 2 : this.tooltip.outerWidth() / 2) + 'px';
|
||||
//}
|
||||
}
|
||||
|
||||
_getOffset(element) {
|
||||
if (!element.getClientRects().length) {
|
||||
return { top: 0, left: 0 };
|
||||
}
|
||||
|
||||
let rect = element.getBoundingClientRect();
|
||||
let win = element.ownerDocument.defaultView;
|
||||
return (
|
||||
{
|
||||
top: rect.top + win.pageYOffset,
|
||||
left: rect.left + win.pageXOffset
|
||||
});
|
||||
}
|
||||
|
||||
mousedown(ev) {
|
||||
|
||||
// Touch: Get the original event:
|
||||
if (this.touchCapable && ev.type === 'touchstart') {
|
||||
ev = ev.originalEvent;
|
||||
}
|
||||
|
||||
//this.offset = this.picker.offset();
|
||||
// this.offset = $(this.picker).offset();
|
||||
this.offset = this._getOffset(this.picker);
|
||||
|
||||
this.size = this.picker[this.sizePos];
|
||||
|
||||
let percentage = this.getPercentage(ev);
|
||||
|
||||
if (this.range) {
|
||||
// var diff1 = Math.abs(this.percentage[0] - percentage);
|
||||
// var diff2 = Math.abs(this.percentage[1] - percentage);
|
||||
// this.dragged = (diff1 < diff2) ? 0 : 1;
|
||||
}
|
||||
else {
|
||||
this.dragged = 0;
|
||||
}
|
||||
|
||||
this.percentage[this.dragged] = percentage;
|
||||
this.layout();
|
||||
|
||||
domEvent.on(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.on(this.picker, 'mouseup', this.mouseup, this);
|
||||
domEvent.on(this.picker, 'mouseleave', this.onMouseLeave, this);
|
||||
|
||||
this.inDrag = true;
|
||||
let value = this.calculateValue();
|
||||
//if (this.options.inverse === true) {
|
||||
// val = val * -1;
|
||||
//}
|
||||
|
||||
this.emit("slide", { value: value });
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
mousemove(ev) {
|
||||
this.handle1.style.cursor = "grab";
|
||||
this.sliderTrack.style.cursor = "grab";
|
||||
|
||||
// Touch: Get the original event:
|
||||
if (this.touchCapable && ev.type === 'touchmove') {
|
||||
ev = ev.originalEvent;
|
||||
}
|
||||
|
||||
let percentage = this.getPercentage(ev);
|
||||
// if (this.range) {
|
||||
// if (this.dragged === 0 && this.percentage[1] < percentage) {
|
||||
// this.percentage[0] = this.percentage[1];
|
||||
// this.dragged = 1;
|
||||
// } else if (this.dragged === 1 && this.percentage[0] > percentage) {
|
||||
// this.percentage[1] = this.percentage[0];
|
||||
// this.dragged = 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// this.percentage[this.dragged] = percentage;
|
||||
if (this.percentage[this.dragged] != percentage) {
|
||||
this.percentage[this.dragged] = percentage;
|
||||
this.layout();
|
||||
let value = this.calculateValue();
|
||||
this.emit("slide", { value: value });
|
||||
}
|
||||
//if (this.options.inverse === true) {
|
||||
// val = val * -1;
|
||||
//}
|
||||
|
||||
// this.layout();
|
||||
// let value = this.calculateValue();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
mouseup(ev) {
|
||||
this.handle1.style.cursor = "pointer";
|
||||
this.sliderTrack.style.cursor = "pointer";
|
||||
|
||||
domEvent.off(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.off(this.picker, 'mouseup', this.mouseup, this);
|
||||
domEvent.off(this.picker, 'mouseleave', this.onMouseLeave, this);
|
||||
|
||||
this.inDrag = false;
|
||||
//if (this.over == false) {
|
||||
// this.hideTooltip();
|
||||
//}
|
||||
this.element;
|
||||
let value = this.calculateValue();
|
||||
this.emit('onChange', { value: value, status: 'ok'});
|
||||
return false;
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
this.handle1.style.cursor = "pointer";
|
||||
this.sliderTrack.style.cursor = "pointer";
|
||||
|
||||
domEvent.off(this.picker, "mousemove", this.mousemove, this);
|
||||
domEvent.off(this.picker, 'mouseup', this.mouseup, this);
|
||||
domEvent.off(this.picker, 'mouseleave', this.onMouseLeave, this);
|
||||
|
||||
this.inDrag = false;
|
||||
|
||||
//also change border geometry
|
||||
let value = this.calculateValue();
|
||||
this.emit('onChange', { value: value, status: 'ok'});
|
||||
}
|
||||
|
||||
calculateValue() {
|
||||
var val;
|
||||
if (this.range) {
|
||||
val = [
|
||||
(this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step),
|
||||
(this.min + Math.round((this.diff * this.percentage[1] / 100) / this.step) * this.step)
|
||||
];
|
||||
this.value = val;
|
||||
} else {
|
||||
val = (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step);
|
||||
this.value = [val, this.value[1]];
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
getPercentage(ev) {
|
||||
if (this.touchCapable) {
|
||||
ev = ev.touches[0];
|
||||
}
|
||||
var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
|
||||
percentage = Math.round(percentage / this.percentage[2]) * this.percentage[2];
|
||||
return Math.max(0, Math.min(100, percentage));
|
||||
}
|
||||
|
||||
getValue() {
|
||||
if (this.range) {
|
||||
return this.value;
|
||||
}
|
||||
return this.value[0];
|
||||
}
|
||||
|
||||
setValue(val) {
|
||||
this.value = val;
|
||||
|
||||
if (this.range) {
|
||||
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
|
||||
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
|
||||
} else {
|
||||
this.value = [Math.max(this.min, Math.min(this.max, this.value))];
|
||||
this.handle2.addClass('hide');
|
||||
if (this.selection === 'after') {
|
||||
this.value[1] = this.max;
|
||||
} else {
|
||||
this.value[1] = this.min;
|
||||
}
|
||||
}
|
||||
this.diff = this.max - this.min;
|
||||
this.percentage = [
|
||||
(this.value[0] - this.min) * 100 / this.diff,
|
||||
(this.value[1] - this.min) * 100 / this.diff,
|
||||
this.step * 100 / this.diff
|
||||
];
|
||||
this.layout();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { RangeSlider };
|
||||
|
|
@ -45,6 +45,11 @@ class TinLayer extends Layer {
|
|||
this.emit('visibility-change');
|
||||
}
|
||||
|
||||
scaleZ(z) {
|
||||
this.mainMesh.scale.z = z;
|
||||
//this.objectGroup.scale.z = z;
|
||||
}
|
||||
|
||||
async onAdd(map) {
|
||||
await this.build(this.getScene());
|
||||
map.update();
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import * as domEvent from './core/domEvent';
|
|||
import { Coordinates } from './controls/Coordinates';
|
||||
import { NortArrow } from './controls/NorthArrow';
|
||||
import { LayerControl } from './controls/LayerControl';
|
||||
import { SliderControl } from './controls/SliderControl';
|
||||
import { Mesh } from 'three/src/objects/Mesh';
|
||||
import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
|
||||
import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
|
||||
|
|
@ -165,6 +166,8 @@ class Application {
|
|||
parentDiv: 'layer-control-parent-id'
|
||||
}).addTo(this.map);
|
||||
|
||||
//slider for scaling z value
|
||||
this.slider = new SliderControl({ layers: this.map.layers }).addTo(this.map);
|
||||
|
||||
// domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
// domEvent.on(window, 'keydown', this.keydown, this);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user