# Introduction to addons

In the /lib/uix-addons directory, Foxit PDF SDK for Web provides a set of rich addons that can be freely combined. The following structure lists the currently supported addons. Each addon can be loaded individually or in combination as needed.

uix-addons
    ├─edit-graphics         ----- Edit page objects
    ├─text-object           ----- Edit text objects
    ├─export-form           ----- Export form
    ├─file-property         ----- File information
    ├─full-screen           ----- Full screen
    ├─h-continuous          ----- Horizontal continuous page mode
    ├─h-facing              ----- Horizontal facing mode for the cover
    ├─h-single              ----- Horizontal single page mode
    ├─import-form           ----- Import form
    ├─multi-media           ----- Multimedia comment
    ├─password-protect      ----- Password protection
    ├─path-objects          ----- Edit path objects
    ├─print                 ----- Print
    ├─redaction             ----- Redaction
    ├─undo-redo             ----- undo-redo
    └─allInOne.js           ----- All the add-ons collection

The following lists all available addons, and each addon can be got by the static method getName().

    'edit-graphics'
    'exportForm'
    'file-property'
    'full-screen'
    'h-continuous'
    'h-facing'
    'h-single'
    'importForm'
    'multi-media'
    'password-protect'
    'edit-pageobjects'
    'print'
    'redaction'
    'editTextObject'
    'undo-redo'

# Load Addons

# Load addons individually

You can load all aviable addons or a few specific addons individually.

Code Example:

<script src="path/to/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({...
    addons:[
        "path/to/customized-addon/addon.info.json",
        "path/to/lib/multi-media/addon.info.json",
        ...
    ],
    ...
    })
</script>

The file /examples/UIExtension/complete_webViewer/index.html also provides an example to show how load all addons individually.

# Load addons in combination

In the network environment, downloading too many addons would increase the HTTP requests. To minimize the number of HTTP requests, you may prefer loading all addons in a single file. We provide a script file allInOne.jswhich is a combination of all addons. Besides, you can use our merge addons tools to tailor addons.

# The addon's structure

# The entry file -- addon.info.json

The addon.info.json is the addon entry file, which includes the addon's library name, i18n sources and css files.

Example:

{
    "library": "ExampleUIXAddon",
    "i18n": {
        "ns": "example",
        "sources": {
            "en-US": "./locales/en-US.json",
            "zh-CN": "./locales/zh-CN.json"
        }
    },
    "css": [
        "./index.css"
    ]
}

# The "i18n" sources

This item is used to configure localization. "ns" specifies namespace. "sources" specifies files.

After configuration, you can use [i18n-namespace]:[i18n-key] to implement localization.

In the case below, i18n namespace is "example", "i18n-key" could be "toolbar.title", "dialog.title" or "buttons.addText"(Refer to zh-CN.json for details).

```sh
<h6>example:dialog.title</h6>
```

will be translated to

```sh
<h6>Dialog title</h6>
```
and

```sh
<h6>对话框标题 Dialog title</h6>
```

# The "css" field

This item specifies style sheets("index.css" is the output of style-loader). Currently only CSS is supported.

# The addon's script entry

Generally, an addon is a JavaScript class that contains 3 static methods:

static getName(){...} //Return addon's name.
static getLoader(){...} //Loader for addon.
static init(){...}  //Called after an addon is loaded. This would register some UI component.

and a member:

fragments(){...} //Customize UI such as toolbar, side panel.

# allInOne.js

The allInOne.js is a script file that contains all currently supported addons. It is provided for your convenience to load addons in a combination way. This file is only for PC. If you want it for mobile, you should rebuild it to cut out the feature editTextObject which is unavailable in mobile.

You have two methods to build a custom addons

# Load allInOne.js

<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({...
    addons:UIXAddons, // UIXAddons is the library name in allInOne.js
    ...
    })
</script>

# Loading custom addInOne.js

The default allInOne.js combines all currently supported addons into a single script. You can detach the unwanted addon by UIXAddons.filter and them load them to web viewer.

<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    UIXAddons = UIXAddons.filter(addon=>addon.getName()!= 'editTextObject')
    var pdfui = new UIExtension.PDFUI({...
    addons:UIXAddons,
    ...
    })
</script>

# Merge addons

If you want to merge addons by yourself or rebuild allInOne.js to merge your selected addons, you can use our merge addon tools addon loader and gulp pugin. Check out the links below for details.

You can also refer to /examples/UIExtension/use-merged-addon for usage.

# Develop custom addons

The /examples/UIExtension/scaffoldDemo/ is a scaffold project that contains an open source addon example. You may refer to the /examples/UIExtension/scaffoldDemo/readme.md file in that directory to start developing your own addons.