events.pm: show previous and next event

When retrieving individual events, the previous and the following event are determined
according to the current filters to allow navigation between events.

lib/calcms/events.pm

@@ -7,6 +7,7 @@ no warnings 'redefine';
 use Data::Dumper;
 use MIME::Base64();
 use Encode();
+use Storable 'dclone';
 
 use DBI();
 use template();
@@ -52,6 +53,50 @@ sub get_cached_or_render($$$) {
     return $response;
 }
 
+sub get_prev{
+    my ($config, $event) = @_;
+    my $params = {
+        till_date => time::check_date($event->{start}),
+        till_time => time::check_time($event->{start}),
+        archive   => 'all',
+        order     => 'desc',
+        limit     => 1,
+    };
+    my $request = {
+        url    => $ENV{QUERY_STRING},
+        params => {
+            original  => $params,
+            checked  => events::check_params( $config, $params ),
+        }
+    };
+    $request->{params}->{checked}->{stop_nav} = 1;
+    my $results = events::get( $config, $request );
+    return $results->[0];
+}
+
+sub get_next{
+    my ($config, $event) = @_;
+
+    my $params = {
+        from_date => time::check_date($event->{end}),
+        from_time => time::check_time($event->{end}),
+        archive   => 'all',
+        order     => 'asc',
+        limit     => 1,
+    };
+    my $request = {
+        url    => $ENV{QUERY_STRING},
+        params => {
+            original => $params,
+            checked  => events::check_params( $config, $params ),
+        },
+    };
+    $request->{params}->{checked}->{stop_nav} = 1;
+    my $results = events::get( $config, $request );
+    return $results->[0];
+}
+
+sub get($$);
 sub get($$) {
     my ($config, $request) = @_;
 
@@ -64,6 +109,16 @@ sub get($$) {
     #$results = events::add_recordings($dbh, $config, $request, $results);
     $results = events::modify_results( $dbh, $config, $request, $results );
 
+    # get prev and next event
+    if ( @$results==1
+        and !$request->{params}->{checked}->{stop_nav}  #< prevent recursion!
+        and  my $event_id = $request->{params}->{original}->{event_id}
+    ){
+        my $event = $results->[0];
+        $event->{prev_event_id} = get_prev($config, $event)->{event_id};
+        $event->{next_event_id} = get_next($config, $event)->{event_id};
+    }
+
     return $results;
 }
 

website/agenda/css/calcms.css

@@ -129,11 +129,12 @@ a {
     transition: all .2s ease-in-out;
 }
 
-.load-prev, .load-next{
+a.load-prev, a.load-next{
     text-align:center;
     cursor:pointer;
     display:block ruby;
     background:#eee;
+    padding:0.5rem;
 }
 
 #calcms_menu .event:hover {

website/agenda/events.cgi

@@ -30,7 +30,6 @@ if ( $0 =~ /events.*?\.cgi$/ ) {
             checked  => events::check_params( $config, $params ),
         },
     };
-
     events::get_cached_or_render( 'print', $config, $request );
 }
 

website/agenda/js/calcms.cust.js

@@ -191,15 +191,21 @@ var calcms_settings = new Array();
         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 addPrevEvent(id){
+        $('a.load-prev').remove();
+        $('div.event-base').first().prepend('<a class="load-prev">davor</a>');
+        $('a.load-prev').on( "click", function(){
+            var url = "/programm/sendung/"+id+'.html';
+            window.location.href=url;
+        })
     }
 
     function addPrevSection(till){
         $('a.load-prev').remove();
         $('div.events-base').first().prepend('<a class="load-prev"><img src="/agenda/images/more_vert.svg"></a>');
-        $('a.load-prev').on( "mouseover", function(){
+        $('a.load-prev').on( "click", function(){
             till.setDate(till.getDate())
             var from = new Date(till.getTime());
             from.setDate(from.getDate()-7);
@@ -213,13 +219,22 @@ var calcms_settings = new Array();
                 scrollTo( $('a.load-prev'), -offset, 0 );
                 addPrevSection(from);
             })
-        });            
+        });
+    }
+
+    function addNextEvent(id){
+        $('a.load-next').remove();
+        $('div.event-base').last().append('<a class="load-next">danach</a>');
+        $('a.load-next').on( "click", function(){
+            var url = "/programm/sendung/"+id+'.html';
+            window.location.href=url;
+        });
     }
 
     function addNextSection(from){
         $('a.load-next').remove();
         $('div.events-base').last().append('<a class="load-next"><img src="/agenda/images/more_vert.svg"></a>');
-        $('a.load-next').on( "mouseover", function(){
+        $('a.load-next').on( "click", function(){
             from.setDate(from.getDate()+1)
             var till = new Date(from.getTime());
             till.setDate(till.getDate()+7);
@@ -231,38 +246,38 @@ var calcms_settings = new Array();
                 $('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("-") ) );
-        
 
-        /*
+        var prev = $('div.event-base').data('prev-event');
+        if (prev) addPrevEvent(prev);
+
+        var next = $('div.event-base').data('next-event');
+        if (next) addNextEvent(next);
+
         $(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();
-            }
+            //if($(window).scrollTop() == 0) $('a.load-prev').click();
         });
-        */
-
     }
 
     $(document).ready(function() {

website/agenda/templates/event_details.html

@@ -13,8 +13,8 @@
 	</div>
 	</TMPL_IF>
 
-<div class="event-base" data-first-date="<TMPL_VAR first_date>" data-last-date="<TMPL_VAR last_date>">
-	<TMPL_LOOP events>
+<TMPL_LOOP events>
+<div class="event-base" data-prev-event="<TMPL_VAR prev_event_id>" data-next-event="<TMPL_VAR next_event_id>">
 	<div class="vevent">
 		<span class="dtstart"><TMPL_VAR start></span>
 		<TMPL_IF NAME=end><span class="dtend"><TMPL_VAR end></span></TMPL_IF>
@@ -88,9 +88,8 @@
 			);
 		</script>
 	</div>
-
-	</TMPL_LOOP>
 </div>
+</TMPL_LOOP>
 </body>
 </html>
 </TMPL_IF>