From 4035f1e9deca19c78b810d415f43261c82fba0cd Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Thu, 14 Feb 2019 10:24:55 +0100 Subject: [PATCH] make asidenav scrollable --- src/Foundation.hs | 1 - static/js/utils/asidenav.js | 42 ++++++++++++++++- templates/standalone/showHide.lucius | 4 -- templates/widgets/asidenav/asidenav.hamlet | 15 +++--- .../widgets/asidenav/asidenav.lucius | 46 +++++++++---------- 5 files changed, 69 insertions(+), 39 deletions(-) rename static/css/utils/asidenav.scss => templates/widgets/asidenav/asidenav.lucius (92%) diff --git a/src/Foundation.hs b/src/Foundation.hs index b6d6ad212..fb6fbfe61 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -1002,7 +1002,6 @@ siteLayout' headingOverride widget = do addStylesheet $ StaticR css_fonts_css addStylesheet $ StaticR css_utils_tabber_scss addStylesheet $ StaticR css_utils_alerts_scss - addStylesheet $ StaticR css_utils_asidenav_scss $(widgetFile "default-layout") $(widgetFile "standalone/modal") $(widgetFile "standalone/showHide") diff --git a/static/js/utils/asidenav.js b/static/js/utils/asidenav.js index 8b16fb4b6..7c20e1f35 100644 --- a/static/js/utils/asidenav.js +++ b/static/js/utils/asidenav.js @@ -6,10 +6,16 @@ var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite'; var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active'; var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded'; + var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item'; + var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper'; window.utils.aside = function(asideEl) { - function init() { + if (!asideEl) { + throw new Error('asideEl not defined'); + } + + function initFavoritesButton() { var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS); favoritesBtn.addEventListener('click', function(event) { favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS); @@ -17,6 +23,38 @@ event.preventDefault(); }, true); } - init(); + + function initAsidenavSubmenus() { + // find list items first (not nested), and then look for link wrappers inside each list item + var asidenavLinksWithSubmenus = Array.from(asideEl.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS)) + .map(function(listItem) { + var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS); + return { listItem, submenu }; + }).filter(function(union) { + return union.submenu !== null; + }); + + asidenavLinksWithSubmenus.forEach(function(union) { + union.listItem.addEventListener('mouseover', createMouseoverHandler(union)); + }); + } + + function createMouseoverHandler(union) { + return function mouseoverHanlder(event) { + var rectListItem = union.listItem.getBoundingClientRect(); + var rectSubMenu = union.submenu.getBoundingClientRect(); + + union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px'; + if (window.innerHeight - rectListItem.top < rectSubMenu.height) { + union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px'; + } else { + union.submenu.style.top = rectListItem.top + 'px'; + } + + }; + } + + initFavoritesButton(); + initAsidenavSubmenus(); }; })(); diff --git a/templates/standalone/showHide.lucius b/templates/standalone/showHide.lucius index d1413c0fb..64dfe367c 100644 --- a/templates/standalone/showHide.lucius +++ b/templates/standalone/showHide.lucius @@ -1,7 +1,3 @@ -.js-show-hide { - position: relative; -} - .js-show-hide__toggle { position: relative; cursor: pointer; diff --git a/templates/widgets/asidenav/asidenav.hamlet b/templates/widgets/asidenav/asidenav.hamlet index ac8a1de6b..8090926d1 100644 --- a/templates/widgets/asidenav/asidenav.hamlet +++ b/templates/widgets/asidenav/asidenav.hamlet @@ -16,10 +16,11 @@ $newline never
#{courseShorthand}
#{courseName} -