From ca1a983665aa250f9a73c097bd0e160ff4fd8dab Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Tue, 5 Jan 2021 15:49:40 +0100 Subject: [PATCH] - 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 --- GeotiefExplore.code-workspace | 1 + src/css/page.css | 971 ++++++++++++++++-------------- src/js/controls/SliderControl.css | 105 ++++ src/js/controls/SliderControl.js | 158 +++++ src/js/core/EventEmitter.js | 4 +- src/js/core/RangeSlider.css | 172 ++++++ src/js/core/RangeSlider.js | 357 +++++++++++ src/js/layer/TinLayer.js | 15 +- src/js/main.js | 3 + 9 files changed, 1318 insertions(+), 468 deletions(-) create mode 100644 src/js/controls/SliderControl.css create mode 100644 src/js/controls/SliderControl.js create mode 100644 src/js/core/RangeSlider.css create mode 100644 src/js/core/RangeSlider.js 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: + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + }, 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 }; \ No newline at end of file diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.js index 93af66e..dab8fa9 100644 --- a/src/js/layer/TinLayer.js +++ b/src/js/layer/TinLayer.js @@ -41,10 +41,15 @@ class TinLayer extends Layer { setVisible(visible) { this.visible = visible; - this.mainMesh.visible = visible; + this.mainMesh.visible = visible; 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(); @@ -95,14 +100,14 @@ class TinLayer extends Layer { async points(geomId) { const url = POINTURL + geomId; - const buffer = await this.request(url); - return this.unpackVertices(buffer); + const buffer = await this.request(url); + return this.unpackVertices(buffer); } async edges(geomId) { const url = EDGEURL + geomId; - const buffer = await this.request(url); - return this.unpackEdges(buffer); + const buffer = await this.request(url); + return this.unpackEdges(buffer); } async request(url) { diff --git a/src/js/main.js b/src/js/main.js index 66e8928..769c0ce 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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);