From 190418442456e3d644cebb10be160bb516827c3a Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Wed, 24 Jul 2024 16:46:22 -0700 Subject: [PATCH] Scroll Calendar Without Scrolling the Page Instead of scrolling the calendar element into view I've used the scrolling container element itself to scroll to the position of the first event. This happens anytime the events list is updated. The offsetTop property on an element uses a feature called offsetParent which discovers the nearest ancestor element with a relative or absolute position. I've added that positioning property to the scrolling container so it is correctly identified as the offsetParent. --- packages/ilios-common/.lint-todo | 6 ------ packages/ilios-common/addon/components/daily-calendar.hbs | 2 +- packages/ilios-common/addon/components/daily-calendar.js | 7 +++++-- packages/ilios-common/addon/components/weekly-calendar.hbs | 2 +- packages/ilios-common/addon/components/weekly-calendar.js | 7 +++++-- .../app/styles/ilios-common/components/daily-calendar.scss | 1 + .../styles/ilios-common/components/weekly-calendar.scss | 1 + 7 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/ilios-common/.lint-todo b/packages/ilios-common/.lint-todo index d19123492d..d2fd10c69a 100644 --- a/packages/ilios-common/.lint-todo +++ b/packages/ilios-common/.lint-todo @@ -2,9 +2,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb439ee6b510cea24e2 add|ember-template-lint|no-at-ember-render-modifiers|25|6|25|6|242be4337ef58ba487a9168fe2944bd6919a1397|1720137600000|1722729600000|1725321600000|addon/components/choose-material-type.hbs add|ember-template-lint|no-at-ember-render-modifiers|26|6|26|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1720137600000|1722729600000|1725321600000|addon/components/choose-material-type.hbs add|ember-template-lint|no-at-ember-render-modifiers|7|2|7|2|83ed72f478af76221bd23683c194bca4058827a2|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar-event.hbs -add|ember-template-lint|no-at-ember-render-modifiers|23|4|23|4|88f10de94f95126fa1fd673667ca2aaab7982129|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar.hbs -add|ember-template-lint|no-at-ember-render-modifiers|24|4|24|4|43d899f1e425cbd1d9905289c03c76010e2b8e28|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar.hbs -add|ember-template-lint|no-at-ember-render-modifiers|28|65|28|65|f1c93cd73ccbba59ba7ff98fc6aa7e5155dbd5cb|1720137600000|1722729600000|1725321600000|addon/components/daily-calendar.hbs add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb8a149d14413d4dfc84ffd31349ef3f2ac6d17b|1720137600000|1722729600000|1725321600000|addon/components/date-picker.hbs add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|993f1e23f796f19a221eae6e24872755e0436cb4|1720137600000|1722729600000|1725321600000|addon/components/date-picker.hbs add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|5ba74b4fd722ca99a9891d9368168c13b9f87f4c|1720137600000|1722729600000|1725321600000|addon/components/detail-cohort-list.hbs @@ -49,9 +46,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|7491f1d2f4e83f2c87f add|ember-template-lint|no-at-ember-render-modifiers|13|6|13|6|83ed72f478af76221bd23683c194bca4058827a2|1720137600000|1722729600000|1725321600000|addon/components/user-name-info.hbs add|ember-template-lint|no-at-ember-render-modifiers|8|57|8|57|5ee728ed47908f031dd90bb0e2f64787a1c4998f|1720137600000|1722729600000|1725321600000|addon/components/wait-saving.hbs add|ember-template-lint|no-at-ember-render-modifiers|7|2|7|2|83ed72f478af76221bd23683c194bca4058827a2|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar-event.hbs -add|ember-template-lint|no-at-ember-render-modifiers|24|4|24|4|88f10de94f95126fa1fd673667ca2aaab7982129|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar.hbs -add|ember-template-lint|no-at-ember-render-modifiers|25|4|25|4|43d899f1e425cbd1d9905289c03c76010e2b8e28|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar.hbs -add|ember-template-lint|no-at-ember-render-modifiers|29|65|29|65|f1c93cd73ccbba59ba7ff98fc6aa7e5155dbd5cb|1720137600000|1722729600000|1725321600000|addon/components/weekly-calendar.hbs add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1720137600000|1722729600000|1725321600000|addon/components/course/collapsed-objectives.hbs add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|164f37088962494b6b2c13759308b890f0edce17|1720137600000|1722729600000|1725321600000|addon/components/course/collapsed-objectives.hbs add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|8495b8aa25ddd6757ec2b7d347f6e0f366cb5beb|1720137600000|1722729600000|1725321600000|addon/components/course/details.hbs diff --git a/packages/ilios-common/addon/components/daily-calendar.hbs b/packages/ilios-common/addon/components/daily-calendar.hbs index 1d1938fdb2..dbdbffe56b 100644 --- a/packages/ilios-common/addon/components/daily-calendar.hbs +++ b/packages/ilios-common/addon/components/daily-calendar.hbs @@ -1,3 +1,4 @@ +{{!-- template-lint-disable no-at-ember-render-modifiers --}}
diff --git a/packages/ilios-common/addon/components/daily-calendar.js b/packages/ilios-common/addon/components/daily-calendar.js index fe326708db..80f076414a 100644 --- a/packages/ilios-common/addon/components/daily-calendar.js +++ b/packages/ilios-common/addon/components/daily-calendar.js @@ -4,7 +4,6 @@ import { restartableTask, timeout } from 'ember-concurrency'; import { action, set } from '@ember/object'; import { sortBy } from 'ilios-common/utils/array-helpers'; import { DateTime } from 'luxon'; -import scrollIntoView from 'scroll-into-view'; export default class DailyCalendarComponent extends Component { @service intl; @@ -18,7 +17,11 @@ export default class DailyCalendarComponent extends Component { if (earliestHour < 24 && earliestHour > 2) { hourElement = this[`hour${earliestHour}`]; } - scrollIntoView(hourElement, { align: { top: 0 } }); + const { offsetTop } = hourElement; + calendarElement.scrollTo({ + top: offsetTop, + behavior: 'instant', + }); }); get earliestHour() { diff --git a/packages/ilios-common/addon/components/weekly-calendar.hbs b/packages/ilios-common/addon/components/weekly-calendar.hbs index 95ae7fbdf6..bf422cd2ba 100644 --- a/packages/ilios-common/addon/components/weekly-calendar.hbs +++ b/packages/ilios-common/addon/components/weekly-calendar.hbs @@ -1,3 +1,4 @@ +{{!-- template-lint-disable no-at-ember-render-modifiers --}}
diff --git a/packages/ilios-common/addon/components/weekly-calendar.js b/packages/ilios-common/addon/components/weekly-calendar.js index 4e59d84e55..17930144fc 100644 --- a/packages/ilios-common/addon/components/weekly-calendar.js +++ b/packages/ilios-common/addon/components/weekly-calendar.js @@ -4,7 +4,6 @@ import { restartableTask, timeout } from 'ember-concurrency'; import { action, set } from '@ember/object'; import { DateTime } from 'luxon'; import { sortBy } from 'ilios-common/utils/array-helpers'; -import scrollIntoView from 'scroll-into-view'; export default class WeeklyCalendarComponent extends Component { @service intl; @@ -19,7 +18,11 @@ export default class WeeklyCalendarComponent extends Component { if (earliestHour < 24 && earliestHour > 2) { hourElement = this[`hour${earliestHour}`]; } - scrollIntoView(hourElement, { align: { top: 0 } }); + const { offsetTop } = hourElement; + calendarElement.scrollTo({ + top: offsetTop, + behavior: 'instant', + }); }); get firstDayOfWeek() { diff --git a/packages/ilios-common/app/styles/ilios-common/components/daily-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/daily-calendar.scss index 6ba382508e..8eebfa0b19 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/daily-calendar.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/daily-calendar.scss @@ -53,6 +53,7 @@ grid-template-rows: repeat($minute-rows, $hour-height); max-height: 90%; overflow-y: scroll; + position: relative; .events { @include m.ilios-list-reset; diff --git a/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss index 02cc94cb35..bac904271b 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss @@ -54,6 +54,7 @@ grid-template-rows: repeat($minute-rows, $hour-height); max-height: 90%; overflow-y: scroll; + position: relative; .day-name { @include m.visually-hidden;