File Link Center Panel

In this part of the tutorial we will be creating a new center panel module called uv-filelinkcenterpanel-module to display a link to download an unrecognised file.

Create the following file structure within the src/modules directory:

uv-filelinkcenterpanel-module
├── css
│   └── styles.less
└── FileLinkCenterPanel.ts

Copy the following code to src/uv-filelinkcenterpanel-module/FileLinkCenterPanel.ts:

import BaseCommands = require("../uv-shared-module/Commands");
import CenterPanel = require("../uv-shared-module/CenterPanel");

class FileLinkCenterPanel extends CenterPanel {

    $downloadLink: JQuery;

    constructor($element: JQuery) {
        super($element);
    }

    create(): void {

        this.setConfig('fileLinkCenterPanel');

        super.create();

        $.subscribe(BaseCommands.OPEN_MEDIA, (e, canvas) => {
            this.viewMedia(canvas);
        });

        this.$downloadLink = $('<a target="_blank"></a>');
        this.$content.append(this.$downloadLink);

        this.$title.text(this.provider.getTitle());
    }

    viewMedia(canvas) {
        this.$downloadLink.text(String.format(this.content.downloadLink, canvas.label));
        this.$downloadLink.attr('href', canvas.thumbnail);
    }

    resize() {
        super.resize();
    }
}

export = FileLinkCenterPanel;

Notice this line:

this.setConfig('fileLinkCenterPanel');

This is where your module is associated with its corresponding configuration file src/extensions/uv-default-extension/config/en-GB.json. Let's open that file and add the following code to the modules object above footerPanel:

"fileLinkCenterPanel": {
    "options": {

    }
},

Now open src/extensions/uv-default-extension/l10n/en-GB.json and add the following code to the modules object above footerPanel:

"fileLinkCenterPanel": {
    "content": {
        "downloadLink": "Click here to download {0}"
    }
},

Now run:

grunt

and refresh the application in your browser.

You will see that we now have an empty-looking application with a grey background for the header and a full screen button in the bottom right corner. The next step is to enable the FileLinkCenterPanel.

Open src/extensions/uv-default-extension/Extension.ts. Copy and paste the code below to replace all instances of CenterPanel with FileLinkCenterPanel:

import BaseExtension = require("../../modules/uv-shared-module/BaseExtension");
import BootStrapper = require("../../Bootstrapper");
import FileLinkCenterPanel = require("../../modules/uv-filelinkcenterpanel-module/FileLinkCenterPanel");
import FooterPanel = require("../../modules/uv-shared-module/FooterPanel");
import Shell = require("../../modules/uv-shared-module/Shell");

class Extension extends BaseExtension{

    centerPanel: FileLinkCenterPanel
    footerPanel: FooterPanel;

    constructor(bootstrapper: BootStrapper) {
        super(bootstrapper);
    }

    create(overrideDependencies?: any): void {
        super.create();
    }

    createModules(): void{
        this.centerPanel = new FileLinkCenterPanel(Shell.$centerPanel);
        this.footerPanel = new FooterPanel(Shell.$footerPanel);
    }
}

export = Extension;

Run:

grunt

and refresh your browser.

You will now see that the title of the manifest is being displayed with a download link underneath. Let's look at src/modules/uv-filelinkcenterpanel-module/FileLinkCenterPanel.ts to see what's happening.

Near the top of the file you can see where the download link is being initialised:

$downloadLink: JQuery;

This is typed as a JQuery object using the TypeScript notation.

The module subscribes to the BaseCommands.OPEN_MEDIA command here:

$.subscribe(BaseCommands.OPEN_MEDIA, (e, canvas) => {
     this.viewMedia(canvas);
});

This receives a canvas object which is then passed to the viewMedia method. This in turn formats the $downloadLink text to combine the src/extensions/uv-default-extension/l10n/en-GB.json downloadLink text with the canvas' label property. It also sets the href property of the link to the canvas' thumbnail property. We are doing this for the purposes of a simple example as no reliable or consistent file download url for IIIF and IxIF manifests is currently available. The thumbnail property is available on many Wellcome Library manifests. Try switching between manifests using the Manifest drop down underneath the UV. You can also copy any IIIF manifest url into the free text field underneath and click Set to view it in the UV.

Lastly, let's alter the theme.less file to improve the link positioning.

Open src/modules/uv-filelinkcenterpanel-module/css/styles.less and copy in the following code:

#app{
    .centerPanel{
        .content{
            a{
                padding: 0 20px 0 20px;
            }
        }
    }
}

Now open src/extensions/uv-default-extension/theme/theme.less and where it says "more modules go here" paste the following code:

@import '../../../modules/uv-filelinkcenterpanel-module/css/styles.less';

Run:

grunt

and refresh your browser to see the extra padding on the download link.