Skip to content

Instantly share code, notes, and snippets.

@tilgovi
Created October 15, 2014 23:06
Show Gist options
  • Save tilgovi/1f7f13e45c9a6fe64e85 to your computer and use it in GitHub Desktop.
Save tilgovi/1f7f13e45c9a6fe64e85 to your computer and use it in GitHub Desktop.
Annotator v1.2.x Plugin Skeleton
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']);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment