Operations for managing page

PageManager

Instance Methods

pages.list()

Return array of all page ids

pages.getCurrentPageId()

Returns id of current page

pages.isEnabled(pageId)

Return true if page is enabled or missing, false if disabled.

pages.enable(pageId)

Enable page

pages.disable(pageId)

Disable page

pages.clearBubbles([keep])

Clear bubbles on page, keeping that last 'keep' bubbles. If keep isn't supplied, all bubbles will be cleared.

pages.hideBubbles([boolean])

Get or set the current hideBubbles setting.

If set, bubbles will not be displayed.

pages.skipNextBubbleClear([boolean])

Get or set the current skipNextBubbleClear setting.

If set, bubbles will not be cleared next time the page change and skipNextBubbleClear will then be un-set.

pages.getImage()

Get the current image object

pages.setImage(locator, [onLoad], [onError])

Sets the current image using the supplied image locator

NOTE: Images loaded directly via setImage, and not via an EOS Image Action, are not automatically pre-loaded on page preload. You would need to use pages.preloadImage at some previous point to preload the image.

• locator Required String locator or Array of locators
• onLoad Optional Function. Called after image has loaded
• onError Optional Function. Called if image load failed

Example:

pages.setImage('file:mypicture.jpg')
// or
pages.setImage('gallery:735c4bbe-f318-4993-809a-a71f258f3678/1104256')
// or
pages.setImage('https://i.ibb.co/Rh1zcyX/a45c0233f7377c0a1a069db739957d55.gif')
// or
pages.setImage(['https://i.ibb.co/Rh1zcyX/a45c0233f7377c0a1a069db739957d55.gif','file:mypicture.jpg'])
// or
pages.setImage('https://i.ibb.co/Rh1zcyX/a45c0233f7377c0a1a069db739957d55.gif', function(e) {
  console.log('My image:' + e.value.href + ' loaded at:', e.timeStamp)
})

pages.restartImage([onLoad], [onError])

Restarts the current image. Can be used to restart animated gifs.

• onLoad Optional Function. Called after image has restarted
• onError Optional Function. Called if image restart failed

pages.hideImage([boolen])

Get or set the current hideImage setting.

If set, image will not be displayed.

pages.addOnNextPageChange(function)

Adds a function that will be called only one time the next time the page changes.

pages.removeOnNextPageChange(function)

Removes a function that would have been called next time the page changes.

pages.addOnNextImage(function)

Adds a function that will be called only one time next time the image changes

pages.removeOnNextImage(function)

Removes a function that would have been called next time the image changes.

pages.fullHeightImage([boolean])

Get or set the current fullHeightImage setting.

If set, image will be expanded to full height of the page. If there are bubbles, they will display over the image.

pages.preload(target)

Preloads page with the given target

pages.preloadImage(locator, [onLoad], [onError])

Preloads an image using the given locator

pages.oeosVersion([version])

Returns the current version, or -1, 0 or 1 if supplied version is less than, equal to, or greater than current version.

The Dynamic Censor Demo has an example of how to use this feature in its start page.

pages.cssVar(name, [value])

Gets or sets allowed css variables to control tease layout

Allowed cssVars and their default values:

• '--bubble-area-top': '0', // Top of bubble area when no image is displayed
• '--bubble-area-image-top': '70%', // Top of bubble area, and height of non-full-height image, when image is displayed
• '--bubble-area-left': '0',
• '--bubble-area-right': '0',
• '--bubble-area-bottom': '0',
• '--notifications-top': 'auto',
• '--notifications-left': 'auto',
• '--notifications-right': '10px', // Position of notification area, from right
• '--notifications-bottom': '30%', // Position of notification area, from bottom

pages.barColor([htmlColor])

Gets or sets the color of the top navigation bar of the page

pages.bgLockColor([htmlColor|falsy])

Gets or sets or clears the color the page background should be locked to.

If set, background color will not change when image changes.

pages.bgColor([htmlColor])

Gets or sets the color the page background.

Will change to calculated bgcolor on next image change.

pages.goto(target)

Loads the target page

pages.end()

Ends the current tease

pages.setEndDialogTitle(title)

Sets the title text for the tease end dialog. Default title is "Thanks for playing!"

pages.addEventListener(type, function)

Adds a pages event listener of given type

pages.removeEventListener(type, function)

Removes a pages event listener of given type

Instance Events

change

This event is fired on every page change, before the new page has executed, and before images on the new page have pre-loaded and/or displayed.

To register a page change event listener:

function doThisOnEveryPageChange(e) {
  console.log('Page changed from ' + e.value.from + ' to ' + e.value.to ' at:', e.timeStamp)
}
pages.addEventListener('change', doThisOnEveryPageChange)

To remove a page change event listener:

pages.removeEventListener('change', doThisOnEveryPageChange)

visibilitychange

This event is fired when the browser tab/window displaying this tease loses or gains focus.

Can be used to pause / continue / restart audio, animations, etc.

To register a visibilitychange event listener:

function onVisibilityChange(e) {
  console.log('User has ' + (pages.visibilityState() === 'visible' ? 'returned to' : 'left') + ' the tease.')
}
pages.addEventListener('visibilitychange', onVisibilityChange)

To remove a visibilitychange event listener:

pages.removeEventListener('visibilitychange', onVisibilityChange)

click

This event is fired when a page is clicked.

To register a page click event listener:

// Define your function
function myClickHandler(e) {
  console.log('Page clicked;  x = ' + e.value.x + ', y = ' + e.value.y ' at:', e.timeStamp)
  if (x < 0.5) {
    // We're going to handle this click, because it's in a region we want
    // Don't allow anyone else to handle this click
    e.stopImmediatePropagation()
    // Do what we're going to do
    pages.goto('clicked-left-side')
  }
}
// Add your listener
pages.addEventListener('click', myClickHandler)

To remove a page click event listener:

pages.removeEventListener('click', myClickHandler)

image-click

This event is fired when the main page image is clicked.

To register an image-click event listener:

// Define your function
function myClickHandler(e) {
  console.log('Image clicked;  x = ' + e.value.x + ', y = ' + e.value.y ' at:', e.timeStamp)
  if (y > 0.5) {
    // We're going to handle this click, because it's in a region we want
    // Don't allow anyone else to handle this click
    e.stopImmediatePropagation()
    // Do what we're going to do
    pages.goto('clicked-bottom-half')
  }
}
// Add your listener
pages.addEventListener('image-click', myClickHandler)

To remove an image-click event listener:

pages.removeEventListener('image-click', myClickHandler)

image-load

This event is fired when the main page image is loaded.

To register an image-load event listener:

// Define your function
function myImageLoadHandler(e) {
  console.log('My image:' + e.value.href + ' loaded at:', e.timeStamp)
}
// Add your listener
pages.addEventListener('image-load', myImageLoadHandler)

To remove an image-load event listener:

pages.removeEventListener('image-load', myImageLoadHandler)

image-error

This event is fired when the main page image encounters an error while loading.

To register an image-error event listener:

// Define your function
function myImageErrorHandler(e) {
  console.error('My image:' + e.value.href + ' failed loading at:', e.timeStamp)
}
// Add your listener
pages.addEventListener('image-error', myImageErrorHandler)

To remove an image-error event listener:

pages.removeEventListener('image-error', myImageErrorHandler)