From 10a19398d58a0b0f2648e68eec47796285498e88 Mon Sep 17 00:00:00 2001 From: Milan Date: Sun, 11 Apr 2021 12:37:16 +0200 Subject: [PATCH] events: infinity scroll --- lib/calcms/events.pm | 2 + website/agenda/css/calcms.css | 11 +++ website/agenda/images/expand_less.svg | 1 + website/agenda/images/expand_more.svg | 1 + website/agenda/images/more_vert.svg | 1 + website/agenda/js/calcms.cust.js | 90 +++++++++++++++++++++ website/agenda/templates/event_details.html | 1 + website/agenda/templates/event_list.html | 2 +- 8 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 website/agenda/images/expand_less.svg create mode 100644 website/agenda/images/expand_more.svg create mode 100644 website/agenda/images/more_vert.svg diff --git a/lib/calcms/events.pm b/lib/calcms/events.pm index 26a9ffb..6ea9037 100644 --- a/lib/calcms/events.pm +++ b/lib/calcms/events.pm @@ -1201,6 +1201,8 @@ sub render($$$$;$) { my $result = $results->[0]; $template_parameters->{event_id} = $result->{event_id}; $template_parameters->{event_dtstart} = $result->{dtstart}; + $template_parameters->{first_date} = $results->[0]->{start_date}; + $template_parameters->{last_date} = $results->[-1]->{start_date}; } # $template_parameters->{print} =1 if ($params->{print} eq '1'); diff --git a/website/agenda/css/calcms.css b/website/agenda/css/calcms.css index 9fe41d6..741df65 100644 --- a/website/agenda/css/calcms.css +++ b/website/agenda/css/calcms.css @@ -125,6 +125,17 @@ a { transition: all .1s ease-in-out; } +.event .excerpt { + transition: all .2s ease-in-out; +} + +.load-prev, .load-next{ + text-align:center; + cursor:pointer; + display:block ruby; + background:#eee; +} + #calcms_menu .event:hover { background: #e6e6e6; } diff --git a/website/agenda/images/expand_less.svg b/website/agenda/images/expand_less.svg new file mode 100644 index 0000000..73f41f6 --- /dev/null +++ b/website/agenda/images/expand_less.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/agenda/images/expand_more.svg b/website/agenda/images/expand_more.svg new file mode 100644 index 0000000..b615405 --- /dev/null +++ b/website/agenda/images/expand_more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/agenda/images/more_vert.svg b/website/agenda/images/more_vert.svg new file mode 100644 index 0000000..2145ccd --- /dev/null +++ b/website/agenda/images/more_vert.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/agenda/js/calcms.cust.js b/website/agenda/js/calcms.cust.js index 37eac39..fe4c21a 100644 --- a/website/agenda/js/calcms.cust.js +++ b/website/agenda/js/calcms.cust.js @@ -176,6 +176,95 @@ var calcms_settings = new Array(); } } + function formatDate(date) { + var d = new Date(date), + month = '' + (d.getMonth() + 1), + day = '' + d.getDate(), + year = d.getFullYear(); + if (month.length < 2) month = '0' + month; + if (day.length < 2) day = '0' + day; + return [year, month, day].join('-'); + } + + function scrollTo(elem, offset, duration){ + if (elem==null) return; + if (offset==null) offset=0; + if (duration==null) duration=500; + $([document.documentElement, document.body]).scrollTop( elem.offset().top+offset ) + //animate({ + // scrollTop: elem.offset().top+offset + //}, duration); + } + + function addPrevSection(till){ + $('a.load-prev').remove(); + $('div.events-base').first().prepend(''); + $('a.load-prev').on( "mouseover", function(){ + till.setDate(till.getDate()) + var from = new Date(till.getTime()); + from.setDate(from.getDate()-7); + var url = "/programm/events/"+formatDate(from)+'_'+formatDate(till)+'.html'; + fetch( url ) + .then( response => response.text()) + .then( text => { + var offset = $('a.load-prev').offset().top + $('div.events-base').first().before(text); + $('div.events-base').first().css("display","none").fadeIn("1s"); + scrollTo( $('a.load-prev'), -offset, 0 ); + addPrevSection(from); + }) + }); + } + + function addNextSection(from){ + $('a.load-next').remove(); + $('div.events-base').last().append(''); + $('a.load-next').on( "mouseover", function(){ + from.setDate(from.getDate()+1) + var till = new Date(from.getTime()); + till.setDate(till.getDate()+7); + var url = "/programm/events/"+formatDate(from)+'_'+formatDate(till)+'.html'; + fetch( url ) + .then( response => response.text()) + .then( text => { + $('div.events-base').last().after(text); + $('div.events-base').last().css("display","none").fadeIn("1s"); + addNextSection(till); + }) + }); + } + + function initEventScroll(){ + var values = window.location.href.match(/programm/); + console.log("test") + if (!values) return; + + var first_date = $('div.events-base').data('first-date'); + if (first_date) addPrevSection(new Date( first_date.split("-") ) ); + + var last_date = $('div.events-base').data('last-date'); + if (last_date) addNextSection(new Date( last_date.split("-") ) ); + + + /* + $(window).scroll( function() { + clearTimeout( $.data( this, "scrollCheck" ) ); + $("div.event div.excerpt").css("opacity","0"); + $.data( this, "scrollCheck", setTimeout(function() { + $("div.event div.excerpt").css("opacity","0.7"); + }, 100) ); + + if($(window).scrollTop() + $(window).height() == $(document).height()) { + $('a.load-next').click(); + } + if($(window).scrollTop() == 0) { + $('a.load-prev').click(); + } + }); + */ + + } + $(document).ready(function() { initCalcms(); initWordpress(); @@ -183,6 +272,7 @@ var calcms_settings = new Array(); calcms.showNewestComments(); calcms.insertEditors(); initSearch(); + initEventScroll(); console.log("calcms inited") }); diff --git a/website/agenda/templates/event_details.html b/website/agenda/templates/event_details.html index bddff1c..a1d10e4 100644 --- a/website/agenda/templates/event_details.html +++ b/website/agenda/templates/event_details.html @@ -13,6 +13,7 @@ +
diff --git a/website/agenda/templates/event_list.html b/website/agenda/templates/event_list.html index b1d55e5..cc89372 100644 --- a/website/agenda/templates/event_list.html +++ b/website/agenda/templates/event_list.html @@ -14,7 +14,7 @@ -
+