Add trigger for when element has highlighted

assets/scripts/src/element.js

@@ -54,4 +54,9 @@ export default class Element {
 
     return position;
   }
+
+  onHighlighted() {
+    console.log('on highlighted');
+    console.log(this.getScreenCoordinates());
+  }
 }

assets/scripts/src/overlay.js

@@ -104,9 +104,9 @@ export default class Overlay {
     // Add the overlay on top of the whole body
     this.addCloak();
 
-    if (canHighlight) {
-      const isFadingIn = this.overlayAlpha < 0.1;
+    const isFadingIn = this.overlayAlpha < 0.1;
 
+    if (canHighlight) {
       if (isFadingIn) {
         // Ignore the animation, just highlight the item at its current position
         this.highlightedPosition = this.positionToHighlight;
@@ -151,12 +151,14 @@ export default class Overlay {
       }
 
       // Stage a new animation frame only if the position has not been reached
-      // of the alpha has not yet fully reached fully required opacity
-      if (
-        !this.positionToHighlight.equals(this.highlightedPosition) ||
-        this.overlayAlpha.toFixed(2) !== this.opacity.toFixed(2)
-      ) {
+      // or the alpha has not yet fully reached fully required opacity
+      if (!this.hasPositionHighlighted()) {
+        this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
+      } else if (!this.animate && isFadingIn) {
         this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
+      } else {
+        // Element has been highlighted
+        this.highlightedElement.onHighlighted();
       }
     } else if (this.overlay.parentNode) {
       // Otherwise if the overlay is there, remove it
@@ -164,6 +166,11 @@ export default class Overlay {
     }
   }
 
+  hasPositionHighlighted() {
+    return this.positionToHighlight.equals(this.highlightedPosition) &&
+      this.overlayAlpha > (this.opacity - 0.05);
+  }
+
   /**
    * Removes the cloak from the given position
    * i.e. cuts the chunk of layout which is over the element

assets/scripts/src/position.js

@@ -35,9 +35,9 @@ export default class Position {
    * @returns {boolean}
    */
   equals(position) {
-    return this.left.toFixed(3) === position.left.toFixed(3) &&
-      this.right.toFixed(3) === position.right.toFixed(3) &&
-      this.top.toFixed(3) === position.top.toFixed(3) &&
-      this.bottom.toFixed(3) === position.bottom.toFixed(3);
+    return Math.round(this.left) === Math.round(position.left) &&
+      Math.round(this.right) === Math.round(position.right) &&
+      Math.round(this.top) === Math.round(position.top) &&
+      Math.round(this.bottom) === Math.round(position.bottom);
   }
 }

index.html

@@ -44,7 +44,10 @@
 
 <script src="./assets/scripts/dist/sholo.js"></script>
 <script>
-  const sholo = new Sholo();
+  const sholo = new Sholo({
+    animate: false,
+    opacity: 0.8
+  });
   sholo.highlight('.section__header');
 </script>
 </body>