All of the markup in the Viewer is customizable.

Templates

You can change the markup of the Viewer UI components by editing the templates. The templates are HTML files ending in *.Template.html. The primary navigation tabs and menus are located in viewerTemplate.html.

Adding/Removing Template Files

To create your own version of the Viewer template you will need to update the template name where it is being loaded in viewer.js. For instance, if you copy viewerTemplate.html to a new file called customTemplate.html you would change:

element.html(_.template(options.template.viewer, ...

To:

element.html(_.template(options.template.custom, ...

Template Syntax

The templates are consumed using the Underscore.js Template utility function. Variables and JavaScript conditions can be used within the templates using ERB syntax. For more information, refer to the Underscore documentation at http://underscorejs.org/#template.

<!-- An example of a variable -->
<button data-pcc-rotate class="pcc-icon pcc-icon-rotate"
     title="<%= rotate %>"></button>

Custom Attributes

Throughout the templates, on many elements, there are data attributes starting with data-pcc-. These are used to identify elements and bind them to functionality defined in viewer.js:

<!-- This button will rotate the current page when clicked -->
<button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button>

<!-- Other elements can perform the same function -->
<div data-pcc-rotate class="customClass"></div>

Using the above example, this attribute is used as a selector for a $rotatePage jquery object in viewer.js:

this.viewerNodes = {
        $rotatePage: viewer.$dom.find("[data-pcc-rotate]") ...

This attribute is then bound to a click event which rotates the current page:

// Rotate Page button
viewer.viewerNodes.$rotatePage.on('click', function () {
    viewer.viewerControl.rotatePage(90);
});

Mouse Tools

The named mouse tools, like this one, are provided by viewercontrol.js:

<button
    data-pcc-mouse-tool="AccusoftSelectToZoom"
    class="pcc-icon pcc-icon-rectanglezoomtool"></button>

Using a Custom Mouse Tool in the Viewer UI

A named mouse tool can be used in the default UI of the Viewer. This allows one or more tools to be pre-configured. Setting the data-pcc-mouse-tool attribute to false will prevent the context menu from opening if the mouse tool is an annotation or redaction.

Enabling a custom tool in the Viewer UI requires modification of the viewerTemplate.html, as shown in the example below:

<!-- The following markup will create a button that enables use
     of the mouse tool named "MyLineTool". -->
<button
    data-pcc-mouse-tool="MyLineTool"
    data-pcc-context-menu="false"
    class="pcc-icon pcc-icon-annotate-line"
    title="My Line Tool"></button>