- bulma modal

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
+// 1. Import the initial variables
-$purple: #8A4D76;
+@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
+// 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/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";

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) {

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 = `
-        <div class="modal-backdrop">
+        <div
-            <div
+            class="modal"
-                class="modal"
+            role="dialog"
-                role="dialog"
+            aria-labelledby="modalTitle"
-                aria-labelledby="modalTitle"
+            aria-describedby="modalDescription"
-                aria-describedby="modalDescription"
+        >
-            >
+            <div class="modal-background"></div>
-                <header class="modal-header" id="modalTitle">               
+            <header class="modal-header" id="modalTitle">  
-                <slot name="header">
+            ${this.title}
-                ${this.title}
+                <button
-                    <button
+                type="button"
-                    type="button"
+                class="modal-close btn-close"                   
-                    class="btn-close"                   
+                aria-label="Close modal"
-                    aria-label="Close modal"
+                >
-                    >
+                x
-                    x
+                </button>           
-                    </button>
+            </header>
-                </slot>
+           
-                </header>
+            <div class="modal-content">
-                <section class="modal-body modalDescription">
+                <div class="box">
-                </section>
+                <article class="media">
-                <section class="modal-body additionalDescription">               
+                   
-                </section>
+                    <div class="media-content ">
-                <footer class="modal-footer">
+                        <div class="modalDescription">
-                <slot name="footer">                 
+                            <p>
-                </slot>
+                            <strong>Modal</strong> <small>Basic Demo</small> 
-                </footer>
+                            <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.add('hide');
-        this.dialogDiv.classList.remove('show');
+        // 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.add('show');
-        this.dialogDiv.classList.remove('hide');
+        // this.dialogDiv.classList.remove('hide');
+        this.modal.classList.add("is-active");
     }
 
     _help() {

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 {

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);
+        let chkDataCell = dom.createDom("td", { }, legendEntryRow);
-        var lblDataCell = dom.createDom("td", { "style": "vertical-align: top;" }, 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);
+        // var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
-        input.layerId = util.stamp(obj.layer);
+        // input.layerId = util.stamp(obj.layer);
-        domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
+        // domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
-        dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
+        // dom.createDom("label", { for: util.stamp(obj.layer), class:"is-checkbox" }, chkDataCell);
+        // dom.createDom("span", { innerHTML: " " + obj.name + " " }, lblDataCell);
         
-        dom.createDom("span", { innerHTML: " " + obj.name + " " }, 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(

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,
+                citation: layerData.geologicdescription !== null ? layerData.geologicdescription.citation : null,
-                feature_type: layerData.characteristics !== null ? layerData.characteristics.feature_type : null,
+                feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null,
             });
             callStack.push(this.addLayer(dxfLayer))
         }

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);
+            // enable stencil test
-        //     this.renderer.state.setStencilOp(gl.KEEP, gl.KEEP, gl.INCR);
+            gl.enable(gl.STENCIL_TEST);
-        //     // this.renderer.render(this.backStencil, this.camera);
+            // 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.setStencilTest(true);
-        //     this.renderer.state.setStencilOp(gl.KEEP, gl.KEEP, gl.DECR);
-        //     // this.renderer.render(this.frontStencil, this.camera);
 
-        //     this.renderer.state.setStencilFunc(gl.EQUAL, 1, 0xff);
+            gl.StencilFunc(gl.ALWAYS, 1, 0xff);
-        //     this.renderer.state.setStencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+            gl.StencilOp(gl.KEEP, gl.KEEP, gl.INCR);
-        //     this.renderer.render(this.capsScene, this.camera);
+            // 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
+            // Add a click event on each of them
-          $navbarBurgers.forEach( el => {
+            $navbarBurgers.forEach(el => {
-            el.addEventListener('click', () => {
+                el.addEventListener('click', () => {
 
-              // Get the target from the "data-target" attribute
+                    // Get the target from the "data-target" attribute
-              const target = el.dataset.target;
+                    const target = el.dataset.target;
-              const $target = document.getElementById(target);
+                    const $target = document.getElementById(target);
 
-              // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-              el.classList.toggle('is-active');
+                    el.classList.toggle('is-active');
-              $target.classList.toggle('is-active');
+                    $target.classList.toggle('is-active');
 
+                });
             });
-          });
         }
 
         var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li'));