From a1e934f17d82ec6e23b2b55692d92f032edf14dd Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Fri, 3 Nov 2023 16:11:38 +0000
Subject: [PATCH] =?UTF-8?q?Resolve=20"=C3=84nderungen=20an=20den=20CSS-Kla?=
=?UTF-8?q?ssen=20von=20body=20und=20html=20verursachen=20Absturz=20des=20?=
=?UTF-8?q?Vollbildmodus"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes #3423
Merge request studip/studip!2329
---
.../responsive/ResponsiveNavigation.vue | 25 ++++++++++---------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/resources/vue/components/responsive/ResponsiveNavigation.vue b/resources/vue/components/responsive/ResponsiveNavigation.vue
index 691ebb70d58..ef185c00f1b 100644
--- a/resources/vue/components/responsive/ResponsiveNavigation.vue
+++ b/resources/vue/components/responsive/ResponsiveNavigation.vue
@@ -400,24 +400,25 @@ export default {
});
}
},
- onChangeViewMode(tagName, classes) {
+ onChangeViewMode(tagName, classes, oldClasses) {
const classList = classes.split(' ');
+ const oldClassList = oldClasses ? oldClasses.split(' ') : [];
switch (tagName) {
// watch for "consuming_mode" or "fixed" class changes
case 'BODY':
- if (classList.includes('consuming_mode')) {
+ if (classList.includes('consuming_mode') && !oldClassList.includes('consuming_mode')) {
this.isFocusMode = true;
STUDIP.eventBus.emit('consuming-mode-enabled');
this.setCompactNavigation(false);
- } else {
+ } else if (!classList.includes('consuming_mode') && oldClassList.includes('consuming_mode')) {
this.isFocusMode = false;
STUDIP.eventBus.emit('consuming-mode-disabled');
}
- if (classList.includes('fixed')) {
+ if (classList.includes('fixed') && !oldClassList.includes('fixed')) {
this.headerMagic = true;
STUDIP.eventBus.emit('header-magic-enabled');
- } else {
+ } else if (!classList.includes('fixed') && oldClassList.includes('fixed')) {
this.headerMagic = false;
this.showMenu = false;
STUDIP.eventBus.emit('header-magic-disabled');
@@ -425,7 +426,7 @@ export default {
break;
// Watch for "responsive-display" and "fullscreen-mode" class changes
case 'HTML':
- if (classList.includes('responsive-display')) {
+ if (classList.includes('responsive-display') && !oldClassList.includes('responsive-display')) {
this.isResponsive = true;
if (classList.includes('fullscreen-mode')) {
@@ -436,7 +437,7 @@ export default {
this.$nextTick(() => {
this.moveHelpbar();
})
- } else {
+ } else if (!classList.includes('responsive-display') && oldClassList.includes('responsive-display')) {
this.isResponsive = false;
STUDIP.eventBus.emit('responsive-display-disabled');
this.$nextTick(() => {
@@ -444,11 +445,11 @@ export default {
})
}
- if (classList.includes('fullscreen-mode')) {
+ if (classList.includes('fullscreen-mode') && !oldClassList.includes('fullscreen-mode')) {
this.isFullscreen = true;
STUDIP.eventBus.emit('fullscreen-enabled');
- } else {
+ } else if (!classList.includes('fullscreen-mode') && oldClassList.includes('fullscreen-mode')) {
this.isFullscreen = false;
STUDIP.eventBus.emit('fullscreen-disabled');
}
@@ -544,21 +545,21 @@ export default {
this.classObserver = new MutationObserver(mutations => {
for (const m of mutations) {
const newValue = m.target.getAttribute(m.attributeName);
- this.onChangeViewMode(m.target.tagName, newValue);
+ this.onChangeViewMode(m.target.tagName, newValue, m.oldValue);
}
});
// Observe <html> for class changes.
this.classObserver.observe(document.documentElement, {
attributes: true,
- attributeOldValue : false,
+ attributeOldValue : true,
attributeFilter: ['class']
});
// Observe <body> for class changes.
this.classObserver.observe(document.body, {
attributes: true,
- attributeOldValue : false,
+ attributeOldValue : true,
attributeFilter: ['class']
});
--
GitLab