nakarte

commit 9977096d7e240af13a3864c7c4489ef91bfb0805
parent 09035689cf29d48af5804ee8f019f73576f0b462
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sun, 24 May 2026 23:30:53 +0200

track list: scroll to track when 1) adding new track, 2) starting editing

Fixes #1409, #1407

Diffstat:
M
eslint_rules/imports_webapp.js
 | 
1
+
A
src/lib/knockout.binding.element/index.js
 | 
10
++++++++++
M
src/lib/leaflet.control.track-list/track-list.js
 | 
13
+++++++++++--

3 files changed, 22 insertions(+), 2 deletions(-)
diff --git a/eslint_rules/imports_webapp.js b/eslint_rules/imports_webapp.js
@@ -3,6 +3,7 @@
 const topLevelFiles = ['src/index.js'];
 const filesWithSideEffects = [
     'src/lib/knockout.component.progress/progress.js',
+    'src/lib/knockout.binding.element/index.js',
     'src/lib/leaflet.control.azimuth/index.js',
     'src/lib/leaflet.control.caption/index.js',
     'src/lib/leaflet.control.coordinates/index.js',
diff --git a/src/lib/knockout.binding.element/index.js b/src/lib/knockout.binding.element/index.js
@@ -0,0 +1,10 @@
+import ko from 'knockout';
+
+// From https://stackoverflow.com/a/23638213
+// I do not understand how it works
+ko.bindingHandlers.element = {
+    init: function (element, valueAccessor) {
+        const target = valueAccessor();
+        target(element);
+    },
+};
diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js
@@ -2,6 +2,7 @@ import L from 'leaflet';
 import ko from 'knockout';
 import Contextmenu from '~/lib/contextmenu';
 import '~/lib/knockout.component.progress/progress';
+import '~/lib/knockout.binding.element';
 import './track-list.css';
 import {selectFiles, readFiles} from '~/lib/file-read';
 import parseGeoFile from './lib/parseGeoFile';
@@ -207,7 +208,8 @@ L.Control.TrackList = L.Control.extend({
                                        mouseenter: $parent.onTrackRowMouseEnter.bind($parent, track),
                                        mouseleave: $parent.onTrackRowMouseLeave.bind($parent, track)
                                    },
-                                   css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}">
+                                   css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1},
+                                   element: track.row">
                         <td><input type="checkbox" class="visibility-switch" data-bind="checked: track.visible, click: $parent.onTrackCheckboxClicked.bind($parent)"></td>
                         <td><div class="color-sample" data-bind="style: {backgroundColor: $parent.colors[track.color()]}, click: $parent.onColorSelectorClicked.bind($parent)"></div></td>
                         <td><div class="track-name-wrapper"><div class="track-name" data-bind="text: track.name, attr: {title: track.name}, click: $parent.setViewToTrack.bind($parent)"></div></div></td>
@@ -1271,6 +1273,7 @@ L.Control.TrackList = L.Control.extend({
 
         onTrackEditStart: function(track) {
             track.isEdited(true);
+            this.scrollListToTrack(track);
         },
 
         onTrackEditEnd: function(track) {
@@ -1342,7 +1345,8 @@ L.Control.TrackList = L.Control.extend({
                 feature: L.featureGroup([]),
                 markers: [],
                 hover: ko.observable(false),
-                isEdited: ko.observable(false)
+                isEdited: ko.observable(false),
+                row: ko.observable(null),
             };
             (geodata.tracks || []).forEach(this.addTrackSegment.bind(this, track));
             (geodata.points || []).forEach(this.addPoint.bind(this, track));
@@ -1359,6 +1363,7 @@ L.Control.TrackList = L.Control.extend({
             this.attachColorSelector(track);
             this.attachActionsMenu(track);
             this.notifyTracksChanged();
+            this.scrollListToTrack(track);
             return track;
         },
 
@@ -1408,6 +1413,10 @@ L.Control.TrackList = L.Control.extend({
             }
         },
 
+        scrollListToTrack: function(track) {
+            track.row().scrollIntoView({behavior: 'smooth', block: 'nearest', container: 'nearest'});
+        },
+
         setMarkerIcon: function(marker) {
             var symbol = 'marker',
                 colorInd = marker._parentTrack.color() + 1,