nakarte

commit ee3891e8cd71ec15df639b40d2e8af3fb0bee249
parent e9f167d473ef91d0a9ab4186b8957965c9d0329d
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sun, 13 Jul 2025 08:37:43 +0200

tracks: add buttons to show/hide all tracks

Buttons appear when number of tracks is 2 or more.
Also add feature: when tracks checkbox clicked with shift key, then
that track is shown and all other tracks are hidden.

Diffstat:
M
src/lib/leaflet.control.track-list/track-list.css
 | 
20
++++++++++++++++++++
M
src/lib/leaflet.control.track-list/track-list.js
 | 
25
++++++++++++++++++++++++-

2 files changed, 44 insertions(+), 1 deletion(-)
diff --git a/src/lib/leaflet.control.track-list/track-list.css b/src/lib/leaflet.control.track-list/track-list.css
@@ -287,3 +287,23 @@
 .track-tooltip-area-calc-error {
     color: #bbbbbb;
 }
+
+.tracks-show-hide-all-wrapper {
+    margin-top: 3px;
+    display: inline-block;
+    width: 100%;
+    white-space: nowrap;
+}
+
+.tracks-show-all, .tracks-hide-all {
+    display: inline-block;
+    border-bottom: 1px dashed #999;
+    font-weight: bold;
+    font-size: 11px;
+    color: #333;
+    cursor: pointer;
+}
+
+.tracks-hide-all {
+    margin-left: 10px;
+}
diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js
@@ -194,6 +194,12 @@ L.Control.TrackList = L.Control.extend({
                         },
                         visible: readingFiles"></div>
                 </div>
+                 <!-- ko if: tracks().length >= 2 -->
+                <div class="tracks-show-hide-all-wrapper">
+                    <div class="tracks-show-all" data-bind="click: showAllTracks">Show all</div>
+                    <div class="tracks-hide-all" data-bind="click: hideAllTracks">Hide all</div>
+                </div>
+                <!-- /ko -->
                 <div class="tracks-rows-wrapper" data-bind="style: {maxHeight: trackListHeight}">
                 <table class="tracks-rows"><tbody data-bind="foreach: {data: tracks, as: 'track'}">
                     <tr data-bind="event: {
@@ -202,7 +208,7 @@ L.Control.TrackList = L.Control.extend({
                                        mouseleave: $parent.onTrackRowMouseLeave.bind($parent, track)
                                    },
                                    css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}">
-                        <td><input type="checkbox" class="visibility-switch" data-bind="checked: track.visible"></td>
+                        <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>
                         <td>
@@ -1621,6 +1627,23 @@ L.Control.TrackList = L.Control.extend({
         notifyTracksChanged() {
             this.fire('trackschanged');
         },
+
+        showAllTracks: function() {
+            this.tracks().forEach((track) => track.visible(true));
+        },
+
+        hideAllTracks: function() {
+            this.tracks().forEach((track) => track.visible(false));
+        },
+
+        onTrackCheckboxClicked: function(clickedTrack, event) {
+            if (event.shiftKey) {
+                this.tracks().forEach((track) => {
+                    track.visible(track === clickedTrack);
+                });
+            }
+            return true;
+        }
     }
 );