Documentation

The simplest user interaction can be done by displaying a button and registering a callback for its click event. To simplify things even more, it is possible to use jQuery for that.

Let's start with the addon following HTML code into the View and Preview sections:

<button>Click me!</button>
<p class="sample-addon-clicks-counter">Count: 0</p>

Presentation editor is a tool, where the user can create a presentation. In this mode, there should be no user interactions coming from an addon, so it's necessary to disable it with the following code:

presenter.createPreview = function (view, model) {
    $(view).find('button').click(function (event) {
        event.preventDefault();
    });
};

Note: because the user can add the addon to the presentation multiple times, both the View and Preview sections should not use the 'id' attributes.

Next, a click counter is added to the presenter.run method:

function AddonSample_create() {
    var presenter = function () { };
    var clickCounter = 0;

    presenter.run = function (view, model) {
        var $button = $(view).find('button'),
            $counter = $(view).find('.sample-addon-clicks-counter');

        $button.click(function (event) {
            event.preventDefault();
            clickCounter++;
            $counter.text('Count: ' + clickCounter);
        });
    };

    presenter.createPreview = function (view, model) {
        $(view).find('button').click(function (event) {
            event.preventDefault();
        });
    };

    return presenter;
}