- bulma modal
This commit is contained in:
Arno Kaimbacher
parent
885947ee31
commit
a09db46a03
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<header class="modal-header" id="modalTitle">
|
||||
<slot name="header">
|
||||
${this.title}
|
||||
<button
|
||||
type="button"
|
||||
class="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>
|
||||
<div
|
||||
class="modal"
|
||||
role="dialog"
|
||||
aria-labelledby="modalTitle"
|
||||
aria-describedby="modalDescription"
|
||||
>
|
||||
<div class="modal-background"></div>
|
||||
<header class="modal-header" id="modalTitle">
|
||||
${this.title}
|
||||
<button
|
||||
type="button"
|
||||
class="modal-close btn-close"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<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() {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
<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(
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user