diff --git a/assets/scripts/src/overlay.js b/assets/scripts/src/overlay.js index fdec41e3ba140013271c8fab69f174c7654bd4c2..8390e9c04c02a3484c09a2b59b3c7e54e4d7aa49 100644 --- a/assets/scripts/src/overlay.js +++ b/assets/scripts/src/overlay.js @@ -161,13 +161,19 @@ export default class Overlay { // cut out a chunk for the element to be visible out of it this.overlay.width = width || this.window.innerWidth; this.overlay.height = height || this.window.innerHeight; + } + + // Refreshes the overlay i.e. sets the size according to current window size + // And moves the highlight around if necessary + refresh(animate = true) { + this.setSize(); // If the highlighted element was there Cancel the // existing animation frame if any and highlight it again // as its position might have been changed if (this.highlightedElement) { this.window.cancelAnimationFrame(this.redrawAnimation); - this.highlight(this.highlightedElement); + this.highlight(this.highlightedElement, animate); } } } diff --git a/assets/scripts/src/sholo.js b/assets/scripts/src/sholo.js index 4e2b6f0ad4f885738028debed14813261801ba71..4874cf1e6bd98c046e5badfc308b654d878a5b39 100644 --- a/assets/scripts/src/sholo.js +++ b/assets/scripts/src/sholo.js @@ -7,10 +7,32 @@ import './polyfill'; */ export default class Sholo { constructor({ opacity = 0.75, padding = 5 } = {}) { - this.overlay = new Overlay({ - opacity, - padding, - }); + this.overlay = new Overlay({ opacity, padding }); + this.document = document; + this.window = window; + + this.onScroll = this.onScroll.bind(this); + this.onResize = this.onResize.bind(this); + + // Event bindings + this.bind(); + } + + bind() { + // @todo: add throttling in all the listeners + this.document.addEventListener('scroll', this.onScroll, false); + this.document.addEventListener('DOMMouseScroll', this.onScroll, false); + this.window.addEventListener('resize', this.onResize, false); + } + + onScroll() { + // Refresh without animation on scroll + this.overlay.refresh(false); + } + + onResize() { + // Refresh with animation + this.overlay.refresh(true); } highlight(selector) {