- modal form for layer infos
- query additional layer infos inside Map class
This commit is contained in:
Arno Kaimbacher
parent
fef72d5402
commit
60a361fd6a
99
package-lock.json
generated
99
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 + " " }, 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) {
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user