Fix one error, and by this show stale years with greyed coloring (refs …

…#301)
a-thousand-channels · Jun 14, 2024 · bdd2a60 · bdd2a60
1 parent 37753f5
commit bdd2a60
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -55,10 +55,16 @@ jQuery(function ($) {
     for (var i = minYear; i <= maxYear; i += step) {
       var div = document.createElement('div');
       div.classList.add('year');
-      div.setAttribute('title', 'Show '+places_by_year[i].length+' places for '+i);
       div.setAttribute('id', 'year'+i);
       div.setAttribute('data-year', i);
-      div.setAttribute('data-places', places_by_year[i].length);
+      if ( places_by_year[i] ) {
+        div.setAttribute('title', 'Show '+places_by_year[i].length+' places for '+i);
+        div.setAttribute('data-places', places_by_year[i].length);
+      } else {
+        div.classList.add('stale');
+        div.setAttribute('title', 'No places for '+i);
+        div.setAttribute('data-places', 0);
+      }
       div.textContent = i;
       timelineContent.appendChild(div);
     }

diff --git a/app/assets/stylesheets/6_timeline.css.scss b/app/assets/stylesheets/6_timeline.css.scss
@@ -121,6 +121,7 @@ table#timeline-list {
   align-items: center;
   align-items: flex-end;
 }
+
 #timeline-wrapper.dark #timeline-content,
 #timeline-wrapper.light #timeline-content {
   background-color: transparent;
@@ -170,6 +171,12 @@ table#timeline-list {
   filter: drop-shadow(0 0 0.2em white);
   transition: 0.3s all;
 }
+#timeline-wrapper #timeline-content div.stale,
+#timeline-wrapper.light #timeline-content div.stale,
+#timeline-wrapper.dark #timeline-content div.stale {
+  color: #aaa !important;
+  border-color: #bbb !important;
+}
 #timeline-wrapper #timeline-content div:hover
 { 
   color: #ccc;

diff --git a/app/views/maps/show.html.haml b/app/views/maps/show.html.haml
@@ -27,7 +27,7 @@
   
   %script{:type => "text/javascript"}
     let places_by_year = #{@places_by_year.to_json.html_safe}
-    console.log('places_by_year',places_by_year.length, places_by_year);
+    console.log('places_by_year',places_by_year);
 
 
 #selection{:data => { 'url' => "/maps/#{@map.id}.json", 'map_id' => "#{@map.id}", 'map-center-lat' => "#{@map.mapcenter_lat}", 'map-center-lon' => "#{@map.mapcenter_lon}", 'map-zoom' => "#{@map.zoom}", 'map-extent-northeast' => "#{@map.northeast_corner}", 'map-extent-southwest' => "#{@map.southwest_corner}", 'map-basemap-url' => "#{@map.basemap_url}", 'map-basemap-attribution' => "#{@map.basemap_attribution}", 'map-background-color' => "#{@map.background_color}", 'map-popup-display-mode' => "#{@map.popup_display_mode}", 'map-marker_display_mode' => "#{@map.marker_display_mode}", 'map-enable_historical_maps' => "#{@map.enable_historical_maps}", 'map-enable_time_slider' => "#{@map.enable_time_slider}", 'map-timeline-minyear' => "#{@minyear}", 'map-timeline-maxyear' => "#{@maxyear}", 'map-timeline-timespan' => "#{@timespan}" }}