---

OnView

A small JavaScript library allowing element manipulation when an element enters into or exits out of the view without having to write a single line of code. In addition more advanced use cases can utilize inline coding similar to the onclick attribute or listen to custom events send out by the element itself.

Examples

Let's start off with some example use cases in order to give you an idea of what this library can do for you.

$3

`` HTML






`

As soon as the image element enters into view the src attribute with the specified element will be added to the element. The change made to the element will trigger the image to be loaded in.

$3

` HTML












`

The styling is setup to start fading in when the animate class is added the element. As soon as the element enters into view the animate class will be added to the element, and as soon as the element exits out of view the animate class wil be removed from the element. As a result the element fades in everytime it enters into view.

Installation

Via a CDN:

` HTML



`

Via a package manager:

` Bash


Node Yarn

yarn add onview

Node NPM

npm install onview
`

Initializations

After adding the script to a webpage the library is added to the global window object. An instance of the library needs to be initialized before it becomes active. The first step is to create an instance using the constructor function: new window.OnView(), this function call returns a new instance. By default the instance get automatically initialized if the document has finished loading otherwise it will listen for the window load event. To change this default behaviour change the readyState option.

$3

` HTML



`

$3

` HTML



`

$3

` HTML



`

Functions

- constructor
- Description: Construct an OnView instance.
- Parameters:
- options
- Description: See options for more information.
- Type: object
- Returns: An OnView instance.
- Example: var onView = new OnView(options);
- getOptions
- Description: Get a copy of the instance's options.
- Returns: A copy of the instance's options. See options for more information.
- Example: var options = onView.getOptions();
- isInitialized
- Description: Whether the instance has been initialized.
- Example: var initialize = onView.isInitialzed();
- initialize
- Description: Initialize the instance after which it will query and start observing the elements discovered.
- Example: onView.initialize();
- destroy
- Description: destroy the instance, after which it is brought back to the same state as before it was initialized.
- Example: onView.destroy();
- queryDocument
- Description: Re-queries the document in order to discover new elements to start observing.
- Example: onView.queryDocument();

Options

The following options can be set when calling the constructor method of the library.

- debug
- Description: Whether to log debug messages to the console.
- Type: boolean
- Default: false
- readyState
- Description: Which document ready state the initialize the module at.
- Type: string
- Options: complete, interactive, and manual. Also available through the READY_STATES property, for instance OnView.READY_STATES.complete equals 'complete'.
- Default: complete
- observedElement
- Description: The root element to query for all other elements.
- Type: Element
- Default: document.body
- observerElement
- Description: The element whose intersection with the queried elements is observed. See the root options of the IntersectionObserver for more information.
- Type: Element
- Default: null, null defaults to the window's viewport.
- observerMargin
- Description: Margin of the observed element before intersection is seen as intersecting. See the rootMargin options of the IntersectionObserver for more information.
- Type: string
- Default: 0px
- attributePrefix
- Description: The prefix the attributes.
- Type: string
- Default: data-onview
- eventContextName
- Description: Name of the context when executing the inline code. See code execution for more information.
- Type: string
- Default: detail
- selectorSplitCharacter
- Description: The text which splits the attribute selector. See attribute selector for more information.
- Type: string
- Default: ,

` HTML



`

> Do note the threshold property of the IntersectionObserver is not available through the observableOptions option.

Attributes

$3

The following data attributes can be added to any elements in order for them to be observed by the OnView library.

#### Enter and exit

- Attribute name: data-onview
- Attribute value type: JavaScript code
- Description: Executes the code specified when the element enters into view and/or exits out of view.

` HTML




`

#### Enter

- Attribute name: data-onview-enter
- Attribute value type: JavaScript code
- Description: Executes the code specified when the element enters into view.

` HTML




`

#### Enter add

- Attribute name: data-onview-enter-add
- Attribute value type: attribute selector
- Descriptions: Adds the attributes to the element when it enters into view.

` HTML







`

#### Enter remove

- Attribute name: data-onview-enter-remove
- Attribute value type: attribute selector
- Description: Removes the attributes from the element when it exits out of view.

` HTML







`

#### Enter toggle

- Attribute name: data-onview-enter-toggle
- Attribute value type: attribute selector
- Description: Adds the attributes to the element when it enters into view, and removes the attributes from the element when it exits out of view.

` HTML










`

#### Exit

- Attribute name: data-onview-exit
- Attribute value type: JavaScript code
- Description: Executes the code specified when the element exits out of view.

` HTML




`

#### Exit add

- Attribute name: data-onview-exit-add
- Attribute value type: attribute selector
- Descriptions: Adds the attributes to the element when it exits out of view.

` HTML







`

#### Exit remove

- Attribute name: data-onview-exit-remove
- Attribute value type: attribute selector
- Descriptions: Removes the attributes from the element when it exits out of view.

` HTML







`

#### Exit toggle

- Attribute name: data-onview-exit-toggle
- Attribute value type: attribute selector
- Description: Removes the attributes from the element when it enters into view, and adds the attributes to the element when it exits out of view.

` HTML










`

$3

The following attributes can be combined with the previously mentioned observer attributes to modify their behaviour.

#### Delay

- Attribute name: data-onview-delay
- Attribute value type: Time in milliseconds as a number.
- Description: Delays the resulting effect by the given amount of time.

` HTML







`

#### Repeat

- Attribute name: data-onview-repeat
- Description: Allows the data-onview-enter, data-onview-enter-add, data-onview-enter-remove, data-onview-exit, data-onview-exit-add, data-onview-exit-add, and data-onview-exit-remove to be repeated by not removing them from the observered element.

` HTML




`

Code execution

Certain observed attributes can receive a value that is JavaScript code which will be executed when the criteria for the observer are met. The code is wrapped in a function call and provided with a single parameter called detail. The name of the given parameter can be changed through the options.

- detail
- Description: Context of the invocation event.
- Type: object
- Properties
- entry
- Type: IntersectionObserverEntry. See the IntersectionObserverEntry documentation for more information.

` HTML




`

Attribute selector

Attributes can be added or removed using a CSS style selector.

$3

To change the ID prepent the ID with a number sign (#).

` HTML







`

` HTML







`

$3

To change the class list prepent the class name with a full stop (.).

` HTML







`

` HTML







`

$3

To change the attributes an attribute name and value pair concatinated with an equals sign (=) and wrapped by a set of brackets ([ and ]) needs to be used.

` HTML







`

When removing attributes only the attribute name is read, therefore the attribute name wrapped by a set of brackets ([ and ]) is enough.

` HTML







`

To add or remove multiple attributes, separate the values using the selector split character. By default the selector split chracter is a comma (,), this can be changed through the options.

` HTML







`

> Do note any invalid values will be ignored.

Event listening

An event gets dispatched from each observed element regardless of which one of the observered attribute is applied. Only one event is dispatched per element no matter how many of the data attributes are added.

` HTML






`

Compatibility

The following functionality is required and therefore polyfills are recommended for supporting for older browsers:
- Intersection Observer API: see the IntersectionObserver polyfill, or simply add ` to your markup.
- Custom events: see the CustomEvent polyfill.