diff --git a/GeotiefExplore.code-workspace b/GeotiefExplore.code-workspace
index a1c4782..9f3e9af 100644
--- a/GeotiefExplore.code-workspace
+++ b/GeotiefExplore.code-workspace
@@ -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}/*",
diff --git a/src/css/page.css b/src/css/page.css
index ff3bf33..ecc055b 100644
--- a/src/css/page.css
+++ b/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; }
-
-
-
+ 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 {
+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%;
@@ -76,12 +72,9 @@ overflow-y: scroll
#webgl {
height: auto;
- width: auto;
+ 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;
@@ -126,7 +115,7 @@ overflow-y: scroll
}
.gba-right {
- right: 0;
+ right: 0;
/*right: 5px;*/
}
@@ -138,7 +127,6 @@ overflow-y: scroll
left: 0;
}
-
.gba-right .gba-control {
float: right;
}
@@ -155,282 +143,344 @@ overflow-y: scroll
margin-left: 0px;
}
-
-.gba-control-home span {
+.gba-control-home span {
width: 30px;
- height: 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,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; }
+ 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; }
+ 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; }
-
- /* For devices larger than 400px */
- @media (min-width: 400px) {
+ box-sizing: border-box;
+}
+
+/* For devices larger than 400px */
+
+@media (min-width: 400px) {
.container {
- width: 85%;
- padding: 0; }
- }
+ 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%; }
-
+ 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%; }
-
- }
+ .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 {
- content: "";
- display: table;
- clear: both; }
-
+.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; }
-
+
+.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
+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);
@@ -438,119 +488,114 @@ 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;
- -o-transition: all .15s ease-in-out;
- transition: all .15s ease-in-out;
- user-select: none;
+ 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;
+ background-color: rgba(0, 0, 0, .3);
}
-.header .logo {
- line-height: 1em;
- /* position: absolute;
+.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;
+ -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);
+ /* 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; */
+ 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; */
+ /* 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;
+ display: block;
+ float: left;
+ text-align: center;
+ margin: 0;
}
.navigation ul li a {
- color: #757575;
- background-color: white;
+ color: #757575;
+ background-color: white;
}
.navigation ul li a {
- display: block;
- padding:1em;
- text-decoration: none;
-
+ 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-color: #eee;
+ color: #757575;
+}
/* nav ul li a.current,
nav ul li a:hover {
@@ -558,83 +603,86 @@ 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;
- 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; }
+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; }
+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; }
+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; }
+ width: 100%;
+ box-sizing: border-box;
+}
+
.u-max-full-width {
- max-width: 100%;
- box-sizing: border-box; }
+ max-width: 100%;
+ 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,108 +690,109 @@ 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) {
- .header .navigation {
- /* clear: none;
+@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);
- }
-
+ /* 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;
- }
+ .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;
+ min-height: 390px;
}
ul.tab-nav {
- list-style: none;
- border-bottom: 1px solid #bbb;
- padding-left: 5px;
+ list-style: none;
+ border-bottom: 1px solid #bbb;
+ padding-left: 5px;
}
ul.tab-nav li {
- display: inline;
+ display: inline;
}
ul.tab-nav li span.button {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- margin-bottom: -1px;
- border-bottom: none;
+ 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; */
+ border-bottom: 0.175em solid #fff;
+ border-bottom-color: #00bfffcc;
+ color: #00bfffcc;
+ /* background-color: #6c6e6b; */
}
.tab-nav {
- z-index: 2;
+ z-index: 2;
}
.tab-content .tab-pane {
- display: none;
- /* visibility: hidden; */
+ display: none;
+ /* visibility: hidden; */
}
.tab-content .tab-pane.active {
- display: block;
- /* visibility: visible; */
+ display: block;
+ /* visibility: visible; */
}
\ No newline at end of file
diff --git a/src/js/controls/SliderControl.css b/src/js/controls/SliderControl.css
new file mode 100644
index 0000000..fb8531e
--- /dev/null
+++ b/src/js/controls/SliderControl.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/js/controls/SliderControl.js b/src/js/controls/SliderControl.js
new file mode 100644
index 0000000..d568454
--- /dev/null
+++ b/src/js/controls/SliderControl.js
@@ -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();
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/js/core/EventEmitter.js b/src/js/core/EventEmitter.js
index 46779d3..2eb0153 100644
--- a/src/js/core/EventEmitter.js
+++ b/src/js/core/EventEmitter.js
@@ -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]) {
diff --git a/src/js/core/RangeSlider.css b/src/js/core/RangeSlider.css
new file mode 100644
index 0000000..0d9e053
--- /dev/null
+++ b/src/js/core/RangeSlider.css
@@ -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;
+ }
\ No newline at end of file
diff --git a/src/js/core/RangeSlider.js b/src/js/core/RangeSlider.js
new file mode 100644
index 0000000..9ac52d3
--- /dev/null
+++ b/src/js/core/RangeSlider.js
@@ -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:
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '