Introduction

All of the markup in the Viewer is customizable. This topic covers how to customize using the templates, custom attributes, and the mouse tools.

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 the viewerTemplate.html file.

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 example, if you copy viewerTemplate.html to a new file called customTemplate.html you would change:

Example

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

To:

Example

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

Currently, in the samples "Template" is removed from the name of the template property in the template object. For example, viewerTemplate.html becomes template.viewer.

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: http://underscorejs.org/#template.

Example

<!-- 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 the viewer.js file:

Example

<!-- 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 example above, this attribute is used as a selector for a $rotatePage jquery object in viewer.js:

Example

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

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

Example

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

Example

<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 file, as shown in the example below:

Example

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