Class: VisMon

var visElement = VisSense(element);

var visMon = VisSense.VisMon(visElement, {
  update: function() {
    console.log('updated.');
  }
});

or

var visMon = VisSense(element).monitor({
  update: function() {
    console.log('updated.');
  }
}).start();

Classes

Strategy

Methods

on(topic, callback) → {VisSense.VisMon#RemoveListenerCallback}

Binds a callback function to a specific event. Valid events are: - ´start´ - ´stop´ - ´update´ - ´hidden´ - ´visible´ - ´fullyvisible´ - ´percentagechange´ - ´visibilitychange´

Parameters:

Name	Type	Description
topic	string	The name of the topic to bind the callback to.
callback	function	A callback function.

Returns:

A function when called will remove the listener.

Type

VisSense.VisMon#RemoveListenerCallback

Example

var monitor = VisSense(...).monitor(...);
 monitor.on('fullyvisible', function() {
  Animations.startAnimation();
});

monitor.on('percentagechange', function(newValue) {
  if(newValue < 0.8) {
    Animations.stopAnimation();
  }
});

monitor.start();

publish(eventName, args)

Invokes all subscribers of the given event with the provided arguments. This method throws an error if an internal event is published.

Parameters:

Name	Type	Description
eventName	String	The name of the event
args	*	The arguments to pass to the subscribers of the event

Returns:

Returns a function that cancels the event execution - this can only be done if the monitor has an async queue (option async enabled).

Example

var monitor = VisSense(element).monitor();

monitor.publish('myEvent', [arg1, arg2]);

start() → {VisSense.VisMon}

Starts monitoring the provided element. This will determine the element visibility once and subequentially execute every strategies start method. Call stop to stop observing the element.

Returns:

itself.

Type

VisSense.VisMon

Examples

var myElement = document.getElementById('myElement');
var monitor = VisSense.of(myElement).monitor().start();
...
monitor.stop();

var visobj = new VisSense(myElement);
var monitor = VisSense.VisMon(..., {
  strategy: [
    new ViSense.VisMon.Strategy.EventStrategy(...)
    new ViSense.VisMon.Strategy.PollingStrategy(...)
  ]
});

monitor.start();

startAsync() → {VisSense.VisMon}

Asynchronously starts monitoring the provided element.

Returns:

itself.

Type

VisSense.VisMon

state() → {VisSense~VisState|Object}

Returns an object representing the current visibility state.

Returns:

The current state.

Type

VisSense~VisState | Object

Example

var visMon = VisSense.VisMon(...);

visElement.state();
// => {
   code: 1,
   state: 'visible',
   percentage: 0.33,
   fullyvisible: false,
   visible: true,
   hidden: false,
   previous: {
     code: 1,
     state: 'visible',
     percentage: 0.42,
     fullyvisible: false,
     visible: true,
     hidden: false
   }
 }

stop() → {*}

Stops monitoring the provided element.

Returns:

The return value of the strategies stop function.

Type

*

Example

var visMon = VisSense.VisMon(..., {
  strategy: [
    new ViSense.VisMon.Strategy.EventStrategy(...)
    new ViSense.VisMon.Strategy.PollingStrategy(...)
  ]
}).start();

...

visElement.stop();

update() → {undefined}

Updates the state of the monitor object. This method invokes a visibility check and fires any registered listener accordingly.

Returns:

Type

undefined

Example

var vismon = VisSense(...)
 .monitor({
   update: function() {
     console.log('update');
   }
 });

vismon.update();
// -> prints 'update' to console

Type Definitions

OnFullyVisibleCallback(vismon)

This callback function will be called everytime the visibility states changes and the element becomes fully visible.

This can occur if a state changes from - HIDDEN to FULLY_VISIBLE - VISIBLE to FULLY_VISIBLE

As all listeners, it can be removed with the returned RemoveListenerCallback function of the method registering it.

Parameters:

Name	Type	Description
vismon	VisSense.VisMon	A reference to the monitor.

OnHiddenCallback(vismon)

This callback function will be called everytime the visibility states changes and the element becomes hidden.

This can occur if a state changes from - FULLY_VISIBLE to HIDDEN - VISIBLE to HIDDEN

As all listeners, it can be removed with the returned RemoveListenerCallback function of the method registering it.

Parameters:

Name	Type	Description
vismon	VisSense.VisMon	A reference to the monitor.

OnPercentageChangeCallback(newValue, oldValue, vismon)

This callback function will be called everytime the visibility percentage changes.

As all listeners, it can be removed with the returned RemoveListenerCallback function of the method registering it.

This callback will currently be provided with different parameters than the others. This is likely to change in future versions in favour of a uniform approach.

Parameters:

Name	Type	Description
newValue	number	The new visible percentage.
oldValue	number	The former visible percentage.
vismon	VisSense.VisMon	A reference to the monitor.

OnUpdateCallback(vismon)

This callback function will be called everytime the monitor updates its state.

As all listeners, it can be removed with the returned RemoveListenerCallback function of the method registering it.

Parameters:

Name	Type	Description
vismon	VisSense.VisMon	A reference to the monitor.

OnVisibleCallback(vismon)

This callback function will be called everytime the visibility states changes and the element becomes visible.

This can occur if a state changes from - HIDDEN to VISIBLE - HIDDEN to FULLY_VISIBLE

NOTE: This does not occur when changing from - FULLY_VISIBLE to VISIBLE

As all listeners, it can be removed with the returned RemoveListenerCallback function of the method registering it.

Parameters:

Name	Type	Description
vismon	VisSense.VisMon	A reference to the monitor.

RemoveListenerCallback(vismon)

This callback function will unregister a previously registered listener. It will be returned from any function registering a listener. Returns true if the listener was successfully unregistered, otherwise false.

Parameters:

Name	Type	Description
vismon	boolean	A reference to the monitor.

VisMonConfig

Type:

• Object

Properties:

Name	Type	Argument	Default	Description
strategy	VisSense.VisMon.Strategy | Array.<VisSense.VisMon.Strategy>	<optional>	[PollingStrategy,EventStrategy]	a strategy or array of strategies for observing the element.
start	function	<optional>		function to run when monitoring the element starts
stop	function	<optional>		function to run when monitoring the element stops
update	function	<optional>		function to run when elements update function is called
hidden	function	<optional>		function to run when element becomes hidden
visible	function	<optional>		function to run when element becomes visible
fullyvisible	function	<optional>		function to run when element becomes fully visible
percentagechange	function	<optional>		function to run when the percentage of the element changes
visibilitychange	function	<optional>		function to run when the visibility of the element changes
async	boolean	<optional>	false	a boolean flag indicating whether events are synchronous or asynchronous A configuration object to configure a VisMon instance.