Create timeslider on map view (refs #301)

a-thousand-channels · May 2, 2024 · 8f33d6f · 8f33d6f
1 parent 3ac6dcc
commit 8f33d6f
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 6 deletions.
diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -1,13 +1,90 @@
-
-
 jQuery(function ($) {
 
   function filterMarkers(selectedYear) {
-
-    // markers.forEach(function(marker) {
-      console.log("filterMarkers **************");
-      console.log(marker_layers);
+    console.log("filterMarkers **************");
+    console.log(window.marker_layers);
+    window.marker_layers.forEach(function(marker) {
+      if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
+          marker.addTo(map);
+          marker.setIcon(icon);
+      } else {       
+        if ( selectedYear <= current_selected_year ) {
+          map.removeLayer(marker);  
+          // marker.setIcon(icon_past);
+        } else {
+          marker.setIcon(icon_past);
+        }    
+      }
+    });
+  }
+  function SelectAndFilterByYear(el,yearDivs,year) {
+    let active = false;
+    if ( el.classList.contains("active") ) {
+      active = true;
+      resetMarkers();
+    } else {
+      filterMarkers(year);
+    }
+    yearDivs.forEach(function(div) {
+      div.classList.remove("active");
+    });
+    if ( !active ) {
+      el.classList.add("active");
+    }
   }
+// time line
+let timelineContent = document.createElement('div');
+timelineContent.setAttribute('id', 'timeline-content');
+let main = document.querySelector("main");
+main.appendChild(timelineContent);
+
+let minYear = 2000;
+let maxYear = 2024;
+
+let diff = maxYear - minYear;
+let step = 1;
+
+for (var i = minYear; i <= maxYear; i += step) {
+  var div = document.createElement('div');
+  div.classList.add('year');
+  div.setAttribute('id', 'year'+i);
+  div.setAttribute('data-year', i);
+  div.textContent = i;
+  timelineContent.appendChild(div);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  const timelineContent = document.getElementById("timeline-content");
+  const scrollLeft = document.getElementById("scroll-left");
+  const scrollRight = document.getElementById("scroll-right");
+  const yearDivs = document.querySelectorAll(".year");
+
+
+  scrollLeft.addEventListener("click", function() {
+    timelineContent.scrollBy({
+      left: -100, // Adjust the scroll amount as needed
+      behavior: "smooth"
+    });
+  });
+
+  scrollRight.addEventListener("click", function() {
+    timelineContent.scrollBy({
+      left: 100, // Adjust the scroll amount as needed
+      behavior: "smooth"
+    });
+  });
+  yearDivs.forEach(function(yearDiv) {
+    yearDiv.addEventListener("click", function() {
+
+      var selectedYear = this.getAttribute('data-year') // You can modify this to select any year within the range
+      SelectAndFilterByYear(this,yearDivs,selectedYear)
+    });
+  });
+  el = document.getElementById('year2008'); 
+  SelectAndFilterByYear(el,yearDivs,'2008')
+});
+
+
   // for a single slider, used in places index
   $(document).on('changed.zf.slider', '[data-slider]', function(event) {
     var $slider = $(event.currentTarget);

diff --git a/app/assets/stylesheets/6_timeline.css.scss b/app/assets/stylesheets/6_timeline.css.scss
@@ -20,3 +20,91 @@
     border-bottom: 4px solid #c6c600;
   }
 }
+
+
+
+#timeline {
+  position: fixed;
+  bottom: 10px;
+  padding: 0 20px;
+  left: 80px;
+  right: 80px;
+  display: flex;
+  justify-content: center;
+  z-index: 9000;
+  border: 1px solid transparent;
+
+ }
+#timeline-content {
+   background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.3);
+ border-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+   margin: 0 10px;
+  padding: 5px 30px 5px 220px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+   justify-content: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center; 
+
+ }
+#timeline-content div {
+  font-family: sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: white;
+  text-shadow: 0 0 4px black;
+  width: 40px;
+  height: 30px;
+  background-color: transparent;
+  border-left: 3px solid rgba(200,200,200,0.5);
+  margin: 5px;
+  padding: 0 5px 0 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-items: flex-end;
+}
+#timeline-content div.active
+{ 
+  color: #c6c600;
+  cursor: pointer;
+  border-color: #c6c600;
+  text-shadow: 0 0 4px black;
+  transition: 0.3s all;
+}
+#timeline-content div:hover
+{ 
+  color: #ccc;
+  cursor: pointer;
+  border-color: #ccc;
+  text-shadow: 0 0 4px black;
+  transition: 0.3s all;
+}
+#timeline-content div.active:hover
+{ 
+  color: #c6c600;
+   border-color: #c6c600;
+}
+#scroll-left,
+#scroll-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 30px; /* Adjust as needed */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 9999; /* Ensure scroll handles are above content */
+}
+
+#scroll-right {
+  left: unset;
+  right: 0;
+}
diff --git a/spec/views/maps/show.html.haml_spec.rb b/spec/views/maps/show.html.haml_spec.rb
@@ -16,6 +16,7 @@
                         ))
     @layer = FactoryBot.create(:layer, map_id: @map.id)
     @map_layers = @map.layers
+    @places = FactoryBot.create_list(:place, 3)
   end
 
   it 'renders attributes in <p>' do