Handle scrolling and resizing

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);
     }
   }
 }

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) {