From a09db46a03ad2f66f1313558ba3e486ff3c6fa3c Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Mon, 22 Mar 2021 08:50:36 +0100 Subject: [PATCH] - bulma modal --- src/css/page_bulma.scss | 22 ++++++-- src/js/clip/Selection.js | 2 +- src/js/components/ShowModal.js | 90 +++++++++++++++++++------------- src/js/controls/LayerControl.css | 7 +-- src/js/controls/LayerControl.js | 30 ++++++++--- src/js/core/Map.js | 4 +- src/js/main.js | 71 ++++++++++++++----------- 7 files changed, 139 insertions(+), 87 deletions(-) diff --git a/src/css/page_bulma.scss b/src/css/page_bulma.scss index d98c6f4..c375cd6 100644 --- a/src/css/page_bulma.scss +++ b/src/css/page_bulma.scss @@ -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"; diff --git a/src/js/clip/Selection.js b/src/js/clip/Selection.js index c2de665..608965f 100644 --- a/src/js/clip/Selection.js +++ b/src/js/clip/Selection.js @@ -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) { diff --git a/src/js/components/ShowModal.js b/src/js/components/ShowModal.js index ad2a7ce..f806efd 100644 --- a/src/js/components/ShowModal.js +++ b/src/js/components/ShowModal.js @@ -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 = ` -
- + `; - + //
+ //
+ // Image + //
+ //
+ 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 {
  • normalize.css github.com/necolas/normalize.css MIT License
    • -
  • Font Awesome Free github.com/FortAwesome/Font-Awesome +
  • Font Awesome Free github.com/FortAwesome Font: SIL OFL 1.1, CSS: MIT License, Icons: CC BY 4.0 License
    • @@ -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() { diff --git a/src/js/controls/LayerControl.css b/src/js/controls/LayerControl.css index ee0aa8a..f9112a2 100644 --- a/src/js/controls/LayerControl.css +++ b/src/js/controls/LayerControl.css @@ -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 { diff --git a/src/js/controls/LayerControl.js b/src/js/controls/LayerControl.js index 4b98575..88ab57b 100644 --- a/src/js/controls/LayerControl.js +++ b/src/js/controls/LayerControl.js @@ -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); - - dom.createDom("span", { innerHTML: " " + obj.name + " " }, lblDataCell); + // 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 + " " }, lblDataCell); + + let id = util.stamp(obj.layer); + let chkLayerHtml = ` + + `; + // + // + // + 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( diff --git a/src/js/core/Map.js b/src/js/core/Map.js index c7219d3..c64c860 100644 --- a/src/js/core/Map.js +++ b/src/js/core/Map.js @@ -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)) } diff --git a/src/js/main.js b/src/js/main.js index 5f8ee33..472ac1e 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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(); @@ -401,25 +412,25 @@ class Application { // domEvent.on(this.menuIcon, 'click', function (e) { // e.preventDefault(); // this.navigation.classList.toggle("active"); - // }, this); - + // }, this); + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Check if there are any navbar burgers if ($navbarBurgers.length > 0) { - // Add a click event on each of them - $navbarBurgers.forEach( el => { - el.addEventListener('click', () => { - - // Get the target from the "data-target" attribute - const target = el.dataset.target; - const $target = document.getElementById(target); - - // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" - el.classList.toggle('is-active'); - $target.classList.toggle('is-active'); - + // Add a click event on each of them + $navbarBurgers.forEach(el => { + el.addEventListener('click', () => { + + // Get the target from the "data-target" attribute + const target = el.dataset.target; + const $target = document.getElementById(target); + + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + + }); }); - }); } var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li'));