PrizmDoc v12.2 - March 9, 2017
Modifying viewer.js
| Working with PrizmDoc > Developer Guide > Customizing the Viewing Client > Modifying viewer.js |
To facilitate open customization of the Viewing Client, this file is left unminified and unobfuscated. This file controls the behavior of the user interface, allowing you to bind custom button behavior or to completely re-implement the user experience to match any business need. This file utilizes the public ViewerControl API to allow complete interaction with the underlying Page List document control. To find out more about this, consult the ViewerControl API section.
This file will be updated with future releases of the product, introducing new features and enhancing the current behavior, when necessary. When editing or re-implementing this file, a clear upgrade path should be established in order to be able to take full advantage of future releases of the product.
The file is split up into several logical sections, in order to make modifying the file easier. They are as follows, in order:
The Viewing Client Template is inserted into the specified Viewing Client element, and then individual components are parsed out using jQuery. For convenience, all jQuery-wrapped elements are places in a variable starting with the $ character. For example, the pan tool button element is named $panTool, indicating that the object has the full jQuery API available. This naming is maintained throughout the file.
After the DOM elements are parsed out, behavior is bound to them inside a single initialization function, named bindMarkup. The content of the short initialization function can be seen right above, in initializeViewer. All DOM behavior, such as click and input events, are bound to the DOM here using the jQuery API.
Following are some auxiliary functions, which provide useful and reusable abstractions and wrappers for the ViewerControl API. An example of this is the setMouseTool function, allowing any part of the file to set the mouse tool through the ViewerControl API and update all necessary DOM elements accordingly. Other functions include handling toggle elements, displaying notifications in the Viewing Client, handling context menu and dialog behavior, and various others.
Next are all of the event handler functions. These are written in separate functions in order to allow easy subscribe and unsubscribe handling. These include events that are currently handled in the Viewing Client. For a list of all available events, consult the EventType section of the ViewerControl API.
Directly following the event handler, the main Page List viewer control is initialized, and the necessary events are subscribed. Initializing the main control requires only the $pageList DOM element, and the original options object passed into the Viewing Client and jQuery plugin. For more specifics on initializing the Viewer control, consult the ViewerControl API.
 |
The DOM element passed into the Viewer control constructor should be a plain DOM element, and not the jQuery variable. This is why $pageList.get(0) is used in the code. |
Next are two sections that have been abstracted in a module format. The first handles the search navigation UI, and the second handles retrieving, opening, and saving annotations. These modules are self-contained, as much as possible, to allow easy removal of these large parts of code if you are not interested in that specific functionality.
This is the first part of code being executed, and is a simple jQuery wrapper, providing convenience for the Viewing Client. It will create a new instance of the Viewing Client, and can also provide the ViewerControl instance associated to a Viewing Client in a particular DOM element. Fore more information on this plugin, consult the jQuery Plugin section of the ViewerControl API.