blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-10-23 20:29:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed observers based grid update, from range view, with watcher update

Browse Source
This commit is contained in:
Ivymaster
2026-10-21 22:31:52 +02:00
parent 2bf621f420
commit ff26adaca3
10 changed files with 57 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/helpers/hlp_header_helper.php
+1 -8
View File
@@ -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;
}
}
/**
application/libraries/KalenderLib.php
+1 -1
View File
@@ -2318,4 +2318,4 @@ class KalenderLib
return hasData($result) ? getData($result)[0]->index : 1;
}
}
}
application/libraries/collision/checks/ResourcesCollisionCheck.php
+1 -1
View File
@@ -91,4 +91,4 @@ class ResourcesCollisionCheck implements ICollisionCheck
return $grouped;
}
}
}
application/libraries/collision/checks/RoomCollisionCheck.php
+1 -1
View File
@@ -91,4 +91,4 @@ class RoomCollisionCheck implements ICollisionCheck
return $grouped;
}
}
}
application/libraries/collision/checks/VerbandCollisionCheck.php
+1 -1
View File
@@ -420,4 +420,4 @@ class VerbandCollisionCheck implements ICollisionCheck
return $grouped;
}
}
}
application/views/Tempus.php
+1 -3
View File
@@ -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);
public/css/Cis4/print.css
+1 -1
View File
@@ -103,4 +103,4 @@ header,
.fhc-calendar-mode-range .fhc-calendar-base-grid-line-event .event-lectors {
display: none !important;
}
}
public/js/components/Calendar/Base/Grid/Line.js
+1 -1
View File
@@ -21,7 +21,7 @@ export default {
compactibleEventTypes: {
from: 'compactibleEventTypes',
default: undefined,
}
},
},
props: {
date: {
public/js/components/Calendar/Mode/Range/View.js
+49 -212
View File
@@ -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 */ `
<div
public/js/components/Calendar/Tempus.js
-7
View File
@@ -337,13 +337,6 @@ export default {
isLoaderEventVisualReset = true,
) {
this.reset(arePreviousEventsCleared, isLoaderEventVisualReset);
if (arguments.length === 0) {
this.$nextTick(() => {
const view = this.$refs.calendar?.$refs.mode?.$refs.view;
view?.resetColumnWidthsForEventReload?.();
view?.resetGridHeightsForEventReload?.();
});
}
},
reloadEvents() {
this.refreshEventsAfterReload = true;