From 452ef6e336f731a634c2df847a1790a01aeb144e Mon Sep 17 00:00:00 2001 From: Tariq Soliman Date: Wed, 19 Jan 2022 12:00:36 -0800 Subject: [PATCH] #129 BottomBar UI Visibility Modal (#130) --- src/css/mmgis.css | 12 +- src/css/mmgisUI.css | 93 ++++ src/essence/Ancillary/Coordinates.css | 18 +- src/essence/Ancillary/Login/Login.css | 1 + src/essence/Ancillary/Modal.css | 14 +- src/essence/Ancillary/Modal.js | 1 + src/essence/Ancillary/Search.css | 2 + src/essence/Basics/Map_/Map_.js | 44 +- .../Basics/UserInterface_/BottomBar.css | 56 +++ .../Basics/UserInterface_/BottomBar.js | 414 ++++++++++++++++++ .../Basics/UserInterface_/UserInterface_.css | 4 +- .../Basics/UserInterface_/UserInterface_.js | 251 +---------- 12 files changed, 634 insertions(+), 276 deletions(-) create mode 100644 src/essence/Basics/UserInterface_/BottomBar.css create mode 100644 src/essence/Basics/UserInterface_/BottomBar.js diff --git a/src/css/mmgis.css b/src/css/mmgis.css index 8e91552e..c20cc68b 100644 --- a/src/css/mmgis.css +++ b/src/css/mmgis.css @@ -49,6 +49,7 @@ body { --color-m: #c4c4c4; --color-n: #151619; --color-o: #1a628e; + --color-p: #747474; --color-green: #00d200; --color-yellow: #d2b800; @@ -156,6 +157,9 @@ body { justify-content: space-evenly; align-items: center; } +.splitterVInner > div { + border-radius: 3px; +} .splitterVInner i { width: 48px; @@ -416,11 +420,11 @@ body { color: var(--color-f); width: 30px; height: 30px; - line-height: 29px !important; border-radius: 3px; - margin-bottom: 4px; + margin-bottom: 5px; + font-size: 18px !important; border: none !important; - border-radius: 0 !important; + border-radius: 3px !important; background: var(--color-a) !important; transition: color 0.2s ease-in 0s; } @@ -625,6 +629,8 @@ body { padding: 0px 8px; font-size: 14px; color: var(--color-mw2); + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; flex: 1; transition: background 0.2s ease-out, border 0.2s ease-out; } diff --git a/src/css/mmgisUI.css b/src/css/mmgisUI.css index 5419af12..5d05555a 100644 --- a/src/css/mmgisUI.css +++ b/src/css/mmgisUI.css @@ -1280,6 +1280,7 @@ input[type='range'].verticalSlider:focus::-ms-fill-upper { } .mmgisHoverBlue { + cursor: pointer; color: var(--color-f); transition: all 0.2s ease-in 0s; } @@ -1292,3 +1293,95 @@ input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } + +/* MMGIS checkbox */ + +/* CHECKBOX */ +/* +
+ + +
+*/ +/* +
+*/ +.mmgis-checkbox { + position: relative; + width: 20px; + height: 20px; + margin: 5px; +} + +.mmgis-checkbox label { + background-color: var(--color-k); + border: 2px solid var(--color-p); + cursor: pointer; + width: 20px; + height: 20px; + position: absolute; + left: 0; + top: 0; + border-radius: 3px; + transition: all 0.2s ease; +} +@media (pointer: fine) and (hover: hover) { + .mmgis-checkbox label:hover { + background-color: var(--color-j); + border: 2px solid var(--color-f); + } +} + +.mmgis-checkbox label::after { + border: 2px solid var(--color-k); + border-top: none; + border-right: none; + content: ''; + width: 9px; + height: 4px; + position: absolute; + left: 4px; + top: 5px; + opacity: 0; + transform: rotate(-45deg); + transition: all 0.2s ease; +} + +.mmgis-checkbox input[type='checkbox'] { + visibility: hidden; +} + +.mmgis-checkbox input[type='checkbox']:checked + label { + background-color: var(--color-f); + border-color: var(--color-f); +} + +.mmgis-checkbox input[type='checkbox']:checked + label::after { + opacity: 1; +} + +.mmgisCheckbox { + margin: 5px; + width: 20px; + height: 20px; + border: 2px solid #777; + border-radius: 3px; + cursor: pointer; + transition: background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), + border 0.1s cubic-bezier(0.39, 0.575, 0.565, 1), + border-radius 0.1s cubic-bezier(0.39, 0.575, 0.565, 1); +} +.mmgisCheckbox.on { + background: white; + border: 0px solid #777; +} +.mmgisCheckbox:not(.on):hover { + background: rgba(255, 255, 255, 0.1); +} +.mmgisCheckbox.loading { + background: transparent; + border: 3px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top-color: #fff; + animation: layerLoadingSpin 1s ease-in-out infinite; +} diff --git a/src/essence/Ancillary/Coordinates.css b/src/essence/Ancillary/Coordinates.css index 3bff4a60..c25b6180 100644 --- a/src/essence/Ancillary/Coordinates.css +++ b/src/essence/Ancillary/Coordinates.css @@ -14,7 +14,7 @@ line-height: 30px; padding: 0px 6px; background: var(--color-a); - border-radius: 4px; + border-radius: 3px; display: flex; } #CoordinatesDiv #mouseDesc { @@ -48,7 +48,7 @@ position: absolute; right: 63px; display: flex; - border-radius: 4px; + border-radius: 3px; transition: opacity 0.2s ease-in; } #CoordinatesDiv .mouseLngLatPicking.active { @@ -96,8 +96,8 @@ #CoordinatesDiv #mouseGoPicking { padding: 0px 6px; background: var(--color-h); - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; transition: background 0.2s ease-in; cursor: pointer; color: var(--color-a); @@ -112,7 +112,7 @@ color: var(--color-f); text-align: center; cursor: pointer; - border-radius: 4px; + border-radius: 3px; width: 24px; height: 24px; line-height: 24px; @@ -141,8 +141,8 @@ line-height: 24px; margin: 3px 0px 3px 5px; pointer-events: all; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + border-top-right-radius: 3px; + border-top-left-radius: 3px; transition: all 0.2s ease-in; } #CoordinatesDiv #toggleTimeUI > i:before { @@ -156,7 +156,7 @@ #CoordinatesDiv #toggleTimeUI.active { transform: translateY(-10px); color: var(--color-mmgis); - border-top-right-radius: 4px; - border-top-left-radius: 4px; + border-top-right-radius: 3px; + border-top-left-radius: 3px; height: 42px; } diff --git a/src/essence/Ancillary/Login/Login.css b/src/essence/Ancillary/Login/Login.css index faf74867..a7d30e18 100644 --- a/src/essence/Ancillary/Login/Login.css +++ b/src/essence/Ancillary/Login/Login.css @@ -136,6 +136,7 @@ line-height: 28px; margin-left: 5px; padding-left: 2px; + border-radius: 3px; pointer-events: all; transition: color 0.2s ease-in 0s; } diff --git a/src/essence/Ancillary/Modal.css b/src/essence/Ancillary/Modal.css index 458b7c21..d16e183f 100644 --- a/src/essence/Ancillary/Modal.css +++ b/src/essence/Ancillary/Modal.css @@ -16,8 +16,20 @@ right: 0; color: #ddd; cursor: pointer; - margin: 8px 6px; + padding: 16px; transition: color 0.2s ease; + background: var(--color-k); + border-bottom-left-radius: 100%; + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1); +} + +#mmgisModalClose i { + position: relative; + top: -5px; + right: -5px; +} +#mmgisModalClose:hover { + color: var(--color-c); } #mmgisModalInner { diff --git a/src/essence/Ancillary/Modal.js b/src/essence/Ancillary/Modal.js index 27a4f628..d5b0c71f 100644 --- a/src/essence/Ancillary/Modal.js +++ b/src/essence/Ancillary/Modal.js @@ -11,6 +11,7 @@ import './Modal.css' const Modal = { _onRemoveCallback: null, set: function (html, onAddCallback, onRemoveCallback) { + if ($('#mmgisModal')) $('#mmgisModal').remove() // prettier-ignore $('body').append([ "
", diff --git a/src/essence/Ancillary/Search.css b/src/essence/Ancillary/Search.css index 600b78bf..8bb7c689 100644 --- a/src/essence/Ancillary/Search.css +++ b/src/essence/Ancillary/Search.css @@ -9,6 +9,8 @@ border: none; border-right: 1px solid var(--color-b); cursor: pointer; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } #SearchClear { margin-left: 0px; diff --git a/src/essence/Basics/Map_/Map_.js b/src/essence/Basics/Map_/Map_.js index a12168f2..8290ad4d 100644 --- a/src/essence/Basics/Map_/Map_.js +++ b/src/essence/Basics/Map_/Map_.js @@ -223,24 +223,7 @@ let Map_ = { //Add a graticule if (L_.configData.look && L_.configData.look.graticule == true) { - L.latlngGraticule({ - showLabel: true, - color: '#bbb', - weight: 1, - zoomInterval: [ - { start: 2, end: 3, interval: 40 }, - { start: 4, end: 5, interval: 20 }, - { start: 6, end: 7, interval: 10 }, - { start: 8, end: 9, interval: 5 }, - { start: 10, end: 11, interval: 0.4 }, - { start: 12, end: 13, interval: 0.2 }, - { start: 14, end: 15, interval: 0.1 }, - { start: 16, end: 17, interval: 0.01 }, - { start: 18, end: 19, interval: 0.005 }, - { start: 20, end: 21, interval: 0.0025 }, - { start: 21, end: 30, interval: 0.00125 }, - ], - }).addTo(Map_.map) + this.toggleGraticule(true) } //When done zooming, hide the things you're too far out to see/reveal the things you're close enough to see @@ -268,6 +251,31 @@ let Map_ = { //Set the time for any time enabled layers TimeControl.updateLayersTime() }, + toggleGraticule: function (on) { + if (on) + this.graticule = L.latlngGraticule({ + showLabel: true, + color: '#bbb', + weight: 1, + zoomInterval: [ + { start: 2, end: 3, interval: 40 }, + { start: 4, end: 5, interval: 20 }, + { start: 6, end: 7, interval: 10 }, + { start: 8, end: 9, interval: 5 }, + { start: 10, end: 11, interval: 0.4 }, + { start: 12, end: 13, interval: 0.2 }, + { start: 14, end: 15, interval: 0.1 }, + { start: 16, end: 17, interval: 0.01 }, + { start: 18, end: 19, interval: 0.005 }, + { start: 20, end: 21, interval: 0.0025 }, + { start: 21, end: 30, interval: 0.00125 }, + ], + }).addTo(Map_.map) + else { + this.rmNotNull(this.graticule) + this.graticule = null + } + }, clear: function () { this.map.eachLayer(function (layer) { Map_.map.removeLayer(layer) diff --git a/src/essence/Basics/UserInterface_/BottomBar.css b/src/essence/Basics/UserInterface_/BottomBar.css new file mode 100644 index 00000000..d9585a57 --- /dev/null +++ b/src/essence/Basics/UserInterface_/BottomBar.css @@ -0,0 +1,56 @@ +#mainSettingsModal { + background: var(--color-k); + width: 400px; + margin: 40px; + border-radius: 3px; +} +#mainSettingsModalTitle { + padding: 0px 0px 0px 10px; + height: 40px; + line-height: 39px; + font-size: 18px; + background: var(--color-i); + border-top-left-radius: 3px; + border-top-right-radius: 3px; + display: flex; + justify-content: space-between; +} +#mainSettingsModalTitle > div:first-child { + display: flex; +} +#mainSettingsModalTitle > div:first-child > div { + margin-left: 6px; + line-height: 40px; +} +#mainSettingsModalClose { + width: 40px; + height: 40px; + text-align: center; +} +#mainSettingsModalContent { + padding: 10px 20px; +} +.mainSettingsModalSection { +} +.mainSettingsModalSectionTitle { +} +.mainSettingsModalSectionOptions { + list-style-type: none; + margin: 8px 0px; + padding: 0; +} +.mainSettingsModalSectionOptions li { + display: flex; + height: 30px; + line-height: 30px; + padding-left: 10px; +} +.mainSettingsModalSectionOptions li > div:last-child { + padding-left: 3px; +} +.mainSettingsModalHR { + width: 100%; + height: 1px; + background: var(--color-b); + margin: 4px 0px; +} diff --git a/src/essence/Basics/UserInterface_/BottomBar.js b/src/essence/Basics/UserInterface_/BottomBar.js new file mode 100644 index 00000000..54761ae9 --- /dev/null +++ b/src/essence/Basics/UserInterface_/BottomBar.js @@ -0,0 +1,414 @@ +import $ from 'jquery' +import * as d3 from 'd3' + +import F_ from '../Formulae_/Formulae_' +import L_ from '../Layers_/Layers_' + +import QueryURL from '../../Ancillary/QueryURL' +import Modal from '../../Ancillary/Modal' +import HTML2Canvas from '../../../external/HTML2Canvas/html2canvas.min' + +import './BottomBar.css' + +let BottomBar = { + UI_: null, + settings: {}, + init: function (containerId, UI) { + this.UI_ = UI + const bottomBar = d3.select(`#${containerId}`) + + // Copy Link + bottomBar + .append('i') + .attr('id', 'topBarLink') + .attr('title', 'Copy Link') + .attr('tabindex', 100) + .attr('class', 'mmgisHoverBlue mdi mdi-open-in-new mdi-18px') + .style('padding', '5px 10px') + .style('width', '40px') + .style('height', '36px') + .style('line-height', '26px') + .style('cursor', 'pointer') + .on('click', function () { + const linkButton = $(this) + QueryURL.writeCoordinateURL(true, function () { + F_.copyToClipboard(L_.url) + + linkButton.removeClass('mdi-open-in-new') + linkButton.addClass('mdi-check-bold') + linkButton.css('color', 'var(--color-green)') + setTimeout(() => { + linkButton.removeClass('mdi-check-bold') + linkButton.css('color', '') + linkButton.addClass('mdi-open-in-new') + }, 3000) + }) + }) + + // Screenshot + bottomBar + .append('i') + .attr('id', 'topBarScreenshot') + .attr('title', 'Screenshot') + .attr('tabindex', 101) + .attr('class', 'mmgisHoverBlue mdi mdi-camera mdi-18px') + .style('padding', '5px 10px') + .style('width', '40px') + .style('height', '36px') + .style('line-height', '26px') + .style('cursor', 'pointer') + .style('opacity', '0.8') + .on('click', function () { + //We need to manually order leaflet z-indices for this to work + let zIndices = [] + $('#mapScreen #map .leaflet-tile-pane') + .children() + .each(function (i, elm) { + zIndices.push($(elm).css('z-index')) + $(elm).css('z-index', i + 1) + }) + $('.leaflet-control-scalefactor').css('display', 'none') + $('.leaflet-control-zoom').css('display', 'none') + $('#topBarScreenshotLoading').css('display', 'block') + HTML2Canvas(document.getElementById('mapScreen'), { + allowTaint: true, + useCORS: true, + }).then(function (canvas) { + canvas.id = 'mmgisScreenshot' + document.body.appendChild(canvas) + F_.downloadCanvas( + canvas.id, + 'mmgis-screenshot', + function () { + canvas.remove() + setTimeout(function () { + $('#topBarScreenshotLoading').css( + 'display', + 'none' + ) + }, 2000) + } + ) + }) + $('#mapScreen #map .leaflet-tile-pane') + .children() + .each(function (i, elm) { + $(elm).css('z-index', zIndices[i]) + }) + $('.leaflet-control-scalefactor').css('display', 'flex') + $('.leaflet-control-zoom').css('display', 'block') + }) + // Screenshot loading + d3.select('#topBarScreenshot') + .append('i') + .attr('id', 'topBarScreenshotLoading') + .attr('title', 'Taking Screenshot') + .attr('tabindex', 102) + .style('display', 'none') + .style('border-radius', '50%') + .style('border', '8px solid #ffe100') + .style('border-right-color', 'transparent') + .style('border-left-color', 'transparent') + .style('position', 'relative') + .style('top', '3px') + .style('left', '-17px') + .style('width', '20px') + .style('height', '20px') + .style('line-height', '26px') + .style('color', '#d2b800') + .style('cursor', 'pointer') + .style('animation-name', 'rotate-forever') + .style('animation-duration', '2s') + .style('animation-iteration-count', 'infinite') + .style('animation-timing', 'linear') + + // Fullscreen + bottomBar + .append('i') + .attr('id', 'topBarFullscreen') + .attr('title', 'Fullscreen') + .attr('tabindex', 103) + .attr('class', 'mmgisHoverBlue mdi mdi-fullscreen mdi-18px') + .style('padding', '5px 10px') + .style('width', '40px') + .style('height', '36px') + .style('line-height', '26px') + .style('cursor', 'pointer') + .on('click', function () { + BottomBar.fullscreen() + if ( + d3.select(this).attr('class') == + 'mmgisHoverBlue mdi mdi-fullscreen mdi-18px' + ) + d3.select(this) + .attr( + 'class', + 'mmgisHoverBlue mdi mdi-fullscreen-exit mdi-18px' + ) + .attr('title', 'Exit Fullscreen') + else + d3.select(this) + .attr( + 'class', + 'mmgisHoverBlue mdi mdi-fullscreen mdi-18px' + ) + .attr('title', 'Fullscreen') + }) + + // Settings + bottomBar + .append('i') + .attr('id', 'bottomBarSettings') + .attr('title', 'Settings') + .attr('tabindex', 104) + .attr('class', 'mmgisHoverBlue mdi mdi-settings mdi-18px') + .style('padding', '5px 10px') + .style('width', '40px') + .style('height', '36px') + .style('line-height', '26px') + .style('cursor', 'pointer') + .on('click', function () { + const that = $('#bottomBarSettings') + const wasOn = that.hasClass('active') + BottomBar.toggleSettings(!wasOn) + }) + + // Help + bottomBar + .append('i') + .attr('id', 'topBarHelp') + .attr('title', 'Help') + .attr('tabindex', 105) + .attr('class', 'mmgisHoverBlue mdi mdi-help mdi-18px') + .style('padding', '5px 10px') + .style('width', '40px') + .style('height', '36px') + .style('line-height', '26px') + .style('cursor', 'pointer') + .on('click', function () { + this.helpOn = !this.helpOn + if (this.helpOn) { + //d3.select('#viewer_Help').style('display', 'inherit') + } else { + d3.select('#viewer_Help').style('display', 'none') + } + }) + }, + toggleSettings: function (on) { + if (on) { + BottomBar.settings.visibility = BottomBar.settings.visibility || { + topbar: true, + toolbars: true, + scalebar: true, + coordinates: true, + graticule: this.UI_.Map_.graticule != null, + miscellaneous: true, + } + // prettier-ignore + const modalContent = [ + `
`, + `
`, + `
Settings
`, + `
`, + `
`, + `
`, + `
`, + `
User Interface Visibility
`, + `
    `, + `
  • `, + `
    `, + `
    Top Bar
    `, + `
    • `, + /* For now because then we need a way to open the settings modal again + `
  • `, + `
    `, + `
    Toolbars
    `, + `
    • `, + */ + `
  • `, + `
    `, + `
    Scale Bar
    `, + `
    • `, + `
  • `, + `
    `, + `
    Coordinates
    `, + `
    • `, + `
  • `, + `
    `, + `
    Graticule
    `, + `
    • `, + `
  • `, + `
    `, + `
    Miscellaneous
    `, + `
    • `, + `
`, + `
`, + `
`, + `
` + ].join('\n') + + Modal.set( + modalContent, + function () { + $('#mainSettingsModalClose').on('click', function () { + Modal.remove() + }) + $( + `#mainSettingsModalSectionUIVisibility .mmgis-checkbox > input` + ).on('click', function () { + const checked = $(this).prop('checked') + const value = $(this).attr('value') + + BottomBar.settings.visibility[value] = checked + + if (!checked) { + // now on + switch (value) { + case 'topbar': + $('#topBar').css('display', 'none') + break + case 'toolbars': + $('#mmgislogo').css('display', 'none') + $('#barBottom').css('display', 'none') + $('#toolbar').css({ + display: 'none', + width: '0px', + }) + $('#viewerToolBar').css('display', 'none') + $('#_lithosphere_controls').css( + 'display', + 'none' + ) + $('#splitscreens').css({ + left: '0px', + width: '100%', + }) + $('#mapScreen').css( + 'width', + $('#mapScreen').width() + 40 + 'px' + ) + BottomBar.UI_.topSize = 0 + window.dispatchEvent(new Event('resize')) + break + case 'scalebar': + $('#scaleBarBounds').css('display', 'none') + break + case 'coordinates': + $('#CoordinatesDiv').css('display', 'none') + break + case 'graticule': + BottomBar.UI_.Map_.toggleGraticule(false) + break + case 'miscellaneous': + $('.leaflet-control-container').css( + 'display', + 'none' + ) + $('.splitterVInner').css('display', 'none') + break + default: + break + } + } else { + // now off + switch (value) { + case 'topbar': + $('#topBar').css('display', 'flex') + break + case 'toolbars': + $('#mmgislogo').css('display', 'inherit') + $('#barBottom').css('display', 'flex') + $('#toolbar').css({ + display: 'inherit', + width: '40px', + }) + $('#viewerToolBar').css( + 'display', + 'inherit' + ) + $('#_lithosphere_controls').css( + 'display', + 'inherit' + ) + $('#splitscreens').css({ + left: '40px', + width: 'calc(100% - 40px)', + }) + $('#mapScreen').css( + 'width', + $('#mapScreen').width() - 40 + 'px' + ) + BottomBar.UI_.topSize = 40 + window.dispatchEvent(new Event('resize')) + break + case 'scalebar': + $('#scaleBarBounds').css( + 'display', + 'inherit' + ) + break + case 'coordinates': + $('#CoordinatesDiv').css('display', 'flex') + break + case 'graticule': + BottomBar.UI_.Map_.toggleGraticule(true) + break + case 'miscellaneous': + $('.leaflet-control-container').css( + 'display', + 'block' + ) + $('.splitterVInner').css( + 'display', + 'inline-flex' + ) + break + default: + break + } + } + }) + }, + function () {} + ) + } else { + } + }, + toggleHelp: function () {}, + fullscreen: function () { + var isInFullScreen = + (document.fullscreenElement && + document.fullscreenElement !== null) || + (document.webkitFullscreenElement && + document.webkitFullscreenElement !== null) || + (document.mozFullScreenElement && + document.mozFullScreenElement !== null) || + (document.msFullscreenElement && + document.msFullscreenElement !== null) + + var docElm = document.documentElement + if (!isInFullScreen) { + if (docElm.requestFullscreen) { + docElm.requestFullscreen() + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen() + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen() + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen() + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen() + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen() + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen() + } else if (document.msExitFullscreen) { + document.msExitFullscreen() + } + } + }, +} + +export default BottomBar diff --git a/src/essence/Basics/UserInterface_/UserInterface_.css b/src/essence/Basics/UserInterface_/UserInterface_.css index 55a1c938..97a79330 100644 --- a/src/essence/Basics/UserInterface_/UserInterface_.css +++ b/src/essence/Basics/UserInterface_/UserInterface_.css @@ -15,7 +15,6 @@ padding-left: 40px; width: 100%; font-family: sans-serif; - background: rgb(0, 0, 0, 0.15); pointer-events: none; z-index: 2005; transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); @@ -50,6 +49,7 @@ z-index: 1; background: var(--color-a); color: white; + border-radius: 3px; margin: 0px 5px 0px 5px; transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @@ -87,6 +87,7 @@ margin-right: 5px; z-index: 20; opacity: 0; + border-radius: 3px; pointer-events: auto; transition: opacity 0.2s ease-out; } @@ -99,6 +100,7 @@ padding-left: 8px; background: var(--color-a); opacity: 0; + border-radius: 3px; pointer-events: auto; transition: opacity 0.2s ease-out; } diff --git a/src/essence/Basics/UserInterface_/UserInterface_.js b/src/essence/Basics/UserInterface_/UserInterface_.js index b56c3766..bbd93c84 100644 --- a/src/essence/Basics/UserInterface_/UserInterface_.js +++ b/src/essence/Basics/UserInterface_/UserInterface_.js @@ -4,8 +4,8 @@ import F_ from '../Formulae_/Formulae_' import L_ from '../Layers_/Layers_' import ToolController_ from '../ToolController_/ToolController_' import Login from '../../Ancillary/Login/Login' -import QueryURL from '../../Ancillary/QueryURL' -import HTML2Canvas from '../../../external/HTML2Canvas/html2canvas.min' + +import BottomBar from './BottomBar' import './UserInterface_.css' @@ -108,213 +108,7 @@ var UserInterface = { .style('flex-flow', 'column') .style('z-index', '1005') - this.barBottom - .append('i') - .attr('id', 'topBarLink') - .attr('title', 'Copy Link') - .attr('tabindex', 100) - .attr('class', 'mmgisHoverBlue mdi mdi-open-in-new mdi-18px') - .style('padding', '5px 10px') - .style('width', '40px') - .style('height', '36px') - .style('line-height', '26px') - .style('cursor', 'pointer') - .on('click', function () { - const linkButton = $(this) - QueryURL.writeCoordinateURL(true, function () { - F_.copyToClipboard(L_.url) - - linkButton.removeClass('mdi-open-in-new') - linkButton.addClass('mdi-check-bold') - linkButton.css('color', 'var(--color-green)') - setTimeout(() => { - linkButton.removeClass('mdi-check-bold') - linkButton.css('color', '') - linkButton.addClass('mdi-open-in-new') - }, 3000) - }) - }) - - this.barBottom - .append('i') - .attr('id', 'topBarScreenshot') - .attr('title', 'Screenshot') - .attr('tabindex', 101) - .attr('class', 'mmgisHoverBlue mdi mdi-camera mdi-18px') - .style('padding', '5px 10px') - .style('width', '40px') - .style('height', '36px') - .style('line-height', '26px') - .style('cursor', 'pointer') - .style('opacity', '0.8') - .on('click', function () { - //We need to manually order leaflet z-indices for this to work - let zIndices = [] - $('#mapScreen #map .leaflet-tile-pane') - .children() - .each(function (i, elm) { - zIndices.push($(elm).css('z-index')) - $(elm).css('z-index', i + 1) - }) - $('.leaflet-control-scalefactor').css('display', 'none') - $('.leaflet-control-zoom').css('display', 'none') - $('#topBarScreenshotLoading').css('display', 'block') - $('#mapToolBar').css('background', 'rgba(0,0,0,0)') - HTML2Canvas(document.getElementById('mapScreen'), { - allowTaint: true, - useCORS: true, - }).then(function (canvas) { - canvas.id = 'mmgisScreenshot' - document.body.appendChild(canvas) - F_.downloadCanvas( - canvas.id, - 'mmgis-screenshot', - function () { - canvas.remove() - setTimeout(function () { - $('#topBarScreenshotLoading').css( - 'display', - 'none' - ) - }, 2000) - } - ) - }) - $('#mapScreen #map .leaflet-tile-pane') - .children() - .each(function (i, elm) { - $(elm).css('z-index', zIndices[i]) - }) - $('.leaflet-control-scalefactor').css('display', 'flex') - $('.leaflet-control-zoom').css('display', 'block') - $('#mapToolBar').css('background', 'rgba(0,0,0,0.15)') - }) - //Screenshot loading - d3.select('#topBarScreenshot') - .append('i') - .attr('id', 'topBarScreenshotLoading') - .attr('title', 'Taking Screenshot') - .attr('tabindex', 102) - .style('display', 'none') - .style('border-radius', '50%') - .style('border', '8px solid #ffe100') - .style('border-right-color', 'transparent') - .style('border-left-color', 'transparent') - .style('position', 'relative') - .style('top', '3px') - .style('left', '-17px') - .style('width', '20px') - .style('height', '20px') - .style('line-height', '26px') - .style('color', '#d2b800') - .style('cursor', 'pointer') - .style('animation-name', 'rotate-forever') - .style('animation-duration', '2s') - .style('animation-iteration-count', 'infinite') - .style('animation-timing', 'linear') - - this.barBottom - .append('i') - .attr('id', 'topBarFullscreen') - .attr('title', 'Fullscreen') - .attr('tabindex', 103) - .attr('class', 'mmgisHoverBlue mdi mdi-fullscreen mdi-18px') - .style('padding', '5px 10px') - .style('width', '40px') - .style('height', '36px') - .style('line-height', '26px') - .style('cursor', 'pointer') - .on('click', function () { - fullscreen() - if ( - d3.select(this).attr('class') == - 'mmgisHoverBlue mdi mdi-fullscreen mdi-18px' - ) - d3.select(this) - .attr( - 'class', - 'mmgisHoverBlue mdi mdi-fullscreen-exit mdi-18px' - ) - .attr('title', 'Exit Fullscreen') - else - d3.select(this) - .attr( - 'class', - 'mmgisHoverBlue mdi mdi-fullscreen mdi-18px' - ) - .attr('title', 'Fullscreen') - }) - - this.barBottom - .append('i') - .attr('id', 'toggleUI') - .attr('title', 'Hide UI') - .attr('tabindex', 104) - .attr('class', 'mmgisHoverBlue mdi mdi-power mdi-18px') - .style('padding', '5px 10px') - .style('width', '40px') - .style('height', '36px') - .style('line-height', '26px') - .style('display', 'none') //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!====== - .on('click', function () { - if (d3.select(this).style('color') == 'rgb(0, 210, 0)') { - d3.select('#topBarRight #loginButton').style( - 'display', - 'none' - ) - d3.select('#topBarRight #loginUsername').style( - 'display', - 'none' - ) - d3.select('#toolbar').style('display', 'none') - d3.select('.mouseLngLat').style('display', 'none') - //d3.select( '.mainDescription' ).style( 'display', 'none' ); - d3.select('#viewerToolBar').style('display', 'none') - d3.select('#mapToolBar').style('display', 'none') - d3.select('#globeToolBar').style('display', 'none') - d3.select(this) - .style('color', 'white') - .attr('title', 'Show UI') - } else { - d3.select('#topBarRight #loginButton').style( - 'display', - 'inherit' - ) - d3.select('#topBarRight #loginUsername').style( - 'display', - 'inherit' - ) - d3.select('#toolbar').style('display', 'inherit') - d3.select('.mouseLngLat').style('display', 'inherit') - //d3.select( '.mainDescription' ).style( 'display', 'inherit' ); - d3.select('#viewerToolBar').style('display', 'inherit') - d3.select('#mapToolBar').style('display', 'inherit') - d3.select('#globeToolBar').style('display', 'inherit') - d3.select(this) - .style('color', 'rgb(0, 210, 0)') - .attr('title', 'Hide UI') - } - }) - - this.barBottom - .append('i') - .attr('id', 'topBarHelp') - .attr('title', 'Help') - .attr('tabindex', 105) - .attr('class', 'mmgisHoverBlue mdi mdi-help mdi-18px') - .style('padding', '5px 10px') - .style('width', '40px') - .style('height', '36px') - .style('line-height', '26px') - .style('cursor', 'pointer') - .on('click', function () { - this.helpOn = !this.helpOn - if (this.helpOn) { - //d3.select('#viewer_Help').style('display', 'inherit') - } else { - d3.select('#viewer_Help').style('display', 'none') - } - }) + BottomBar.init('barBottom', this) this.toolPanel = d3 .select('#main-container') @@ -425,7 +219,6 @@ var UserInterface = { .style('height', '40px') .style('pointer-events', 'none') .style('overflow', 'hidden') - .style('background', 'rgba(0,0,0,0.15)') .style('z-index', '1003') .style('transition', 'bottom 0.2s ease-out') @@ -766,6 +559,9 @@ var UserInterface = { shouldRotateSplitterText() }, + resize: function () { + windowresize() + }, hide: function () { d3.select('#main-container').style('opacity', '0') }, @@ -1086,6 +882,7 @@ var UserInterface = { ToolController_.fina(this) Viewer_ = viewer_ Map_ = map_ + this.Map_ = map_ Globe_ = globe_ this.hasViewer = l_.hasViewer this.hasGlobe = l_.hasGlobe @@ -1673,40 +1470,6 @@ function clearUnwantedPanels(hasViewer, hasMap, hasGlobe) { Map_.map.invalidateSize() } -function toggleHelp() {} - -function fullscreen() { - var isInFullScreen = - (document.fullscreenElement && document.fullscreenElement !== null) || - (document.webkitFullscreenElement && - document.webkitFullscreenElement !== null) || - (document.mozFullScreenElement && - document.mozFullScreenElement !== null) || - (document.msFullscreenElement && document.msFullscreenElement !== null) - - var docElm = document.documentElement - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen() - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen() - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen() - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen() - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen() - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen() - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen() - } else if (document.msExitFullscreen) { - document.msExitFullscreen() - } - } -} $(document).ready(function () { UserInterface.init() })