From a442daf880d95e80a9df70f99fffaa1a6d7495c5 Mon Sep 17 00:00:00 2001 From: Rob Gaston Date: Wed, 11 Aug 2021 13:16:41 -0700 Subject: [PATCH] adds fullscreen help control, re: #40 --- src/components/fullscreen-help/index.js | 37 +++++++ src/components/fullscreen-help/template.html | 17 ++++ src/components/map/index.js | 7 +- src/styles.scss | 101 +++++++++++++++++++ 4 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 src/components/fullscreen-help/index.js create mode 100644 src/components/fullscreen-help/template.html diff --git a/src/components/fullscreen-help/index.js b/src/components/fullscreen-help/index.js new file mode 100644 index 0000000..edb974a --- /dev/null +++ b/src/components/fullscreen-help/index.js @@ -0,0 +1,37 @@ +import * as template from './template.html'; + +export default class FullscreenHelp { + constructor(fullscreenControl) { + this.fullscreenControl = fullscreenControl; + this.dismissed = false; + } + onAdd(map) { + const parser = new DOMParser(); + const doc = parser.parseFromString(template, "text/html"); + const el = doc.body.removeChild(doc.body.firstChild); + this.map = map; + this.container = el; + this.container.style.display = "none"; + + window.document.addEventListener(this.fullscreenControl._fullscreenchange, () => { + if (!this.fullscreenControl._fullscreen) this.dismiss(); + this.container.style.display = this.dismissed ? "none" : "inline-block"; + }); + + this.container.querySelectorAll('a').forEach(element => { + element.onclick = () => { + this.dismiss(); + }; + }); + + return this.container; + } + dismiss() { + this.container.style.display = "none"; + this.dismissed = true; + } + onRemove() { + this.container.parentNode.removeChild(this.container); + this.map = undefined; + } +} diff --git a/src/components/fullscreen-help/template.html b/src/components/fullscreen-help/template.html new file mode 100644 index 0000000..28abad0 --- /dev/null +++ b/src/components/fullscreen-help/template.html @@ -0,0 +1,17 @@ +
+
+
+
+
Click to Exit Fullscreen
+ +
+
+
+ Click on the collapse icon to exit fullscreen view. +
+
+ OK +
+
+
+
diff --git a/src/components/map/index.js b/src/components/map/index.js index d028583..0707dfa 100644 --- a/src/components/map/index.js +++ b/src/components/map/index.js @@ -7,6 +7,7 @@ import * as config from '../../config.json'; import '../../bindings/mapbox-gl'; import ZoomControl from '../zoom-control'; import HelpControl from '../help-control'; +import FullscreenHelp from '../fullscreen-help'; let mapboxQuery = process.env.NODE_ENV === 'production' ? '' : '&fresh=true'; export default ko.components.register('map', { @@ -35,13 +36,15 @@ export default ko.components.register('map', { }, trackUserLocation: true })); - map.addControl(new mapboxgl.FullscreenControl({ + const fullscreenControl = new mapboxgl.FullscreenControl({ container: params.container - })); + }) + map.addControl(fullscreenControl); map.addControl(new mapboxgl.ScaleControl({ unit: 'imperial' })); map.addControl(new HelpControl(params.showInfoPanel, params.rootURL)); + map.addControl(new FullscreenHelp(fullscreenControl)); params.map(map); params.mapType.subscribe((mapType) => { diff --git a/src/styles.scss b/src/styles.scss index 93902e4..c8c7218 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3350,3 +3350,104 @@ table.striped-rows.air-monitoring-table { .baaqmd-maps-main .zoom-hover .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in:hover { background-color: #ee8301 !important; } + +.expand-popup.mbl-map { + max-width: 300px; + background-color: #0f9d58; + position: absolute; + padding: 10px 20px 15px 20px; + border-radius: 8px; + box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); +} + +.hint-header { + width: 100%; + display: inline-block; + margin-bottom: 5px; + border-bottom: solid 1px rgba(255, 255, 255, 0.7); +} + +.expand-popup.mbl-map .hint-header h5 { + font-size: 1.45rem; + float: left; + margin-right: 5px; + margin-bottom: 8px; + color: white; + text-transform: uppercase; + font-family: "proxima-nova-n4", "proxima-nova", "Open Sans", Corbel, Helvetica, Arial; + letter-spacing: 2px; +} + +.hint-text { + color: white; + font-size: 1.4rem; + line-height: 1.8rem; +} + +.hint-check { + margin-top: 12px; +} + +.hint-lbl { + color: white; + font-size: 1.2rem; + line-height: 0.8rem; +} + +.expand-popup.mbl-map a.white-link { + background-color: white; + padding: 6px 30px 4px 30px; + border-radius: 6px; + text-decoration: none !important; + font-size: 1.3rem !important; + font-weight: 600; +} + +.expand-popup.mbl-map a.white-link:hover, +.expand-popup.mbl-map a.white-link:focus { + background-color: #ee8301; + color: white !important; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); +} + +a.white-link.flt-right { + float: right; +} + +.expand-popup.mbl-map::after { + position: absolute; + content: ''; + top: 56px; + right: -18px; + width: 0; + height: 0; + border-left: 20px solid #0f9d58; + border-bottom: 15px solid transparent; + border-top: 15px solid transparent; +} + +.expand-popup.mbl-map .hint-header a.icon-Close { + float: right; + margin-left: 15px; + right: 10px; + top: 9px; + color: white; + font-size: 1.4rem; + position: absolute; + text-decoration: none !important; + font-weight: 800; +} + +.expand-popup.mbl-map .hint-header a.icon-Close:hover, +.expand-popup.mbl-map .hint-header a.icon-Close:focus { + color: rgb(250, 210, 0) !important; +} + +.mapboxgl-control-container .mapboxgl-ctrl-help { + display: inline-block; + top: -129px; + right: 221px; + width: 100%; + position: absolute; + box-sizing: border-box; +}