diff options
author | Noah Loomans <noahloomans@gmail.com> | 2017-01-08 11:48:13 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2017-01-08 11:48:13 +0100 |
commit | 320c18af3ee9cbeaaae3d4796dd7f15a5ac90889 (patch) | |
tree | d63339d425a2a6a20c883d896b9ed492272d6085 /public/javascripts/scrollSnap.js | |
parent | 4e8da42863406764a659a7337e774ad216d356c9 (diff) | |
parent | dea89e1ec600b302a8db33dd48080b901aee7c7e (diff) |
Merge branch 'master' of github.com:nloomans/rooster-mml
Diffstat (limited to 'public/javascripts/scrollSnap.js')
-rw-r--r-- | public/javascripts/scrollSnap.js | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/public/javascripts/scrollSnap.js b/public/javascripts/scrollSnap.js new file mode 100644 index 0000000..167f0c1 --- /dev/null +++ b/public/javascripts/scrollSnap.js @@ -0,0 +1,55 @@ +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._getScrollPosition = function () { + return (document.documentElement && document.documentElement.scrollTop) || + document.body.scrollTop +} + +self._handleDoneScrolling = function () { + const scrollPosition = self._getScrollPosition() + 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 = self._getScrollPosition() + 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 |