iDetailAid Viewer Events

The iDetailAid Viewer exposes a number of events so that developers can use JavaScript to create interactions based on what is happening within the content.

The following events are available. Click on the category name for more info

Category	Available Events
Presentation	presentationLoaded
Slide Lifecycle	slideLoaded slideEnter slideShown slideMove slideMoved slideExit slideUnload virtualSlideShown virtualSlideExit
Overlay	overlayOpen overlayOpened overlayClose overlayClosed``slideUnload
Navigation	goBack goUp goDown goLeft goRight
Asset	openAsset
URL	urlOpen
Reference	referenceOpen
Video	videoPlay videoPause videoEnded
Interaction	tap doubleTap singleTap

Listening for Events

There are various ways to listen for the events, either in the Slide Code Editor, the Presentation Code Editor, or in Javascript contained in side an HTML package. For more information see Inline code editor and HTML packages

Slide Code Editor

The slide code editor exposes a variable called $slide which is a jQuery reference to the slide you are in. Use this to listen for the events:

$slide.on('slideShown', (e) => {
    console.log( e.detail.slide.title, 'has loaded')
})

Warning

It is recommended that you do not use $(document).on to listen for events in the slide editor. The Viewer pre-loads and caches slides before they are scrolled into view, so $(document).on('slideLoaded' could potentially fire 4 times, once for each slide that has been loaded.

Presentation Code Editor

The presentation code editor exposes a variable called $presentation which is a jQuery reference to the whole presentation.

This is useful for writing presentation-wide code, rather than repeating it across slides, for example:

$presentation.on('presentationLoaded', (e) => {
    Viewer.api.setArrows({left:false, right:false});
})

$presentation.on('slideShown', (e) => {
    console.log( e.detail.slide.title, 'has loaded')
})

Warning

The bulk of the Viewer API commands run in the Presentation Code Editor will require the presentation to be loaded before they have an affect.

Ensure you wrap your commands in the presentationLoaded event.

$presentation.on('presentationLoaded', () => {
  Viewer.api.setArrows({left:false, right:false});
})

HTML packages

A user built HTML package will not contain jQuery unless you package it yourself, so there is no exposed jQuery data. HTML packages are loaded into iFrames inside the Viewer, and thus all Viewer events are proxied into the iFrame and triggered on the iFrame's document object.

Native

window.addEventListener('load', () => {  
  document.addEventListener('slideLoaded', (e) => {
    console.log("custom HTML package has received slideLoaded event from slide " + e.detail.slide.title);
  });
});

jQuery

$(() => {
  $(document).on('slideLoaded', e => {
    console.log("custom HTML package has received slideLoaded event from slide " + e.detail.slide.title);
  })
});

Tip

Wait for the window load event before registering for iDetailAid Viewer events

The iDetailAid Viewer Event object

The iDetailAid event object has a detail property that contains specific information on the relevant event.

All event.detail objects have the following common properties:

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to

Info

the element property will be null when recived inside an HTML pacakge as the DOM element reference cannot be passed between the Viewer and the <iFrame/>

In addition to the above fields, each event may add additional information, such as a destination property for navigational events.

Below is a full list of the iDetailAid Viewer events and their event.detail properties.

Presentation Events

Event name	Description
presentationLoaded	The presentation structure has loaded, but no slides have yet been loaded into View.

Warning

The bulk of the Viewer API commands run in the Presentation Code Editor will require the presentation to be loaded before they have an affect.

Ensure you wrap your commands in the presentationLoaded event.

$presentation.on('presentationLoaded', () => {
  Viewer.api.setArrows({left:false, right:false});
})

Slide Lifecycle Events

Event name	Description
slideLoaded	The slide HTML has been loaded into the viewer, but not yet in view.
slideEnter	The slide is entering into view (if the user is dragging, this won't trigger until they release)
slideShown	The slide is now completely in view
slideMove	The slide is moving - this could be up, down, left, right, and it may never come fully in to view
slideMoved	The slide has stopped moving - it may not be in view.
slideExit	The slide is leaving the main view
slideUnload	The slide is out of view and is about to be removed

Slide event.detail properties

Each slide event contains the following properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to

slideExit contains additional event data which contains the duration for which it was viewed.

Property	Type	Description
duration	int	length of time the slide was open for in milliseconds

Overlay Events

Event name	Description
overlayOpen	An overlay is opening
overlayOpened	An overlay has opened
overlayClose	An overlay is closing
overlayClosed	An overlay has closed

Overlay event.detail properties

Each overlay event contains the following properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to
overlay	object	The overlay that triggered the event

In addition, overlayClose and overlayClosed have a duration property

Property	Type	Description
duration	int	length of time the overlay was open for in milliseconds

Navigation Events

Event name	Description
goBack	The user has triggered a go back action
goUp	The user has triggered a go up action
goDown	The user has triggered a go down action
goLeft	The user has triggered a go left action
goRight	The user has triggered a go right action

Navigation event.detail properties

Each navigation event contains the following properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to
destination	object	Information on the navigation destination

Asset Events

Event name	Description
openAsset	An asset has been opened from the slide

Asset event.detail properties

Each asset event contains the following properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to
asset	object	The asset that was opened

URL Events

Event name	Description
urlOpen	The user has triggered a url open action

URL event.detail properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to
url	string	The URL that is being opened

Reference Events

Event name	Description
referenceOpen	A reference has been opened

Reference event.detail properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to
reference	object	The Reference that was opened

Video Events

Event name	Description
videoPlay	The video has started playing
videoPause	The video has paused
videoEnded	The video has reached the end of playback

Video event.detail properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to
video	object	The video that triggered the event

Interaction Events

Event name	Description
tap	User has tapped / clicked on the presentation
doubleTap	User has double tapped / clicked on the presentation
singleTap	User has single tapped / clicked on the presentation

Interaction event.detail properties

Property	Type	Description
company	Object	The company that the current slide / presentation is assigned to
product	Object	The product that the current slide / presentation is assigned to
presentation	Object	The presentation that the current slide is in
slide	Object	The current slide
timestamp	int	The time the event occurred (unix epoch in milliseconds)
element	DOMElement	The DOM element that the event relates to

Event detail Objects

The possible objects that might be part of event.detail are listed below

event.detail.company

Property	Type	Description
id	int	iDetailAid id of the company
name	string	The name of the company

event.detail.product

Property	Type	Description
id	int	iDetailAid id of the product
name	string	The name of the product

event.detail.presentation

Property	Type	Description
id	int	iDetailAid id of the presentation
title	string	The title of the presentation
country_code	string	The 2 character iDetailAid country code in which the presentation exists
hidden	boolean	whether a presentation is marked as hidden or not

event.detail.slide

Property	Type	Description
id	int	iDetailAid id of the slide
title	string	The title of the slide
fileURL	string	The name of slide HTML file
image	string	The name of slide preview image file
reference_ids	int[]	An array of iDetailAid reference ids in use in this slide

event.detail.overlay

Property	Type	Description
id	string	The iDetailAid GUID of the overlay
title	string	The title of the overlay
number	int	The index of the overlay in the slide
style	string	The css class name of the overlay style

event.detail.asset

Property	Type	Description
id	int	iDetailAid id of the asset
file	string	The file name of the asset
type	string	the iDetailAid asset type

event.detail.reference

Property	Type	Description
id	int	iDetailAid id of the reference
file	string	The file name of the reference
type	string	the ida asset type
citation	string	citation text for the reference
number	int	The display number for the reference
asset_id	int	The iDetailAid asset id of the reference (if file)
file	string	The filename of the reference asset (if file)
url	string	url of the reference (if URL)

event.detail.video

Property	Type	Description
id	int	iDetailAid id of the video (null if a video is not managed by iDetailAid)
idaManaged	boolean	indicates if the video is managed by iDetailAid or not (videos contained in HTML5 packages are not)
file	string	The file name of the video
src	string	The full url of the video
type	string	the mime type of the video
data	object	Any HTML5 data attributes set on the video tag

event.detail.destination

Property	Type	Description
slide	object	The destination slide of the navigation