Add docs and allow modifying padding

.eslintrc.json

@@ -9,7 +9,10 @@
     "no-plusplus": "off",
     "no-cond-assign": "off",
     "func-names": "off",
-    "no-param-reassign": ["off"],
-    "max-len": "off"
+    "no-param-reassign": [
+      "off"
+    ],
+    "max-len": "off",
+    "no-multi-spaces": "off"
   }
 }
\ No newline at end of file

README.md

+## spotlight-js
+> Allows highlighting any element, adding feature introduction, adding hints
+
+## Highlighting Single Elements
+
+```javascript
+const spotlight = new Spotlight({
+  opacity: 0.7,  // opacity for the background
+  padding: 5,    // padding around the element
+});
+
+spotlight.highlight('#some-element');
+spotlight.clear();
+```
\ No newline at end of file

assets/scripts/src/overlay.js

@@ -5,15 +5,17 @@ import Position from './position';
  * cutting out the visible part, animating between the sections etc
  */
 export default class Overlay {
-  constructor({ opacity = 0.75 }) {
-    this.opacity = opacity;
-    this.overlayAlpha = 0;
-    this.positionToHighlight = new Position({});
-    this.highlightedPosition = new Position({});
-    this.redrawAnimation = null;
-    this.highlightedElement = null;
+  constructor({ opacity = 0.75, padding = 5 }) {
+    this.opacity = opacity; // Fixed opacity for the layover
+    this.padding = padding; // Padding around the highlighted item
+
+    this.overlayAlpha = 0;                       // Is used to animate the layover
+    this.positionToHighlight = new Position({}); // position at which layover is to be patched at
+    this.highlightedPosition = new Position({}); // position at which layover is patched currently
+    this.redrawAnimation = null;                 // used to cancel the redraw animation
+    this.highlightedElement = null;              // currently highlighted dom element (instance of Element)
 
-    this.draw = this.draw.bind(this);
+    this.draw = this.draw.bind(this);  // To pass the context of class, as it is to be used in redraw animation callback
 
     this.window = window;
     this.document = document;
@@ -101,10 +103,10 @@ export default class Overlay {
 
     // Remove the cloak from the position to highlight
     this.removeCloak({
-      posX: this.highlightedPosition.left - window.scrollX - 5,
-      posY: this.highlightedPosition.top - window.scrollY - 5,
-      width: (this.highlightedPosition.right - this.highlightedPosition.left) + (5 * 2),
-      height: (this.highlightedPosition.bottom - this.highlightedPosition.top) + (5 * 2),
+      posX: this.highlightedPosition.left - window.scrollX - this.padding,
+      posY: this.highlightedPosition.top - window.scrollY - this.padding,
+      width: (this.highlightedPosition.right - this.highlightedPosition.left) + (this.padding * 2),
+      height: (this.highlightedPosition.bottom - this.highlightedPosition.top) + (this.padding * 2),
     });
 
     if (canHighlight) {

assets/scripts/src/sholo.js

@@ -6,8 +6,11 @@ import './polyfill';
  * Plugin class that drives the plugin
  */
 export default class Sholo {
-  constructor({ opacity = 0.75 } = {}) {
-    this.overlay = new Overlay({ opacity });
+  constructor({ opacity = 0.75, padding = 5 } = {}) {
+    this.overlay = new Overlay({
+      opacity,
+      padding,
+    });
   }
 
   highlight(selector) {