geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- bulma modal

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-03-22 08:50:36 +01:00
parent 885947ee31
commit a09db46a03
7 changed files with 139 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/css/page_bulma.scss
View File

@ -9,9 +9,16 @@
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your brand colors
$purple: #8A4D76;
// 1. Import the initial variables
@import "../../node_modules/bulma/sass/utilities/_all.sass";
// 2. Set your own initial (brand) variables
// Update the blue shade, used for links
$blue: #06bcef;
// Add pink and its invert
$pink: #FA7C91;
$pink-invert: #fff;
$purple: #8A4D76;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
@ -19,7 +26,10 @@ $mouse-grey: #6c6e6b;
$select-green: #03a678;
// Update Bulma's global variables
// Update the sans-serif font family
$family-sans-serif: "Nunito", sans-serif;
// 3. Set the derived variables
$grey-dark: $brown;
// $grey-light: $beige-light;
// $primary: $purple;
@ -267,7 +277,6 @@ ul {
display: none;
/* visibility: hidden; */
}
.tab-content .tab-pane.active {
display: block;
/* visibility: visible; */
@ -276,10 +285,11 @@ ul {
padding:1em;
}
// Import only what you need from Bulma
@import "../../node_modules/bulma/sass/utilities/_all.sass";
// 4. Import the rest of bulma, only what you need from Bulma
// @import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/grid/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass";
@import "../../node_modules/bulma/sass/elements/box.sass";
@import "../../node_modules/bulma/sass/elements/button.sass";
@import "../../node_modules/bulma/sass/elements/container.sass";
@import "../../node_modules/bulma/sass/elements/title.sass";
@ -287,6 +297,8 @@ ul {
@import "../../node_modules/bulma/sass/form/_all.sass";
@import "../../node_modules/bulma/sass/components/navbar.sass";
@import "../../node_modules/bulma/sass/components/tabs.sass";
@import "../../node_modules/bulma/sass/components/media.sass";
@import "../../node_modules/bulma/sass/components/modal.sass";
@import "../../node_modules/bulma/sass/layout/hero.sass";
@import "../../node_modules/bulma/sass/layout/section.sass";

2
src/js/clip/Selection.js
View File

@ -96,7 +96,7 @@ export class Selection extends Layer {
build(app_scene) {
// app_scene.add(this.boxMesh);
app_scene.add(this.displayMeshes);
// app_scene.add(this.touchMeshes);
app_scene.add(this.touchMeshes);
}
setWireframeMode(wireframe) {

56
src/js/components/ShowModal.js
View File

@ -3,7 +3,7 @@ import * as dom from "../core/domUtil";
import * as domEvent from "../core/domEvent";
import * as util from "../core/utilities";
import "./ShowModal.css";
// import "./ShowModal.css";
// @Component({})
export class ShowModal {
@ -39,40 +39,56 @@ export class ShowModal {
}
let dialogHtml = `
<div class="modal-backdrop">
<div
class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
>
<div class="modal-background"></div>
<header class="modal-header" id="modalTitle">
<slot name="header">
${this.title}
<button
type="button"
class="btn-close"
class="modal-close btn-close"
aria-label="Close modal"
>
x
</button>
</slot>
</header>
<section class="modal-body modalDescription">
</section>
<section class="modal-body additionalDescription">
</section>
<footer class="modal-footer">
<slot name="footer">
</slot>
</footer>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content ">
<div class="modalDescription">
<p>
<strong>Modal</strong> <small>Basic Demo</small>
<br>
The content for the modal comes here. You may use text, images, buttons etc. here.
</p>
</div>
<div class="additionalDescription">
</div>
</div>
</article>
</div>
</div>
</div>
`;
// <div class="media-left">
// <figure class="image is-64x64">
// <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
// </figure>
// </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.dialogDiv = dom.createDom("div", { class: this.options.klass + " fm_overlay", innerHTML: dialogHtml }, container);
this.modal = this.dialogDiv.querySelector(".modal");
this.popupcontent = this.dialogDiv.querySelector(".modalDescription");
//additional info div
this.pageinfo = this.dialogDiv.querySelector(".additionalDescription");
@ -84,8 +100,9 @@ export class ShowModal {
}
hide(e) {
this.dialogDiv.classList.add('hide');
this.dialogDiv.classList.remove('show');
// this.dialogDiv.classList.add('hide');
// this.dialogDiv.classList.remove('show');
this.modal.classList.remove("is-active");
}
show(html) {
@ -127,7 +144,7 @@ export class ShowModal {
<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>
<li id="lib_fontawesome">Font Awesome Free <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">github.com/FortAwesome</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>
@ -135,8 +152,9 @@ export class ShowModal {
this.pageinfo.style.display = "block";
}
this.dialogDiv.classList.add('show');
this.dialogDiv.classList.remove('hide');
// this.dialogDiv.classList.add('show');
// this.dialogDiv.classList.remove('hide');
this.modal.classList.add("is-active");
}
_help() {

7
src/js/controls/LayerControl.css
View File

@ -74,15 +74,13 @@ height: 31py;
vertical-align: super;
}
.gba-controllayers input[type=checkbox] {
/* .gba-controllayers input[type=checkbox] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
/* height:1px;
width:1px; */
padding:0;
border:0;
}
} */
/**Create the box for the checkbox*/
@ -97,7 +95,6 @@ left: 0;
right: 0;
text-align: center;
background: #eee;
/* border: 1px solid #ddd; */
}
/* Display the tick inside the checkbox */
.checkboxFive label:after {

28
src/js/controls/LayerControl.js
View File

@ -147,16 +147,30 @@ export class LayerControl extends Control {
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);
let chkDataCell = dom.createDom("td", { }, legendEntryRow);
let lblDataCell = dom.createDom("td", { "style": "vertical-align: top;" }, legendEntryRow);
var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
input.layerId = util.stamp(obj.layer);
domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
// var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
// input.layerId = util.stamp(obj.layer);
// domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
// dom.createDom("label", { for: util.stamp(obj.layer), class:"is-checkbox" }, chkDataCell);
// dom.createDom("span", { innerHTML: " " + obj.name + "&nbsp;" }, lblDataCell);
dom.createDom("span", { innerHTML: " " + obj.name + "&nbsp;" }, lblDataCell);
let id = util.stamp(obj.layer);
let chkLayerHtml = `
<label class="checkbox">
<input id='${id}' checked="checked" type="checkbox">
<span>${obj.name}</span>
</label>
`;
// <span class="icon checkmark">
// <i class="fa fa-check"></i>
// </span>
let chkLayer = dom.createDom("span", { class: 'control', innerHTML: chkLayerHtml }, chkDataCell);
let input = chkLayer.querySelector('input');
input.layerId = id;
domEvent.on(input, 'click', function () { this._onInputClick(id); }, this);
// thesaurus direct link link
// let layerInfo = dom.createDom(

4
src/js/core/Map.js
View File

@ -86,8 +86,8 @@ class Map extends OrbitControls {
name: layerData.preview.legend_text, //layerData.legend_description,
description: "test",
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,
citation: layerData.geologicdescription !== null ? layerData.geologicdescription.citation : null,
feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null,
});
callStack.push(this.addLayer(dxfLayer))
}

43
src/js/main.js
View File

@ -60,7 +60,8 @@ class Application {
this.navigation = document.getElementsByClassName('navigation')[0];
// this.addEventListeners();
this.dialog = new ShowModal("Help", container, { klass: "fm_about" });
let parentContainer = document.getElementById("app");
this.dialog = new ShowModal("Help", parentContainer, { klass: "fm_about" });
// this.dialog = new MobileDialog("Help", container, { klass: "fm_about" });
this.aboutIcon = document.querySelector('#menu-about-icon');
@ -261,7 +262,7 @@ class Application {
// this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map);
// this.capsScene.add(this.selection.boxMesh);
this.capsScene.add(this.selection.boxMesh);
// this.scene.add(this.selection.displayMeshes);
// this.scene.add(this.selection.touchMeshes);
@ -352,26 +353,36 @@ class Application {
animate() {
this.renderer.clear();
// The HTML5 Canvas's 'webgl' context obtained from the canvas where the renderer will draw.
let gl = this.renderer.context;
// if (this.showCaps) {
// this.renderer.state.setStencilTest(true);
if (this.showCaps && gl != undefined) {
// this.renderer.state.setStencilFunc(gl.ALWAYS, 1, 0xff);
// this.renderer.state.setStencilOp(gl.KEEP, gl.KEEP, gl.INCR);
// // this.renderer.render(this.backStencil, this.camera);
// enable stencil test
gl.enable(gl.STENCIL_TEST);
// gl.stencilFunc( gl.ALWAYS, 1, 0xff );
// gl.stencilOp( gl.REPLACE, gl.REPLACE, gl.REPLACE );
// this.renderer.state.setStencilFunc(gl.ALWAYS, 1, 0xff);
// this.renderer.state.setStencilOp(gl.KEEP, gl.KEEP, gl.DECR);
// // this.renderer.render(this.frontStencil, this.camera);
this.renderer.state.setStencilTest(true);
// this.renderer.state.setStencilFunc(gl.EQUAL, 1, 0xff);
// this.renderer.state.setStencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
// this.renderer.render(this.capsScene, this.camera);
gl.StencilFunc(gl.ALWAYS, 1, 0xff);
gl.StencilOp(gl.KEEP, gl.KEEP, gl.INCR);
// this.renderer.render(this.backStencil, this.camera);
// this.renderer.state.setStencilTest(false);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.StencilOp(gl.KEEP, gl.KEEP, gl.DECR);
// this.renderer.render(this.frontStencil, this.camera);
gl.StencilFunc(gl.EQUAL, 1, 0xff);
gl.StencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
this.renderer.render(this.capsScene, this.camera);
this.renderer.state.setStencilTest(false);
// disable stencil test
gl.disable(gl.STENCIL_TEST);
}
// }
this.renderer.render(this.scene, this.camera);
this.northArrow.animate();
this.gridlayer.animate();
@ -407,7 +418,7 @@ class Application {
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute