Reorganize Menus

All of the menus and navigation in the Viewer are 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

If you wish 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 (e.g., 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, see 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>

Removing Elements

To remove buttons from the menu, you can remove the markup, comment out the markup, or add a CSS class to the element.

Example	Copy Code
<!-- This button is no longer visible <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button> --> <!-- This element is hidden because of a pcc-hide class --> <div data-pcc-rotate class="customClass pcc-hide"></div>

Example

Copy Code

<!-- This button is no longer visible
    <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button>
-->

<!-- This element is hidden because of a pcc-hide class -->
<div data-pcc-rotate class="customClass pcc-hide"></div>

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

Customizing CSS

It is recommended to create your own CSS file and add it to the bottom of the cascade. This would be after normalize.min.css, viewer.css, viewercontrol.css, and legacy.css. All selectors in viewer.css have a parent of .pccv, in order to override the .pccv parent should be in the selector:

Example	Copy Code
/* Set the navigation tab bar to dark red */ .pccv .pcc-nav-tabset, .pccv .pcc-nav-tabset .pcc-tab-item, .pccv .pcc-status-bar {background:#5b100d}

CSS Polyfills

There are a few polyfills used to provide support for modern browser features:

Normalize (http://necolas.github.io/normalize.css/) - Normalize provides better cross-browser consistency in the default styling of HTML elements.