diff --git a/assets/controllers/timeline_scroll_controller.js b/assets/controllers/timeline_scroll_controller.js new file mode 100644 index 0000000..6c65e57 --- /dev/null +++ b/assets/controllers/timeline_scroll_controller.js @@ -0,0 +1,22 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = [ 'today' ] + + connect() { + if (false === this.hasTodayTarget) { + return + } + + requestAnimationFrame(() => { + const containerRect = this.element.getBoundingClientRect() + const todayRect = this.todayTarget.getBoundingClientRect() + + const scrollLeft = todayRect.left - containerRect.left + this.element.scrollLeft + const centered = scrollLeft - (this.element.clientWidth / 2) + (todayRect.width / 2) + const maxScrollLeft = this.element.scrollWidth - this.element.clientWidth + + this.element.scrollLeft = Math.min(Math.max(0, centered), maxScrollLeft) + }) + } +} diff --git a/templates/administrative/assignment/timeline.html.twig b/templates/administrative/assignment/timeline.html.twig index 4bbed51..54c88d0 100644 --- a/templates/administrative/assignment/timeline.html.twig +++ b/templates/administrative/assignment/timeline.html.twig @@ -68,12 +68,12 @@ {% endif %} -
| {% for day in filterDto.period %} - | + | {{ day | date('d.m.Y') }} | {% endfor %}
|---|