Creating a plugin

A quick guide on creating plugins

 

File

 

The recommended structure is this:

/plugins
    /my-plugin
        /index.js
        /server/MyServerCode.js
        /client/MyClientCode.js

Server: Endpoint

Here is an example of a server side endpoint:

'use strict';

class MyPlugin {
    static init(app) {
        app.get('/plugins/my-plugin/endpoint', (req, res) => {
            res.status(200).send('OK');
        });
    }
}

module.exports = MyPlugin;

Client: Deployer editor

An example of client side code implementing a Deployer editor:

'use strict';

class MyDeployerEditor extends Crisp.View {
    constructor(params) {
        super(params);

        this.fetch();
    }

    template() {
        return _.div({class: 'my-deployer-editor'});
    }
}

HashBrown.Views.Editors.DeployerEditors['MyDeployer'] = MyDeployerEditor;

This example makes use of the Crisp UI view class and templating.

Client: Extra navbar pane

An example of client side code implementing an extra navbar pane:

'use strict';

function myItemAction() {
    var id = document.querySelector('.context-menu-target');

    alert(id); // The id of the pane item
}

function myPaneAction() {
    // Do something
}

NavbarMain.addTabPane('/my-plugin/', 'My Plugin', 'font-awesome-icon', {
    getItems: () => {
        return [ { id: 'some-id', title: 'Some title' } ];
    },

    itemContextMenu: {
        'This item': '---',
        'Item action': () => { myItemAction(); }
    },

    paneContextMenu: {
        'General': '---',
        'Pane action': () => { myPaneAction(); }
    }
});

For more inspiration on making navbar panes, check out the ContentPane source