Adding basic timeslider behaviour on the index list (refs #301)

a-thousand-channels · Mar 18, 2024 · 0b3c9dc · 0b3c9dc
1 parent 185cad8
commit 0b3c9dc
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 18 deletions.
diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -5,9 +5,32 @@ jQuery(function ($) {
   $(document).on('changed.zf.slider', '[data-slider]', function(event) {
     var $slider = $(event.currentTarget);
     var $numberInput = $slider.children('input');
-    console.log($numberInput.val())
-    $('#slider-selection').html($numberInput.val())
-    // TODO: create list of all places with startyear and endyear data values
+    let year = $numberInput.val()
+    console.log(year)
+    $('#slider-selection').html("Year selected: "+year);
+
+    // get all places with id + startyear data values  
+    let places_with_years = $('#timeline .place-entry').map(function() {
+      return {
+        id: $(this).attr('id'),
+        startyear: $(this).data('startyear'),
+        endyear: $(this).data('endyear')
+      }
+    })
+    console.log(places_with_years);
+
+    places_with_years.each(function() {
+      console.log(this.id, this.startyear, this.endyear)
+      if (year >= this.startyear && year <= this.endyear) {
+        console.log('show')
+        $('#'+this.id).show()
+      } else {
+        console.log('hide')
+        $('#'+this.id).hide()
+      }
+    });
+
+
     // hide all
     // show only those existing in the selected year
   });

diff --git a/app/views/places/index.html.haml b/app/views/places/index.html.haml
@@ -61,13 +61,30 @@
             All Images of this layer
   %p
     &nbsp;
+  - minyear = @places.reject { |place| place.startdate.nil? }.min_by { |place| place.startdate.year }&.startdate&.year || Date.today.year
+  - # if all enddates are nil, check for max in startdates
+  - if @places.all? { |place| place.enddate.nil? }
+    - maxyear = @places.reject { |place| place.startdate.nil? }.max_by { |place| place.startdate.year }&.startdate&.year || Date.today.year
+  - else
+    - maxyear = @places.reject { |place| place.enddate.nil? }.max_by { |place| place.enddate.year }&.enddate&.year || Date.today.year  
 
+  %table
+    %thead
+      %tr  
+        %th{colspan:2}
+          Slider
+          %p.float-right#slider-selection
+            %strong
+              = minyear
+          .slider.radius{"data-slider":true,"data-initial-start":minyear,"data-start":minyear,"data-end":maxyear,"data-step":1}
+            .slider-handle{"data-slider-handle":true,"role":"slider","tabindex":1}
+            .slider-fill{"data-slider-fill":true}
+            %input{"type":"hidden"}
   %table#timeline
     %thead
       %tr
         %th 
-          - minyear = @places.reject { |place| place.startdate.nil? }.min_by { |place| place.startdate.year }&.startdate&.year || Date.today.year
-          - maxyear = @places.reject { |place| place.enddate.nil? }.max_by { |place| place.enddate.year }&.enddate&.year || Date.today.year
+
           %b
             Timeline
           from
@@ -81,7 +98,9 @@
           &nbsp;
     %tbody          
       - @places.sort_by{ |e| e.startdate.nil? ? Date.new : e.startdate }.each do |place|
-        %tr 
+        - startyear = place.startdate ? place.startdate.year : ''
+        - endyear = place.enddate ? place.enddate.year : startyear
+        %tr{id: "place_#{place.id}", class: "place-entry", "data-startyear":startyear,"data-endyear":endyear}  
           %td
             %p
               = smart_date_display(place.startdate, place.enddate)
@@ -106,18 +125,7 @@
               - else
                 %span.time.time-off>‒
 
-  %table.hidden
-    %thead
-      %tr  
-        %th{colspan:2}
-          Slider
-          %p.float-right#slider-selection
-            %strong
-              = minyear
-          .slider.radius{"data-slider":true,"data-initial-start":minyear,"data-start":minyear,"data-end":maxyear,"data-step":1}
-            .slider-handle{"data-slider-handle":true,"role":"slider","tabindex":1}
-            .slider-fill{"data-slider-fill":true}
-            %input{"type":"hidden"}
+
 
 
   %table