All of the menus and navigation in the Viewer are customizable.
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.
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).
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> |
|
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> |
|
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> |
|
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}
|
|
There are a few polyfills used to provide support for modern browser features:
