update documentation

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.0](https://github.com/svelte-plugins/svelte-viewable/releases/tag/v1.0.0) - 2021-04-02
+
+- Interface changes that include exposing observer props and events
+- Includes new `on:complete` event
+- Replaced `enableObstructionDetection` with `detectObstructions`
+
 ## [0.1.3](https://github.com/svelte-plugins/svelte-viewable/releases/tag/v0.1.3) - 2021-04-01
 
 - Enable SSR support

README.md

@@ -59,8 +59,9 @@ Try the basic example in [Svelte REPL](https://svelte.dev/repl/c811481b8e1b48e9b
 | detectObstructions | If `true`, obstructions impacting the element will affect measurement | 'boolean' (default: `false`)                                                          |
 | root         | Containing element                                                | `null` or `HTMLElement` (default: `null`)                                                       |
 | rootMargin   | Margin offset of the containing element                           | `string` (default: `"0px"`)                                                                     |
-| intersecting | `true` if the observed element is intersecting the viewport       | `boolean` (default: `false`)                                                                    |
+| intersecting | `true` if the observed element is intersecting                    | `boolean` (default: `false`)                                                                    |
 | observer     | IntersectionObserver instance                                     | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) |
+| entry        | Observed element metadata                                         | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
 | debug        | If `true`, debug ouput will be logged to console                  | `boolean` (default: `false`)                                                                    |
 
 #### rules
@@ -96,7 +97,7 @@ The properties below can be used to assist with debugging any issues you might h
 | percentY     | Percentage of vertical viewable area                              | `number` (default: `0`) |
 
 
-### Dispatched events
+### Events
 
 - **on:observe**: Fired when an intersection change occurs (type `IntersectionObserverEntry`)
 - **on:intersect**: Fired when an intersection change occurs and the element is intersecting (type `IntersectionObserverEntry`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-plugins/viewable",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "license": "MIT",
   "description": "A simple rule-based approach to tracking element viewability.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",

src/Viewable.svelte

@@ -2,7 +2,7 @@
   import { afterUpdate, createEventDispatcher, onDestroy, tick } from 'svelte';
 
   /**
-   * HTML Element to track
+   * HTML Element to observe
    * @type {null | HTMLElement}
    */
   export let element;
@@ -47,17 +47,39 @@
    */
   export let gridSize = 20;
   /**
-   * Enables checking for elements obstructing the tracked elements view (popups, modals, overlays, etc.)
+   * If true, enables checking for anything obstructing the observed elements view (popups, modals, overlays, etc.)
    * @type {Boolean}
    */
   export let detectObstructions = false;
-
+  /**
+   * Containing element (Defaults to the browser viewport)
+   * @type {null | HTMLElement}
+   */
   export let root = null;
+  /**
+   * Margin offset of the containing element
+   * @type {String}
+   */
   export let rootMargin = '0px';
+   /**
+    * Array of visibility thresholds that will result in a callback when
+    * the observed element crosses that each threshold (.1 = 10% visible inside of its container)
+    */
   export let threshold = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
-
+  /**
+   * Observed element metadata
+   * @type {null | Entry}
+   */
   export let entry = null;
+  /**
+   * If true, the observed element is intersecting
+   * @type {Boolean}
+   */
   export let intersecting = false;
+  /**
+   * IntersectionObserver instance
+   * @type {null | IntersectionObserver}
+   */
   export let observer = null;
 
   let ready = null;