Customization

​

UI Customization

UI customization is useful for both branding the MuPDF WebViewer as well as adding or removing features.

​

Visual Customization

The following visual customization is possible:

​

Set Primary and Secondary colors

This sets the primary and secondary colors - these reflect the button & text colors when these items are selected.

See: viewer.setColor().

​

Set Background Color

Sets the background color behind the document page.

See viewer.setBackgroundColor().

​

Set Page Border Color

Sets the page border color.

See viewer.setPageBorderColor().

​

Set Theme

Sets the theme for light, dark or system mode.

See viewer.setTheme().

​

Set Logo

Allows to set a logo in the top header area.

See viewer.setLogo().

​

Functional Customization

Sometimes you may want to alter the functionality of the MuPDF WebViewer User Interface by showing or hiding elements or by editing components.

The available customizations are possible:

​

Display/Hide UI

You can display/hide the UI elements using the viewer.setViewVisibility() function.

For example, if you want to hide the toolbar, you can do the following:

mupdf.viewer.setViewVisibility({
  view: mupdf.refs.visibility.view.TOOLBAR,
  visibility: false,
});

​

Add Buttons to Toolbar

You can add buttons to the toolbar using the viewer.addButton() function.

For example, if you want to add a button to the toolbar to enter fullscreen, you can do the following:

mupdf.viewer.addButton({
  buttons: [
    {
      position: 'TOOLBAR.LEFT_SECTION.FIRST',
      icon: mupdf.refs.icon.ENTER_FULLSCREEN,
      label: 'Enter fullscreen',
      onclick: () => {
        document.body.requestFullscreen();
      },
    },
  ],
});

​

Add Context Menu

You can add items to the context menu (the pop-up menu you see when you right click on a document in MuPDF WebViewer) using the viewer.addContextMenu() function.

For example, if you want to add an item to rotate the page clockwise, you can do the following:

mupdf.viewer.addContextMenu({
  menus: [
    {
      type: 'MENU',
      position: 'FIRST',
      icon: mupdf.refs.icon.ROTATE_CLOCKWISE,
      label: 'Rotate Clockwise',
      onclick: () => {
        mupdf.viewer.rotateClockwise();
      },
    },
  ],
});

​

Define Document Panel

You can define the document panel using the viewer.defineDocumentPanel() function.

For example, if you want to define the document panel to show the bookmark panel as “Table of Contents” and the annotation panel as “Markups” then you can do the following:

mupdf.viewer.defineDocumentPanel({
    items: [
        {
        label: 'Table of Contents',
        icon: mupdf.refs.icon.BOOKMARK,
        onclick: () => {
            mupdf.viewer.togglePanel({
            type: mupdf.refs.panel.open.BOOKMARK,
            });
        },
        },
        {
        label: 'Markups',
        icon: mupdf.refs.icon.PENCIL,
        onclick: () => {
            mupdf.viewer.togglePanel({
            type: mupdf.refs.panel.open.ANNOTATION,
            });
        },
        },
    ],
});

​

Define Annotation Selection Menu

You can define the annotation selection menu using viewer.defineAnnotSelectMenu() function.

For example, if you want to define the annotation selection menu when selecting a highlight annotation, you can do something like the following:

let html = `<div id='my-container'>
<p>Testing custom HTML & CSS for Highlight tool</p>
<button onclick='helloWorld()'>Press me!</button>
</div>`;

let css = `#my-container 
{
width:200px;
height:200px;
background-color: #FF00ff;
color:#000;
font-size:12px;
margin:10px;
}`;

let js = `function helloWorld()
{
let myObj = document.getElementById('my-container');
myObj.innerHTML='Hello World!'
}`;

mupdf.viewer.defineAnnotSelectMenu({html:html,
                                    style:css,
                                    script:js,
                                    tool:mupdf.refs.annotation.tool.HIGHLIGHT})