Customize the Markup

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:

Example	Copy Code
element.html(_.template(options.template.viewer, ...

To:

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

Example	Copy Code
<!-- 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:

Example	Copy Code
<!-- 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>

Example

Copy Code

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

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

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

Example	Copy Code
// 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	Copy Code
<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:

Example	Copy Code
<!-- 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>

Example

Copy Code

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