Switch themes to minimo

themes/minimo/src/scripts/sidebar.js

@@ -0,0 +1,127 @@
+const body = document.body
+
+const sidebar = body.querySelector('#sidebar')
+const expandButton = body.querySelector('#sidebar-toggler')
+const overlay = body.querySelector('.sidebar-overlay')
+const sidebarMenu = body.querySelector('#sidebar-menu')
+
+const collapseButton = expandButton.cloneNode(true)
+collapseButton.setAttribute('id', '#sidebar-collapse')
+
+const setAriaExpanded = (items, value) => {
+  items.forEach(item => item.setAttribute('aria-expanded', value))
+}
+
+const hideSidebar = () => {
+  sidebar.classList.remove('toggled')
+  setAriaExpanded([sidebar, expandButton, collapseButton], false)
+}
+
+const showSidebar = () => {
+  sidebar.classList.add('toggled')
+  setAriaExpanded([sidebar, expandButton, collapseButton], true)
+  sidebar.focus()
+}
+
+let windowWidth,
+  windowHeight,
+  bodyHeight,
+  sidebarHeight,
+  windowPos,
+  lastWindowPos = 0,
+  top = false,
+  bottom = false,
+  topOffset = 0,
+  sidebarOffsetTop,
+  resizeTimer
+
+const resizeHandler = () => {
+  windowWidth = window.innerWidth
+  windowHeight = window.innerHeight
+}
+
+const scrollHandler = () => {
+  windowPos = window.scrollY
+  bodyHeight = body.offsetHeight
+  sidebarHeight = sidebar.offsetHeight
+  sidebarOffsetTop = Math.round(windowPos + sidebar.getBoundingClientRect().top)
+
+  if (sidebarHeight > windowHeight) {
+    if (windowPos > lastWindowPos) {
+      if (top) {
+        top = false
+        topOffset = sidebarOffsetTop > 0 ? sidebarOffsetTop : 0
+        sidebar.setAttribute('style', `top: ${topOffset}px;`)
+      } else if (
+        !bottom &&
+        windowPos + windowHeight > sidebarHeight + sidebarOffsetTop &&
+        sidebarHeight < bodyHeight
+      ) {
+        bottom = true
+        sidebar.setAttribute('style', 'position: fixed; bottom: 0;')
+      }
+    } else if (windowPos < lastWindowPos) {
+      if (bottom) {
+        bottom = false
+        topOffset = sidebarOffsetTop > 0 ? sidebarOffsetTop : 0
+        sidebar.setAttribute('style', `top: ${topOffset}px;`)
+      } else if (!top && windowPos < sidebarOffsetTop) {
+        top = true
+        sidebar.setAttribute('style', 'position: fixed;')
+      }
+    } else {
+      top = bottom = false
+      topOffset = sidebarOffsetTop ? sidebarOffsetTop : 0
+      sidebar.setAttribute('style', `top: ${topOffset}px;`)
+    }
+  } else if (!top) {
+    top = true
+    sidebar.setAttribute('style', 'position: fixed;')
+  }
+
+  lastWindowPos = windowPos
+}
+
+const resizeAndScrollHandler = () => {
+  resizeHandler()
+  scrollHandler()
+}
+
+const initSidebarMenu = () => {
+  let itemsWithSubmenu = sidebarMenu.querySelectorAll('.item.has-children')
+
+  itemsWithSubmenu.forEach(item => {
+    let toggler = item.querySelector('button')
+    let submenu = item.querySelector('.sub-menu')
+
+    setAriaExpanded([submenu, toggler], false)
+
+    toggler.addEventListener('click', () => {
+      let toggled = item.classList.contains('toggled')
+
+      item.classList[toggled ? 'remove' : 'add']('toggled')
+      setAriaExpanded([submenu, toggler], !toggled)
+    })
+  })
+}
+
+export const initSidebar = () => {
+  sidebar.setAttribute('tabindex', '-1')
+  sidebar.insertBefore(collapseButton, sidebar.children[1])
+
+  setAriaExpanded([sidebar, expandButton, collapseButton], false)
+
+  expandButton.addEventListener('click', showSidebar)
+  collapseButton.addEventListener('click', hideSidebar)
+  overlay.addEventListener('click', hideSidebar)
+
+  window.addEventListener('scroll', scrollHandler)
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer)
+    resizeTimer = setTimeout(resizeAndScrollHandler, 500)
+  })
+
+  resizeAndScrollHandler()
+
+  if (sidebarMenu) initSidebarMenu()
+}