diff --git a/src/essence/Ancillary/Description.css b/src/essence/Ancillary/Description.css index ed669760..0c0d4d47 100644 --- a/src/essence/Ancillary/Description.css +++ b/src/essence/Ancillary/Description.css @@ -14,7 +14,7 @@ transition: background 0.2s ease-in-out; } #mainDescNavBarMenu:hover { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); } #mainDescNavBarPrevious { width: 30px; @@ -26,7 +26,7 @@ transition: background 0.2s ease-in-out; } #mainDescNavBarPrevious:hover { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); } #mainDescNavBarNext { width: 30px; @@ -37,13 +37,13 @@ transition: background 0.2s ease-in-out; } #mainDescNavBarNext:hover { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); } #mainDescNavPopover { display: none; background: var(--color-a); - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4); width: 200px; border-top: 1px solid var(--color-a1); } @@ -66,6 +66,19 @@ #mainDescNavPopoverFieldField { width: 100%; } +#mainDescNavPopoverFieldInfo { + display: flex; + justify-content: space-between; + padding: 4px 6px 2px 32px; + font-size: 12px; +} +#mainDescNavPopoverFieldInfo > div:first-child { + color: var(--color-a5); +} +#mainDescNavPopoverFieldInfo > div:last-child { + color: var(--color-c); + font-weight: bold; +} #mainDescNavPopoverExtent { display: flex; justify-content: space-between; @@ -101,13 +114,12 @@ background: var(--color-a1); } - #mainDescNavPopoverFieldField .dropy__title { height: 30px; border: none; background: var(--color-a1); line-height: 14px; - font-size: 14px;; + font-size: 14px; } #mainDescNavPopoverFieldField .dropy__title > i { line-height: 15px; diff --git a/src/essence/Ancillary/Description.js b/src/essence/Ancillary/Description.js index aebd0488..934e6201 100644 --- a/src/essence/Ancillary/Description.js +++ b/src/essence/Ancillary/Description.js @@ -3,12 +3,15 @@ import $ from 'jquery' import * as d3 from 'd3' import F_ from '../Basics/Formulae_/Formulae_' import Dropy from '../../external/Dropy/dropy' +import flat from 'flat' import calls from '../../pre/calls' import tippy from 'tippy.js' import './Description.css' +const NAV_DEFAULT_FIELD = 'None/Index' + const Description = { inited: false, waitingOnUpdate: false, @@ -20,6 +23,7 @@ const Description = { tippyPrevious: null, tippyNext: null, L_: null, + navPopoverField: NAV_DEFAULT_FIELD, _infoAlreadyGone: false, init: function (mission, site, Map_, L_) { this.L_ = L_ @@ -64,6 +68,10 @@ const Description = { `
`, ``, `
`, + `
`, + `
Value
`, + `
`, + `
`, `
`, `
Current Extent
`, `
`, @@ -98,13 +106,6 @@ const Description = { .attr('id', 'mainDescNavPopover_global') .html(navPopoverMarkup) - $('#mainDescNavPopoverFieldField').html( - Dropy.construct(['0', '1'], 'Field') - ) - Dropy.init($('#mainDescNavPopoverFieldField'), function (idx, a, b) { - console.log(idx, a, b) - }) - $(`#mainDescNavBarMenu`).on('click', () => { const pop = $(`#mainDescNavPopover`) const willOpen = pop.css('display') === 'none' @@ -124,24 +125,73 @@ const Description = { right: bcr.right, top: bcr.top + 30, }) + + // Populate Fields dropdown + const geojson = L_.layers.layer[ + L_.activeFeature.layerName + ].toGeoJSON(L_.GEOJSON_PRECISION) + const properties = [NAV_DEFAULT_FIELD] + geojson.features.forEach((feature, idx) => { + const flatProps = flat.flatten(feature.properties) + + for (let p in flatProps) { + if ( + properties.indexOf(p) === -1 && + p.indexOf('images') !== 0 + ) + properties.push(p) + } + }) + + $('#mainDescNavPopoverFieldField').html( + Dropy.construct(properties.sort(), 'Field') + ) + Dropy.init( + $('#mainDescNavPopoverFieldField'), + function (idx, val) { + Description.navPopoverField = val + $('#mainDescNavPopoverFieldValue').text( + F_.getIn( + L_.activeFeature.feature.properties, + Description.navPopoverField + ) + ) + } + ) } }) $(`#mainDescNavBarPrevious`).on('click', () => { - if (L_.activeFeature) + if (L_.activeFeature) { L_.selectFeature( L_.activeFeature.layerName, L_.activeFeature.feature, - -1 + Description.navPopoverField === NAV_DEFAULT_FIELD + ? -1 + : Description.getFeatureDistance( + L_.activeFeature, + Description.navPopoverField, + 'previous' + ) ) + Description.onNextPrev() + } }) $(`#mainDescNavBarNext`).on('click', () => { - if (L_.activeFeature) + if (L_.activeFeature) { L_.selectFeature( L_.activeFeature.layerName, L_.activeFeature.feature, - 1 + Description.navPopoverField === NAV_DEFAULT_FIELD + ? 1 + : Description.getFeatureDistance( + L_.activeFeature, + Description.navPopoverField, + 'next' + ) ) + Description.onNextPrev() + } }) this.descPoint = this.descCont.append('p').attr('id', 'mainDescPoint') @@ -185,6 +235,70 @@ const Description = { $(`#mainDescPointLinks_global`).empty() }) }, + onNextPrev() { + $('#mainDescNavPopoverFieldValue').text( + F_.getIn( + Description.L_.activeFeature.feature.properties, + Description.navPopoverField + ) + ) + }, + getFeatureDistance(active, field, direction) { + if (active) { + const layerName = Description.L_.asLayerUUID(active.layerName) + const layer = Description.L_.layers.layer[layerName] + if (layer) { + const geojson = Description.L_.layers.layer[ + layerName + ].toGeoJSON(Description.L_.GEOJSON_PRECISION) + + let features = geojson.features + + let currentIdx = null + for (let i = 0; i < features.length; i++) { + if ( + F_.isEqual( + active.feature.geometry, + features[i].geometry, + true + ) && + F_.isEqual( + active.feature.properties, + features[i].properties, + true + ) + ) { + currentIdx = i + } + features[i].properties.__i__ = i + } + console.log('her', currentIdx, active) + if (currentIdx == null) return 0 + + if (field != null && field != NAV_DEFAULT_FIELD) { + features = features.sort((a, b) => { + let sign = 1 + if (direction === 'previous') sign = -1 + const af = F_.getIn(a, field, 0) + const bf = F_.getIn(b, field, 1) + if (typeof af === 'string' || typeof bf === 'string') { + return af.localeCompare(bf) * sign + } else return (af - bf) * sign + }) + } + + for (let i = 0; i < features.length; i++) { + if (features[i].properties.__i__ === currentIdx) { + return ( + features[i].properties.__i__ - + features[i + 1].properties.__i__ + ) + } + } + } + return 0 + } + }, updateInfo(force, forceFeature, skipRequery) { if (force !== true) { this.waitingOnUpdate = false