Skip to content

Commit

Permalink
#578 Arrow keys, first/last, bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@tariqksoliman
tariqksoliman committed Aug 8, 2024
1 parent 11dd256 commit 498220c
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 60 deletions.
14 changes: 4 additions & 10 deletions src/essence/Ancillary/Description.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,9 @@
#mainDescNavPopoverFieldInfo {
display: flex;
justify-content: space-between;
padding: 4px 6px 2px 32px;
padding: 8px 6px 6px 32px;
font-size: 12px;
border-bottom: 1px solid var(--color-a1);
}
#mainDescNavPopoverFieldInfo > div:first-child {
color: var(--color-a5);
Expand All @@ -80,15 +81,8 @@
color: var(--color-c);
font-weight: bold;
}
#mainDescNavPopoverExtent {
display: flex;
justify-content: space-between;
height: 30px;
line-height: 30px;
font-size: 14px;
padding-left: 8px;
border-bottom: 1px solid var(--color-a1);
}
#mainDescNavPopoverExtent,
#mainDescNavPopoverTimeExtent,
#mainDescNavPopoverPanTo {
display: flex;
justify-content: space-between;
Expand Down
155 changes: 112 additions & 43 deletions src/essence/Ancillary/Description.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,16 @@ const Description = {
`<div id="mainDescNavPopoverFieldValue"></div>`,
`</div>`,
`<div id="mainDescNavPopoverExtent">`,
`<div>Current Extent</div>`,
`<div class="mmgis-checkbox"><input type="checkbox" ${false ? 'checked ' : ''}id="checkbox_dp1" value='topbar'/><label for="checkbox_dp1"></label></div>`,
`<div>Restrict to Map Extent</div>`,
`<div class="mmgis-checkbox"><input type="checkbox" ${false ? 'checked ' : ''}id="checkbox_dp1"/><label for="checkbox_dp1"></label></div>`,
`</div>`,
`<div id="mainDescNavPopoverTimeExtent">`,
`<div>Restrict to Time Range</div>`,
`<div class="mmgis-checkbox"><input type="checkbox" ${false ? 'checked ' : ''}id="checkbox_dp15"/><label for="checkbox_dp15"></label></div>`,
`</div>`,
`<div id="mainDescNavPopoverPanTo">`,
`<div>Pan To</div>`,
`<div class="mmgis-checkbox"><input type="checkbox" ${false ? 'checked ' : ''}id="checkbox_dp2" value='topbar'/><label for="checkbox_dp2"></label></div>`,
`<div>Pan To Feature</div>`,
`<div class="mmgis-checkbox"><input type="checkbox" ${false ? 'checked ' : ''}id="checkbox_dp2"/><label for="checkbox_dp2"></label></div>`,
`</div>`,
`<div id="mainDescNavPopoverBottom">`,
`<div id="mainDescNavPopoverBottomFirst">`,
Expand Down Expand Up @@ -139,7 +143,14 @@ const Description = {
})

$('#mainDescNavPopoverFieldField').html(
Dropy.construct(properties.sort(), 'Field')
Dropy.construct(
properties.sort(),
Description.navPopoverField &&
properties.indexOf(Description.navPopoverField) !=
-1
? Description.navPopoverField
: 'Field'
)
)
Dropy.init(
$('#mainDescNavPopoverFieldField'),
Expand All @@ -156,44 +167,54 @@ const Description = {
}
})

$(`#mainDescNavPopoverBottomFirst`).on('click', () => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'first'
)
)
Description.onNextPrev()
}
})
$(`#mainDescNavBarPrevious, #mainDescNavPopoverBottomPrevious`).on(
'click',
() => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? -1
: Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'previous'
)
)
Description.onNextPrev()
}
Description.navPrevious()
}
)
$(`#mainDescNavBarNext, #mainDescNavPopoverBottomNext`).on(
'click',
() => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? 1
: Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'next'
)
)
Description.onNextPrev()
}
Description.navNext()
}
)
$(`#mainDescNavPopoverBottomLast`).on('click', () => {
if (L_.activeFeature) {
L_.selectFeature(
L_.activeFeature.layerName,
L_.activeFeature.feature,
Description.getFeatureDistance(
L_.activeFeature,
Description.navPopoverField,
'last'
)
)
Description.onNextPrev()
}
})

document.addEventListener('keydown', function (event) {
if (event.key === 'ArrowLeft') {
Description.navPrevious()
} else if (event.key === 'ArrowRight') {
Description.navNext()
}
})

this.descPoint = this.descCont.append('p').attr('id', 'mainDescPoint')

Expand Down Expand Up @@ -241,6 +262,38 @@ const Description = {
else if (Description.Map_.activeLayer._latlng)
Description.Map_.map.panTo(Description.Map_.activeLayer._latlng)
},
navPrevious() {
if (Description.L_.activeFeature) {
Description.L_.selectFeature(
Description.L_.activeFeature.layerName,
Description.L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? -1
: Description.getFeatureDistance(
Description.L_.activeFeature,
Description.navPopoverField,
'previous'
)
)
Description.onNextPrev()
}
},
navNext() {
if (Description.L_.activeFeature) {
Description.L_.selectFeature(
Description.L_.activeFeature.layerName,
Description.L_.activeFeature.feature,
Description.navPopoverField === NAV_DEFAULT_FIELD
? 1
: Description.getFeatureDistance(
Description.L_.activeFeature,
Description.navPopoverField,
'next'
)
)
Description.onNextPrev()
}
},
onNextPrev() {
$('#mainDescNavPopoverFieldValue').text(
F_.getIn(
Expand Down Expand Up @@ -299,6 +352,8 @@ const Description = {
}
if (currentIdx == null) return 0

let minIndex = Infinity
let maxIndex = -Infinity
// Limit to current map extent if checkbox is true
if ($('#mainDescNavPopoverExtent input').is(':checked')) {
const b = Description.Map_.map.getBounds()
Expand All @@ -319,14 +374,22 @@ const Description = {
},
}
features = features.filter((f) => {
return booleanIntersects(bounds, f)
const keep = booleanIntersects(bounds, f)
if (keep) {
let i = f.properties.__i__
if (i < minIndex) minIndex = i
if (i > maxIndex) maxIndex = i
}

return keep
})
}

if (field != null && field != NAV_DEFAULT_FIELD) {
features.sort((a, b) => {
let sign = 1
if (direction === 'previous') sign = -1
if (direction === 'previous' || direction === 'first')
sign = -1
const af = F_.getIn(a, `properties.${field}`, 0)
const bf = F_.getIn(b, `properties.${field}`, 1)
if (typeof af === 'string' || typeof bf === 'string') {
Expand All @@ -335,12 +398,18 @@ const Description = {
})
}

for (let i = 0; i < features.length - 1; i++) {
if (features[i].properties.__i__ === currentIdx) {
return (
features[i + 1].properties.__i__ -
features[i].properties.__i__
)
if (direction === 'first') {
return minIndex - currentIdx
} else if (direction === 'last') {
return maxIndex - currentIdx
} else {
for (let i = 0; i < features.length - 1; i++) {
if (features[i].properties.__i__ === currentIdx) {
return (
features[i + 1].properties.__i__ -
features[i].properties.__i__
)
}
}
}
}
Expand Down Expand Up @@ -617,13 +686,13 @@ const Description = {
if (Description.tippyPrevious == null)
Description.tippyPrevious = tippy('#mainDescNavBarPrevious', {
content: 'Previous Feature',
placement: 'left',
placement: 'bottom',
theme: 'blue',
})
if (Description.tippyNext == null)
Description.tippyNext = tippy('#mainDescNavBarNext', {
content: 'Next Feature',
placement: 'right',
placement: 'bottom',
theme: 'blue',
})
}
Expand Down
2 changes: 2 additions & 0 deletions src/essence/Basics/Map_/Map_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ let Map_ = {
this.map = L.map('map', {
zoomControl: hasZoomControl,
editable: true,
keyboard: false,
crs: crs,
zoomDelta: 0.05,
zoomSnap: 0,
Expand All @@ -126,6 +127,7 @@ let Map_ = {
this.map = L.map('map', {
zoomControl: hasZoomControl,
editable: true,
keyboard: false,
fadeAnimation: shouldFade,
//crs: crs,
//zoomDelta: 0.05,
Expand Down
7 changes: 2 additions & 5 deletions src/essence/Basics/UserInterface_/UserInterface_.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
background: var(--color-a);
color: white;
border-radius: 3px;
margin: 0px 5px 0px 5px;
margin: 0px 0px 0px 5px;
transition: color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
#main-container > #topBar #topBarTitleName {
Expand Down Expand Up @@ -105,7 +105,7 @@
display: none;
position: relative;
height: 30px;
margin: 0;
margin: 0px 0px 0px 8px;
z-index: 20;
background: var(--color-a);
opacity: 0;
Expand All @@ -126,9 +126,6 @@
cursor: pointer;
color: var(--color-mmgis);
}
.mainInfo > div:first-child {
margin-left: 0;
}

.mainInfo > div > div {
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions src/essence/Basics/UserInterface_/UserInterface_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ var UserInterface = {
"</div>",
"</div>",
"<div id='topBarSecondary'>",
"<div class='mainInfo' title='Go to featured item'>",
"</div>",
"<div class='mainDescription' title='Go to active item'>",
"</div>",
"<div class='mainInfo' title='Go to featured item'>",
"</div>",
"</div>",
"</div>",
"<div id='topBarRight'>",
Expand Down

0 comments on commit 498220c

Please sign in to comment.