Restructure and es6-ify

assets/scripts/src/element.js

@@ -0,0 +1,47 @@
+import Position from './position';
+
+export default class Element {
+  constructor(node) {
+    this.element = node;
+    this.document = document;
+  }
+
+  // Gets the screen co-ordinates for the current dom element
+  getScreenCoordinates() {
+    let tempNode = this.element;
+
+    let x = this.document.documentElement.offsetLeft;
+    let y = this.document.documentElement.offsetTop;
+
+    if (tempNode.offsetParent) {
+      do {
+        x += tempNode.offsetLeft;
+        y += tempNode.offsetTop;
+      } while (tempNode = tempNode.offsetParent);
+    }
+
+    return { x, y };
+  }
+
+  // Gets the calculated position on screen
+  getPosition() {
+    const coordinates = this.getScreenCoordinates();
+    const position = new Position({
+      left: Number.MAX_VALUE,
+      top: Number.MAX_VALUE,
+      right: 0,
+      bottom: 0,
+    });
+
+    // If we have the position for this element
+    // and the element is visible on screen (has some height)
+    if (typeof coordinates.x === 'number' && typeof coordinates.y === 'number' && (this.element.offsetWidth > 0 || this.element.offsetHeight > 0)) {
+      position.left = Math.min(position.left, coordinates.x);
+      position.top = Math.min(position.top, coordinates.y);
+      position.right = Math.max(position.right, coordinates.x + this.element.offsetWidth);
+      position.bottom = Math.max(position.bottom, coordinates.y + this.element.offsetHeight);
+    }
+
+    return position;
+  }
+}

assets/scripts/src/overlay.js

@@ -0,0 +1,74 @@
+import Position from './position';
+
+/**
+ * Responsible for overlay creation and manipulation i.e.
+ * cutting out the visible part, animating between the sections etc
+ */
+export default class Overlay {
+  constructor({ alpha = 0.75 }) {
+    this.alpha = alpha;
+    this.window = window;
+    this.selected = new Position({});
+
+    this.prepareContext();
+    this.setSize();
+  }
+
+  // Prepares the overlay
+  prepareContext() {
+    const overlay = document.createElement('canvas');
+
+    this.overlay = overlay;
+    this.context = overlay.getContext('2d');
+
+    this.overlay.style.pointerEvents = 'none';
+    this.overlay.style.background = 'transparent';
+    this.overlay.style.position = 'fixed';
+    this.overlay.style.top = '0';
+    this.overlay.style.left = '0';
+    this.overlay.style.zIndex = '999999999';
+  }
+
+  // Highlights the dom element on the screen
+  highglight(element) {
+    if (!element) {
+      // @todo - clearing the overlay
+      return;
+    }
+
+    // get the position of element around which we need to draw
+    const position = element.getPosition();
+    if (!position.isValid()) {
+      return;
+    }
+
+    this.selected = position;
+    this.draw();
+  }
+
+  draw() {
+    this.context.clearRect(0, 0, this.overlay.width, this.overlay.height);
+    this.context.fillStyle = `rgba( 0, 0, 0, ${this.alpha})`;
+    this.context.fillRect(0, 0, this.overlay.width, this.overlay.height);
+
+    // Cut out the cleared region
+    this.context.clearRect(
+      this.selected.left - window.scrollX,
+      this.selected.top - window.scrollY,
+      (this.selected.right - this.selected.left),
+      (this.selected.bottom - this.selected.top),
+    );
+
+    // Append the overlay if not there already
+    if (!this.overlay.parentNode) {
+      document.body.appendChild(this.overlay);
+    }
+  }
+
+  setSize(width = null, height = null) {
+    // By default it is going to cover the whole page and then we will
+    // 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;
+  }
+}

assets/scripts/src/position.js

@@ -0,0 +1,27 @@
+/**
+ * Responsible for validating positions and is used
+ * when manipulating positions across the application
+ */
+export default class Position {
+  /**
+   * @param left
+   * @param top
+   * @param right
+   * @param bottom
+   */
+  constructor({
+    left = 0,
+    top = 0,
+    right = 0,
+    bottom = 0,
+  }) {
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+
+  isValid() {
+    return this.left < this.right && this.top < this.bottom;
+  }
+}

assets/scripts/src/sholo.js

@@ -1,94 +1,27 @@
-let overlay;
-let overlayContext;
+import Overlay from './overlay';
+import Element from './element';
 
-// overlay is going to cover the whole page and then we will
-// cut out a chunk for the element to be visible out of it
-function createOverlay() {
-  overlay = document.createElement('canvas');
-  overlayContext = overlay.getContext('2d');
 
-  overlay.style.pointerEvents = 'none';
-  overlay.style.background = 'transparent';
-  overlay.style.position = 'fixed';
-  overlay.style.top = '0';
-  overlay.style.left = '0';
-  overlay.style.zIndex = '999999999';
-  overlay.width = window.innerWidth;
-  overlay.height = window.innerHeight;
-
-  overlayContext.clearRect(0, 0, overlay.width, overlay.height);
-  overlayContext.fillStyle = 'rgba( 0, 0, 0, 0.7)';
-  overlayContext.fillRect(0, 0, overlay.width, overlay.height);
-}
-
-// Finds the correct position of node on screen
-function getNodePosition(node) {
-  let x = document.documentElement.offsetLeft;
-  let y = document.documentElement.offsetTop;
-
-  if (node.offsetParent) {
-    do {
-      x += node.offsetLeft;
-      y += node.offsetTop;
-    } while (node = node.offsetParent);
+/**
+ * Plugin class that drives the plugin
+ */
+export default class Sholo {
+  constructor({ alpha = 0.75 } = {}) {
+    this.overlay = new Overlay({ alpha });
   }
 
-  return { x, y };
-}
+  highlight(selector) {
+    let domElement;
 
-// selects the node on the screen
-function selectNode(node) {
-  if (!node) {
-    return;
-  }
-
-  // Default to non-existing space
-  const currentRegion = {
-    left: Number.MAX_VALUE, top: Number.MAX_VALUE, right: 0, bottom: 0,
-  };
-  const nodePosition = getNodePosition(node);
+    if (typeof selector === 'string') {
+      domElement = document.querySelector(selector);
+    } else if (typeof selector === 'object') {
+      domElement = selector;
+    } else {
+      throw new Error('Element can only be string or the dom element');
+    }
 
-  // If we have the position and has some height
-  if (typeof nodePosition.x === 'number' && typeof nodePosition.y === 'number' && (node.offsetWidth > 0 || node.offsetHeight > 0)) {
-    currentRegion.left = Math.min(currentRegion.left, nodePosition.x);
-    currentRegion.top = Math.min(currentRegion.top, nodePosition.y);
-    currentRegion.right = Math.max(currentRegion.right, nodePosition.x + node.offsetWidth);
-    currentRegion.bottom = Math.max(currentRegion.bottom, nodePosition.y + node.offsetHeight);
+    const element = new Element(domElement);
+    this.overlay.highglight(element);
   }
-
-
-  const isValidRegion = currentRegion.left < currentRegion.right && currentRegion.top < currentRegion.bottom;
-  if (!isValidRegion) {
-    return;
-  }
-
-  const overlayAlpha = 0.7;
-
-  // Reset the overlay
-  overlayContext.clearRect(0, 0, overlay.width, overlay.height);
-  overlayContext.fillStyle = `rgba( 0, 0, 0, ${overlayAlpha} )`;
-  overlayContext.fillRect(0, 0, overlay.width, overlay.height);
-
-  // Cut out the cleared region
-  overlayContext.clearRect(
-    currentRegion.left - window.scrollX,
-    currentRegion.top - window.scrollY,
-    (currentRegion.right - currentRegion.left),
-    (currentRegion.bottom - currentRegion.top),
-  );
-
-  document.body.appendChild(overlay);
 }
-
-const nodesToSelect = [
-  document.querySelector('.section__header'),
-  document.querySelector('.section__how'),
-];
-
-createOverlay();
-
-nodesToSelect.forEach((nodeToSelect, index) => {
-  window.setTimeout(() => {
-    selectNode(nodeToSelect);
-  }, index * 1000);
-});

index.html

@@ -43,5 +43,19 @@
 </div>
 
 <script src="./assets/scripts/dist/sholo.js"></script>
+<script>
+  const nodesToSelect = [
+    '.section__header',
+    '.section__how',
+  ];
+
+  const sholo = new Sholo();
+
+  nodesToSelect.forEach((nodeToSelect, index) => {
+    window.setTimeout(() => {
+      sholo.highlight(nodeToSelect);
+    }, index * 1000);
+  });
+</script>
 </body>
 </html>

package.json

@@ -13,6 +13,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.3",
+    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-env": "^1.6.1",
     "css-loader": "^0.28.10",
     "eslint": "^4.18.2",
@@ -21,6 +22,7 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-node": "^6.0.1",
     "extract-loader": "^1.0.2",
+    "extract-text-webpack-plugin": "next",
     "file-loader": "^1.1.11",
     "node-sass": "^4.7.2",
     "opn": "^5.2.0",
@@ -29,9 +31,7 @@
     "style-loader": "^0.20.2",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.10",
-    "webpack-dev-server": "^3.1.0",
-    "extract-text-webpack-plugin": "next"
+    "webpack-dev-server": "^3.1.0"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

webpack.config.dev.js

@@ -5,8 +5,8 @@ module.exports = {
   mode: 'development',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
-    './assets/scripts/src/sholo.js',
     './assets/styles/scss/demo.scss',
+    './assets/scripts/src/sholo.js',
   ],
   output: {
     path: path.join(__dirname, '/assets'),
@@ -33,6 +33,7 @@ module.exports = {
         loader: 'babel-loader',
         options: {
           presets: ['env'],
+          plugins: ['babel-plugin-add-module-exports'],
         },
       },
       {

yarn.lock

@@ -546,6 +546,10 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-add-module-exports@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
+
 babel-plugin-check-es2015-constants@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"