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 From 0f50fb9ddc50b35faa8b927b9dbf81d006ba0094 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 16 Dec 2016 14:07:50 +0100 Subject: remove console.log --- public/javascripts/scrollSnap.js | 1 - 1 file changed, 1 deletion(-) (limited to 'public/javascripts/scrollSnap.js') diff --git a/public/javascripts/scrollSnap.js b/public/javascripts/scrollSnap.js index 67e3e0a..4f71f28 100644 --- a/public/javascripts/scrollSnap.js +++ b/public/javascripts/scrollSnap.js @@ -11,7 +11,6 @@ self._nodes = { 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) { -- cgit v1.1 From 7ec11ecfc447c66582e16d4e832cbfc089139e29 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Dec 2016 11:55:02 +0100 Subject: fixed ie --- public/javascripts/scrollSnap.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'public/javascripts/scrollSnap.js') diff --git a/public/javascripts/scrollSnap.js b/public/javascripts/scrollSnap.js index 4f71f28..ed7bbb3 100644 --- a/public/javascripts/scrollSnap.js +++ b/public/javascripts/scrollSnap.js @@ -10,8 +10,14 @@ self._nodes = { self._timeoutID = null +self._getScrollPosition = function () { + return (document.documentElement && document.documentElement.scrollTop) || + document.body.scrollTop +} + self._handleDoneScrolling = function () { - const scrollPosition = document.body.scrollTop + console.log('done scrolling') + 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' }) @@ -22,8 +28,9 @@ self._handleScroll = function () { if (self._timeoutID != null) window.clearTimeout(self._timeoutID) self._timeoutID = window.setTimeout(self._handleDoneScrolling, 500) - const scrollPosition = document.body.scrollTop + const scrollPosition = self._getScrollPosition() const weekSelectorHeight = self._nodes.weekSelector.clientHeight - self._nodes.search.clientHeight + console.log(scrollPosition, weekSelectorHeight) if (scrollPosition >= weekSelectorHeight) { document.body.classList.add('week-selector-not-visible') } else { @@ -35,7 +42,7 @@ 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` + document.body.style.marginBottom = extraPixelsNeeded + 'px' } else { document.body.style.marginBottom = null } -- cgit v1.1 From f44e11585c191ba7664c53d393e7892ab1847324 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Dec 2016 12:02:34 +0100 Subject: removed console.log --- public/javascripts/scrollSnap.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'public/javascripts/scrollSnap.js') diff --git a/public/javascripts/scrollSnap.js b/public/javascripts/scrollSnap.js index ed7bbb3..167f0c1 100644 --- a/public/javascripts/scrollSnap.js +++ b/public/javascripts/scrollSnap.js @@ -16,7 +16,6 @@ self._getScrollPosition = function () { } self._handleDoneScrolling = function () { - console.log('done scrolling') const scrollPosition = self._getScrollPosition() const weekSelectorHeight = self._nodes.weekSelector.clientHeight - self._nodes.search.clientHeight if (scrollPosition < weekSelectorHeight && scrollPosition > 0) { @@ -30,7 +29,6 @@ self._handleScroll = function () { const scrollPosition = self._getScrollPosition() const weekSelectorHeight = self._nodes.weekSelector.clientHeight - self._nodes.search.clientHeight - console.log(scrollPosition, weekSelectorHeight) if (scrollPosition >= weekSelectorHeight) { document.body.classList.add('week-selector-not-visible') } else { -- cgit v1.1