From 784b1d3904ecca7e980ed2bcf339ffeeaf9a60a5 Mon Sep 17 00:00:00 2001 From: Ulf Treger Date: Mon, 20 May 2024 20:33:57 +0200 Subject: [PATCH] Darken past icons depending on map baselayer. Enable timeline only with single marker mode (refs #301) --- app/assets/javascripts/helpers/timeslider.js | 14 +++++++++++--- app/assets/javascripts/layers.js.erb | 15 +++++++++------ app/assets/stylesheets/6_timeline.css.scss | 9 ++++----- app/views/maps/show.html.haml | 8 +++----- 4 files changed, 27 insertions(+), 19 deletions(-) diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js index 6fe38262..eb7569d9 100644 --- a/app/assets/javascripts/helpers/timeslider.js +++ b/app/assets/javascripts/helpers/timeslider.js @@ -3,7 +3,9 @@ jQuery(function ($) { let body = document.querySelector("body"); if ( body.classList.contains("show") && ( body.id === 'maps') ) { - + if ( $('#selection').data('map-marker-display-mode') !== 'single' ) { + return; + } // scrollbuttons let scrollLeft = document.createElement('div'); scrollLeft.setAttribute('id', 'scroll-left'); @@ -70,8 +72,11 @@ function filterMarkers(selectedYear) { console.log("X Past", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id); - // TODO: color depending on background :) - icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.25}); + if ( $('#map').hasClass('darken-icons') ) { + icon = LargeMarkerIcon.create({color: '#333', opacity: 0.15}); + } else { + icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.25}); + } marker.setIcon(icon); // TODO: remove relations and other elements! @@ -113,6 +118,9 @@ function SelectAndFilterByYear(el,yearDivs,year) { document.addEventListener("DOMContentLoaded", function() { let body = document.querySelector("body"); if ( body.classList.contains("show") && ( body.id === 'maps') ) { + if ( $('#selection').data('map-marker-display-mode') !== 'single' ) { + return; + } const timelineContent = document.getElementById("timeline-content"); const scrollLeft = document.getElementById("scroll-left"); const scrollRight = document.getElementById("scroll-right"); diff --git a/app/assets/javascripts/layers.js.erb b/app/assets/javascripts/layers.js.erb index bd287cbd..bc227692 100644 --- a/app/assets/javascripts/layers.js.erb +++ b/app/assets/javascripts/layers.js.erb @@ -234,12 +234,15 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv "" ); - const yearDivs = document.querySelectorAll(".year"); - let startyear = $('#selection').data('map-timeline-minyear'); - console.log("Pre-select first year ", startyear, yearDivs.length); - let el = document.getElementById('year'+startyear); - SelectAndFilterByYear(el,yearDivs,startyear); - + if ( $('#selection').data('map-marker-display-mode') === 'single' ) { + + const yearDivs = document.querySelectorAll(".year"); + let startyear = $('#selection').data('map-timeline-minyear'); + console.log("Pre-select first year ", startyear, yearDivs.length); + let el = document.getElementById('year'+startyear); + SelectAndFilterByYear(el,yearDivs,startyear); + } + console.log("Fit to bounds routine"); var bounds = marker_meta_layers.getBounds().pad(0.35); diff --git a/app/assets/stylesheets/6_timeline.css.scss b/app/assets/stylesheets/6_timeline.css.scss index 4623615f..6c09be7b 100644 --- a/app/assets/stylesheets/6_timeline.css.scss +++ b/app/assets/stylesheets/6_timeline.css.scss @@ -48,16 +48,15 @@ table#timeline-list { } #timeline-content { - - background-color: transparent; + 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; + 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; + justify-content: center; flex-wrap: nowrap; overflow: hidden; align-items: center; diff --git a/app/views/maps/show.html.haml b/app/views/maps/show.html.haml index 78adfdc5..80536f93 100644 --- a/app/views/maps/show.html.haml +++ b/app/views/maps/show.html.haml @@ -1,7 +1,7 @@ - content_for(:title) { @map.title } #timeline-info{:style => "background-color: #fff; padding:10px; margin-bottom: 10px;"} - Timeline setup + Timeline (still in testing) %br #{@places.count} places in #{@map_layers.count} layers, #{@places_with_dates.count} #{@places_with_dates.count > 1 ? 'places' : 'place'} with dates %br @@ -13,10 +13,8 @@ %br - if @map.marker_display_mode == 'single' Marker display mode is set to single ✓ - %br - TODO: generate timeline - %br - TODO: set filter active + - else + Marker display mode is set to cluster x (Timeline will work only with single marker display mode enabled) %br %span#timeline-info-status #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-timeline-minyear' => "#{@minyear}", 'map-timeline-maxyear' => "#{@maxyear}", 'map-timeline-timespan' => "#{@timespan}" }}