jump to next week in javascript (rd)

This commit is contained in:
L_DA 2020-07-12 20:46:25 +00:00
parent 981a2bc72c
commit c912d97987
4 changed files with 19 additions and 6 deletions

View file

@ -129,7 +129,7 @@ class block_timetable extends block_base {
$PAGE->requires->js_init_call('M.block_timetable.helper.init', array($opts),false,$jsmodule); $PAGE->requires->js_init_call('M.block_timetable.helper.init', array($opts),false,$jsmodule);
$this->content->text .= html_writer::start_tag('div', ['data-region' => 'calendar', 'class' => 'maincalendar']); $this->content->text .= html_writer::start_tag('div', ['data-region' => 'calendar', 'class' => 'maincalendar']);
$this->content->text .= html_writer::start_tag('div', ['class' =>'slider']); $this->content->text .= html_writer::start_tag('div', ['class' =>'slider', 'id'=>'timetable_frame']);
$this->content->text .= html_writer::start_tag('div', ['class' =>'slides']); $this->content->text .= html_writer::start_tag('div', ['class' =>'slides']);
for ($i=0; $i<3; $i++) { for ($i=0; $i<3; $i++) {
$ttable->read_db($i); $ttable->read_db($i);

View file

@ -145,7 +145,8 @@ class timetable {
public function get_caption($week) { public function get_caption($week) {
$result = ""; $result = "";
if ($week>0) { if ($week>0) {
$result .= '<a href="#slide-'.($week-1).'" class="arrow_link previous" title="Vorherige Woche" data-week="-1"><span class="arrow">◄</span></a>'; //$result .= '<a href="#slide-'.($week-1).'" class="arrow_link previous" title="Vorherige Woche" data-week="-1"><span class="arrow">◄</span></a>';
$result .= '<a href="javascript:M.block_timetable.scroll_week('.($week-1).');" class="arrow_link previous" title="Vorherige Woche" data-week="1"><span class="arrow">◄<</span></a>';
} else { } else {
$result .= '<a href="#" class="previous" style="visibility:hidden" data-week="-1"></A>'; $result .= '<a href="#" class="previous" style="visibility:hidden" data-week="-1"></A>';
//$result .= '<a href="#" class="arrow_link previous" data-week="-1"><span class="arrow" style="display:none"></span></a>'; //$result .= '<a href="#" class="arrow_link previous" data-week="-1"><span class="arrow" style="display:none"></span></a>';
@ -156,7 +157,8 @@ class timetable {
$result .= "</span>"; $result .= "</span>";
$result .= '<span class="hide"> | </span>'; $result .= '<span class="hide"> | </span>';
if ($week<2) { if ($week<2) {
$result .= '<a href="#slide-'.($week+1).'" class="arrow_link next" title="Nächste Woche" data-month="8" data-week="1"><span class="arrow">►</span></a>'; //$result .= '<a href="#slide-'.($week+1).'" class="arrow_link next" title="Nächste Woche" data-month="8" data-week="1"><span class="arrow">►</span></a>';
$result .= '<a href="javascript:M.block_timetable.scroll_week('.($week+1).');" class="arrow_link next" title="Nächste Woche" data-month="8" data-week="1"><span class="arrow">►</span></a>';
} else { } else {
$result .= ''; $result .= '';
} }

View file

@ -91,3 +91,15 @@ M.block_timetable.view_class = function() {
cols[i].style.display = 'table'; cols[i].style.display = 'table';
} }
}; };
M.block_timetable.scroll_week = function(week) {
//document.getElementById("timetable_frame").style.left="300px";
//document.getElementById("timetable_frame").scrollLeft="300px";
//scroller = document.getElementById("timetable_frame");
//scroller = document.getElementById("yui_3_17_2_1_1594288845629_274");
scrollerarray = document.getElementsByClassName("slides");
scroller = scrollerarray[0];
//scroller.scrollTo(280,0);
scroller.scrollTo(Math.floor(Math.floor(scroller.scrollWidth * week/3)),0);
//scroller.scrollTo({scrollLeft: Math.floor(scroller.scrollWidth * ((week+1)/3)), behavior: 'smooth'});
};

View file

@ -13,10 +13,9 @@
.slider { .slider {
width: 100%; width: 100%;
height: 100%; /*height: 100%;*/
display: flex; display: flex;
overflow-x: hidden; overflow: hidden;
scroll-snap-type: x mandatory;
} }
@supports (scroll-snap-type) { @supports (scroll-snap-type) {