Skip to main content

Methods

Initialization Example:
// create the FSI Pages Element and set parameters
const instance = document.createElement("fsi-pages")
instance.setAttribute("id", 'myPages')
instance.setAttribute("dir", "images/samples/catalogue/")
instance.setAttribute("skin", "white")
instance.setAttribute("pageLayout", "flip")
instance.setAttribute("listTemplate", "image_list")
instance.setAttribute("plugins", "resize,fullScreen, bookmarks")
instance.setAttribute("debug", true)
instance.style.width = '600px'
instance.style.height = '400px'
document.body.appendChild(instance)

// start Pages instance
instance.start()

// example method toggling the page index
setTimeout(() => {
  instance.togglePageIndex()
}, 500)

// example listener which is called when a bookmark is added
const success = instance.addListener('onBookmarkAdded', (page) => {
  console.log('Bookmark to page #', page, 'added.')
})

addListener​

const success = addListener(listenerName, fn, iScope)
Calls a specific listener. Listeners which are added via addListener(), remain valid when changeConfig() is called.
listenerName
string
Name of listener
fn
string
Name of function executed when listener is called
iScope
string
The scope of variables in which the callback function is called. This determines what the variable `this` means within the specified callback function. If iScope is not passed, iScope will be the instance of the viewer to which the listener has been added.
RETURN
boolean
Returns `true` if successful.
const success = instance.addListener('onPageChanged',
  (page, pageStr, maxPage) => {
  // code
})
Example

Consult Callbacks for an overview of all available listeners.

changeConfig​

changeConfig(cfgFileName, [parameters])
Reset the viewer object and change the configuration to the given configuration file.
cfgFileName
string
path to the configuration file (see cfg parameter)
parameters
object
Optional: object with start parameters. (the same parameters as in configuration files can be used)
RETURN
void
This function does not return a value.
instance.changeConfig('viewer_presets/no_user_interface.xml')
Example

clickMenuButton​

clickMenuButton(buttonID)
Sets the corresponding menu button to active.
buttonID
string
The button ID that needs to be activated.
RETURN
void
This function does not return a value.

See Overview of button IDs for FSI Pages for a list of all available IDs.

instance.clickMenuButton('ToggleFullScreen')
Example

debugEnabled​

const success = debugEnabled()
Returns if the debug mode is enabled
RETURN
boolean
`true` = debug mode enabled, `false` = disabled
const success = instance.debugEnabled()
Example

debugError​

debugError()
Returns the corresponding viewer error messages in the console.
RETURN
mixed
error message
instance.debugError()
Example

debugLog​

debugLog()
Returns the corresponding viewer debug log messages in the console.
RETURN
mixed
log message
instance.debugLog()
Example

debugWarn​

debugWarn()
Returns the corresponding viewer debug warn messages in the console.
RETURN
mixed
warning messages
instance.debugWarn()
Example

destroy​

destroy()
Destroys the given FSI Pages object.
RETURN
void
This function does not return a value.

instance.destroy()
Example

dumpListeners​

dumpListeners()
Lists all listeners in the console and how often they were called.
RETURN
void
This function does not return a value.
instance.dumpListeners()
Example

firstPage​

firstPage()
Goes to first page.
RETURN
void
This function does not return a value.
instance.firstPage()
Example

getBuild​

const version = getBuild()
Returns a string containing the FSI Pages software build number.
RETURN
string
software build number
const version = instance.getBuild()
Example

getConfigBoolean​

const result = getConfigBoolean(paramName, default)
Returns the currently configured value of the requested boolean parameter.
paramName
string
Parameter name
default
boolean
returned if nothing is set by the config
RETURN
boolean
Returns result
const result = instance.getConfigBoolean('blankBackCover', default)
Example

getConfigFloat​

const result = getConfigFloat(paramName, default)
Returns the currently configured value of the requested float parameter.
paramName
string
Parameter name
default
boolean
returned if nothing is set by the config
RETURN
boolean
Returns result
const result = instance.getConfigFloat('dropShadowOpacity', default)
Example

getConfigInt​

const result = getConfigInt(paramName, default)
Returns the currently configured value of the requested integer parameter.
paramName
string
Parameter name
default
boolean
returned if nothing is set by the config
RETURN
boolean
Returns result
const result = instance.getConfigInt('thumbSize', default)
Example

getConfigString​

const result = getConfigString(paramName, default)
Returns the currently configured value of the requested string parameter.
paramName
string
Parameter name
default
boolean
returned if nothing is set by the config
RETURN
boolean
Returns result
const result = instance.getConfigString('pageLayout', default)
Example

getConfigValue​

const value = getConfigValue(name)
Returns the value of any configuration parameter addressed with `name`.
name
string
Any FSI Pages parameter, e.g. `dir` or `skin`
RETURN
mixed
Requested parameter value
const value = instance.getConfigValue('dir')
Example

getContentID​

const content = getContentID()
Returns a string containing the content ID.
RETURN
string
Returns content
const content = instance.getContentID()
Example

getContentID​

const page = getCurrentPageNumber()
Returns the current page number.
RETURN
string
Returns page number
const page = instance.getCurrentPageNumber()
Example

getInitDone​

const success = getInitDone()
Returns if the initialization process is done.
RETURN
boolean
`true` = initialization process completed
const success = instance.getInitDone()
Example

getInstanceID​

const getID = getInstanceID()
Returns the number of the viewer object.
RETURN
integer
Pages ID
const getID = instance.getInstanceID()
Example

getInstanceName​

const name = getInstanceName()
Returns the type of the viewer (e.g. FSI Pages) and the id attribute of the viewer object.
RETURN
string
Viewer ID attribute
const name = instance.getInstanceName()
Example

getMenuButtonPresent​

const success = getMenuButtonPresent(buttonID)
Shows if requested button ID is active.
buttonID
string
Button ID
RETURN
boolean
`true` = requested button is currently active

See Overview of button IDs for FSI Pages for a list of all available IDs.

This can be used to remove inactive buttons from the menu if you are using a custom skin.

Note

Method only delivers correct results after the callback onInitMenu is called.

const success = instance.getMenuButtonPresent('HotSpots')
Example

getPageContainerDim​

const dimension = getPageContainerDim()
Returns the Page container dimensions.
RETURN
object
Container dimension
const dimension = instance.getPageContainerDim()
Example

getPageLayoutData​

const layout = getPageLayoutData()
Returns page layout data.
RETURN
object
Layout data: properties: `bDoublePages` (boolean), `nImages` (integer), `intMaxPage` (integer), `intMinPage` (integer)
const layout = instance.getPageLayoutData()

// return example:
/*
{
    "nMinPage": 1,
    "nMaxPage": 14,
    "nImages": 14,
    "bDoublePages": true
}
*/
Example

getPageNumberString​

const page = getPageNumberString()
Returns the current page number as a string.
RETURN
string
Page number
const name = instance.getInstanceName()
Example

getParameters​

const param = getParameters()
Returns an object containing all parameters set via javascript or custom tag attributes.
RETURN
object
Object containing all parameters currently set
const param = instance.getParameters()

// return example:
/*
{
  blankbackcover: "true"
  debug: "true"
  dir: "images/samples/pages/travel"
  dropshadowopacity: "0.3"
  height: "450px"
  id: "myPages"
  listtemplate: "catalog_list"
  pagelayout: "flip"
  plugins: "resize,fullScreen,chapters"
  skin: "dark.css"
  style: "width: 100%; height: 450px;"
  width: "100%"
}
*/
Example

getPluginParameter​

const param = getPluginParameter(pluginName, parameterName, [defaultValue], [makeBoolean])
Returns the parameter defined for the given plugin.
pluginName
string
Name of the FSI Pages plugin
parameterName
string
Name of the plugin parameter
defaultValue
boolean
Optional: value that is returned if desired PluginParameter is undefined
makeBoolean
boolean
Optional: specifies that a set value is converted into a boolean value. (0, "0" and "false" are converted to boolean false). Otherwise, the value is returned as it was set as a parameter (e.g. as a string).
RETURN
mixed
Parameter value of plugin parameter
const param = instance.getPluginParameter('PagesThumbBar', 'pageNumbers')
Example

See Plugin Parameters for an overview of all available plugins for FSI Pages.

getSkinClassName​

const skin = getSkinClassName()
Returns the name of the current used skin class, e.g. fsi-skin-black
RETURN
string
Name of the currently used skin class
const skin = instance.getSkinClassName()
Example

getTargetPage​

const page = getTargetPage(page)
Return the nPage limited to minPage and maxPage.
page
integer
Page number
RETURN
integer
Returns the page number. If FSI Pages shows double pages, the value of the left page matching nPage will be returned.
const page = instance.getTargetPage(6)
Example

getVersion​

const version = getVersion()
Returns a string containing the FSI Pages software version number.
RETURN
string
Software version number
const version = instance.getVersion()
Example

gotoPage​

gotoPage(page, animate)
Moves to a certain page.
page
string
Page number
animate
integer
`false` = view should be displayed immediately, `true` = animated movement from current view to specified view
RETURN
void
This function does not return a value.
instance.gotoPage('10')
Example

gotoPageAndZoom​

gotoPageAndZoom(page, view)
Goes to a certain page and zooms in.
page
string
Page number
view
string
Image section shown as viewString
RETURN
void
This function does not return a value.
instance.gotoPageAndZoom(12,'0.26304,0.10011,0.94325,0.64111')
Example

gotoPageNumeric​

gotoPageNumeric(page, animate)
Moves to a certain page.
page
integer
Page number
animate
integer
`false` = view should be displayed immediately, `true` = animated movement from current view to specified view
RETURN
void
This function does not return a value.
instance.gotoPageNumeric(10)
Example

hideMenuToolTip​

hideMenuToolTip()
Shows or hides custom tooltips which are displayed on hover.
RETURN
void
This function does not return a value.
instance.hideMenuToolTip()
Example

init​

const success = init(id, options, debug)
Initialises the chosen viewer element.
id
string
FSI Pages Element ID
options
object
Object with start parameters. The same parameters as in configuration files can be used
debug
boolean
debug mode at initialization
RETURN
boolean
Returns `true` if the initialization succeeded.

This method is only needed if an FSI Pages has not been started automatically (default).

const success = instance.init('fsi-123', {
  skin: 'dark',
  pageLayout: 'flip',
  blankBackCover: true
}, true)
Example

lastPage​

lastPage()
Goes to last page.
RETURN
void
This function does not return a value.
instance.lastPage()
Example

makeBoolean​

const success = makeBoolean(value, [defaultValue])
Any value (int, float, string, boolean, undefined...) is converted to boolean value true/false.
value
string
Element
defaultValue
boolean
Optional: return value, if value === undefined.
RETURN
boolean
Returns `true` if successful.

Example: 0, "0", "false" and "FALSE" are converted to boolean false. Every number except 0, "1", "true" and "TRUE" are converted to boolean true.

const success = instance.makeBoolean('false')
Example

nextPage​

nextPage()
Goes to next page.
RETURN
void
This function does not return a value.
instance.nextPage()
Example

pressMenuButton​

pressMenuButton(buttonID)
Sets the menu button to pressed.
buttonID
string
Button ID
RETURN
void
This function does not return a value.

See Overview of button IDs for FSI Pages for a list of all available IDs.

instance.pressMenuButton('ToggleFullScreen')
Example

previousPage​

previousPage()
Goes to previous page.
RETURN
void
This function does not return a value.
instance.previousPage()
Example

printAPI​

printAPI()
Shows all API methods, listeners and button IDs in the console in alphabetical order.
RETURN
void
This function does not return a value.
instance.printAPI()
Example

registerExternalMenuButton​

registerExternalMenuButton(button, buttonID, [tip])
Registers an external menu button.
button
element
External button ID
buttonID
string
FSI Pages Button ID
tip
string
Optional: custom tool tip for button
RETURN
void
This function does not return a value.

See Overview of button IDs for FSI Pages for a list of all available IDs.

instance.registerExternalMenuButton('zoomIt', 'ZoomIn', 'It zooms!')
Example

registerExternalMenuButtonsFromContainer​

registerExternalMenuButtonsFromContainer(container)
Registers an external menu button from a specific container.
container
element
Container ID
RETURN
void
This function does not return a value.
instance.registerExternalMenuButtonsFromContainer('buttonContainer')
Example

releaseMenuButton​

releaseMenuButton(buttonID)
Releases the pressed menu button.
buttonID
string
Button ID
RETURN
void
This function does not return a value.

See Overview of button IDs for FSI Pages for a list of all available IDs.

instance.releaseMenuButton('ToggleFullScreen')
Example

removeListener​

const success = removeListener(listenerName, fn)
Removes a specific listener.
listenerName
string
Name of listener.
fn
string
Name of function executed when listener is called
RETURN
boolean
Returns `true` if successful.
const success = instance.removeListener('onMenuDestroy', yourFunction)
Example

searchForString​

const success = searchForString(keyWords)
Searches for a string with the given key words.
keyWords
string
Key words to search
RETURN
void
This function does not return a value.
const success = instance.searchForString('example key words')
Example

setFullScreenElement​

const success = setFullScreenElement(FSContainer)
Defines the FullScreen element.
FSContainer
element
Element ID
RETURN
boolean
Returns `true` if successful.
const success = instance.setFullScreenElement('buttonContainer')
Example

showAboutWindow​

showAboutWindow()
Shows the About window.
RETURN
void
This function does not return a value.
instance.showAboutWindow()
Example

showMenuToolTip​

showMenuToolTip(tip, src, x, y)
Shows custom tooltips that are handled like the general menu tool tips.
tip
string
HTML code of tooltip or ID in language.xml files
src
element
DOM element used to align tooltip, usually event.target
x
float
x offset for tooltip position
y
float
y offset for tooltip position
RETURN
void
This function does not return a value.
instance.showMenuToolTip('foo', btn, 0, 0)
Example

showSearchDialog​

const success = showSearchDialog(show)
Enlarges search dialog.
show
boolean
`true` = opens dialog
RETURN
boolean
Returns `true` if successful.
const success = instance.showSearchDialog(true)
Example

start​

start()
Starts the viewer. Mandatory for initialization.
RETURN
void
This function does not return a value.
instance.start()
Example

testAPIListenersStart​

testAPIListenersStart()
Starts the API test and shows all called listeners and the parameters which they return.
RETURN
void
This function does not return a value.
instance.testAPIListenersStart()
Example

testAPIListenersStop​

testAPIListenersStop()
Stops the API test.
RETURN
void
This function does not return a value.
instance.testAPIListenersStop()
Example

togglePageIndex​

togglePageIndex()
Toggles the page index.
RETURN
void
This function does not return a value.
instance.togglePageIndex()
Example

traceConfigValue​

const show = traceConfigValue(strName)
Traces a config value and enables you to see where (by parameter/attribute, in config files, the _default.xml, etc) a specific value is set.
name
string
Any FSI Pages parameter e.g. `dir` or `skin`
RETURN
mixed
Returns where parameter is set
const show = instance.traceConfigValue('skin')

//  return example:
/*
  Tracing parameter "skin"
  > [..]/_default.xml
  <Options>
  <Skin value="black"></Skin>

  > By Parameter/Attribute:
  dark.css

  > RESULT:
  skin = "dark.css"
*/
Example

unregisterExternalMenuButton​

const success = unregisterExternalMenuButton(button)
Unregisters an external menu button.
button
element
Button ID
RETURN
boolean
`true` = successfully unregistered
const success = instance.unregisterExternalMenuButton('zoomIt')
Example

unregisterExternalMenuButtonsFromContainer​

unregisterExternalMenuButtonsFromContainer(container)
Unregisters an external menu button from a specific container.
container
element
Container ID
RETURN
void
This function does not return a value.
instance.unregisterExternalMenuButtonsFromContainer('buttonContainer')
Example