add jsdoc comments to tooltip methods, unify start/stop method descriptions

Author: george

js/dist/accordion.js.map

@@ -68,8 +68,7 @@ export default class Accordion extends Utils {
   // public
 
   /**
-   * Sets up accordion components and listens to buttons for events.
-   * Begin listening to [data-accordion-button] elements
+   * Begin listening to accordions.
    */
   start() {
     const accordionButtonSelector = this._getPossibleAccordionButtonAttrs(
@@ -86,7 +85,7 @@ export default class Accordion extends Utils {
   }
 
   /**
-   * Stop listening to accordion button events.
+   * Stop listening to accordions.
    */
   stop() {
     this._accordionButtons.forEach(button => {

js/dist/dropdown.js.map

@@ -74,8 +74,7 @@ export default class Dropdown extends Utils {
   // public
 
   /**
-   * Find and set up dropdown buttons and menus.
-   * Begin listening to dropdowns for events.
+   * Begin listening to dropdowns.
    */
   start() {
     this._dropdowns = nodeListToArray(`${this._dropdownContainerAttr}`)
@@ -94,7 +93,7 @@ export default class Dropdown extends Utils {
   }
 
   /**
-   * Stop listening for dropdown events.
+   * Stop listening to dropdowns.
    */
   stop() {
     this._dropdownButtons.forEach(button => {

js/dist/modal.js.map

@@ -68,8 +68,7 @@ export default class Modal extends Utils {
   // public
 
   /**
-   * Add accessible attributes to modals.
-   * Begin listening to elements with [data-modal-button]
+   * Begin listening to modals.
    */
   start() {
     this._modals = nodeListToArray(this._modalContainerAttr)
@@ -93,7 +92,7 @@ export default class Modal extends Utils {
   }
 
   /**
-   * Stop listening to modal buttons
+   * Stop listening to modals
    */
   stop() {
     this._modalButtons.forEach(button => {
@@ -121,25 +120,20 @@ export default class Modal extends Utils {
     this._activeModal = this._activeModalOverlay.querySelector(this._activeModalSelector)
     this._activeModalCloseButtons = nodeListToArray(`${this._activeModalSelector} [${Selectors.DATA_CLOSE}]`)
 
-    // allow focusable elements to be focused
     getFocusableElements(this._activeModalSelector).forEach(element => {
       element.setAttribute(Selectors.TABINDEX, "0")
     })
 
-    // capture focus, stop scrolling, and toggle attributes for visibility
     this._handleScrollStop()
     this.captureFocus(this._activeModalSelector)
     this._activeModalOverlay.setAttribute(Selectors.ARIA_HIDDEN, "false")
     this._activeModalOverlay.setAttribute(Selectors.DATA_VISIBLE, "true")
 
-    // focus the modal
     this._activeModal.setAttribute(Selectors.TABINDEX, "-1")
     this._activeModal.focus()
 
-    // offset slight scroll caused by this._activeModal.focus()
     this._activeModalOverlay.scrollTop = 0
 
-    // on ios devices, let the modal close on overlay click
     if (iOSMobile) {
       this._activeModalOverlay.style.cursor = "pointer"
     }
@@ -152,6 +146,10 @@ export default class Modal extends Utils {
     })
   }
 
+  /**
+   * Setup a modal instance.
+   * @param {Object} instance - The modal element
+   */
   _setupModal(instance) {
     const modalId = instance.getAttribute(Selectors.DATA_MODAL)
 

js/dist/tooltip.js.map

@@ -1,5 +1,3 @@
-// TODO: Add tests
-
 import { iOSMobile } from "./utils"
 
 const KeyCodes = {
@@ -52,6 +50,9 @@ export default class Tooltip {
 
   // public
 
+  /**
+   * Begin listening to tooltips.
+   */
   start() {
     this._allTooltips = document.querySelectorAll(`[${Selectors.DATA_TOOLTIP}]`)
 
@@ -60,6 +61,9 @@ export default class Tooltip {
     })
   }
 
+  /**
+   * Stop listening to tooltips.
+   */
   stop() {
     this._allTooltips.forEach(instance => {
       const id = instance.getAttribute(Selectors.DATA_TOOLTIP)
@@ -72,6 +76,10 @@ export default class Tooltip {
 
   // private
 
+  /**
+   * Render a tooltip.
+   * @param {Object} event - The event object
+   */
   _render(event) {
     this._activeTrigger = event.target
     const tooltipId = this._activeTrigger.getAttribute(Selectors.DATA_TARGET)
@@ -90,6 +98,9 @@ export default class Tooltip {
     this._listenForClose()
   }
 
+  /**
+   * Close a tooltip.
+   */
   _handleClose() {
     this._hideTooltip()
     this._listenForOpen()
@@ -98,14 +109,23 @@ export default class Tooltip {
     this._activeTooltip = null
   }
 
+  /**
+   * Add data-visible attribute to currently active tooltip.
+   */
   _showTooltip() {
     this._activeTooltip.setAttribute(Selectors.DATA_VISIBLE, "true")
   }
 
+  /**
+   * Remove data-visible attribute from currently active tooltip.
+   */
   _hideTooltip() {
     this._activeTooltip.setAttribute(Selectors.DATA_VISIBLE, "false")
   }
 
+  /**
+   * Stop listening for render events, and start listening to close events.
+   */
   _listenForClose() {
     this._activeTrigger.removeEventListener(Events.MOUSEOVER, this._render)
     this._activeTrigger.removeEventListener(Events.FOCUS, this._render)
@@ -118,12 +138,19 @@ export default class Tooltip {
     }
   }
 
+  /**
+   * Close a tooltip with the escape key. 
+   * @param {Object} event - The event object
+   */
   _handleEscapeKeyPress(event) {
     if (event.which === KeyCodes.ESCAPE) {
       this._handleClose()
     }
   }
 
+  /**
+   * Stop listening to close events, start listening for render events.
+   */
   _listenForOpen() {
     this._activeTrigger.removeEventListener(Events.MOUSEOUT, this._handleClose)
     this._activeTrigger.removeEventListener(Events.BLUR, this._handleClose)
@@ -136,6 +163,10 @@ export default class Tooltip {
     }
   }
 
+  /**
+   * Aligns a tooltip vertically or horizontally.
+   * @param {String} property - String specifying "height" or "width"
+   */
   _alignTooltip(property) {
     const triggerLength = this._getComputedLength(this._activeTrigger, property)
     const tooltipLength = this._getComputedLength(this._activeTooltip, property)
@@ -152,6 +183,10 @@ export default class Tooltip {
     }
   }
 
+  /**
+   * Setup a tooltip and trigger with appropriate event listeners and attributes.
+   * @param {Object} instance - A tooltip instance
+   */
   _setupTooltip(instance) {
     const id = instance.getAttribute(Selectors.DATA_TOOLTIP)
     const trigger = instance.querySelector(this._getTrigger(id))
@@ -176,14 +211,29 @@ export default class Tooltip {
     trigger.addEventListener(Events.FOCUS, this._render)
   }
 
+  /**
+   * Get an attribute selector string.
+   * @param {String} id - A unique tooltip id
+   * @return {String}
+   */
   _getTrigger(id) {
     return `[${Selectors.DATA_TARGET}="${id}"]`
   }
 
+  /**
+   * Render a tooltip.
+   * @param {Object} element - A tooltip element
+   * @param {String} property - The "height" or "width" property.
+   * @return {Number}
+   */
   _getComputedLength(element, property) {
     return parseInt(window.getComputedStyle(element)[property].slice(0, -2))
   }
 
+  /**
+   * Determine if a tooltip is rendering on the left or right.
+   * @return {Boolean}
+   */
   _isLeftOrRight() {
     const classes = this._activeTooltip.classList
     return classes.contains(Selectors.DROP_LEFT_CLASS) || classes.contains(Selectors.DROP_RIGHT_CLASS)

js/src/accordion.js

@@ -736,7 +736,6 @@ $dropdown-menu-header-font-size: 14px !default;
 $dropdown-menu-header-padding: 12px !default;
 $dropdown-menu-header-color: $gray800 !default;
 
-
 // 9. Tooltips
 // -----------