From ff26adaca3c409acc36d5e61b763d70acf47d667 Mon Sep 17 00:00:00 2001 From: Ivymaster Date: Wed, 21 Oct 2026 22:15:44 +0200 Subject: [PATCH] Removed observers based grid update, from range view, with watcher update --- application/helpers/hlp_header_helper.php | 9 +- application/libraries/KalenderLib.php | 2 +- .../checks/ResourcesCollisionCheck.php | 2 +- .../collision/checks/RoomCollisionCheck.php | 2 +- .../checks/VerbandCollisionCheck.php | 2 +- application/views/Tempus.php | 4 +- public/css/Cis4/print.css | 2 +- .../js/components/Calendar/Base/Grid/Line.js | 2 +- .../js/components/Calendar/Mode/Range/View.js | 261 ++++-------------- public/js/components/Calendar/Tempus.js | 7 - 10 files changed, 57 insertions(+), 236 deletions(-) diff --git a/application/helpers/hlp_header_helper.php b/application/helpers/hlp_header_helper.php index 5e2ebaf3f..41f361bf1 100644 --- a/application/helpers/hlp_header_helper.php +++ b/application/helpers/hlp_header_helper.php @@ -92,16 +92,9 @@ function generatePrintCSS($path) $ci =& get_instance(); $cachetoken = '?'.$ci->config->item('fhcomplete_build_version'); - if (is_array($path)) { - foreach ($path as $p) { - echo sprintf($cssLink, base_url($p).$cachetoken) . PHP_EOL; - } - - - } else if (isset($path)) { + if (isset($path)) { echo sprintf($cssLink, base_url($path).$cachetoken) . PHP_EOL; } - } /** diff --git a/application/libraries/KalenderLib.php b/application/libraries/KalenderLib.php index a6ac9d67e..3274aae99 100644 --- a/application/libraries/KalenderLib.php +++ b/application/libraries/KalenderLib.php @@ -2318,4 +2318,4 @@ class KalenderLib return hasData($result) ? getData($result)[0]->index : 1; } -} \ No newline at end of file +} diff --git a/application/libraries/collision/checks/ResourcesCollisionCheck.php b/application/libraries/collision/checks/ResourcesCollisionCheck.php index 433dc2ff3..da163977e 100644 --- a/application/libraries/collision/checks/ResourcesCollisionCheck.php +++ b/application/libraries/collision/checks/ResourcesCollisionCheck.php @@ -91,4 +91,4 @@ class ResourcesCollisionCheck implements ICollisionCheck return $grouped; } -} +} \ No newline at end of file diff --git a/application/libraries/collision/checks/RoomCollisionCheck.php b/application/libraries/collision/checks/RoomCollisionCheck.php index 2aa364a0a..60b59baf9 100644 --- a/application/libraries/collision/checks/RoomCollisionCheck.php +++ b/application/libraries/collision/checks/RoomCollisionCheck.php @@ -91,4 +91,4 @@ class RoomCollisionCheck implements ICollisionCheck return $grouped; } -} +} \ No newline at end of file diff --git a/application/libraries/collision/checks/VerbandCollisionCheck.php b/application/libraries/collision/checks/VerbandCollisionCheck.php index e6be40fca..d7c2f9780 100644 --- a/application/libraries/collision/checks/VerbandCollisionCheck.php +++ b/application/libraries/collision/checks/VerbandCollisionCheck.php @@ -420,4 +420,4 @@ class VerbandCollisionCheck implements ICollisionCheck return $grouped; } -} +} \ No newline at end of file diff --git a/application/views/Tempus.php b/application/views/Tempus.php index 62fb3f85a..30cfd1e98 100644 --- a/application/views/Tempus.php +++ b/application/views/Tempus.php @@ -31,9 +31,7 @@ 'customJSModules' => [ 'public/js/apps/Tempus.js' ], - 'printCssPath' => [ - 'public/css/Tempus_print.css' - ] + 'printCssPath' => 'public/css/Tempus_print.css' ); $this->load->view('templates/FHC-Header', $includesArray); diff --git a/public/css/Cis4/print.css b/public/css/Cis4/print.css index 44759c67a..867b82be7 100644 --- a/public/css/Cis4/print.css +++ b/public/css/Cis4/print.css @@ -103,4 +103,4 @@ header, .fhc-calendar-mode-range .fhc-calendar-base-grid-line-event .event-lectors { display: none !important; -} +} \ No newline at end of file diff --git a/public/js/components/Calendar/Base/Grid/Line.js b/public/js/components/Calendar/Base/Grid/Line.js index 3c0055ff2..8f58a32eb 100644 --- a/public/js/components/Calendar/Base/Grid/Line.js +++ b/public/js/components/Calendar/Base/Grid/Line.js @@ -21,7 +21,7 @@ export default { compactibleEventTypes: { from: 'compactibleEventTypes', default: undefined, - } + }, }, props: { date: { diff --git a/public/js/components/Calendar/Mode/Range/View.js b/public/js/components/Calendar/Mode/Range/View.js index 6f3447ac9..60359cec5 100644 --- a/public/js/components/Calendar/Mode/Range/View.js +++ b/public/js/components/Calendar/Mode/Range/View.js @@ -50,8 +50,6 @@ export default { localStorage.getItem('fhc-calender-visible-days'), ) ?? [true, true, true, true, true, true, true], gridWidthEqualizingData: { - resizeObserver: null, - mutationObserver: null, animationFrame: null, syncing: false, isActive: false, @@ -80,9 +78,38 @@ export default { return; } this.$nextTick(() => - this.scheduleGridWidthSync('column width adjustment enabled'), + this.scheduleGridWidthSync(), ); }, + events:{ + handler() { + this.startFreshColumnWidthSync(); + }, + flush: 'post', + immediate: true, + }, + weekStartDays: { + handler() { + this.startFreshColumnWidthSync(); + }, + flush: 'post', + immediate: true, + }, + timeAxisSegments: { + handler() { + this.startFreshColumnWidthSync(); + }, + flush: 'post', + immediate: true, + }, + dayVisibilityStates: { + handler() { + this.startFreshColumnWidthSync(); + }, + flush: 'post', + deep: true, + immediate: true, + }, }, computed: { daysGroupedByWeek() { @@ -133,122 +160,6 @@ export default { }, }, methods: { - resetGridWidthSync() { - this.gridElements().forEach(grid => grid.style.removeProperty('min-width')); - }, - gridElements() { - const grids = Array.isArray(this.$refs.grids) - ? this.$refs.grids - : [this.$refs.grids]; - - return grids - .map(grid => grid?.$el) - .filter(el => el instanceof HTMLElement); - }, - hasColumnWidthEvents() { - const grids = Array.isArray(this.$refs.grids) - ? this.$refs.grids - : [this.$refs.grids]; - - return grids.some(grid => grid?.originalEvents?.some( - event => event.type !== 'loading', - )); - }, - resetColumnWidthsForEventReload() { - this.initialColumnWidthEventsSeen = false; - this.startFreshColumnWidthSync(); - }, - resetGridHeightsForEventReload() { - this.gridHeights = []; - this.$nextTick(() => this.initializeGridHeights()); - }, - flushFreshColumnWidthSync() { - if (!this.freshColumnWidthSyncRequested || this.gridWidthSyncing) - return; - - this.freshColumnWidthSyncRequested = false; - this.queueGridWidthSync('fresh column width sync'); - }, - queueInitialColumnWidthSync() { - this.initialColumnWidthSyncAnimationFrame = requestAnimationFrame(() => { - this.initialColumnWidthSyncAnimationFrame = requestAnimationFrame(() => { - this.initialColumnWidthSyncAnimationFrame = null; - this.startFreshColumnWidthSync(); - }); - }); - }, - setGridHeight(index, height) { - if (!Number.isFinite(height) || height <= 0) - return; - - if (this.gridHeights[index] !== height) - this.gridHeights.splice(index, 1, height); - }, - recordGridHeight(grid) { - const index = this.gridElements().indexOf(grid); - if (index === -1) - return; - - this.setGridHeight( - index, - Math.ceil(grid.getBoundingClientRect().height), - ); - }, - syncGridHeightTracking() { - const grids = this.gridElements(); - const currentGrids = new Set(grids); - - this.observedGridElements?.forEach(grid => { - if (!currentGrids.has(grid)) { - this.gridHeightResizeObserver.unobserve(grid); - this.observedGridElements.delete(grid); - } - }); - if (this.gridHeights.length > grids.length) - this.gridHeights.splice(grids.length); - - grids.forEach((grid, index) => { - if (!this.observedGridElements?.has(grid)) { - this.gridHeightResizeObserver.observe(grid); - this.observedGridElements.add(grid); - this.setGridHeight( - index, - Math.ceil(grid.getBoundingClientRect().height), - ); - } - }); - }, - initializeGridHeights() { - const grids = this.gridElements(); - const firstGrid = grids[0]; - if (!firstGrid) - return; - - const initialGridHeight = Math.ceil(firstGrid.getBoundingClientRect().height); - if (!Number.isFinite(initialGridHeight) || initialGridHeight <= 0) - return; - - this.gridHeights = grids.map(() => initialGridHeight); - this.$nextTick(() => this.syncGridHeightTracking()); - }, - queueGridWidthSync(source = 'unknown') { - - if ( - (!this.adjustColumnWidths && !this.syncGridWidths) - || this.gridResizeActive - || this.gridWidthSyncing - || this.gridWidthAnimationFrame !== null - ) - return; - - this.gridWidthAnimationFrame = requestAnimationFrame(() => { - this.gridWidthAnimationFrame = null; - this.synchronizeGridWidths(source); - }); - }, - onGridResizeState(evt) { - this.gridResizeActive = !!evt.detail?.active; - }, isToday(date) { return date.hasSame(luxon.DateTime.now().setZone(this.timezone), 'day'); }, @@ -258,17 +169,7 @@ export default { 'fhc-calender-visible-days', JSON.stringify(this.dayVisibilityStates), ); - this.$nextTick(() => this.scheduleGridWidthSync()); }, - getGridElements() { - const grids = Array.isArray(this.$refs.grids) - ? this.$refs.grids - : [this.$refs.grids]; - return grids - .map((grid) => grid?.$el) - .filter((el) => el instanceof HTMLElement); - }, - onGridResizeState(evt) { this.gridWidthEqualizingData.isActive = !!evt.detail?.active; }, @@ -390,23 +291,6 @@ export default { this.flushFreshColumnWidthSync(); } }, - clearGridMinWidths() { - this.getGridElements().forEach((grid) => - grid.style.removeProperty('min-width'), - ); - }, - resetColumnWidthAdjustment() { - this.gridColumnWidthEqualizingData.sharedDayWidths = null; - this.gridColumnWidthEqualizingData.largestDayWidths = null; - }, - hasColumnWidthEvents() { - const grids = Array.isArray(this.$refs.grids) - ? this.$refs.grids - : [this.$refs.grids]; - return grids.some((grid) => - grid?.originalEvents?.some((event) => event.type !== 'loading'), - ); - }, startFreshColumnWidthSync() { this.gridColumnWidthEqualizingData.syncVersion += 1; this.resetColumnWidthAdjustment(); @@ -418,9 +302,14 @@ export default { this.gridColumnWidthEqualizingData.syncRequested = true; this.$nextTick(() => this.flushFreshColumnWidthSync()); }, - resetColumnWidthsForEventReload() { - this.gridColumnWidthEqualizingData.initialEventsSeen = false; - this.startFreshColumnWidthSync(); + resetColumnWidthAdjustment() { + this.gridColumnWidthEqualizingData.sharedDayWidths = null; + this.gridColumnWidthEqualizingData.largestDayWidths = null; + }, + clearGridMinWidths() { + this.getGridElements().forEach((grid) => + grid.style.removeProperty('min-width'), + ); }, flushFreshColumnWidthSync() { if ( @@ -431,75 +320,23 @@ export default { this.gridColumnWidthEqualizingData.syncRequested = false; this.scheduleGridWidthSync(); }, - queueInitialColumnWidthSync() { - this.gridColumnWidthEqualizingData.initialSyncAnimationFrame = - requestAnimationFrame(() => { - this.gridColumnWidthEqualizingData.initialSyncAnimationFrame = - requestAnimationFrame(() => { - this.gridColumnWidthEqualizingData.initialSyncAnimationFrame = - null; - this.startFreshColumnWidthSync(); - }); - }); + getGridElements() { + const grids = Array.isArray(this.$refs.grids) + ? this.$refs.grids + : [this.$refs.grids]; + return grids + .map((grid) => grid?.$el) + .filter((el) => el instanceof HTMLElement); }, }, mounted() { - this.gridWidthEqualizingData.resizeObserver = Vue.markRaw( - new ResizeObserver(() => { - this.scheduleGridWidthSync(); - }), - ); - this.gridWidthEqualizingData.resizeObserver.observe(this.$el); - this.gridWidthEqualizingData.mutationObserver = Vue.markRaw( - new MutationObserver((mutations) => { - const isResizeGhost = (node) => - node.nodeType === Node.ELEMENT_NODE && - (node.matches('.fhc-event-ghost') || - node.matches('.fhc-resize-preview')); - const relevantMutations = mutations.filter( - (mutation) => - mutation.type === 'childList' && - [...mutation.addedNodes, ...mutation.removedNodes].some( - (node) => !isResizeGhost(node), - ), - ); - if (!relevantMutations.length) return; - this.$nextTick(() => { - if ( - !this.gridColumnWidthEqualizingData.initialEventsSeen && - this.hasColumnWidthEvents() - ) { - this.gridColumnWidthEqualizingData.initialEventsSeen = true; - this.startFreshColumnWidthSync(); - return; - } - this.scheduleGridWidthSync(); - }); - }), - ); - this.gridWidthEqualizingData?.mutationObserver.observe(this.$el, { - childList: true, - subtree: true, - }); - - if (this.hasColumnWidthEvents()) { - this.gridColumnWidthEqualizingData.initialEventsSeen = true; - this.startFreshColumnWidthSync(); - } else { - this.scheduleGridWidthSync(); - } - this.queueInitialColumnWidthSync(); + this.startFreshColumnWidthSync(); }, beforeUnmount() { - this.gridWidthEqualizingData?.resizeObserver?.disconnect(); - this.gridWidthEqualizingData?.mutationObserver?.disconnect(); - - if (this.gridWidthEqualizingData.animationFrame !== null) + if (this.gridWidthEqualizingData.animationFrame !== null) { cancelAnimationFrame(this.gridWidthEqualizingData.animationFrame); - if (this.gridColumnWidthEqualizingData.initialSyncAnimationFrame !== null) - cancelAnimationFrame( - this.gridColumnWidthEqualizingData.initialSyncAnimationFrame, - ); + this.gridWidthEqualizingData.animationFrame = null; + } }, template: /* html */ `
{ - const view = this.$refs.calendar?.$refs.mode?.$refs.view; - view?.resetColumnWidthsForEventReload?.(); - view?.resetGridHeightsForEventReload?.(); - }); - } }, reloadEvents() { this.refreshEventsAfterReload = true;