Performance improvement for device list scrolling in mobile app.
Ylian Saint-Hilaire committed
Aug 18, 2020 at 01:27 UTC
5959cf4fdbc8e6cb05bcda5702a206cd2583f3ba
1 file changed
+61
-8
views/default-mobile.handlebars
+61
-8
@@ -345,6 +345,40 @@
345
.deviceBatterySmall9 { background: url(../images/batteries24.png) -112px 0px; }
346
.deviceBatterySmall10 { background: url(../images/batteries24.png) -126px 0px; }
347
.deviceBatterySmall11 { background: url(../images/batteries24.png) -140px 0px; }
348
+
349
+ .devList1 {
350
+ height: 50px;
351
+ cursor: pointer;
352
+ position: relative;
353
+ margin-top: 5px;
354
+ margin-bottom: 5px;
355
+ }
356
+
357
+ .devList2 {
358
+ float: left;
359
+ margin-left: 4px
360
+ }
361
+
362
+ .devList3 {
363
+ width: auto;
364
+ height: 40px;
365
+ background-color: lightgray;
366
+ margin-left: 60px;
367
+ padding-top: 5px;
368
+ padding-bottom: 5px;
369
+ border-radius: 8px 0px 0px 8px;
370
+ }
371
+
372
+ .devList4 {
373
+ padding-left: 12px;
374
+ padding-top: 2px;
375
+ }
376
+
377
+ .devList5 {
378
+ padding-left: 12px;
379
+ padding-top: 3px;
380
+ color: gray
381
+ }
382
</style>
383
</head>
384
<body onload="if (typeof(startup) !== 'undefined') startup();" style="overflow-y:hidden;margin:0;padding:0;border:0;color:black;font-size:13px;font-family:\'Trebuchet MS\', Arial, Helvetica, sans-serif">
@@ -374,7 +408,7 @@
408
</div>
409
</div>
410
<div id=p2 style="display:none;position:absolute;top:0;left:0;right:0;bottom:0">
377
- <div id=xdevices style="position:absolute;overflow-y:auto;top:0;left:0;right:0;bottom:30px"></div>
411
+ <div id=xdevices style="position:absolute;overflow-y:auto;top:0;left:0;right:0;bottom:30px" onscroll="onDevicesScroll()" ontouchstart="onDeviceTouch(true)" ontouchend="onDeviceTouch(false)"></div>
412
<div id=xdevicesBar style="position:absolute;overflow-y:auto;height:30px;left:0;right:0;bottom:0px;background-color:#aaa">
413
<div style="margin:4px">
414
<span style="width:20px;display:inline-block;text-align:center;cursor:pointer" onclick=clearSearchInput()><b>X</b></span>
@@ -2202,7 +2236,7 @@
2236
var bat = nodes[i].sessions.battery;
2237
var statestr = '';
2238
if (bat.state == 'ac') { statestr = "Device is plugged-in"; }
2205
- if (bat.state == 'dc') { statestr = "Device is battery powered"; }
2239
+ else if (bat.state == 'dc') { statestr = "Device is battery powered"; }
2240
2241
var levelstr = '', levelnum = -1;
2242
if ((typeof bat.level == 'number') && (bat.level >= 0) && (bat.level <= 100)) {
@@ -2224,11 +2258,7 @@
2258
// Node
2259
var icon = nodes[i].icon, nodestate = NodeStateStr(nodes[i]);
2260
if ((!nodes[i].conn) || (nodes[i].conn == 0)) { icon += ' gray'; }
2227
- r += '<div style=cursor:pointer;position:relative onclick=goForward(\'' + nodes[i]._id + '\')>' + devNotify;
2228
- r += '<div class="i' + icon + '" style="float:left;margin-left:4px"></div>';
2229
- r += '<div style="width:auto;height:40px;background-color:lightgray;margin-top:5px;margin-bottom:5px;margin-left:60px;padding-top:5px;padding-bottom:5px;border-radius:8px 0px 0px 8px">';
2230
- r += '<div><div style=padding-left:12px;padding-top:2px><b>' + name + '</b></div><div style=padding-left:12px;padding-top:3px;color:gray>' + nodestate + '</div></div>';
2231
- r += '</div></div>';
2261
+ r += '<div name=xxdevice class=devList1 onclick=goForward(\'' + nodes[i]._id + '\')><div style=display:none>' + devNotify + '<div class="i' + icon + ' devList2"></div><div class=devList3><div class=devList4><b>' + name + '</b></div><div class=devList5>' + nodestate + '</div></div></div></div>';
2262
2263
// If we are displaying devices by group, put the device in the right group.
2264
/*
@@ -2281,6 +2311,29 @@
2311
deviceHeaderSet();
2312
for (var i in deviceHeaders) { QH(i, deviceHeaders[i]); }
2313
for (var i in deviceHeadersTitles) { Q(i).title = deviceHeadersTitles[i]; }
2314
+ onDevicesScrollEx();
2315
+ }
2316
+
2317
+ var onDevicesTouchActive = false;
2318
+ var onDevicesScrollnagleTimer = null;
2319
+ function onDevicesScroll() {
2320
+ if (onDevicesScrollnagleTimer != null) { clearTimeout(onDevicesScrollnagleTimer); onDevicesScrollnagleTimer = null; }
2321
+ if (onDevicesTouchActive) return;
2322
+ onDevicesScrollnagleTimer = setTimeout(onDevicesScrollEx, 50);
2323
+ }
2324
+
2325
+ function onDeviceTouch(x) {
2326
+ if (onDevicesTouchActive == x) return;
2327
+ onDevicesTouchActive = x;
2328
+ if (x == false) onDevicesScrollEx();
2329
+ }
2330
+
2331
+ function onDevicesScrollEx() {
2332
+ onDevicesScrollnagleTimer = null;
2333
+ var visibleTop = Q('xdevices').scrollTop - 250, visibleBottom = Q('xdevices').scrollTop + Q('xdevices').clientHeight + 250, devdivs = document.getElementsByName('xxdevice');
2334
+ for (var i = 0; i < devdivs.length; i++) {
2335
+ devdivs[i].childNodes[0].style.display = ((devdivs[i].offsetTop >= visibleTop) && (devdivs[i].offsetTop < visibleBottom)) ? null : 'none';
2336
+ }
2337
}
2338
2339
// Show currently active sessions on this device
@@ -4336,7 +4389,7 @@
4389
4390
function putstore(name, val) { try { if ((typeof (localStorage) === 'undefined') || (localStorage.getItem(name) == val)) return; if (val == null) { localStorage.removeItem(name); } else { localStorage.setItem(name, val); } } catch (e) { } if (name[0] != '_') { var s = {}; for (var i = 0, len = localStorage.length; i < len; ++i) { var k = localStorage.key(i); if (k[0] != '_') { s[k] = localStorage.getItem(k); } } meshserver.send({ action: 'userWebState', state: JSON.stringify(s) }); } }
4391
function getstore(name, val) { try { if (typeof (localStorage) === 'undefined') return val; var v = localStorage.getItem(name); if ((v == null) || (v == null)) return val; return v; } catch (e) { return val; } }
4339
- function center() { QS('dialog').left = ((((getDocWidth() - 300) / 2)) + 'px'); deskAdjust(); deskAdjust(); /*drawDeviceTimeline();*/ }
4392
+ function center() { onDevicesScroll(); QS('dialog').left = ((((getDocWidth() - 300) / 2)) + 'px'); deskAdjust(); deskAdjust(); /*drawDeviceTimeline();*/ }
4393
function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
4394
function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
4395
function getDocWidth() { if (window.innerWidth) return window.innerWidth; if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientWidth != 0) return document.documentElement.clientWidth; return document.getElementsByTagName('body')[0].clientWidth; }