Skip to content
Snippets Groups Projects
Commit a1e934f1 authored by Thomas Hackl's avatar Thomas Hackl Committed by Elmar Ludwig
Browse files

Resolve "Änderungen an den CSS-Klassen von body und html verursachen Absturz des Vollbildmodus" 

Closes #3423

Merge request studip/studip!2329
parent d5a06bc2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/vue/components/responsive/ResponsiveNavigation.vue
+ 13
− 12
View file @ a1e934f1
...@@ -400,24 +400,25 @@ export default { ...@@ -400,24 +400,25 @@ export default {
}); });
} }
}, },
onChangeViewMode(tagName, classes) { onChangeViewMode(tagName, classes, oldClasses) {
const classList = classes.split(' '); const classList = classes.split(' ');
const oldClassList = oldClasses ? oldClasses.split(' ') : [];
switch (tagName) { switch (tagName) {
// watch for "consuming_mode" or "fixed" class changes // watch for "consuming_mode" or "fixed" class changes
case 'BODY': case 'BODY':
if (classList.includes('consuming_mode')) { if (classList.includes('consuming_mode') && !oldClassList.includes('consuming_mode')) {
this.isFocusMode = true; this.isFocusMode = true;
STUDIP.eventBus.emit('consuming-mode-enabled'); STUDIP.eventBus.emit('consuming-mode-enabled');
this.setCompactNavigation(false); this.setCompactNavigation(false);
} else { } else if (!classList.includes('consuming_mode') && oldClassList.includes('consuming_mode')) {
this.isFocusMode = false; this.isFocusMode = false;
STUDIP.eventBus.emit('consuming-mode-disabled'); STUDIP.eventBus.emit('consuming-mode-disabled');
} }
if (classList.includes('fixed')) { if (classList.includes('fixed') && !oldClassList.includes('fixed')) {
this.headerMagic = true; this.headerMagic = true;
STUDIP.eventBus.emit('header-magic-enabled'); STUDIP.eventBus.emit('header-magic-enabled');
} else { } else if (!classList.includes('fixed') && oldClassList.includes('fixed')) {
this.headerMagic = false; this.headerMagic = false;
this.showMenu = false; this.showMenu = false;
STUDIP.eventBus.emit('header-magic-disabled'); STUDIP.eventBus.emit('header-magic-disabled');
...@@ -425,7 +426,7 @@ export default { ...@@ -425,7 +426,7 @@ export default {
break; break;
// Watch for "responsive-display" and "fullscreen-mode" class changes // Watch for "responsive-display" and "fullscreen-mode" class changes
case 'HTML': case 'HTML':
if (classList.includes('responsive-display')) { if (classList.includes('responsive-display') && !oldClassList.includes('responsive-display')) {
this.isResponsive = true; this.isResponsive = true;
if (classList.includes('fullscreen-mode')) { if (classList.includes('fullscreen-mode')) {
...@@ -436,7 +437,7 @@ export default { ...@@ -436,7 +437,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.moveHelpbar(); this.moveHelpbar();
}) })
} else { } else if (!classList.includes('responsive-display') && oldClassList.includes('responsive-display')) {
this.isResponsive = false; this.isResponsive = false;
STUDIP.eventBus.emit('responsive-display-disabled'); STUDIP.eventBus.emit('responsive-display-disabled');
this.$nextTick(() => { this.$nextTick(() => {
...@@ -444,11 +445,11 @@ export default { ...@@ -444,11 +445,11 @@ export default {
}) })
} }
if (classList.includes('fullscreen-mode')) { if (classList.includes('fullscreen-mode') && !oldClassList.includes('fullscreen-mode')) {
this.isFullscreen = true; this.isFullscreen = true;
STUDIP.eventBus.emit('fullscreen-enabled'); STUDIP.eventBus.emit('fullscreen-enabled');
} else { } else if (!classList.includes('fullscreen-mode') && oldClassList.includes('fullscreen-mode')) {
this.isFullscreen = false; this.isFullscreen = false;
STUDIP.eventBus.emit('fullscreen-disabled'); STUDIP.eventBus.emit('fullscreen-disabled');
} }
...@@ -544,21 +545,21 @@ export default { ...@@ -544,21 +545,21 @@ export default {
this.classObserver = new MutationObserver(mutations => { this.classObserver = new MutationObserver(mutations => {
for (const m of mutations) { for (const m of mutations) {
const newValue = m.target.getAttribute(m.attributeName); 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. // Observe <html> for class changes.
this.classObserver.observe(document.documentElement, { this.classObserver.observe(document.documentElement, {
attributes: true, attributes: true,
attributeOldValue : false, attributeOldValue : true,
attributeFilter: ['class'] attributeFilter: ['class']
}); });
// Observe <body> for class changes. // Observe <body> for class changes.
this.classObserver.observe(document.body, { this.classObserver.observe(document.body, {
attributes: true, attributes: true,
attributeOldValue : false, attributeOldValue : true,
attributeFilter: ['class'] attributeFilter: ['class']
}); });
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment