Skip to content

Commit

Permalink
BC-7336 - Persist sidebar expansion status (#3514)
Browse files Browse the repository at this point in the history 
BC-7336 - set the sidebar shown/hidden between the legacy and vue clients
  • Loading branch information
@muratmerdoglu-dp
muratmerdoglu-dp authored Sep 6, 2024
1 parent e847b8e commit 26d8099
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 83 deletions.
187 changes: 109 additions & 78 deletions static/scripts/loggedin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,37 @@ if (window.opener && window.opener !== window) {
window.isInline = true;
}

const sidebar = document.querySelector('.sidebar');
const toggleInTopbar = document.querySelector('.sidebar-toggle-in-topbar');
const toggleInSidebar = document.querySelector('.sidebar-toggle-in-sidebar');
const contentWrapper = document.querySelector('.content-wrapper');
const overlay = document.querySelector('.overlay');
const contentDiv = document.querySelector('.content-min-height');
const sidebarExtendedValue = window.localStorage.getItem('sidebarExpanded');

if (!sidebarExtendedValue) {
window.localStorage.setItem('sidebarExpanded', 'true');
}

function showHideElement(element) {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}

function showHideGlobalAnnouncement() {
const announcementAlert = document.querySelector('.alert-announcement');
if (announcementAlert) {
showHideElement(announcementAlert);
}
const announcementAlert = document.querySelector('.alert-announcement');
if (announcementAlert) {
showHideElement(announcementAlert);
}
}

function toggleSidebarItemGroup(groupData) {
const itemGroup = document.querySelector(`.${groupData.groupName}`);
if (itemGroup) {
if (itemGroup.classList.contains('show-subgroup')) {
if (itemGroup) {
if (itemGroup.classList.contains('show-subgroup')) {
if (groupData.childActive) return;

itemGroup.classList.remove('show-subgroup');
Expand All @@ -34,22 +46,21 @@ function toggleSidebarItemGroup(groupData) {
itemGroup.classList.add('show-subgroup');
itemGroup.classList.remove('hide-subgroup');
}
}
}

const toggleIcon = document.querySelector(`#${groupData.groupName}-toggle-icon`);
if (toggleIcon) {
if (toggleIcon.classList.contains('mdi-chevron-down')) {
if (toggleIcon.classList.contains('mdi-chevron-down')) {
toggleIcon.classList.remove('mdi-chevron-down');
toggleIcon.classList.add('mdi-chevron-up');
} else {
toggleIcon.classList.remove('mdi-chevron-up');
toggleIcon.classList.add('mdi-chevron-down');
}
}
}
}

function adjustContentWidth(sidebar) {
const contentWrapper = document.querySelector('.content-wrapper');
function adjustContentWidth() {
if (contentWrapper) {
if (sidebar.classList.contains('hidden')) {
contentWrapper.style.paddingLeft = '0px';
Expand All @@ -59,16 +70,57 @@ function adjustContentWidth(sidebar) {
}
}

function toggleSidebarOnWindowWidth() {
const sidebarState = window.localStorage.getItem("sidebarExpanded");
if (overlay) {
if (window.innerWidth <= 1279) {
sidebar.classList.remove('visible');
sidebar.classList.add('hidden');
}
if (window.innerWidth >= 1280 && sidebarState == 'true') {
sidebar.classList.remove('hidden');
sidebar.classList.add('visible');
toggleInTopbar.classList.add('invisible-toggle');
toggleInSidebar.classList.remove('invisible-toggle');
}
if (window.innerWidth >= 1280 && sidebarState == 'false') {
sidebar.classList.remove('visible');
sidebar.classList.add('hidden');
toggleInSidebar.classList.add('invisible-toggle');
toggleInTopbar.classList.remove('invisible-toggle');
}
if (sidebar.classList.contains('hidden')) {
overlay.style.display = 'none';
}

adjustContentWidth();
}
}

function adjustContentWidthOnLoad() {
if (contentWrapper) {
if (sidebarExtendedValue == 'false') {
contentWrapper.style.paddingLeft = '0px';
sidebar.classList.add('hidden');
} else {
contentWrapper.style.paddingLeft = '255px';
sidebar.classList.remove('hidden');
}
}
toggleSidebarOnWindowWidth();
}



function toggleSidebar() {
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.overlay');
const contentDiv = document.querySelector('.content-min-height');
const sidebarItems = document.querySelectorAll('.sidebar-item');
const sidebarSubitems = document.querySelectorAll('.subitem');
const legalLinks = document.querySelectorAll('.legal-link');

if (sidebar) {
if (sidebar.classList.contains('hidden')) {
window.localStorage.setItem('sidebarExpanded', sidebar.classList.contains('hidden'));

if (sidebar) {
if (sidebar.classList.contains('hidden')) {
sidebar.classList.remove('hidden');
sidebar.classList.add('visible');
toggleTabindexOnSidebarItems(sidebarItems, 0);
Expand Down Expand Up @@ -97,20 +149,18 @@ function toggleSidebar() {
}

if (window.innerWidth <= 1279) return;
adjustContentWidth(sidebar);
}
adjustContentWidth();
}

const toggleInTopbar = document.querySelector('.sidebar-toggle-in-topbar');
const toggleInSidebar = document.querySelector('.sidebar-toggle-in-sidebar');
if (toggleInTopbar && toggleInSidebar) {
if (toggleInTopbar.classList.contains('invisible-toggle')) {
if (toggleInTopbar.classList.contains('invisible-toggle')) {
toggleInTopbar.classList.remove('invisible-toggle');
toggleInSidebar.classList.add('invisible-toggle');
} else if (toggleInSidebar.classList.contains('invisible-toggle')) {
toggleInSidebar.classList.remove('invisible-toggle');
toggleInTopbar.classList.add('invisible-toggle');
}
}
}
}

function toggleTabindexOnSidebarItems(elements, tabindex) {
Expand All @@ -120,29 +170,10 @@ function toggleTabindexOnSidebarItems(elements, tabindex) {
});
}

function toggleSidebarOnWindowWidth(sidebar) {
const overlay = document.querySelector('.overlay');

if (overlay) {
if (window.innerWidth <= 1279) {
sidebar.classList.remove('visible');
sidebar.classList.add('hidden');
}
if (window.innerWidth >= 1280) {
sidebar.classList.remove('hidden');
sidebar.classList.add('visible');
overlay.style.display = "none";
}
if (sidebar.classList.contains('hidden')) {
overlay.style.display = "none";
}
adjustContentWidth(sidebar);
}
}

let priorWidth = window.innerWidth;
window.addEventListener('resize', () => {
const sidebar = document.querySelector('.sidebar');
const currentWidth = window.innerWidth;

if (window.innerWidth <= 1279 && sidebar.classList.contains('visible') && priorWidth <= currentWidth) {
Expand All @@ -151,13 +182,13 @@ window.addEventListener('resize', () => {
if (currentWidth >= 1280 && sidebar.classList.contains('hidden') && priorWidth >= currentWidth) {
return;
}
toggleSidebarOnWindowWidth(sidebar);
toggleSidebarOnWindowWidth();
priorWidth = currentWidth;
});

function toggleMobileNav() {
document.querySelector('aside.nav-sidebar').classList.toggle('active');
showHideGlobalAnnouncement();
showHideGlobalAnnouncement();
this.classList.toggle('active');
}

Expand Down Expand Up @@ -191,21 +222,21 @@ function showAJAXSuccess(message, modal) {
}

function initEnterTheCloud() {
const buttons = document.querySelectorAll('.enterthecloud-btn');
const modal = document.querySelector('.enterthecloud-modal');
if (!buttons.length || !modal) {
return false;
}
buttons.forEach((btn) => {
$(btn).on('click', () => {
$(modal).appendTo('body').modal('show');
});
});
return true;
const buttons = document.querySelectorAll('.enterthecloud-btn');
const modal = document.querySelector('.enterthecloud-modal');
if (!buttons.length || !modal) {
return false;
}
buttons.forEach((btn) => {
$(btn).on('click', () => {
$(modal).appendTo('body').modal('show');
});
});
return true;
}

$(document).ready(() => {
initEnterTheCloud();
initEnterTheCloud();
});

$(document).ready(function () {
Expand Down Expand Up @@ -250,7 +281,7 @@ $(document).ready(function () {
})
}
const sidebar = document.querySelector('.sidebar');
toggleSidebarOnWindowWidth(sidebar);
toggleSidebarOnWindowWidth();

const overlay = document.querySelector('.overlay');
const contentDiv = document.querySelector('.content-min-height');
Expand Down Expand Up @@ -332,15 +363,15 @@ $(document).ready(function () {
let $cancelModal = $('.cancel-modal');
populateModalForm($cancelModal, {
title: $t('global.text.sureAboutDiscardingChanges'),
submitDataTestId: 'cancel-modal',
submitDataTestId: 'cancel-modal',
});
$cancelModal.appendTo('body').modal('show');
});

populateModalForm($featureModal, {
title: $t('loggedin.text.newFeaturesAvailable'),
closeLabel: $t('global.button.cancel'),
submitDataTestId: 'feature-modal',
submitDataTestId: 'feature-modal',
});

// from: https://stackoverflow.com/a/187557
Expand All @@ -361,20 +392,20 @@ $(document).ready(function () {
return !(e.key === "Unidentified");
});

// check for in user migration mode
if ($('#inUserMigrationStarted').length) {
$.showNotification($t('loggedin.text.schoolInMigrationModeStarted'), 'warning');
} else if ($('#inUserMigration').length) {
$.showNotification($t('loggedin.text.schoolInMigrationMode'), 'warning');
} else if ($('#schuljahrtransfer').length) {
if ($('#schuljahrtransfer').val() === 'Lehrer') {
$.showNotification($t('loggedin.text.schoolInTransferPhaseContactAdmin'), 'warning');
} else if ($('#schuljahrtransfer').val() === 'Administrator') {
$.showNotification($t('loggedin.text.schoolInTransferPhaseStartNew'), 'warning');
}
}

initAlerts('loggedin');
// check for in user migration mode
if ($('#inUserMigrationStarted').length) {
$.showNotification($t('loggedin.text.schoolInMigrationModeStarted'), 'warning');
} else if ($('#inUserMigration').length) {
$.showNotification($t('loggedin.text.schoolInMigrationMode'), 'warning');
} else if ($('#schuljahrtransfer').length) {
if ($('#schuljahrtransfer').val() === 'Lehrer') {
$.showNotification($t('loggedin.text.schoolInTransferPhaseContactAdmin'), 'warning');
} else if ($('#schuljahrtransfer').val() === 'Administrator') {
$.showNotification($t('loggedin.text.schoolInTransferPhaseStartNew'), 'warning');
}
}

initAlerts('loggedin');
});

function showAJAXError(req, textStatus, errorThrown) {
Expand Down Expand Up @@ -427,7 +458,7 @@ window.addEventListener("beforeunload", function (e) {
});
window.addEventListener("pageshow", function (e) {
document.querySelector("body").classList.add("loaded");

adjustContentWidthOnLoad();
});

function changeNavBarPositionToAbsolute() {
Expand Down
1 change: 0 additions & 1 deletion static/styles/lib/loggedin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,6 @@ header {
min-height: 100vh;
display: flex;
flex-direction: column;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding-left: 255px;

@media only screen and (max-width: 1279px) {
Expand Down
3 changes: 0 additions & 3 deletions static/styles/lib/sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@
border-right: 1px solid rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
transition-duration: 0.2s;
transition-property: box-shadow, transform, visibility, width, height, left, right, top, bottom;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

&.hidden {
transform: translateX(-110%);
Expand Down
2 changes: 1 addition & 1 deletion views/lib/sidebar.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="navtooltips"></div>
<aside class="sidebar">
<aside class="sidebar hidden">
<nav id="sidebar" aria-label="{{$t "global.aria_label.sidebar"}}">
<div class="sidebar-toggle sidebar-toggle-in-sidebar">
<button class="icon-btn sidebar-toggle-button-in-sidebar" title="{{$t "lib.loggedin.label.sidebarMenu"}}" aria-label="{{$t "lib.loggedin.label.sidebarMenu"}}">
Expand Down

0 comments on commit 26d8099

Please sign in to comment.