From 60a361fd6a541a6690d9a9ac07d097d244bca91b Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@geologie.ac.at>
Date: Wed, 17 Mar 2021 18:33:01 +0100
Subject: [PATCH] - modal form for layer infos - query additional layer infos
 inside Map class

---
 package-lock.json               | 99 +++++++++++++--------------------
 src/js/components/ShowModal.js  | 22 ++++----
 src/js/controls/LayerControl.js | 60 +++++++++++++++-----
 src/js/core/Map.js              |  4 +-
 src/js/main.js                  |  4 +-
 5 files changed, 102 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 482b8c7..4d01b1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1300,9 +1300,9 @@
             }
         },
         "node_modules/@fortawesome/fontawesome-free": {
-            "version": "5.15.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
-            "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==",
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
             "hasInstallScript": true,
             "engines": {
                 "node": ">=6"
@@ -2409,18 +2409,6 @@
                 "node": ">=8.9.0"
             }
         },
-        "node_modules/css-loader/node_modules/lru-cache": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-            "dev": true,
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/css-loader/node_modules/schema-utils": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -2617,9 +2605,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.3.689",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.689.tgz",
-            "integrity": "sha512-WCn+ZaU3V8WttlLNSOGOAlR2XpxibGre7slwGrYBB6oTjYPgP29LNDGG6wLvLTMseLdE+G1vno7PfY7JyDV48g==",
+            "version": "1.3.690",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.690.tgz",
+            "integrity": "sha512-zPbaSv1c8LUKqQ+scNxJKv01RYFkVVF1xli+b+3Ty8ONujHjAMg+t/COmdZqrtnS1gT+g4hbSodHillymt1Lww==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -3847,6 +3835,18 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -4125,18 +4125,6 @@
                 "node": ">= 10.12.0"
             }
         },
-        "node_modules/node-gyp/node_modules/lru-cache": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-            "dev": true,
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/node-gyp/node_modules/semver": {
             "version": "7.3.4",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
@@ -6217,9 +6205,9 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.26.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.26.0.tgz",
-            "integrity": "sha512-9kQATUOGQBkqzNKFmFON4KXZDsXnE7xk58tBxca8aCi+6/QhAbmWIvtGqBL66XIsBFpomFH0/0KyCaySo0ta2g==",
+            "version": "5.26.3",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.26.3.tgz",
+            "integrity": "sha512-z/F2lt2N1fZqaud1B4SzjL3OW03eULThbBXQ2OX4LSrZX4N9k1A5d0Rje3zS2g887DTWyAV0KGqEf64ois2dhg==",
             "dev": true,
             "dependencies": {
                 "@types/eslint-scope": "^3.7.0",
@@ -7676,9 +7664,9 @@
             "dev": true
         },
         "@fortawesome/fontawesome-free": {
-            "version": "5.15.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
-            "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w=="
         },
         "@nodelib/fs.scandir": {
             "version": "2.1.4",
@@ -8595,15 +8583,6 @@
                         "json5": "^2.1.2"
                     }
                 },
-                "lru-cache": {
-                    "version": "6.0.0",
-                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-                    "dev": true,
-                    "requires": {
-                        "yallist": "^4.0.0"
-                    }
-                },
                 "schema-utils": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -8735,9 +8714,9 @@
             }
         },
         "electron-to-chromium": {
-            "version": "1.3.689",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.689.tgz",
-            "integrity": "sha512-WCn+ZaU3V8WttlLNSOGOAlR2XpxibGre7slwGrYBB6oTjYPgP29LNDGG6wLvLTMseLdE+G1vno7PfY7JyDV48g==",
+            "version": "1.3.690",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.690.tgz",
+            "integrity": "sha512-zPbaSv1c8LUKqQ+scNxJKv01RYFkVVF1xli+b+3Ty8ONujHjAMg+t/COmdZqrtnS1gT+g4hbSodHillymt1Lww==",
             "dev": true
         },
         "emoji-regex": {
@@ -9701,6 +9680,15 @@
                 "signal-exit": "^3.0.0"
             }
         },
+        "lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "requires": {
+                "yallist": "^4.0.0"
+            }
+        },
         "make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -9910,15 +9898,6 @@
                 "which": "^2.0.2"
             },
             "dependencies": {
-                "lru-cache": {
-                    "version": "6.0.0",
-                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-                    "dev": true,
-                    "requires": {
-                        "yallist": "^4.0.0"
-                    }
-                },
                 "semver": {
                     "version": "7.3.4",
                     "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
@@ -11508,9 +11487,9 @@
             }
         },
         "webpack": {
-            "version": "5.26.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.26.0.tgz",
-            "integrity": "sha512-9kQATUOGQBkqzNKFmFON4KXZDsXnE7xk58tBxca8aCi+6/QhAbmWIvtGqBL66XIsBFpomFH0/0KyCaySo0ta2g==",
+            "version": "5.26.3",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.26.3.tgz",
+            "integrity": "sha512-z/F2lt2N1fZqaud1B4SzjL3OW03eULThbBXQ2OX4LSrZX4N9k1A5d0Rje3zS2g887DTWyAV0KGqEf64ois2dhg==",
             "dev": true,
             "requires": {
                 "@types/eslint-scope": "^3.7.0",
diff --git a/src/js/components/ShowModal.js b/src/js/components/ShowModal.js
index 15425e8..ad2a7ce 100644
--- a/src/js/components/ShowModal.js
+++ b/src/js/components/ShowModal.js
@@ -6,10 +6,12 @@ import * as util from "../core/utilities";
 import "./ShowModal.css";
 
 // @Component({})
-export default class Modal {
+export class ShowModal {
     defaultTitle = "3DViewer";
     declaredClass = "MobileDialog";
     options = {};
+    title;
+    description;
 
     constructor(title, parentContainer, options = {}) {
         // super(options);
@@ -49,19 +51,16 @@ export default class Modal {
                 ${this.title}
                     <button
                     type="button"
-                    class="btn-close"
-                    id="btn-close"
-                    v-on:click="close"
+                    class="btn-close"                   
                     aria-label="Close modal"
                     >
                     x
                     </button>
                 </slot>
                 </header>
-                <section class="modal-body" id="modalDescription">
-                <slot name="body">I'm the default body!</slot>
+                <section class="modal-body modalDescription">
                 </section>
-                <section class="modal-body" id="additionalDescription">               
+                <section class="modal-body additionalDescription">               
                 </section>
                 <footer class="modal-footer">
                 <slot name="footer">                 
@@ -74,10 +73,10 @@ export default class Modal {
 
         this.domNode = dom.createDom("div", { class: "popup" }, container);
         this.dialogDiv = dom.createDom("div", { class: this.options.klass + " fm_overlay hide", innerHTML: dialogHtml }, container);
-        this.popupcontent = dom.byId("modalDescription");
+        this.popupcontent =  this.dialogDiv.querySelector(".modalDescription");
         //additional info div
-        this.pageinfo = dom.byId("additionalDescription");
-        let popup_close = dom.byId("btn-close");
+        this.pageinfo = this.dialogDiv.querySelector(".additionalDescription");
+        let popup_close = this.dialogDiv.querySelector(".btn-close");
 
         domEvent.on(popup_close, 'click', domEvent.preventDefault);
         domEvent.on(popup_close, 'click', domEvent.stopPropagation);
@@ -99,9 +98,12 @@ export default class Modal {
         if (html instanceof HTMLElement) {
             this.popupcontent.innerHTML = "";
             this.popupcontent.appendChild(html);
+            // this.description = html;
         }
         else {
+            this.popupcontent.innerHTML = "";
             this.popupcontent.innerHTML = html;
+            // this.description = html;
         }
 
         // this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title;
diff --git a/src/js/controls/LayerControl.js b/src/js/controls/LayerControl.js
index 5f418ec..4b98575 100644
--- a/src/js/controls/LayerControl.js
+++ b/src/js/controls/LayerControl.js
@@ -5,6 +5,7 @@ import * as dom from '../core/domUtil';
 import * as domEvent from '../core/domEvent';
 import { DemLayer } from "../layer/DemLayer";
 import { TinLayer } from "../layer/TinLayer";
+import { ShowModal } from "../components/ShowModal";
 import './LayerControl.css';
 
 export class LayerControl extends Control {
@@ -27,6 +28,7 @@ export class LayerControl extends Control {
     _overlaysList
     _layers;
     _handlingClick;
+    _dialog;
 
     constructor(overlayLayers, options) {
         super(options);
@@ -42,10 +44,12 @@ export class LayerControl extends Control {
                 this._addLayer(overlayLayers[i], overlayLayers[i].name, true);
             }
         }
+
     }
 
     onAdd(map) {
         this._mainMap = map;
+        this._dialog = new ShowModal("Layer Info", map.container, { klass: "fm_about" });
 
         let className = "gba-controllayers";
         let container;
@@ -90,7 +94,7 @@ export class LayerControl extends Control {
 
         this._updateLayerList();
 
-       
+
 
         if (toggleable == true) {
             return container;
@@ -153,21 +157,49 @@ export class LayerControl extends Control {
         dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
 
         dom.createDom("span", { innerHTML: " " + obj.name + "&nbsp;" }, lblDataCell);
-        //legend entry label
-        // var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
-        // var _tbody = dom.createDom("tbody", {}, _table);
-        // var _tr = dom.createDom("tr", {}, _tbody);
-        // var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
-
-        dom.createDom("i", { class: "fas fa-info-circle" }, lblDataCell);
-
-
-
-
-
+      
+        // thesaurus direct link link
+        // let layerInfo = dom.createDom(
+        //     "a",
+        //     { href: obj.layer.citation, target: '_blank', title: 'Layers', innerHTML: '<i class="fas fa-info-circle"></i>' },
+        //     lblDataCell
+        // );
+        // domEvent.on(layerInfo, 'click', (e) => {
+        //     e.preventDefault();
+        //     e.stopPropagation();          
+        //     window.open(
+        //         layerInfo.href,
+        //         '_blank' // <- This is what makes it open in a new window.
+        //       );
+        // }, this);
 
+        // or thesaurus link in popup:
+        if ( obj.layer.citation) {
+            let layerInfo = dom.createDom(
+                "i",
+                { class: "fas fa-info-circle" },
+                lblDataCell
+            );
+            domEvent.on(layerInfo, 'click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                let popupDiv = dom.createDom("div", {});
+                dom.createDom(
+                    "span",
+                    { href: obj.layer.citation, target: '_blank', title: 'Layers', innerHTML:  "feature type: " + obj.layer.feature_type +  "<br>"},
+                    popupDiv
+                );
+              dom.createDom(
+                    "a",
+                    { href: obj.layer.citation, target: '_blank', title: 'Layers', innerHTML:  obj.layer.citation},
+                    popupDiv
+                );
+    
+                this._dialog.show(popupDiv);
+            }, this);
+        }
+        
         return legendEntryRow;
-
     }
 
     _onInputClick(layerId) {
diff --git a/src/js/core/Map.js b/src/js/core/Map.js
index e4285a0..c7219d3 100644
--- a/src/js/core/Map.js
+++ b/src/js/core/Map.js
@@ -85,7 +85,9 @@ class Map extends OrbitControls {
                 type: "3dface",
                 name: layerData.preview.legend_text, //layerData.legend_description,
                 description: "test",
-                color: layerData.preview.legend_color //layerData.color
+                color: layerData.preview.legend_color, //layerData.color
+                citation: layerData.characteristics !== null ? layerData.characteristics.citation : null,
+                feature_type: layerData.characteristics !== null ? layerData.characteristics.feature_type : null,
             });
             callStack.push(this.addLayer(dxfLayer))
         }
diff --git a/src/js/main.js b/src/js/main.js
index c936294..224563d 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -21,7 +21,7 @@ import * as util from './core/utilities';
 import * as browser from './core/browser';
 import * as domUtil from './core/domUtil';
 import { Picking } from './clip/Picking';
-import Modal from './components/ShowModal';
+import { ShowModal } from './components/ShowModal';
 
 import { Selection } from './clip/Selection';
 import _ from "lodash";
@@ -60,7 +60,7 @@ class Application {
         this.navigation = document.getElementsByClassName('navigation')[0];
         // this.addEventListeners();
 
-        this.dialog = new Modal("Help", container, { klass: "fm_about" });
+        this.dialog = new ShowModal("Help", container, { klass: "fm_about" });
 
         // this.dialog = new MobileDialog("Help", container, { klass: "fm_about" });
         this.aboutIcon = document.querySelector('#menu-about-icon');