Merge pull request #508 from openannotation/shuffle-ui-package

Shuffle annotator.ui package

dev.html

@@ -107,13 +107,12 @@ <h3>Header Level 3</h3>
 
     <script>var annotator = 'noConflictBeforeValue';</script>
     <script src="bundle/annotator.js"></script>
-    <script src="bundle/plugin/filter.js"></script>
 
     <script>
       var elem = document.getElementById('airlock');
       var app = new annotator.App()
       .include(annotator.ui.main, {element: elem})
-      .include(annotator.plugin.filter)
+      .include(annotator.ui.filter.standalone)
       .include(annotator.storage.debug)
       .start()
     </script>

src/ui.js

@@ -1,12 +1,13 @@
-exports.Adder = require('./ui/adder').Adder;
-exports.Editor = require('./ui/editor').Editor;
-exports.Filter = require('./ui/filter').Filter;
-exports.Highlighter = require('./ui/highlighter').Highlighter;
-exports.TextSelector = require('./ui/textselector').TextSelector;
-exports.Viewer = require('./ui/viewer').Viewer;
-exports.Widget = require('./ui/widget').Widget;
-
-exports.markdown = require('./ui/markdown').markdown;
-exports.tags = require('./ui/tags').tags;
-
+// Main module: default UI
 exports.main = require('./ui/main').main;
+
+// Export submodules for browser environments
+exports.adder = require('./ui/adder');
+exports.editor = require('./ui/editor');
+exports.filter = require('./ui/filter');
+exports.highlighter = require('./ui/highlighter');
+exports.markdown = require('./ui/markdown');
+exports.tags = require('./ui/tags');
+exports.textselector = require('./ui/textselector');
+exports.viewer = require('./ui/viewer');
+exports.widget = require('./ui/widget');

src/ui/editor.js

@@ -46,7 +46,7 @@ function preventEventDefault(event) {
 // the movement is not tracked, then the amount the mouse has moved will be
 // accumulated and passed to the next mousemove event.
 //
-function dragTracker(handle, callback) {
+var dragTracker = exports.dragTracker = function dragTracker(handle, callback) {
     var lastPos = null,
         throttled = false;
 
@@ -115,7 +115,7 @@ function dragTracker(handle, callback) {
     $(handle).on('mousedown', mouseDown);
 
     return {destroy: destroy};
-}
+};
 
 
 // resizer is a component that uses a dragTracker under the hood to track the
@@ -135,7 +135,7 @@ function dragTracker(handle, callback) {
 //             returns a truthy value, the vertical sense of the drag will be
 //             inverted. Useful if the drag handle is at the bottom of the
 //             element, and so dragging down means "grow the element"
-function resizer(element, handle, options) {
+var resizer = exports.resizer = function resizer(element, handle, options) {
     var $el = $(element);
     if (typeof options === 'undefined' || options === null) {
         options = {};
@@ -181,7 +181,7 @@ function resizer(element, handle, options) {
 
     // We return the dragTracker object in order to expose its methods.
     return dragTracker(handle, resize);
-}
+};
 
 
 // mover is a component that uses a dragTracker under the hood to track the
@@ -190,7 +190,7 @@ function resizer(element, handle, options) {
 // element - DOM Element to move
 // handle - DOM Element to use as a move handle
 //
-function mover(element, handle) {
+var mover = exports.mover = function mover(element, handle) {
     function move(delta) {
         $(element).css({
             top: parseInt($(element).css('top'), 10) + delta.y,
@@ -200,11 +200,11 @@ function mover(element, handle) {
 
     // We return the dragTracker object in order to expose its methods.
     return dragTracker(handle, move);
-}
+};
 
 
 // Public: Creates an element for editing annotations.
-var Editor = Widget.extend({
+var Editor = exports.Editor = Widget.extend({
     // Public: Creates an instance of the Editor object.
     //
     // options - An Object literal containing options.
@@ -584,8 +584,19 @@ Editor.options = {
     defaultFields: true
 };
 
-
-exports.Editor = Editor;
-exports.dragTracker = dragTracker;
-exports.mover = mover;
-exports.resizer = resizer;
+// standalone is a module that uses the Editor to display an editor widget
+// allowing the user to provide a note (and other data) before an annotation is
+// created or updated.
+exports.standalone = function standalone(options) {
+    var widget = new exports.Editor(options);
+
+    return {
+        destroy: function () { widget.destroy(); },
+        beforeAnnotationCreated: function (annotation) {
+            return widget.load(annotation);
+        },
+        beforeAnnotationUpdated: function (annotation) {
+            return widget.load(annotation);
+        }
+    };
+};

src/ui/filter.js

@@ -13,7 +13,7 @@ var NS = 'annotator-filter';
 // options - An Object literal of options.
 //
 // Returns a new instance of the Filter plugin.
-function Filter(options) {
+var Filter = exports.Filter = function Filter(options) {
     this.options = $.extend(true, {}, Filter.options, options);
     this.classes = $.extend(true, {}, Filter.classes);
     this.element = $(Filter.html.element).appendTo(this.options.appendTo);
@@ -56,7 +56,7 @@ function Filter(options) {
     if (this.options.addAnnotationFilter) {
         this.addFilter({label: _t('Annotation'), property: 'text'});
     }
-}
+};
 
 // Public: remove the filter plugin instance and unbind events.
 //
@@ -448,4 +448,17 @@ Filter.options = {
 };
 
 
-exports.Filter = Filter;
+// standalone is a module that uses the Filter component to display a filter bar
+// to allow browsing and searching of annotations on the current page.
+exports.standalone = function (options) {
+    var widget = new exports.Filter(options);
+
+    return {
+        destroy: function () { widget.destroy(); },
+
+        annotationsLoaded: function () { widget.updateHighlights(); },
+        annotationCreated: function () { widget.updateHighlights(); },
+        annotationUpdated: function () { widget.updateHighlights(); },
+        annotationDeleted: function () { widget.updateHighlights(); }
+    };
+};

src/ui/highlighter.js

@@ -67,10 +67,10 @@ function reanchorRange(range, rootElement) {
 // options - An options Object containing configuration options for the plugin.
 //           See `Highlighter.options` for available options.
 //
-function Highlighter(element, options) {
+var Highlighter = exports.Highlighter = function Highlighter(element, options) {
     this.element = element;
     this.options = $.extend(true, {}, Highlighter.options, options);
-}
+};
 
 Highlighter.prototype.destroy = function () {
     $(this.element)
@@ -209,4 +209,16 @@ Highlighter.options = {
 };
 
 
-exports.Highlighter = Highlighter;
+// standalone is a module that uses the Highlighter to draw/undraw highlights
+// automatically when annotations are created and removed.
+exports.standalone = function standalone(element, options) {
+    var widget = exports.Highlighter(element, options);
+
+    return {
+        destroy: function () { widget.destroy(); },
+        annotationsLoaded: function (anns) { widget.drawAll(anns); },
+        annotationCreated: function (ann) { widget.draw(ann); },
+        annotationDeleted: function (ann) { widget.undraw(ann); },
+        annotationUpdated: function (ann) { widget.redraw(ann); }
+    };
+};