Add JSDoc

assets/scripts/src/element.js

@@ -7,12 +7,12 @@ import Position from './position';
 export default class Element {
   /**
    * DOM element object
-   * @param node
-   * @param options
-   * @param popover
-   * @param overlay
-   * @param window
-   * @param document
+   * @param {Node} node
+   * @param {Object} options
+   * @param {Popover} popover
+   * @param {Overlay} overlay
+   * @param {Window} window
+   * @param {Document} document
    */
   constructor(node, options, popover, overlay, window, document) {
     this.node = node;
@@ -43,6 +43,10 @@ export default class Element {
     return { x, y };
   }
 
+  /**
+   * Checks if the current element is visible in viewport
+   * @returns {boolean}
+   */
   isInView() {
     let top = this.node.offsetTop;
     let left = this.node.offsetLeft;
@@ -65,6 +69,9 @@ export default class Element {
     );
   }
 
+  /**
+   * Brings the element to middle of the view port if not in view
+   */
   bringInView() {
     if (this.isInView()) {
       return;
@@ -127,6 +134,9 @@ export default class Element {
     this.showPopover();
   }
 
+  /**
+   * Is called when the element has been successfully highlighted
+   */
   onHighlighted() {
     if (this.popover) {
       this.showPopover();
@@ -152,12 +162,18 @@ export default class Element {
     }
   }
 
+  /**
+   * Shows the popover on the current element
+   */
   showPopover() {
     const position = this.getCalculatedPosition();
 
     this.popover.show(position);
   }
 
+  /**
+   * @returns {{height: number, width: number}}
+   */
   getFullPageSize() {
     // eslint-disable-next-line prefer-destructuring
     const body = this.document.body;

assets/scripts/src/overlay.js

@@ -7,9 +7,9 @@ import { ID_OVERLAY, OVERLAY_ZINDEX } from './constants';
  */
 export default class Overlay {
   /**
-   * @param options
-   * @param window
-   * @param document
+   * @param {Object} options
+   * @param {Window} window
+   * @param {Document} document
    */
   constructor(options, window, document) {
     this.options = options;
@@ -56,8 +56,8 @@ export default class Overlay {
 
   /**
    * Highlights the dom element on the screen
-   * @param element Element
-   * @param animate bool
+   * @param {Element} element
+   * @param {boolean} animate
    */
   highlight(element, animate = true) {
     if (!element || !element.node) {
@@ -124,7 +124,7 @@ export default class Overlay {
   }
 
   /**
-   * `draw` is called for in requestAnimationFrame. Puts back the
+   * `draw` is called for every frame . Puts back the
    * filled overlay on body (i.e. while removing existing highlight if any) and
    * Slowly eases towards the item to be selected.
    */
@@ -200,6 +200,10 @@ export default class Overlay {
     }
   }
 
+  /**
+   * Checks if there as any position highlighted
+   * @returns {boolean}
+   */
   hasPositionHighlighted() {
     return this.positionToHighlight.equals(this.highlightedPosition) &&
       this.overlayAlpha > (this.options.opacity - 0.05);
@@ -210,10 +214,10 @@ export default class Overlay {
    * i.e. cuts the chunk of layout which is over the element
    * to be highlighted
    *
-   * @param posX number
-   * @param posY number
-   * @param width number
-   * @param height number
+   * @param {number} posX
+   * @param {number} posY
+   * @param {number} width
+   * @param {number} height
    */
   removeCloak({
     posX = 0,
@@ -228,10 +232,10 @@ export default class Overlay {
    * Adds the overlay i.e. to cover the given
    * position with dark overlay
    *
-   * @param posX number
-   * @param posY number
-   * @param width number
-   * @param height number
+   * @param {number} posX
+   * @param {number} posY
+   * @param {number} width
+   * @param {number} height
    */
   addCloak({
     posX = 0,
@@ -246,8 +250,8 @@ export default class Overlay {
   /**
    * Sets the size for the overlay
    *
-   * @param width number
-   * @param height number
+   * @param {number|null} width
+   * @param {number|null} height
    */
   setSize(width = null, height = null) {
     // By default it is going to cover the whole page and then we will
@@ -260,7 +264,7 @@ export default class Overlay {
    * Refreshes the overlay i.e. sets the size according to current window size
    * And moves the highlight around if necessary
    *
-   * @param animate bool
+   * @param {boolean} animate
    */
   refresh(animate = true) {
     this.setSize();

assets/scripts/src/popover.js

@@ -14,6 +14,11 @@ import {
  * Popover that is displayed on top of the highlighted element
  */
 export default class Popover extends Element {
+  /**
+   * @param {Object} options
+   * @param {Window} window
+   * @param {Document} document
+   */
   constructor(options, window, document) {
     super();
 
@@ -35,6 +40,9 @@ export default class Popover extends Element {
     this.hide();
   }
 
+  /**
+   * Prepares the dom element for popover
+   */
   makeNode() {
     let popover = this.document.getElementById(ID_POPOVER);
     if (!popover) {
@@ -65,6 +73,10 @@ export default class Popover extends Element {
     return div.firstChild;
   }
 
+  /**
+   * Gets the size for popover
+   * @returns {{height: number, width: number}}
+   */
   getSize() {
     return {
       height: Math.max(this.node.scrollHeight, this.node.offsetHeight),
@@ -91,7 +103,7 @@ export default class Popover extends Element {
 
   /**
    * Shows the popover at the given position
-   * @param position
+   * @param {Position} position
    */
   show(position) {
     this.reset();
@@ -154,7 +166,7 @@ export default class Popover extends Element {
 
   /**
    * Shows the popover on the left of the given position
-   * @param elementPosition
+   * @param {Position} elementPosition
    */
   positionOnLeft(elementPosition) {
     const popoverWidth = this.getSize().width;
@@ -170,7 +182,7 @@ export default class Popover extends Element {
 
   /**
    * Shows the popover on the right of the given position
-   * @param elementPosition
+   * @param {Position} elementPosition
    */
   positionOnRight(elementPosition) {
     const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
@@ -185,7 +197,7 @@ export default class Popover extends Element {
 
   /**
    * Shows the popover on the top of the given position
-   * @param elementPosition
+   * @param {Position} elementPosition
    */
   positionOnTop(elementPosition) {
     const popoverHeight = this.getSize().height;
@@ -201,7 +213,7 @@ export default class Popover extends Element {
 
   /**
    * Shows the popover on the bottom of the given position
-   * @param elementPosition
+   * @param {Position} elementPosition
    */
   positionOnBottom(elementPosition) {
     const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
@@ -218,7 +230,7 @@ export default class Popover extends Element {
    * Automatically positions the popover around the given position
    * such that the element and popover remain in view
    * @todo add the left and right positioning decisions
-   * @param elementPosition
+   * @param {Position} elementPosition
    */
   autoPosition(elementPosition) {
     const pageSize = this.getFullPageSize();

assets/scripts/src/position.js

@@ -4,10 +4,10 @@
  */
 export default class Position {
   /**
-   * @param left number
-   * @param top number
-   * @param right number
-   * @param bottom number
+   * @param {number} left
+   * @param {number} top
+   * @param {number} right
+   * @param {number} bottom
    */
   constructor({
     left = 0,

assets/scripts/src/sholo.js

@@ -18,7 +18,7 @@ import {
  */
 export default class Sholo {
   /**
-   * @param options
+   * @param {Object} options
    */
   constructor(options = {}) {
     this.options = Object.assign({