From a88bf36f0e96eabcca9c007d32de4f89b73e06c8 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Wed, 13 Feb 2019 21:17:47 +0100 Subject: [PATCH 01/13] move asidenav julius and lucius to static --- src/Foundation.hs | 6 +++-- .../css/utils/asidenav.scss | 0 static/js/utils/asidenav.js | 22 ++++++++++++++++++ templates/widgets/asidenav.julius | 23 ------------------- .../widgets/{ => asidenav}/asidenav.hamlet | 0 templates/widgets/asidenav/asidenav.julius | 4 ++++ 6 files changed, 30 insertions(+), 25 deletions(-) rename templates/widgets/asidenav.lucius => static/css/utils/asidenav.scss (100%) create mode 100644 static/js/utils/asidenav.js delete mode 100644 templates/widgets/asidenav.julius rename templates/widgets/{ => asidenav}/asidenav.hamlet (100%) create mode 100644 templates/widgets/asidenav/asidenav.julius diff --git a/src/Foundation.hs b/src/Foundation.hs index b2dd63906..b6d6ad212 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -971,7 +971,7 @@ siteLayout' headingOverride widget = do navbar :: Widget navbar = $(widgetFile "widgets/navbar") asidenav :: Widget - asidenav = $(widgetFile "widgets/asidenav") + asidenav = $(widgetFile "widgets/asidenav/asidenav") footer :: Widget footer = $(widgetFile "widgets/footer") alerts :: Widget @@ -996,11 +996,13 @@ siteLayout' headingOverride widget = do addScript $ StaticR js_utils_featureChecker_js addScript $ StaticR js_utils_tabber_js addScript $ StaticR js_utils_alerts_js + addScript $ StaticR js_utils_asidenav_js addStylesheet $ StaticR css_vendor_flatpickr_css addStylesheet $ StaticR css_vendor_fontawesome_css addStylesheet $ StaticR css_fonts_css - addStylesheet $ StaticR css_utils_tabber_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/templates/widgets/asidenav.lucius b/static/css/utils/asidenav.scss similarity index 100% rename from templates/widgets/asidenav.lucius rename to static/css/utils/asidenav.scss diff --git a/static/js/utils/asidenav.js b/static/js/utils/asidenav.js new file mode 100644 index 000000000..8b16fb4b6 --- /dev/null +++ b/static/js/utils/asidenav.js @@ -0,0 +1,22 @@ +(function() { + 'use strict'; + + window.utils = window.utils || {}; + + var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite'; + var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active'; + var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded'; + + window.utils.aside = function(asideEl) { + + function init() { + var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS); + favoritesBtn.addEventListener('click', function(event) { + favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS); + asideEl.classList.toggle(ASIDENAV_EXPANDED_CLASS); + event.preventDefault(); + }, true); + } + init(); + }; +})(); diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius deleted file mode 100644 index 238ca1f58..000000000 --- a/templates/widgets/asidenav.julius +++ /dev/null @@ -1,23 +0,0 @@ -(function() { - 'use strict'; - - window.utils = window.utils || {}; - - window.utils.aside = function(asideEl) { - - function init() { - var favoritesBtn = document.querySelector('.navbar__list-item--favorite'); - favoritesBtn.addEventListener('click', function(event) { - favoritesBtn.classList.toggle('navbar__list-item--active'); - asideEl.classList.toggle('main__aside--expanded'); - event.preventDefault(); - }, true); - } - init(); - }; -})(); - -document.addEventListener('DOMContentLoaded', function() { - var asidenavEl = document.querySelector('.main__aside'); - window.utils.aside(asidenavEl); -}); diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav/asidenav.hamlet similarity index 100% rename from templates/widgets/asidenav.hamlet rename to templates/widgets/asidenav/asidenav.hamlet diff --git a/templates/widgets/asidenav/asidenav.julius b/templates/widgets/asidenav/asidenav.julius new file mode 100644 index 000000000..9f6e9ba37 --- /dev/null +++ b/templates/widgets/asidenav/asidenav.julius @@ -0,0 +1,4 @@ +document.addEventListener('DOMContentLoaded', function() { + var asidenavEl = document.querySelector('.main__aside'); + window.utils.aside(asidenavEl); +}); From 538ddefbd3e8d5a490eb2f78c0fbde3a1397bed9 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Wed, 13 Feb 2019 21:18:08 +0100 Subject: [PATCH 02/13] rename static tabber.css to tabber.scss --- static/css/utils/{tabber.css => tabber.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename static/css/utils/{tabber.css => tabber.scss} (100%) diff --git a/static/css/utils/tabber.css b/static/css/utils/tabber.scss similarity index 100% rename from static/css/utils/tabber.css rename to static/css/utils/tabber.scss From 4035f1e9deca19c78b810d415f43261c82fba0cd Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Thu, 14 Feb 2019 10:24:55 +0100 Subject: [PATCH 03/13] 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} -