Add basic element selection on reload

.eslintrc.json

@@ -4,6 +4,12 @@
     "browser": true
   },
   "rules": {
-    "no-console": "off"
+    "no-console": "off",
+    "no-underscore-dangle": "off",
+    "no-plusplus": "off",
+    "no-cond-assign": "off",
+    "func-names": "off",
+    "no-param-reassign": ["off"],
+    "max-len": "off"
   }
 }

assets/scripts/src/sholo.js

@@ -1 +1,78 @@
-console.log('heeloo');
+let overlay;
+let overlayContext;
+
+// 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.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);
+  }
+
+  return { x, y };
+}
+
+// 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 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 isValidRegion = currentRegion.left < currentRegion.right && currentRegion.top < currentRegion.bottom;
+  if (!isValidRegion) {
+    return;
+  }
+
+  // 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 nodeToSelect = document.querySelector('.section__header');
+
+createOverlay();
+selectNode(nodeToSelect);

assets/styles/scss/base.scss

@@ -28,6 +28,7 @@ html, body {
 }
 
 body {
+  padding-top: 1px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 16px;
   line-height: 1.4;

assets/styles/scss/demo.scss

@@ -8,6 +8,7 @@ $light-button-bg: #f5f5f5 !default;
 $light-button-text: #2d2d2d !default;
 
 .page-wrap {
+  padding-top: 1px;
   width: $container-width;
   margin: auto;
 }

index.html

@@ -15,14 +15,30 @@
         <a href="#" class="btn btn__dark">Show an Example</a>
         <a href="#" class="btn btn__light">Learn More</a>
     </section>
-    <section>
+    <section class="section__purpose">
         <h1>Whats does it do?</h1>
         <p>Let's you bring any component on the page into the spotlight.</p>
         <p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can use it to make powerful introduction for different features of your application or for example if you want to highlight some component that needs user attention.</p>
     </section>
-    <section>
+    <section class="section__how">
         <h1>How does it do that?</h1>
         <p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some element</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
+    </section>
+    <section class="section__examples">
+        <h1>Can you show some Examples?</h1>
+        <p>Here are some of the examples</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
+    </section>
+    <section class="section__learn">
+        <h1>I want to learn more</h1>
+        <p>Here are some of the examples</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
+    </section>
+    <section>
+        <h1>Contributing</h1>
+        <p>Here are some of the examples</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
     </section>
 </div>