kalipso/racalmas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

events: infinity scroll

Browse Source
This commit is contained in:
Milan
2021-04-11 12:37:16 +02:00
parent 4c198c3c89
commit 10a19398d5
8 changed files with 108 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/calcms/events.pm
View File

@@ -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');

11
website/agenda/css/calcms.css
View File

@@ -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;
}

1
website/agenda/images/expand_less.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

1
website/agenda/images/expand_more.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

1
website/agenda/images/more_vert.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

90
website/agenda/js/calcms.cust.js
View File

@@ -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 class="load-prev"><img src="/agenda/images/more_vert.svg"></a>');
$('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 class="load-next"><img src="/agenda/images/more_vert.svg"></a>');
$('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")
});

1
website/agenda/templates/event_details.html
View File

@@ -13,6 +13,7 @@
</div>
</TMPL_IF>
<div class="event-base" data-first-date="<TMPL_VAR first_date>" data-last-date="<TMPL_VAR last_date>">
<TMPL_LOOP events>
<div class="vevent">
<span class="dtstart"><TMPL_VAR start></span>

2
website/agenda/templates/event_list.html
View File

@@ -14,7 +14,7 @@
<TMPL_INCLUDE no_search_result.html>
<TMPL_INCLUDE no_result.html>
<div>
<div class="events-base" data-first-date="<TMPL_VAR first_date>" data-last-date="<TMPL_VAR last_date>">
<TMPL_LOOP NAME=events>
<TMPL_IF event_id>
<TMPL_IF name="is_first_of_day">