From 31be7d12b8c9b1a2ad163e65808a28656adfbb45 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 16 Dec 2016 13:57:57 +0100 Subject: add ability to scroll week selector away --- public/javascripts/scrollSnap.js | 51 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 public/javascripts/scrollSnap.js (limited to 'public/javascripts/scrollSnap.js') diff --git a/public/javascripts/scrollSnap.js b/public/javascripts/scrollSnap.js new file mode 100644 index 0000000..67e3e0a --- /dev/null +++ b/public/javascripts/scrollSnap.js @@ -0,0 +1,51 @@ +require('smoothscroll-polyfill').polyfill() + +const self = {} +const schedule = require('./schedule') + +self._nodes = { + search: document.querySelector('#search'), + weekSelector: document.querySelector('#week-selector') +} + +self._timeoutID = null + +self._handleDoneScrolling = function () { + console.log('done scrolling!') + const scrollPosition = document.body.scrollTop + const weekSelectorHeight = self._nodes.weekSelector.clientHeight - self._nodes.search.clientHeight + if (scrollPosition < weekSelectorHeight && scrollPosition > 0) { + window.scroll({ top: weekSelectorHeight, left: 0, behavior: 'smooth' }) + } +} + +self._handleScroll = function () { + if (self._timeoutID != null) window.clearTimeout(self._timeoutID) + self._timeoutID = window.setTimeout(self._handleDoneScrolling, 500) + + const scrollPosition = document.body.scrollTop + const weekSelectorHeight = self._nodes.weekSelector.clientHeight - self._nodes.search.clientHeight + if (scrollPosition >= weekSelectorHeight) { + document.body.classList.add('week-selector-not-visible') + } else { + document.body.classList.remove('week-selector-not-visible') + } +} + +self._handleWindowResize = function () { + const weekSelectorHeight = self._nodes.weekSelector.clientHeight - self._nodes.search.clientHeight + const extraPixelsNeeded = weekSelectorHeight - (document.body.clientHeight - window.innerHeight) + if (extraPixelsNeeded > 0) { + document.body.style.marginBottom = `${extraPixelsNeeded}px` + } else { + document.body.style.marginBottom = null + } +} + +self.startListening = function () { + window.addEventListener('scroll', self._handleScroll) +} + +schedule.on('load', self._handleWindowResize) +window.addEventListener('resize', self._handleWindowResize) +module.exports = self -- cgit v1.1