Foxit Developer

Paddle component ​

When the toolbar is wider than the screen, controls can be clipped. The paddle component shows buttons at both ends of the toolbar so users can scroll horizontally to reach hidden items.

The arrows are paddle buttons:

paddle_btn.jpg

Code example ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <toolbar>
                <paddle>
                    <div class="flex-div">
                        <hand-button></hand-button>
                        <selection-button></selection-button>
                        <zoom-dropdown></zoom-dropdown>
                        <create-note-button></create-note-button>
                        <create-text-highlight-button></create-text-highlight-button>
                        <create-strikeout-button></create-strikeout-button>
                        <create-underline-button></create-underline-button>
                        <create-squiggly-button></create-squiggly-button>
                        <create-replace-button></create-replace-button>
                        <create-caret-button></create-caret-button>
                        <create-typewriter-button></create-typewriter-button>
                        <create-callout-button></create-callout-button>
                        <create-textbox-button></create-textbox-button>
                        <create-drawings-dropdown></create-drawings-dropdown>
                        <create-area-highlight-button></create-area-highlight-button>
                        <create-pencil-button></create-pencil-button>
                        <eraser-button></eraser-button>
                        <stamp-dropdown></stamp-dropdown>
                        <create-measure-dropdown></create-measure-dropdown>
                        <create-attachment-button></create-attachment-button>
                        <create-image-button></create-image-button>
                        <create-link-button></create-link-button>
                    </div>
                </paddle>
            </toolbar>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .flex-div {
        display: flex;
    }
    .fv__ui-toolbar {
        border: 1px solid #ddd;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>

The paddle exclude-devices attribute hides the scroll buttons on given device types and lets users swipe horizontally on touch screens.

html
<html>
    <template id="layout-template">
        <webpdf>
            <toolbar>
                <!-- exclude all tablet devices -->
                <paddle exclude-devices="tablet">
                    <div class="flex-div">
                        <hand-button></hand-button>
                        <selection-button></selection-button>
                        <zoom-dropdown></zoom-dropdown>
                        <create-note-button></create-note-button>
                        <create-text-highlight-button></create-text-highlight-button>
                        <create-strikeout-button></create-strikeout-button>
                        <create-underline-button></create-underline-button>
                        <create-squiggly-button></create-squiggly-button>
                        <create-replace-button></create-replace-button>
                        <create-caret-button></create-caret-button>
                        <create-typewriter-button></create-typewriter-button>
                        <create-callout-button></create-callout-button>
                        <create-textbox-button></create-textbox-button>
                        <create-drawings-dropdown></create-drawings-dropdown>
                        <create-area-highlight-button></create-area-highlight-button>
                        <create-pencil-button></create-pencil-button>
                        <eraser-button></eraser-button>
                        <stamp-dropdown></stamp-dropdown>
                        <create-measure-dropdown></create-measure-dropdown>
                        <create-attachment-button></create-attachment-button>
                        <create-image-button></create-image-button>
                        <create-link-button></create-link-button>
                    </div>
                </paddle>
            </toolbar>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .flex-div {
        display: flex;
    }
    .fv__ui-toolbar {
        border: 1px solid #ddd;
    }
    /* use native scrollbar in tablet device  */
    .fv__ui-tablet .fv__ui-toolbar {
        overflow-y: auto;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>

Supported device values:

mac, ios, iphone, ipad, ipod, android, webos, kindle, tablet, mobile, desktop, xiaomi, huawei, touch.

By default, repeated clicks on a paddle button scroll to the start or end of the toolbar. When the toolbar is about twice the screen width, middle items may never appear. Set a step on the paddle to scroll in smaller increments.

html
<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <paddle step="200">
                <div class="flex-div">
                    <hand-button></hand-button>
                    <selection-button></selection-button>
                    <zoom-dropdown></zoom-dropdown>
                    <create-note-button></create-note-button>
                    <create-text-highlight-button></create-text-highlight-button>
                    <create-strikeout-button></create-strikeout-button>
                    <create-underline-button></create-underline-button>
                    <create-squiggly-button></create-squiggly-button>
                    <create-replace-button></create-replace-button>
                    <create-caret-button></create-caret-button>
                    <create-typewriter-button></create-typewriter-button>
                    <create-callout-button></create-callout-button>
                    <create-textbox-button></create-textbox-button>
                    <create-drawings-dropdown></create-drawings-dropdown>
                    <create-area-highlight-button></create-area-highlight-button>
                    <create-pencil-button></create-pencil-button>
                    <eraser-button></eraser-button>
                    <stamp-dropdown></stamp-dropdown>
                    <create-measure-dropdown></create-measure-dropdown>
                    <create-attachment-button></create-attachment-button>
                    <create-image-button></create-image-button>
                    <create-link-button></create-link-button>
                </div>
            </paddle>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .flex-div {
        display: flex;
    }

    .fv__ui-toolbar {
        border: 1px solid #ddd;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>