Skip to content

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
Slide Lifecycle slideLoaded slideEnter slideShown slideMove slideMoved slideExit slideUnload
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 two ways to listen for the events, either in the Slide 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 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.

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.

window.addEventListener('load', () => {  
  document.addEventListener('slideLoaded', (e) => {
    console.log("custom HTML package has received slideLoaded event from slide " + e.detail.slide.title);
  });
});
$(() => {
  $(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.

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
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

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