Annotator v1.2.x Plugin Skeleton

MyPlugin.js

function MyPlugin(element, options) {
    Annotator.Plugin.call(this, element, options);
    // At this point, `this.element` will be a jQuery-wrapped reference to
    // the element argument and `this.options` will be a copy of the options
    // object (if any) that you define on the prototype with overrides specified
    // by the argument to this function. See below for more.

    this.options.someObject = {};  // See below.
}

// Make sure to expose the constructor on the `Annotator.Plugin` namespace.
// You can then use it later with `annotator.addPlugin('MyPlugin', options)`.
Annotator.Plugin.MyPlugin = MyPlugin;

/**
 * You can use this to automatically wire up events.
 *
 * DOM events are delegated on the element passed to your constructor.
 * They can (optionally) have any number of selectors before the event name to
 * limit the scope of what they target.
 *
 * You can also use a custom event name, such as those annotator fires. These
 * do not bubble.
 */
MyPlugin.prototype.events = {
    '[.class-selector] [tag-selector] click': 'onClick',
    'annotationCreated': 'onAnnotationCreated'
};


/**
 * These are you base options, your defaults.
 */
MyPlugin.prototype.options = {
    mySetting: true,
    myOtherSetting: 'foo',

    // be careful with non-primitive values since modifications of the value
    // on any instance will modify the prototype. For these, set them to null
    // for documentation purposes, and then assign them to a fresh reference
    // in your constructor.
    someObject: null,
};


/**
 * In case for some reason you don't want to do this in your constructor.
 * ¯\_(ツ)_/¯
 */
MyPlugin.prototype.pluginInit = function () {
    // If you implement this method, make sure to call the super implementation.
    Annotator.Plugin.prototype.pluginInit.call(this);

    // You have access to `this.annotator` if you want the annotator instance.
    this.annotator.viewer.addField(/* ... */);

    // You can subscribe imperatively
    this.annotator.subscribe('customEvent', someHandler);
}


/**
 * Teardown
 */
MyPlugin.prototype.destroy = function () {
    // If you implement this method, make sure to call the super implementation.
    Annotator.Plugin.prototype.destroy.call(this);

    // You should use this opportunity to unsubscribe from events.
    // But it's better to use the `events` hash because then unsubscribing
    // is automatic and you won't leak handlers.
    this.annotator.unsubscribe('customEvent', someHandler);
}


// DOM event handlers will get the event object.
MyPlugin.prototype.onClick = function (event) {
}


// Custom event handlers will not receive an event object.
MyPlugin.prototype.annotationCreated = function (annotation) {
};


// Have fun!
MyPlugin.prototype.someMethod = function () {
    this.annotator.publish('someEvent', ['some', 'arguments']);
};