- ShowModal.js component
- question icon in LayerControl.js - other includes in main.js - support for decorators (.babelrc) - package updates (package.json) - trials with vuejs (webpack.config.js)
This commit is contained in:
Arno Kaimbacher
parent
78ae3e2a63
commit
fef72d5402
9 changed files with 452 additions and 103 deletions
60
src/js/components/ShowModal.css
Normal file
60
src/js/components/ShowModal.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
color: #4aae9b;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #eeeeee;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #4aae9b;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
color: white;
|
||||
background: #4aae9b;
|
||||
border: 1px solid #4aae9b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
154
src/js/components/ShowModal.js
Normal file
154
src/js/components/ShowModal.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
// import { Component, Vue } from "vue-property-decorator";
|
||||
import * as dom from "../core/domUtil";
|
||||
import * as domEvent from "../core/domEvent";
|
||||
import * as util from "../core/utilities";
|
||||
|
||||
import "./ShowModal.css";
|
||||
|
||||
// @Component({})
|
||||
export default class Modal {
|
||||
defaultTitle = "3DViewer";
|
||||
declaredClass = "MobileDialog";
|
||||
options = {};
|
||||
|
||||
constructor(title, parentContainer, options = {}) {
|
||||
// super(options);
|
||||
util.setOptions(this, options);
|
||||
|
||||
this.title = title ? title : this.defaultTitle;
|
||||
this.options = options || this.default;
|
||||
|
||||
this.init(parentContainer);
|
||||
}
|
||||
|
||||
init(parentContainer) {
|
||||
let className = "gba-basemap-control";
|
||||
let container;
|
||||
let toggleable = false;
|
||||
|
||||
if (this.options.position) {
|
||||
container = this._container = dom.createDom("div", { "class": className });
|
||||
toggleable = true;
|
||||
|
||||
} else {
|
||||
container = this._container = parentContainer;
|
||||
// dom.addClass(container, className);
|
||||
toggleable = false;
|
||||
|
||||
}
|
||||
let dialogHtml = `
|
||||
<div class="modal-backdrop">
|
||||
<div
|
||||
class="modal"
|
||||
role="dialog"
|
||||
aria-labelledby="modalTitle"
|
||||
aria-describedby="modalDescription"
|
||||
>
|
||||
<header class="modal-header" id="modalTitle">
|
||||
<slot name="header">
|
||||
${this.title}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
id="btn-close"
|
||||
v-on:click="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>
|
||||
<section class="modal-body" id="additionalDescription">
|
||||
</section>
|
||||
<footer class="modal-footer">
|
||||
<slot name="footer">
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
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");
|
||||
//additional info div
|
||||
this.pageinfo = dom.byId("additionalDescription");
|
||||
let popup_close = dom.byId("btn-close");
|
||||
|
||||
domEvent.on(popup_close, 'click', domEvent.preventDefault);
|
||||
domEvent.on(popup_close, 'click', domEvent.stopPropagation);
|
||||
domEvent.on(popup_close, 'click', this.hide, this);
|
||||
}
|
||||
|
||||
hide(e) {
|
||||
this.dialogDiv.classList.add('hide');
|
||||
this.dialogDiv.classList.remove('show');
|
||||
}
|
||||
|
||||
show(html) {
|
||||
let isHelp = html === undefined ? true : false;
|
||||
|
||||
if (html === undefined) {
|
||||
html = this._help();
|
||||
}
|
||||
|
||||
if (html instanceof HTMLElement) {
|
||||
this.popupcontent.innerHTML = "";
|
||||
this.popupcontent.appendChild(html);
|
||||
}
|
||||
else {
|
||||
this.popupcontent.innerHTML = html;
|
||||
}
|
||||
|
||||
// this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title;
|
||||
|
||||
if (!isHelp) {
|
||||
//document.getElementById("pageinfo").style.display = "none";
|
||||
this.pageinfo.style.display = "none";
|
||||
}
|
||||
else {
|
||||
this.pageinfo.innerHTML = `
|
||||
<div id="about">
|
||||
This project is using the following libraries, fonts & styles:
|
||||
<ul>
|
||||
|
||||
<li>three.js + OrbitControls.js <a href="https://threejs.org/" target="_blank">threejs.org</a>
|
||||
<a href="https://github.com/mrdoob/three.js/blob/dev/LICENSE" target="_blank" class="license">MIT LICENSE</a></li>
|
||||
|
||||
<li id="lib_proj4js">Proj4js <a href="https://github.com/proj4js/proj4js" target="_blank">github.com/proj4js/proj4js</a>
|
||||
<a href="https://github.com/proj4js/proj4js/blob/master/LICENSE.md" target="_blank" class="license">Proj4js -- Javascript reprojection library</a></li>
|
||||
|
||||
<li id="lib_normalize">normalize.css <a href="https://github.com/necolas/normalize.css" target="_blank">github.com/necolas/normalize.css</a>
|
||||
<a href="https://github.com/necolas/normalize.css/blob/master/LICENSE.md" target="_blank" class="license">MIT License</a></li>
|
||||
|
||||
<li id="lib_fontawesome">Font Awesome Free <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">github.com/FortAwesome/Font-Awesome</a>
|
||||
<a href="https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt" target="_blank" class="license">Font: SIL OFL 1.1, CSS: MIT License, Icons: CC BY 4.0 License</a></li>
|
||||
|
||||
</ul>
|
||||
</div>`;
|
||||
this.pageinfo.style.display = "block";
|
||||
}
|
||||
|
||||
this.dialogDiv.classList.add('show');
|
||||
this.dialogDiv.classList.remove('hide');
|
||||
}
|
||||
|
||||
_help() {
|
||||
let html = "";
|
||||
//var imagePath = $UrlHelper.resolve('~') + "content/img/";
|
||||
let imagePath = "images/map/";
|
||||
let list = '<ul><li id="leftMouse"><img src=' + imagePath + 'leftMouse.png> Rotate 3D Model</li>' +
|
||||
'<li id="middleMouse"><img src=' + imagePath + 'middleMouse.png> Zoom 3D Model</li>' +
|
||||
'<li id="rightMouse"><img src=' + imagePath + 'rightMouse.png> Pan 3D Model</li></ul>';
|
||||
html += list;
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -54,19 +54,20 @@ export class LayerControl extends Control {
|
|||
if (this.options.parentDiv) {
|
||||
container = this._container = document.getElementById(this.options.parentDiv);
|
||||
dom.addClass(container, className);
|
||||
toggleable = false;
|
||||
toggleable = false;
|
||||
} else {
|
||||
container = this._container = dom.createDom("div", { "class": className });
|
||||
toggleable = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
domEvent.on(container, 'click', domEvent.stopPropagation);
|
||||
|
||||
let layerContainer = this._layerContainer = dom.createDom('div', { "class": className + '-container' }, container);
|
||||
|
||||
let layerContainer = this._layerContainer = dom.createDom('div', { "class": className + '-container' }, container);
|
||||
|
||||
if (this.options.collapsed && toggleable == true) {
|
||||
domEvent.on(container, 'mouseenter', this._expand, this);
|
||||
|
|
@ -89,6 +90,8 @@ export class LayerControl extends Control {
|
|||
|
||||
this._updateLayerList();
|
||||
|
||||
|
||||
|
||||
if (toggleable == true) {
|
||||
return container;
|
||||
}
|
||||
|
|
@ -102,7 +105,7 @@ export class LayerControl extends Control {
|
|||
name: name,
|
||||
overlay: overlay
|
||||
};
|
||||
layer.addListener('visibility-change', this._updateLayerList, this);
|
||||
layer.addListener('visibility-change', this._updateLayerList, this);
|
||||
}
|
||||
|
||||
_updateLayerList() {
|
||||
|
|
@ -115,7 +118,7 @@ export class LayerControl extends Control {
|
|||
|
||||
let baseLayersPresent = false;
|
||||
let overlaysPresent = false;
|
||||
|
||||
|
||||
|
||||
for (let i in this._layers) {
|
||||
let obj = this._layers[i];
|
||||
|
|
@ -127,7 +130,7 @@ export class LayerControl extends Control {
|
|||
this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
|
||||
}
|
||||
|
||||
_addLegendEntry (obj) {
|
||||
_addLegendEntry(obj) {
|
||||
var checked = obj.layer.visible;//this._map.hasLayer(obj.layer);
|
||||
var container = obj.overlay ? this._overlaysList : this._baseLayersList;
|
||||
//container.appendChild(legendEntryRow);
|
||||
|
|
@ -135,13 +138,13 @@ export class LayerControl extends Control {
|
|||
var legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container);
|
||||
//domStyle.set(legendEntryRow, 'display', rowVisibility);
|
||||
//dom.setProperties(legendEntryRow, { style: "display: row-table;" });
|
||||
|
||||
var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;"}, legendEntryRow);
|
||||
let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;"}, legendDataCell);
|
||||
|
||||
var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;" }, legendEntryRow);
|
||||
let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;" }, legendDataCell);
|
||||
legendDiv.style.backgroundColor = "#" + obj.layer.color;
|
||||
|
||||
var chkDataCell = dom.createDom("td", { "class": "checkboxFive" }, legendEntryRow);
|
||||
var lblDataCell = dom.createDom("td", {"style": "vertical-align: top;"}, legendEntryRow);
|
||||
var lblDataCell = dom.createDom("td", { "style": "vertical-align: top;" }, legendEntryRow);
|
||||
|
||||
|
||||
var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
|
||||
|
|
@ -149,13 +152,17 @@ export class LayerControl extends Control {
|
|||
domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
|
||||
dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
|
||||
|
||||
dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell);
|
||||
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);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -163,11 +170,11 @@ export class LayerControl extends Control {
|
|||
|
||||
}
|
||||
|
||||
_onInputClick (layerId) {
|
||||
let inputs = this._layerContainer.getElementsByTagName('input');
|
||||
_onInputClick(layerId) {
|
||||
let inputs = this._layerContainer.getElementsByTagName('input');
|
||||
this._handlingClick = true;
|
||||
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
let input = inputs[i];
|
||||
if (input.type == 'checkbox' && layerId === input.layerId) {
|
||||
let obj = this._layers[input.layerId];
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
|
|||
import { Scene } from 'three/src/scenes/Scene';
|
||||
import { Vector3 } from 'three/src/math/Vector3';
|
||||
import { GridLayer } from './layer/GridLayer';
|
||||
// import { BoxLayer } from './layer/BoxLayer';
|
||||
import { DemLayer } from './layer/DemLayer';
|
||||
import { Map } from './core/Map';
|
||||
import * as domEvent from './core/domEvent';
|
||||
|
|
@ -21,8 +20,8 @@ import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
|
|||
import * as util from './core/utilities';
|
||||
import * as browser from './core/browser';
|
||||
import * as domUtil from './core/domUtil';
|
||||
import { MobileDialog } from "./controls/MobileDialog";
|
||||
import { Picking } from './clip/Picking';
|
||||
import Modal from './components/ShowModal';
|
||||
|
||||
import { Selection } from './clip/Selection';
|
||||
import _ from "lodash";
|
||||
|
|
@ -61,7 +60,9 @@ class Application {
|
|||
this.navigation = document.getElementsByClassName('navigation')[0];
|
||||
// this.addEventListeners();
|
||||
|
||||
this.dialog = new MobileDialog("Help", container, { klass: "fm_about" });
|
||||
this.dialog = new Modal("Help", container, { klass: "fm_about" });
|
||||
|
||||
// this.dialog = new MobileDialog("Help", container, { klass: "fm_about" });
|
||||
this.aboutIcon = document.querySelector('#menu-about-icon');
|
||||
|
||||
|
||||
|
|
@ -181,21 +182,21 @@ class Application {
|
|||
this.mapTitle = document.querySelector('#map-title');
|
||||
this.mapTitle.innerHTML += map.title;
|
||||
map.on('ready', () => {
|
||||
this.selection.setUniforms();
|
||||
this.animate();
|
||||
this.selection.setUniforms();
|
||||
this.animate();
|
||||
}, this);
|
||||
|
||||
this.selection = new Selection(
|
||||
// new Vector3(-7, -14, -14),
|
||||
// new Vector3(14, 9, 3)
|
||||
{ name: 'Slicing Box'},
|
||||
{ name: 'Slicing Box' },
|
||||
new Vector3(x.min, y.min, z.min),
|
||||
new Vector3(x.max, y.max, z.max)
|
||||
new Vector3(x.max, y.max, z.max)
|
||||
);
|
||||
this.map.addLayer(this.selection);
|
||||
|
||||
new Picking(size, center, this);
|
||||
|
||||
|
||||
|
||||
// let boxLayer = new BoxLayer({
|
||||
// width: 10000, height: 10000, depth: 10000, name: 'center-box', color: 800080 , center: center
|
||||
|
|
@ -259,7 +260,7 @@ class Application {
|
|||
//slice on x and y axes:
|
||||
// this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map);
|
||||
|
||||
|
||||
|
||||
// this.capsScene.add(this.selection.boxMesh);
|
||||
// this.scene.add(this.selection.displayMeshes);
|
||||
// this.scene.add(this.selection.touchMeshes);
|
||||
|
|
@ -418,7 +419,7 @@ class Application {
|
|||
let chkGrid = document.getElementById("chkGrid");
|
||||
domEvent.on(chkGrid, 'click', function (e) {
|
||||
this.gridlayer.toggle();
|
||||
}, app);
|
||||
}, this);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -519,3 +520,26 @@ class Application {
|
|||
let container = document.getElementById("webgl");
|
||||
let app = new Application(container);
|
||||
app.build();
|
||||
|
||||
// new Vue({
|
||||
// el: '#app',
|
||||
// components: { Modal },
|
||||
// data() {
|
||||
// return {
|
||||
// isModalVisible: false,
|
||||
// }
|
||||
// },
|
||||
// mounted() {
|
||||
// let container = document.getElementById("webgl");
|
||||
// let app = new Application(container);
|
||||
// app.build();
|
||||
// },
|
||||
// methods: {
|
||||
// showModal() {
|
||||
// this.isModalVisible = true;
|
||||
// },
|
||||
// closeModal() {
|
||||
// this.isModalVisible = false;
|
||||
// },
|
||||
// }
|
||||
// });
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue