Commit da07a08c authored by Michael Strutt's avatar Michael Strutt

Saving the expanded state between tickets and pageloads #4

parent af4ea82a
......@@ -16,6 +16,8 @@ const CLASSES = {
TOGGLE_COLLAPSED: 'gitlab-sidebar-expanded-toggle--collapsed',
}
const LOCAL_STORAGE_KEY = 'gitlab-sidebar-expanded-state';
class BoardEnhancement {
constructor(element) {
if (!element) {
......@@ -31,11 +33,9 @@ class BoardEnhancement {
this.clickHandler = this.clickHandler.bind(this);
this.styleFrame = this.styleFrame.bind(this);
this.toggleExpansion = this.toggleExpansion.bind(this);
this.setUIState = this.setUIState.bind(this);
// TODO: read from saved state
if (false) {
this.sidebar.classList.add(CLASSES.SIDEBAR_COLLAPSED);
}
this.expanded = localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false';
this.bindEvents();
}
......@@ -88,6 +88,7 @@ class BoardEnhancement {
spinner.className = CLASSES.SPINNER;
this.toggle.className = CLASSES.TOGGLE;
this.toggle.ariaLabel = 'Toggle Sidebar Details View';
this.toggle.title = 'Toggle Sidebar Details View';
style.textContent = `
@media (min-width: 900px) {
......@@ -97,7 +98,7 @@ class BoardEnhancement {
transition: none;
}
${SELECTORS.SIDEBAR}:not(.${CLASSES.SIDEBAR_COLLAPSED}) {
body:not(.${CLASSES.SIDEBAR_COLLAPSED}) ${SELECTORS.SIDEBAR} {
max-width: 1290px;
min-width: 820px;
width: 70% !important;
......@@ -155,7 +156,7 @@ class BoardEnhancement {
}
}
${SELECTORS.SIDEBAR}.${CLASSES.SIDEBAR_COLLAPSED} .${CLASSES.IFRAME} {
body.${CLASSES.SIDEBAR_COLLAPSED} ${SELECTORS.SIDEBAR} .${CLASSES.IFRAME} {
display: none;
}
......@@ -220,6 +221,7 @@ class BoardEnhancement {
this.sidebar.insertBefore(div, sidebarContent);
this.sidebarHeader.appendChild(this.toggle);
this.setUIState();
}
styleFrame() {
......@@ -250,8 +252,20 @@ class BoardEnhancement {
}
toggleExpansion() {
this.toggle.classList.toggle(CLASSES.TOGGLE_COLLAPSED);
this.sidebar.classList.toggle(CLASSES.SIDEBAR_COLLAPSED);
this.expanded = !this.expanded;
localStorage.setItem(LOCAL_STORAGE_KEY, `${this.expanded}`);
this.setUIState();
}
setUIState() {
console.log('setUIState', this.expanded);
if (this.expanded) {
this.toggle.classList.remove(CLASSES.TOGGLE_COLLAPSED);
document.body.classList.remove(CLASSES.SIDEBAR_COLLAPSED);
} else {
this.toggle.classList.add(CLASSES.TOGGLE_COLLAPSED);
document.body.classList.add(CLASSES.SIDEBAR_COLLAPSED);
}
}
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment