Skip to content

Commit ecb1595

Browse files
ac-61github-actions[bot]
ac-61
and
github-actions[bot]
authored
Add TimeUI to mobile mode (#796)
* Add TimeUI to mobile mode * chore: bump version to 4.1.7-20251107 [version bump] * Make sure the compass and scale bar are in the correct position * chore: bump version to 4.1.8-20251110 [version bump] * Hide the expanded time range --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 1105c25 commit ecb1595

6 files changed

Lines changed: 74 additions & 43 deletions

File tree

‎configure/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "configure",
3-
"version": "4.1.6-20251107",
3+
"version": "4.1.8-20251110",
44
"homepage": "./configure/build",
55
"private": true,
66
"dependencies": {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mmgis",
3-
"version": "4.1.6-20251107",
3+
"version": "4.1.8-20251110",
44
"description": "A web-based mapping and localization solution for science operation on planetary missions.",
55
"homepage": "build",
66
"repository": {

‎src/essence/Ancillary/TimeUI.js‎

Lines changed: 62 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -100,40 +100,26 @@ const TimeUI = {
100100
"</div>",
101101
"</div>",
102102
`<div id="mmgisTimeUITopBar">`,
103-
`<div id="mmgisTimeUIActionsLeft">`,
104-
`<div id='mmgisTimeUIMode'>`,
105-
`<div id='mmgisTimeUIModeDropdown' class='ui dropdown short'></div>`,
106-
`</div>`,
107-
`<div id="mmgisTimeUIQuickSelectTrigger" class="mmgisTimeUIButton">`,
108-
`<i class='mdi mdi-calendar-cursor mdi-24px'></i>`,
109-
`</div>`,
110-
`<div id="mmgisTimeUIPlayTrigger" class="mmgisTimeUIButton">`,
111-
`<i class='mdi mdi-movie mdi-24px'></i>`,
112-
`</div>`,
113-
`<div class="vertDiv"></div>`,
114103
].join('\n')
115104

116-
// Add the right buttons to the left if mobile to consolidate them
117-
if (L_.UserInterface_?.isMobile === true) {
105+
if (L_.UserInterface_?.isMobile !== true) {
118106
markup += [
119-
`<div id="mmgisTimeUIFitTime" class="mmgisTimeUIButton">`,
120-
`<i class='mdi mdi-calendar-expand-horizontal mdi-24px'></i>`,
121-
`</div>`,
122-
`<div id="mmgisTimeUIFitWindow" class="mmgisTimeUIButton">`,
123-
`<i class='mdi mdi-calendar-clock mdi-24px'></i>`,
124-
`</div>`,
125-
`<div id="mmgisTimeUIFollowFeature" class="mmgisTimeUIButton">`,
126-
`<i class='mdi mdi-crosshairs-gps mdi-24px'></i>`,
127-
`</div>`,
128-
`<div id="mmgisTimeUIPresent" class="mmgisTimeUIButton">`,
129-
`<i class='mdi mdi-clock-end mdi-24px'></i>`,
130-
`<div id="mmgisTimeUIPresentProgress"></div>`,
107+
`<div id="mmgisTimeUIActionsLeft">`,
108+
`<div id='mmgisTimeUIMode'>`,
109+
`<div id='mmgisTimeUIModeDropdown' class='ui dropdown short'></div>`,
110+
`</div>`,
111+
`<div id="mmgisTimeUIQuickSelectTrigger" class="mmgisTimeUIButton">`,
112+
`<i class='mdi mdi-calendar-cursor mdi-24px'></i>`,
113+
`</div>`,
114+
`<div id="mmgisTimeUIPlayTrigger" class="mmgisTimeUIButton">`,
115+
`<i class='mdi mdi-movie mdi-24px'></i>`,
116+
`</div>`,
117+
`<div class="vertDiv"></div>`,
131118
`</div>`,
132119
].join('\n')
133120
}
134121

135122
markup += [
136-
`</div>`,
137123
`<div id="mmgisTimeUIMain">`,
138124
`<div class="mmgisTimeUIInput" id="mmgisTimeUIStartWrapper">`,
139125
`<span>Start Time</span>`,
@@ -214,26 +200,26 @@ const TimeUI = {
214200
].join('\n')
215201
}
216202

217-
// Put the timeline separately if mobile
203+
// Put the expanded content separately if mobile
218204
if (L_.UserInterface_?.isMobile === true) {
219205
markup += [
220-
`<div id="mmgisTimeUITimeline">`,
221-
`<div id="mmgisTimeUITimelineExtent"></div>`,
222-
`<div id="mmgisTimeUITimelinePlayExtent"></div>`,
223-
`<div id="mmgisTimeUITimelineHisto"></div>`,
224-
`<div id="mmgisTimeUITimelineInner"></div>`,
225-
`<div id='mmgisTimeUITimelineSlider' class='svelteSlider'></div>`,
206+
`<div id="mmgisTimeUIExpandedContent" class="show">`,
207+
`<div id="mmgisTimeUIYearsRow" class="mmgisTimeUIExpandedRow">`,
208+
`<div id="mmgisTimeUIYearsRange" class="mmgisTimeUIExpandedRowRange"></div>`,
209+
`<div id="mmgisTimeUIYearsContainer" class="mmgisTimeUIExpandedRowContainer"></div>`,
210+
`</div>`,
211+
`<div id="mmgisTimeUIMonthsRow" class="mmgisTimeUIExpandedRow">`,
212+
`<div id="mmgisTimeUIMonthsRange" class="mmgisTimeUIExpandedRowRange"></div>`,
213+
`<div id="mmgisTimeUIMonthsContainer" class="mmgisTimeUIExpandedRowContainer"></div>`,
214+
`</div>`,
215+
`<div id="mmgisTimeUIDaysRow" class="mmgisTimeUIExpandedRow">`,
216+
`<div id="mmgisTimeUIDaysRange" class="mmgisTimeUIExpandedRowRange"></div>`,
217+
`<div id="mmgisTimeUIDaysContainer" class="mmgisTimeUIExpandedRowContainer"></div>`,
226218
`</div>`,
227219
].join('\n')
228220
}
229221

230222
markup += [
231-
/*
232-
`<div id="mmgisTimeUICurrentWrapper">`,
233-
`<div>Active Time</div>`,
234-
`<div id="mmgisTimeUICurrentTime"></div>`,
235-
`</div>`,
236-
*/
237223
`</div>`
238224
].join('\n')
239225

@@ -344,6 +330,10 @@ const TimeUI = {
344330
return { dateString, additionalSeconds }
345331
},
346332
alignPopovers(e) {
333+
if (L_.UserInterface_?.isMobile === true) {
334+
return
335+
}
336+
347337
if (e == null) {
348338
let bcr = $(`#mmgisTimeUIQuickSelectTrigger`)
349339
.get(0)
@@ -1208,6 +1198,26 @@ const TimeUI = {
12081198
TimeUI._restoreFollowFromDeeplink()
12091199
}, 2000)
12101200
}
1201+
1202+
if (L_.UserInterface_?.isMobile === true) {
1203+
d3.select('#mmgisTimeUIExpandedContent')
1204+
.style('position', 'absolute')
1205+
.style('top', '100px')
1206+
1207+
// Shift to view the selected elements in the expanded timeline
1208+
const containers = ['mmgisTimeUIYearsContainer', 'mmgisTimeUIMonthsContainer', 'mmgisTimeUIDaysContainer']
1209+
for (let container in containers) {
1210+
let found = document.querySelectorAll(`#${containers[container]} > .selected`)
1211+
if (found.length > 0) {
1212+
found[0].scrollIntoView()
1213+
}
1214+
}
1215+
1216+
// FIXME Improve time pickers for mobile mode?
1217+
// Do not allow users to edit using the start/time pickers
1218+
d3.select('#mmgisTimeUIMain')
1219+
.style('pointer-events', 'none')
1220+
}
12111221
},
12121222
changeMode(idx) {
12131223
TimeUI.modeIndex = idx
@@ -1778,6 +1788,10 @@ const TimeUI = {
17781788
toggleExpanded() {
17791789
TimeUI.expanded = !TimeUI.expanded
17801790

1791+
if (L_.UserInterface_?.isMobile === true) {
1792+
TimeUI.expanded = true
1793+
}
1794+
17811795
if (TimeUI.expanded) {
17821796
// Expand the TimeUI
17831797
$('#timeUI').addClass('expanded')
@@ -2283,6 +2297,10 @@ const TimeUI = {
22832297
waitForActiveFeature()
22842298
},
22852299
_remakeTimeSlider(ignoreHistogram) {
2300+
if (L_.UserInterface_?.isMobile === true) {
2301+
return
2302+
}
2303+
22862304
const rangeMode =
22872305
TimeUI.modes[TimeUI.modeIndex] === 'Range' ? true : false
22882306

@@ -3025,6 +3043,10 @@ const TimeUI = {
30253043
TimeUI._remakeTimeSlider(true)
30263044
},
30273045
_updateBottomUIHeight() {
3046+
if (L_.UserInterface_?.isMobile === true) {
3047+
return
3048+
}
3049+
30283050
const active = !$('#toggleTimeUI').hasClass('active')
30293051

30303052
const defaultExpanded = $('#timeUI').hasClass('expanded')
@@ -3074,7 +3096,7 @@ function interfaceWithMMWebGIS() {
30743096
//Add the markup to tools or do it manually
30753097
//tools.html(markup)
30763098

3077-
TimeUI.init(null, true)
3099+
TimeUI.init(TimeUI.timeChange, true)
30783100

30793101
function separateFromMMWebGIS() {
30803102
let tools = d3.select('#tools')

‎src/essence/Basics/ToolController_/ToolController_.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ let ToolController_ = {
289289

290290
// FIXME For now, remove the time button in the toolbar
291291
// Add the time UI button if time is enabled and in mobile mode
292-
if (false && L_.UserInterface_?.isMobile === true && L_.configData.time && L_.configData.time.enabled === true) {
292+
if (L_.UserInterface_?.isMobile === true && L_.configData.time && L_.configData.time.enabled === true) {
293293
let timeSelect = d3.select('#toolcontroller_incdiv')
294294
.append('div')
295295
.attr('id', 'toggleTimeUI')
@@ -331,6 +331,8 @@ let ToolController_ = {
331331
ToolController_.setToolHeight(TimeUI.height)
332332
ToolController_.setToolWidth()
333333
TimeUI.make()
334+
TimeUI.toggleExpanded()
335+
TimeUI.fina()
334336
} else {
335337
ToolController_.setToolHeight(0)
336338
ToolController_.setToolWidth()

‎src/essence/Basics/UserInterface_/UserInterfaceMobile_.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,10 @@
206206
height: 40px;
207207
}
208208

209+
.mmgisTimeUIExpandedRowRange {
210+
display: none;
211+
}
212+
209213
/* Overwrite LayersTool CSS */
210214
#layersTool .layerName {
211215
overflow: hidden;

‎src/essence/Basics/UserInterface_/UserInterfaceMobile_.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1205,6 +1205,9 @@ var UserInterface = {
12051205
})
12061206
}
12071207

1208+
// Throw the TimeUI div away and create it on demand later
1209+
d3.select('#timeUI').remove()
1210+
12081211
BottomBar.fina()
12091212
UserInterface.show()
12101213
},

0 commit comments

Comments
 (0)