From 4f34cc6ab21367729926daab9ceae249a1262ce8 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 15 Apr 2021 18:06:58 +0200 Subject: [PATCH] - add BoreholePopup into analysis tab - add click propgations for several ui controls - begin with typescript modules via babel 7 - add babel typescript module - npm updates --- .babelrc | 7 +- index.html | 16 ++- package-lock.json | 145 ++++++++++++++----- package.json | 2 + src/css/page_bulma.scss | 4 + src/js/controls/BasemapControl.js | 48 ++----- src/js/controls/BoreholeControl.js | 3 + src/js/controls/BoreholePopup.css | 47 +++---- src/js/controls/BoreholePopup.js | 185 ------------------------ src/js/controls/BoreholePopup.ts | 219 +++++++++++++++++++++++++++++ src/js/controls/Control.js | 2 +- src/js/controls/HomeButton.js | 11 +- src/js/controls/LayerControl.js | 2 +- src/js/controls/ZoomControl.js | 11 +- src/js/core/Map.js | 2 +- src/js/core/domEvent.js | 39 +++-- src/js/main.js | 4 +- webpack.config.js | 17 ++- 18 files changed, 442 insertions(+), 322 deletions(-) delete mode 100644 src/js/controls/BoreholePopup.js create mode 100644 src/js/controls/BoreholePopup.ts diff --git a/.babelrc b/.babelrc index 4d4ddcc..3836f5a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,12 @@ { + "presets": [ + "@babel/preset-env", + "@babel/preset-typescript" + ], "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }], - ["@babel/plugin-transform-runtime", { "regenerator": true }] + ["@babel/plugin-transform-runtime", { "regenerator": true }], + "@babel/proposal-object-rest-spread" ] } \ No newline at end of file diff --git a/index.html b/index.html index 9b8f94b..f42a748 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,9 @@ About + + Download Map + Contact @@ -151,8 +154,7 @@
-
Download Map Image
- +
Functions
@@ -190,6 +192,14 @@
+ +
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json index 972b537..fa1c776 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,8 +20,10 @@ "@babel/core": "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-decorators": "^7.13.5", + "@babel/plugin-proposal-object-rest-spread": "^7.13.8", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.7", + "@babel/preset-typescript": "^7.13.0", "babel-loader": "^8.2.1", "concurrently": "^6.0.0", "css-loader": "^5.0.1", @@ -735,6 +737,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-syntax-typescript": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz", + "integrity": "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.12.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-arrow-functions": { "version": "7.13.0", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz", @@ -1135,6 +1149,20 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-typescript": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz", + "integrity": "sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==", + "dev": true, + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.13.0", + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/plugin-syntax-typescript": "^7.12.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-unicode-escapes": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz", @@ -1256,6 +1284,20 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-typescript": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz", + "integrity": "sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/helper-validator-option": "^7.12.17", + "@babel/plugin-transform-typescript": "^7.13.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/runtime": { "version": "7.13.10", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", @@ -1360,9 +1402,9 @@ } }, "node_modules/@types/eslint": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz", - "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==", + "version": "7.2.10", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz", + "integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==", "dev": true, "dependencies": { "@types/estree": "*", @@ -1410,9 +1452,9 @@ "peer": true }, "node_modules/@types/node": { - "version": "14.14.37", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz", - "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==", + "version": "14.14.39", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.39.tgz", + "integrity": "sha512-Qipn7rfTxGEDqZiezH+wxqWYR8vcXq5LRpZrETD19Gs4o8LbklbmqotSUsMU+s5G3PJwMRDfNEYoxrcBwIxOuw==", "dev": true }, "node_modules/@types/normalize-package-data": { @@ -2513,9 +2555,9 @@ } }, "node_modules/date-fns": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.3.tgz", - "integrity": "sha512-BbiJSlfmr1Fnfi1OHY8arklKdwtZ9n3NkjCeK8G9gtEe0ZSUwJuwHc6gYBl0uoC0Oa5RdpJV1gBBdXcZi8Efdw==", + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.0.tgz", + "integrity": "sha512-lbAFpaKz7QuVxm6m1rmioh4BB2gmLx1r1JMYXU2A/ufT5ly4zEG7HYH4fvS/QfbdyC5rkYyiS30mYz4Q7XCO+w==", "dev": true, "engines": { "node": ">=0.11" @@ -2620,9 +2662,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.715", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz", - "integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==", + "version": "1.3.717", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz", + "integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==", "dev": true }, "node_modules/emoji-regex": { @@ -3133,9 +3175,9 @@ } }, "node_modules/get-stream": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz", - "integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", "dev": true, "engines": { "node": ">=10" @@ -6220,9 +6262,9 @@ } }, "node_modules/webpack": { - "version": "5.32.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz", - "integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==", + "version": "5.33.2", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz", + "integrity": "sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -7215,6 +7257,15 @@ "@babel/helper-plugin-utils": "^7.12.13" } }, + "@babel/plugin-syntax-typescript": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz", + "integrity": "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.12.13" + } + }, "@babel/plugin-transform-arrow-functions": { "version": "7.13.0", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz", @@ -7522,6 +7573,17 @@ "@babel/helper-plugin-utils": "^7.12.13" } }, + "@babel/plugin-transform-typescript": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz", + "integrity": "sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.13.0", + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/plugin-syntax-typescript": "^7.12.13" + } + }, "@babel/plugin-transform-unicode-escapes": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz", @@ -7631,6 +7693,17 @@ "esutils": "^2.0.2" } }, + "@babel/preset-typescript": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz", + "integrity": "sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/helper-validator-option": "^7.12.17", + "@babel/plugin-transform-typescript": "^7.13.0" + } + }, "@babel/runtime": { "version": "7.13.10", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", @@ -7719,9 +7792,9 @@ } }, "@types/eslint": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz", - "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==", + "version": "7.2.10", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz", + "integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==", "dev": true, "requires": { "@types/estree": "*", @@ -7769,9 +7842,9 @@ "peer": true }, "@types/node": { - "version": "14.14.37", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz", - "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==", + "version": "14.14.39", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.39.tgz", + "integrity": "sha512-Qipn7rfTxGEDqZiezH+wxqWYR8vcXq5LRpZrETD19Gs4o8LbklbmqotSUsMU+s5G3PJwMRDfNEYoxrcBwIxOuw==", "dev": true }, "@types/normalize-package-data": { @@ -8663,9 +8736,9 @@ } }, "date-fns": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.3.tgz", - "integrity": "sha512-BbiJSlfmr1Fnfi1OHY8arklKdwtZ9n3NkjCeK8G9gtEe0ZSUwJuwHc6gYBl0uoC0Oa5RdpJV1gBBdXcZi8Efdw==", + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.0.tgz", + "integrity": "sha512-lbAFpaKz7QuVxm6m1rmioh4BB2gmLx1r1JMYXU2A/ufT5ly4zEG7HYH4fvS/QfbdyC5rkYyiS30mYz4Q7XCO+w==", "dev": true }, "debug": { @@ -8737,9 +8810,9 @@ } }, "electron-to-chromium": { - "version": "1.3.715", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz", - "integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==", + "version": "1.3.717", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz", + "integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==", "dev": true }, "emoji-regex": { @@ -9143,9 +9216,9 @@ "dev": true }, "get-stream": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz", - "integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", "dev": true }, "getpass": { @@ -11510,9 +11583,9 @@ } }, "webpack": { - "version": "5.32.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz", - "integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==", + "version": "5.33.2", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz", + "integrity": "sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/package.json b/package.json index 2c2daf6..2fed340 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "@babel/core": "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-decorators": "^7.13.5", + "@babel/plugin-proposal-object-rest-spread": "^7.13.8", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.7", + "@babel/preset-typescript": "^7.13.0", "babel-loader": "^8.2.1", "concurrently": "^6.0.0", "css-loader": "^5.0.1", diff --git a/src/css/page_bulma.scss b/src/css/page_bulma.scss index 8c55450..6253daa 100644 --- a/src/css/page_bulma.scss +++ b/src/css/page_bulma.scss @@ -31,6 +31,7 @@ $family-sans-serif: "Nunito", sans-serif; // 3. Set the derived variables $grey-dark: $brown; +$is-dark: $mouse-grey; // $grey-light: $beige-light; // $primary: $purple; // $link: $mouse-grey; @@ -283,6 +284,9 @@ ul { .tab-content { padding:1em; } + .tab-pane section { + padding: 0; + } // 4. Import the rest of bulma, only what you need from Bulma // @import "../../node_modules/bulma/sass/utilities/_all.sass"; diff --git a/src/js/controls/BasemapControl.js b/src/js/controls/BasemapControl.js index e25d7cc..600baf8 100644 --- a/src/js/controls/BasemapControl.js +++ b/src/js/controls/BasemapControl.js @@ -13,34 +13,7 @@ export class BasemapControl extends Control { constructor(title, options) { super(title, options); util.setOptions(this, options); - } - - // onAdd(map) { - // this._mainMap = map; - // let basemaps = this.basemaps = map.basemaps; - - - - // let className = "gba-basemap-control"; - // let container; - // let toggleable = false; - - // if (this.options.parentDiv) { - // container = this._container = document.getElementById(this.options.parentDiv); - // dom.addClass(container, className); - // toggleable = false; - // } else { - // container = this._container = dom.createDom("div", { "class": className }); - // toggleable = true; - // } - // domEvent.on(container, 'click', domEvent.stopPropagation); - - // this._initBasemapHtml(basemaps.services); - - // if (!this.options.parentDiv) { - // return container; - // } - // } + } onAdd(map) { let container = this._initLayout(map); @@ -58,26 +31,23 @@ export class BasemapControl extends Control { link.href = '#'; link.title = 'Base Layers'; - // let popupClassName = "gba-basemap-control"; - // let dialogContainer = dom.createDom("div", { "class": popupClassName, "id": 'basemap-control-parent' }); - // domEvent.on(dialogContainer, 'click', domEvent.stopPropagation); - - // let dialog = this.dialog = new MobileDialog(); this.dialog = new MobileDialog("Baselayer", this._map.container, { klass: "fm_basemap_list", parentDiv: 'basemap-control-parent' });//.addTo(this._map); - let basemaps = this.basemaps = this._map.basemaps; + let basemaps = this.basemaps = this._map.basemaps; let html = this._initBasemapHtml(basemaps.services); // domEvent.on(link, 'click', this.expand, this); + domEvent.on(link, 'click', domEvent.stopPropagation); + domEvent.on(link, 'mousedown', domEvent.stopPropagation); + domEvent.on(link, 'dblclick', domEvent.stopPropagation); + domEvent.on(link, 'click', domEvent.preventDefault); domEvent.on(link, 'click', () => { - this.dialog.show(html); - }, this); + this.dialog.show(html); + }, this); return container; } - - _initBasemapHtml(basemapServices) { let buttonDiv = dom.createDom('div'); @@ -105,7 +75,7 @@ export class BasemapControl extends Control { domEvent.on(btnLink, 'click', function (e) { e.preventDefault(); let name = e.currentTarget.getAttribute('data-name'); - this._setBasemap(name); + this._setBasemap(name); return false; }, this); } diff --git a/src/js/controls/BoreholeControl.js b/src/js/controls/BoreholeControl.js index bb40060..34a5c2c 100644 --- a/src/js/controls/BoreholeControl.js +++ b/src/js/controls/BoreholeControl.js @@ -8,6 +8,9 @@ import './BoreholeControl.css'; export class BoreholeControl extends Control { + options = { + position: 'topright', + }; onAdd (map) { this.map = map; diff --git a/src/js/controls/BoreholePopup.css b/src/js/controls/BoreholePopup.css index 8004590..55bf13c 100644 --- a/src/js/controls/BoreholePopup.css +++ b/src/js/controls/BoreholePopup.css @@ -1,12 +1,12 @@ -.gba-control-borehole { +.gba-borehole-popup { cursor: pointer; } -.gba-control-borehole .maximize.hidden { +/* .gba-borehole-popup .maximize.hidden { display: none; } -.gba-control-borehole .maximize { +.gba-borehole-popup .maximize { color: rgb(220, 220, 220); background: gray; border: 1px solid #000000; @@ -18,10 +18,10 @@ text-align: center; float: left; cursor: pointer; -} +} */ /*side-menu zumachen*/ -.gba-menu .close { +.gba-borehole-menu .close { color: rgb(220, 220, 220); background: gray; border: 1px solid #000000; @@ -34,54 +34,49 @@ float: right; cursor: pointer; } -.gba-close-icon { - background-repeat: no-repeat; - /* background-image: url("img/16.png"); */ +/* .gba-close-icon { + background-repeat: no-repeat; background-position: -52px -9px; display: inline; padding: 0 10px; -} +} */ .toolbox { list-style-image: none; list-style-position: inside; list-style-type: none; } -.gba-menu .toolbox li { +.gba-borehole-menu .toolbox li { color: #464646; line-height: 46px; cursor: pointer; float: right; padding: 0 5px; } -.gba-menu .body { +.gba-borehole-menu .body { clear: both; height: calc(100% - 46px); } -.gba-menu { - /*width: 400px;*/ - position: absolute; +.gba-borehole-menu { + /* position: absolute; top: 0; - left: 0; - /*bottom: 0;*/ - /*right: 0;*/ + left: 0; padding: 0 20px 2px 20px; border-right: 1px solid #ddd; - border-left: 1px solid #ddd; - /*display: none;*/ + border-left: 1px solid #ddd; */ overflow-y: auto; z-index: 1000; background-color: #fff; opacity: 0.93; } -.gba-menu::-webkit-scrollbar { +.gba-borehole-menu::-webkit-scrollbar { width: 7px; height: 7px; background: #f2f2f2; } -.gba-menu::-webkit-scrollbar-thumb { +.gba-borehole-menu::-webkit-scrollbar-thumb { border-radius: 2px; background: #777; } @@ -89,18 +84,14 @@ .chartTable { margin-left: 20px; border-width: 0; - border-spacing: 0; /* Removes the cell spacing via CSS */ - border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */ + border-spacing: 0; + border-collapse: collapse; } .chartTable div { - font: 10px sans-serif; - /*background-color: steelblue;*/ + font: 10px sans-serif; text-align: left; - /*padding: 3px; - margin: 1px;*/ color: #464646; - /*width:75px;*/ } .chartTable td { diff --git a/src/js/controls/BoreholePopup.js b/src/js/controls/BoreholePopup.js deleted file mode 100644 index 8c1704a..0000000 --- a/src/js/controls/BoreholePopup.js +++ /dev/null @@ -1,185 +0,0 @@ -import { Control } from "./Control"; -import * as util from '../core/utilities'; -import * as domEvent from '../core/domEvent'; -import * as dom from '../core/domUtil'; -import { BarChart } from '../core/BarChart'; - -import './BoreholePopup.css'; - -export class BoreholePopup extends Control { - - options = { - position: 'topleft', - width: '300px', - height: '100%', - delay: '10' - }; - - constructor (options) { - super(); - this._innerHTML = "Es wurde noch keine Bohrloch ausgewählt!"; - util.setOptions(this, options); - //this._startPosition = -(parseInt(this.options.width, 10)); - //this._isLeftPosition = true; - this._hasContent = false; - } - - // happens after added to map - onAdd(map) { - if (!map) { - this.destroy(); - //logger.warning('HomeButton::map required', true); - return; - } - // var b = this._nls = util.mixin({}, N.widgets.boreholepopup); - let container = this._container = dom.createDom("div", { "class": "gba-control-borehole" }); - - //button: - this._maxButton = dom.createDom('div', { - "class": "maximize", innerHTML: ">", title: "b.NLS_maximize" - }, this._container); - //link.title = 'Menu'; - //dom.createDom('span', { "class": "close", innerHtml: '?' }, link); - - //this._menu = dom.createDom('div', { "class": "gba-menu" }, document.getElementsByClassName('mapDesktop')[0]); - this._menu = dom.createDom('div', { "class": "gba-menu" }, dom.byId("webgl")); - this._menu.style.width = this.options.width; - this._menu.style.height = this.options.height; - this._menu.style.left = 0;// '-' + this.options.width; - this._menu.style.top = 0; - - let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu); - this._clearButton = dom.createDom('li', { "class": "gba-close-link" }, toolboxList); - dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton); - dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton); - - this._body = dom.createDom('div', { "class": "body" }, this._menu); - - //this._minimizeButton = dom.createDom('div', { - // "class": "close", innerHTML: "<", title: b.NLS_minimize - //}, this._menu); - this._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile
(Heights in m)" }, - this._body); - - /* hier kommt nach dem Identify das Bohrprofil hinein */ - this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body); - this._contentPane.innerHTML = this._innerHTML; - this._contentPane.style.clear = 'both'; - - domEvent - //.on(this._maxButton, 'click', domEvent.stopPropagation) - .on(this._maxButton, 'click', - this.show, - this); - //domEvent.on(this._minimizeButton, 'click', domEvent.stopPropagation) - // .on(this._minimizeButton, 'click', - // this.hide, - // this); - domEvent - //.on(this._clearButton, 'click', domEvent.stopPropagation) - .on(this._clearButton, 'click', - this._close, - this); - - this._toggleVisibility(false); - return container; - } - - show(a) { - //this._clearContent(); - this._toggleVisibility(true); - //this._animate(true); - } - - hide(e) { - //var test = this.isShowing; - if (this.isShowing) { - (this._toggleVisibility(false)); - } - //if (e) { - // domEvent.stop(e); - //} - } - - _setContent(innerHTML) { - if (innerHTML instanceof HTMLElement) { - this._contentPane.innerHTML = ""; - this._contentPane.appendChild(innerHTML); - } - else { - this._contentPane.innerHTML = innerHTML; - } - this._contentPane.style.display = "block"; - //this._contentPane.innerHTML = innerHTML; - //this._contentPane.style.display = "block"; - } - - setChartContent(data) { - this._contentPane.innerHTML = ""; - - let valTextColor = "ffffff"; - this.barChart = new BarChart("d17100", - 320, valTextColor, 'full', - 300); - this.barChart.draw(data); - this._contentPane.appendChild(this.barChart._container); - - let table = this.barChart.getStatTable(data); - this._contentPane.appendChild(table); - this._hasContent = true; - } - - _close() { - this._clearContent(); - this._toggleVisibility(false); - this.emit("closed"); - } - - _clearContent() { - // $(this._contentPane).html(''); - this._contentPane.innerHTML = ''; - this._hasContent = false; - } - - _toggleVisibility(visible) { - this._setVisibility(visible); - this.isShowing = visible; - } - - _setVisibility(addOrRemove) { - //n.set(this.domNode, "visibility", addOrRemove ? "visible" : "hidden"); - // $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden"); - this._menu.style.visibility = addOrRemove ? "visible" : "hidden"; - - //e.toggle(this.domNode, "esriPopupVisible", addOrRemove) - - var maxButtonVisible = false; - //if add, max Button not visible - if (addOrRemove == true) { - maxButtonVisible = !addOrRemove; - } - //if remove , then max Button only visible if popup has content - else if (addOrRemove == false) { - maxButtonVisible = this._hasContent; - } - // $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden"); - this._maxButton.style.visibility = maxButtonVisible ? "visible" : "hidden"; - } - - onRemove() { - //this.cleanup(); - this.isShowing && this.hide(); - //for (var i = 0; i < this._eventConnections.length; i ++) - //{ - // var f = this._eventConnections[i]; - // f.remove(); - //} - domEvent.off(this._clearButton, 'click', this._close, this); - domEvent.off(this._maxButton, 'click', this.show, this); - //this.map.off('mouse-pan', this.hide, this); - //C.destroy(this.domNode); - //this.getContainer().parentNode.removeChild(this.getContainer()); - this._innerHTML = this._hasContent = this._nls = this._menu = this._body = this._contenLable = this._contentPane = this._maxButton = this._clearButton = null; - } - -} \ No newline at end of file diff --git a/src/js/controls/BoreholePopup.ts b/src/js/controls/BoreholePopup.ts new file mode 100644 index 0000000..25fbefc --- /dev/null +++ b/src/js/controls/BoreholePopup.ts @@ -0,0 +1,219 @@ +import { Control } from "./Control"; +import * as util from '../core/utilities'; +import * as domEvent from '../core/domEvent'; +import * as dom from '../core/domUtil'; +import { BarChart } from '../core/BarChart'; + +import './BoreholePopup.css'; + +interface BoreholePopupOptions { + position?: string + width?: string + height?: string + parentDiv?: string +} + +export class BoreholePopup extends Control { + + // default options + options: BoreholePopupOptions = { + position: 'topleft', + width: '300px', + height: '100%', + parentDiv: null + }; + + // private class fields: + private _innerHTML; + private _clearButton; + private _body; + private _contentPane; + private _contenLable; + _container; + private _mainMap; + private _scene; + private _hasContent; + private _menu; + private _isShowing; + barChart; + + constructor(options) { + super(); + this._innerHTML = "Es wurde noch keine Bohrloch ausgewählt!"; + util.setOptions(this, options); + //this._startPosition = -(parseInt(this.options.width, 10)); + //this._isLeftPosition = true; + this._hasContent = false; + } + + // happens after added to map + onAdd(map) { + if (!map) { + // this.destroy(); + //logger.warning('HomeButton::map required', true); + return; + } + this._mainMap = map; + let container; + // var b = this._nls = util.mixin({}, N.widgets.boreholepopup); + // let container = this._container = dom.createDom("div", { "class": "gba-borehole-popup" }); + + + if (this.options.parentDiv) { + container = this._container = document.getElementById(this.options.parentDiv); + dom.addClass(container, "gba-borehole-popup"); + } else { + container = this._container = dom.createDom("div", { "class": "gba-borehole-popup" }, dom.byId("webgl")); + } + + //button: + // this._maxButton = dom.createDom('div', { + // "class": "maximize", innerHTML: ">", title: "b.NLS_maximize" + // }, this._container); + let className = "gba-borehole-menu"; + this._menu = dom.createDom('div', { "class": className }, container); //dom.byId("webgl")); + this._menu.style.width = this.options.width; + // this._menu.style.height = this.options.height; + this._menu.style.left = 0;// '-' + this.options.width; + this._menu.style.top = 0; + + this._body = dom.createDom('div', { "class": "body" }, this._menu); + this._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile
(Heights in m)" }, + this._body); + /* place holder for borehole profile after Identify */ + this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body); + this._contentPane.innerHTML = this._innerHTML; + this._contentPane.style.clear = 'both'; + + // close button + let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu); + this._clearButton = dom.createDom('button', { "class": "gba-close-link button is-dark" }, toolboxList); + // dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton); + dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton); + + // events: + // don't let double clicks and mousedown get to the map + domEvent.on(this._clearButton, 'dblclick', domEvent.stopPropagation); + domEvent.on(this._clearButton, 'mousedown', domEvent.stopPropagation); + domEvent.on(this._clearButton, 'mouseup', domEvent.stopPropagation); + domEvent.on(this._clearButton, 'click', domEvent.stopPropagation); + domEvent.on(this._clearButton, 'click', domEvent.preventDefault); + domEvent.on(this._clearButton, 'click', this._close, this);; + + this._toggleVisibility(false); + + if (!this.options.parentDiv) { + return container; + } + } + + show(a) { + //this._clearContent(); + this._toggleVisibility(true); + //this._animate(true); + } + + hide() { + //var test = this._isShowing; + if (this._isShowing) { + (this._toggleVisibility(false)); + } + //if (e) { + // domEvent.stop(e); + //} + } + + _setContent(innerHTML) { + if (innerHTML instanceof HTMLElement) { + this._contentPane.innerHTML = ""; + this._contentPane.appendChild(innerHTML); + } + else { + this._contentPane.innerHTML = innerHTML; + } + this._contentPane.style.display = "block"; + //this._contentPane.innerHTML = innerHTML; + //this._contentPane.style.display = "block"; + } + + setChartContent(data) { + this._contentPane.innerHTML = ""; + + let valTextColor = "ffffff"; + this.barChart = new BarChart("d17100", + 320, valTextColor, 'full', + 300); + this.barChart.draw(data); + this._contentPane.appendChild(this.barChart._container); + + let table = this.barChart.getStatTable(data); + this._contentPane.appendChild(table); + this._hasContent = true; + } + + _close(e) { + + this._clearContent(); + this._toggleVisibility(false); + this.emit("closed"); + } + + _clearContent() { + // $(this._contentPane).html(''); + this._contentPane.innerHTML = ''; + this._hasContent = false; + } + + _toggleVisibility(visible) { + this._setVisibility(visible); + this._isShowing = visible; + + //get active p tab + let activeTabButton = document.querySelector('li.is-active'); + // let activeTabContent = document.querySelector('.tab-pane.active'); + + let analysisTabButton = document.querySelector('li.file-link'); + // let analysisTabContent = document.querySelector('.tab-pane.content-file'); + // if it's not the analysis tab, make it active + if (analysisTabButton !== activeTabButton) { + activeTabButton.classList.remove('is-active'); + analysisTabButton.classList.add('is-active'); + + document.querySelector(activeTabButton.getAttribute('name')).classList.remove('active'); + document.querySelector(analysisTabButton.getAttribute('name')).classList.add('active'); + } + } + + _setVisibility(addOrRemove) { + // $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden"); + this._menu.style.visibility = addOrRemove ? "visible" : "hidden"; + + // var maxButtonVisible = false; + // //if add, max Button not visible + // if (addOrRemove == true) { + // maxButtonVisible = !addOrRemove; + // } + // //if remove , then max Button only visible if popup has content + // else if (addOrRemove == false) { + // maxButtonVisible = this._hasContent; + // } + // // this._maxButton.style.visibility = maxButtonVisible ? "visible" : "hidden"; + } + + onRemove() { + //this.cleanup(); + this._isShowing && this.hide(); + //for (var i = 0; i < this._eventConnections.length; i ++) + //{ + // var f = this._eventConnections[i]; + // f.remove(); + //} + domEvent.off(this._clearButton, 'click', this._close); + // domEvent.off(this._maxButton, 'click', this.show, this); + //this.map.off('mouse-pan', this.hide, this); + //C.destroy(this.domNode); + //this.getContainer().parentNode.removeChild(this.getContainer()); + this._innerHTML = this._hasContent = this._menu = this._body = this._contenLable = this._contentPane = this._clearButton = null; + } + +} \ No newline at end of file diff --git a/src/js/controls/Control.js b/src/js/controls/Control.js index ca3d497..24517f9 100644 --- a/src/js/controls/Control.js +++ b/src/js/controls/Control.js @@ -10,7 +10,7 @@ class Control extends EventEmitter { // @section // @aka Control options options = { - position: 'topright', + // position: 'topright', }; _map; _container; diff --git a/src/js/controls/HomeButton.js b/src/js/controls/HomeButton.js index c69340f..3c17806 100644 --- a/src/js/controls/HomeButton.js +++ b/src/js/controls/HomeButton.js @@ -88,12 +88,11 @@ class HomeButton extends Control { let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container); // let stop = domEvent.stopPropagation; - domEvent - // .on(link, 'click', stop) - // .on(link, 'mousedown', stop) - // .on(link, 'dblclick', stop) - // .on(link, 'click', domEvent.preventDefault) - .on(link, 'click', fn, context); + domEvent.on(link, 'click', domEvent.stopPropagation); + domEvent.on(link, 'mousedown', domEvent.stopPropagation); + domEvent.on(link, 'dblclick', domEvent.stopPropagation); + domEvent.on(link, 'click', domEvent.preventDefault); + domEvent. on(link, 'click', fn, context); return link; } diff --git a/src/js/controls/LayerControl.js b/src/js/controls/LayerControl.js index 88ab57b..40b1f19 100644 --- a/src/js/controls/LayerControl.js +++ b/src/js/controls/LayerControl.js @@ -17,7 +17,7 @@ export class LayerControl extends Control { autoZIndex: true }; - //private class fileds: + // private class fields: _container; _mainMap; _scene; diff --git a/src/js/controls/ZoomControl.js b/src/js/controls/ZoomControl.js index feb0be4..989def0 100644 --- a/src/js/controls/ZoomControl.js +++ b/src/js/controls/ZoomControl.js @@ -59,12 +59,11 @@ class ZoomControl extends Control { let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container); // let stop = domEvent.stopPropagation; - domEvent - // .on(link, 'click', stop) - // .on(link, 'mousedown', stop) - // .on(link, 'dblclick', stop) - // .on(link, 'click', domEvent.preventDefault) - .on(link, 'click', fn, context); + domEvent.on(link, 'click', domEvent.stopPropagation); + domEvent.on(link, 'mousedown', domEvent.stopPropagation); + domEvent.on(link, 'dblclick', domEvent.stopPropagation); + domEvent.on(link, 'click', domEvent.preventDefault); + domEvent.on(link, 'click', fn, context); return link; } diff --git a/src/js/core/Map.js b/src/js/core/Map.js index 3cde5f7..171f1d9 100644 --- a/src/js/core/Map.js +++ b/src/js/core/Map.js @@ -166,7 +166,7 @@ class Map extends OrbitControls { zoomControl.addTo(this); this._controls.maptoolControl = new BoreholeControl().addTo(this); - this._controls.boreholePopup = new BoreholePopup({}); + this._controls.boreholePopup = new BoreholePopup({parentDiv: 'gba-borehole-control-parent-id'}); this._controls.boreholePopup.addTo(this); } diff --git a/src/js/core/domEvent.js b/src/js/core/domEvent.js index f8bb8e3..5507439 100644 --- a/src/js/core/domEvent.js +++ b/src/js/core/domEvent.js @@ -84,6 +84,8 @@ export function removeListener(obj, type, fn) { // (HTMLElement, String, Functi if (!handler) { return this; } + // if (l.ctx !== context) { continue; } + if ('removeEventListener' in obj) { if (type === 'mousewheel') { obj.removeEventListener('DOMMouseScroll', handler, false); @@ -123,14 +125,33 @@ function _checkMouse(el, e) { return (related !== el); } +// export function stopPropagation(e) { +// if (e.stopPropagation) { +// e.stopPropagation(); +// } else { +// e.cancelBubble = true; +// } +// skipped(e); +// return this; +// } + +// @function stopPropagation(ev: DOMEvent): this +// Stop the given event from propagation to parent elements. Used inside the listener functions: +// ```js +// L.DomEvent.on(div, 'click', function (ev) { +// L.DomEvent.stopPropagation(ev); +// }); +// ``` export function stopPropagation(e) { - if (e.stopPropagation) { - e.stopPropagation(); - } else { - e.cancelBubble = true; - } - skipped(e); - return this; + if (e.stopPropagation) { + e.stopPropagation(); + } else if (e.originalEvent) { + e.originalEvent._stopped = true; + } else { + e.cancelBubble = true; + } + skipped(e); + return this; } @@ -160,10 +181,10 @@ export function fakeStop(e) { skipEvents[e.type] = true; } export function skipped(e) { - var skipped = skipEvents[e.type]; + let events = skipEvents[e.type]; // reset when checking, as it's only used in map container and propagates outside of the map skipEvents[e.type] = false; - return skipped; + return events; } diff --git a/src/js/main.js b/src/js/main.js index 9d03289..3b5b58e 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -53,7 +53,7 @@ class Application { // this.$topTextInput = document.querySelector('#topText'); // this.$bottomTextInput = document.querySelector('#bottomText'); // this.$imageInput = document.querySelector('#image'); - this.downloadButton = document.querySelector('#btnDownloadCanvasImage'); + this.downloadButton = document.querySelector('#menu-dowload-button'); this.menuIcon = document.querySelector('#menu-icon'); this.navigation = document.getElementsByClassName('navigation')[0]; // this.addEventListeners(); @@ -40773,7 +40773,7 @@ class Application { }); } - var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li')); + let tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li')); tabButtons.map(function (button) { button.addEventListener('click', function () { diff --git a/webpack.config.js b/webpack.config.js index d50834b..985e3ec 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -60,14 +60,20 @@ module.exports = { // test: /\.vue$/, // loader: 'vue-loader' // }, + // { + // test: /\.tsx?$/, + // use: 'ts-loader', + // exclude: /(node_modules|bower_components)/, + // }, { - test: /\.js$/, + // test: /\.js$/, + test: /\.(js|jsx|tsx|ts)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', - options: { - presets: ['@babel/preset-env'] - } + // options: { + // presets: ['@babel/preset-env'] + // } } }, @@ -108,6 +114,9 @@ module.exports = { ] }, + resolve: { + extensions: ['*', '.js', '.jsx', '.tsx', '.ts'], + }, stats: { colors: true },