",
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 = [
+ `
`,
+ `
`,
+ `
`,
+ `
`,
+ `
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()
})