driver.js - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

package.json

 {
   "name": "driver.js",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
   "main": "dist/driver.min.js",
+  "types": "types/index.d.ts",
   "scripts": {
@@ -7,0 +8,0 @@ "start": "node server.js",

readme.md

@@ -272,3 +272,3 @@ <h1 align="center"><img src="./demo/images/driver.png" /><br> Driver.js</h1>
 - [X] Bring highlighted element to viewport
-- [ ] Add type definitions
+- [X] Add type definitions
 - [ ] Create wrappers for Angular, Vue and React
@@ -275,0 +275,0 @@ - [ ] Write tests

src/core/element.js

@@ -42,2 +42,3 @@ import Position from './position';
    * @returns {{x: number, y: number}}
+   * @private
    */
@@ -63,2 +64,3 @@ getScreenCoordinates() {
    * @returns {boolean}
+   * @private
    */
@@ -89,2 +91,3 @@ isInView() {
    * Manually scrolls to the position of element if `scrollIntoView` fails
+   * @private
    */
@@ -101,2 +104,3 @@ scrollManually() {
    * Brings the element to middle of the view port if not in view
+   * @private
    */
@@ -128,2 +132,3 @@ bringInView() {
    * we need to draw
+   * @public
    */
@@ -154,2 +159,3 @@ getCalculatedPosition() {
    * i.e. when moving the focus to next element of closing
+   * @public
    */
@@ -177,2 +183,3 @@ onDeselected(hideStage = false) {
    * @returns {boolean}
+   * @public
    */
@@ -189,4 +196,3 @@ isSame(element) {
    * Is called when the element is about to be highlighted
-   * i.e. either if overlay has started moving the highlight towards
-   * this element of has just decided to highlight it
+   * @public
    */
@@ -201,2 +207,3 @@ onHighlightStarted() {
    * Is called when the element has been successfully highlighted
+   * @public
    */
@@ -227,2 +234,3 @@ onHighlighted() {
    * Shows the stage behind the element
+   * @public
    */
@@ -236,2 +244,3 @@ showStage() {
    * @returns {Node|HTMLElement|*}
+   * @public
    */
@@ -242,2 +251,6 @@ getNode() {
 
+  /**
+   * Hides the stage
+   * @public
+   */
   hideStage() {
@@ -247,2 +260,6 @@ this.stage.hide();
 
+  /**
+   * Hides the popover if possible
+   * @public
+   */
   hidePopover() {
@@ -258,2 +275,3 @@ if (!this.popover) {
    * Shows the popover on the current element
+   * @public
    */
@@ -281,2 +299,3 @@ showPopover() {
    * @returns {{height: number, width: number}}
+   * @public
    */
@@ -297,2 +316,3 @@ getFullPageSize() {
    * @returns {{height: number, width: number}}
+   * @public
    */
@@ -299,0 +319,0 @@ getSize() {

src/core/overlay.js

@@ -29,2 +29,3 @@ import { ANIMATION_DURATION_MS, CLASS_NO_ANIMATION, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
    * Prepares the overlay
+   * @private
    */
@@ -51,2 +52,3 @@ makeNode() {
    * @param {Element} element
+   * @public
    */
@@ -91,2 +93,6 @@ highlight(element) {
 
+  /**
+   * Shows the overlay on whole screen
+   * @public
+   */
   show() {
@@ -112,2 +118,3 @@ if (this.node && this.node.parentElement) {
    * @returns {null|*}
+   * @public
    */
@@ -121,2 +128,3 @@ getHighlightedElement() {
    * @returns {null|*}
+   * @public
    */
@@ -129,2 +137,3 @@ getLastHighlightedElement() {
    * Removes the overlay and cancel any listeners
+   * @public
    */
@@ -158,2 +167,3 @@ clear(immediate = false) {
    * Removes the overlay node if it exists
+   * @private
    */
@@ -169,2 +179,3 @@ removeNode() {
    * And moves the highlight around if necessary
+   * @public
    */
@@ -171,0 +182,0 @@ refresh() {

src/core/popover.js

@@ -50,2 +50,3 @@ import Element from './element';
    * Prepares the dom element for popover
+   * @private
    */
@@ -69,2 +70,6 @@ makeNode() {
 
+  /**
+   * Hides the popover
+   * @public
+   */
   hide() {
@@ -74,2 +79,6 @@ this.node.style.display = 'none';
 
+  /**
+   * Sets the default state for the popover
+   * @private
+   */
   setInitialState() {
@@ -91,2 +100,3 @@ this.node.style.display = 'block';
    * @param {Position} position
+   * @public
    */
@@ -126,2 +136,3 @@ show(position) {
    * decides if to show them or not
+   * @private
    */
@@ -157,2 +168,3 @@ renderButtons() {
    * @param {Position} elementPosition
+   * @private
    */
@@ -174,2 +186,3 @@ positionOnLeft(elementPosition) {
    * @param {Position} elementPosition
+   * @private
    */
@@ -190,2 +203,3 @@ positionOnRight(elementPosition) {
    * @param {Position} elementPosition
+   * @private
    */
@@ -207,2 +221,3 @@ positionOnTop(elementPosition) {
    * @param {Position} elementPosition
+   * @private
    */
@@ -225,2 +240,3 @@ positionOnBottom(elementPosition) {
    * @param {Position} elementPosition
+   * @private
    */
@@ -227,0 +243,0 @@ autoPosition(elementPosition) {

src/core/position.js

@@ -27,2 +27,3 @@ /**
    * @returns {boolean}
+   * @public
    */
@@ -37,2 +38,3 @@ canHighlight() {
    * @returns {boolean}
+   * @public
    */
@@ -39,0 +41,0 @@ equals(position) {

src/core/stage.js

@@ -25,2 +25,3 @@ import { CLASS_NO_ANIMATION, ID_STAGE, STAGE_HTML } from '../common/constants';
    * Prepares the DOM element if not already there
+   * @private
    */
@@ -43,17 +44,12 @@ makeNode() {
 
-  removeNode() {
-    if (!this.node) {
-      return;
-    }
-
-    this.node.parentElement.removeChild(this.node);
-  }
-
   /**
    * Simply hides the stage
+   * @public
    */
   hide() {
-    this.node.style.display = 'none';
+    if (!this.node || !this.node.parentElement) {
+      return;
+    }
 
-    this.removeNode();
+    this.node.parentElement.removeChild(this.node);
   }
@@ -63,2 +59,3 @@
    * Makes it visible and sets the default properties
+   * @private
    */
@@ -73,2 +70,7 @@ setInitialStyle() {
 
+  /**
+   * Shows the stage at provided position
+   * @param {Position} position
+   * @public
+   */
   show(position) {
@@ -75,0 +77,0 @@ this.makeNode();

src/index.js

@@ -63,2 +63,3 @@ import Overlay from './core/overlay';
    * @todo: add throttling in all the listeners
+   * @private
    */
@@ -75,2 +76,3 @@ bind() {
    * @param e
+   * @private
    */
@@ -110,5 +112,46 @@ onClick(e) {
 
+
   /**
+   * Handler for the onResize DOM event
+   * Makes sure highlighted element stays at valid position
+   * @private
+   */
+  onResize() {
+    if (!this.isActivated) {
+      return;
+    }
+
+    this.overlay.refresh();
+  }
+
+  /**
+   * Clears the overlay on escape key process
+   * @param event
+   * @private
+   */
+  onKeyUp(event) {
+    if (!this.isActivated) {
+      return;
+    }
+
+    // If escape was pressed and it is allowed to click outside to close
+    if (event.keyCode === ESC_KEY_CODE && this.options.allowClose) {
+      this.reset();
+      return;
+    }
+
+    // Arrow keys to only perform if it is stepped introduction
+    if (this.steps.length !== 0) {
+      if (event.keyCode === RIGHT_KEY_CODE) {
+        this.moveNext();
+      } else if (event.keyCode === LEFT_KEY_CODE) {
+        this.movePrevious();
+      }
+    }
+  }
+
+  /**
    * Moves to the previous step if possible
    * otherwise resets the overlay
+   * @public
    */
@@ -127,2 +170,3 @@ movePrevious() {
    * otherwise resets the overlay
+   * @public
    */
@@ -140,2 +184,3 @@ moveNext() {
    * @returns {boolean}
+   * @public
    */
@@ -148,2 +193,3 @@ hasNextStep() {
    * @returns {boolean}
+   * @public
    */
@@ -156,2 +202,4 @@ hasPreviousStep() {
    * Resets the steps if any and clears the overlay
+   * @param {boolean} immediate
+   * @public
    */
@@ -167,2 +215,3 @@ reset(immediate = false) {
    * @returns {boolean}
+   * @public
    */
@@ -177,2 +226,3 @@ hasHighlightedElement() {
    * @returns {Element}
+   * @public
    */
@@ -186,2 +236,3 @@ getHighlightedElement() {
    * @returns {Element}
+   * @public
    */
@@ -193,41 +244,5 @@ getLastHighlightedElement() {
   /**
-   * Handler for the onResize DOM event
-   * Makes sure highlighted element stays at valid position
-   */
-  onResize() {
-    if (!this.isActivated) {
-      return;
-    }
-
-    this.overlay.refresh();
-  }
-
-  /**
-   * Clears the overlay on escape key process
-   * @param event
-   */
-  onKeyUp(event) {
-    if (!this.isActivated) {
-      return;
-    }
-
-    // If escape was pressed and it is allowed to click outside to close
-    if (event.keyCode === ESC_KEY_CODE && this.options.allowClose) {
-      this.reset();
-      return;
-    }
-
-    // Arrow keys to only perform if it is stepped introduction
-    if (this.steps.length !== 0) {
-      if (event.keyCode === RIGHT_KEY_CODE) {
-        this.moveNext();
-      } else if (event.keyCode === LEFT_KEY_CODE) {
-        this.movePrevious();
-      }
-    }
-  }
-
-  /**
    * Defines steps to be highlighted
    * @param {array} steps
+   * @public
    */
@@ -259,2 +274,3 @@ defineSteps(steps) {
    * @returns {null|Element}
+   * @private
    */
@@ -317,2 +333,3 @@ prepareElementFromStep(currentStep, allSteps = [], index = 0) {
    * @param {number} index at which highlight is to be started
+   * @public
    */
@@ -333,2 +350,3 @@ start(index = 0) {
    * @param {string|{element: string, popover: {}}} selector Query selector or a step definition
+   * @public
    */
@@ -335,0 +353,0 @@ highlight(selector) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

411402

increased by4.33%

Lines of code

2287

increased by36.95%

No dependency changes