Major cleanup. Move AnnotationStore to Annotator.Plugins.Store. Add s…

…keleton for user plugin.

README.markdown

@@ -3,11 +3,11 @@ Annotator
 
 A wee playground to see what can be done with a Javascript annotation system. 
 You should be able to create an Annotator on an element (or the whole page) as 
-simply as $('#content').annotator().
+simply as $('#content').annotator(). See demo.html for an example.
 
-Separately from the annotator (which will simply create annotations in the 
-page and allow you to read their contents) you can also create an 
-AnnotationStore which will listen to the Annotator and will save/restore your 
+Separately from the annotator (which will simply create annotations in the
+page and allow you to read their contents) you can also create an annotation
+"Store" which will listen to the Annotator and will save/restore your
 annotations across page loads via a RESTful HTTP interface.
 
 Usage
@@ -31,14 +31,15 @@ backend might look like:
 
         <script>
           jQuery(function($) {
-            $('p').annotationStore();
+            $('p').annotator()
+                  .annotator('addPlugin', Annotator.Plugins.Store);
           });
         </script>
       </body>
     </html>
 
-An example Sinatra backend (which doesn't actually save the annotations to 
-disk) can be found in examples/.
+An example Sinatra [http://www.sinatrarb.com] backend (which doesn't actually
+save the annotations to disk) can be found in examples/.
 
 Development
 -----------

Rakefile

@@ -7,7 +7,8 @@ SRC = ['vendor/jquery.pluginfactory',
        'vendor/jquery.json',
        'extensions',
        'annotator',
-       'annotation_store'].map { |x| "src/#{x}.js" }
+       'plugins/store',
+       'plugins/user'].map { |x| "src/#{x}.js" }
 
 CSS = ['annotator'].map { |x| "src/#{x}.css" }
 

dev.html

@@ -11,7 +11,8 @@
     <script src="src/vendor/jquery.json.js"></script>
     <script src="src/extensions.js"></script>
     <script src="src/annotator.js"></script>
-    <script src="src/annotation_store.js"></script>
+    <script src="src/plugins/store.js"></script>
+    <script src="src/plugins/user.js"></script>
 
     <link rel="stylesheet" type="text/css" href="src/annotator.css">
   </head>
@@ -51,12 +52,14 @@ <h3>Header Level 3</h3>
 
     <script>
       jQuery(function ($) {
-          $('#airlock').annotationStore({
-            annotationData: {
-              name: "Bongos",
-              age: 34
-            }
-          });
+          $('#airlock').annotator()
+                       .annotator('addPlugin', Annotator.Plugins.User, {one: 1, two: 2})
+                       .annotator('addPlugin', Annotator.Plugins.Store, {
+                         annotationData: {
+                           name: "Bongos",
+                           age: 34
+                         }
+                       });
       });
     </script>
   </body>

spec/annotation_store_spec.js → spec/plugins/store_spec.js

@@ -1,8 +1,8 @@
-describe('AnnotationStore', function () {
+describe('Annotator.Plugins.Store', function () {
     before_each(function () {
         el = $('<div></div>')[0];
         mock_request().and_return('[]', 'text/plain');
-        a = new AnnotationStore({}, el);
+        a = new Annotator.Plugins.Store({}, el);
     });
 
     it('should save an annotation on an annotationCreated event', function () {
@@ -59,23 +59,23 @@ describe('AnnotationStore', function () {
    });
 });
 
-describe('AnnotationStore initialized with an empty backend', function () {
+describe('Annotator.Plugins.Store initialized with an empty backend', function () {
     before_each(function () {
         el = $('<div></div>')[0];
         mock_request().and_return('[]', 'text/plain');
-        a = new AnnotationStore({}, el);
+        a = new Annotator.Plugins.Store({}, el);
     });
 
     it('should have no annotations', function () {
         expect(a.annotations).to(be_empty);
     });
 });
 
-describe('AnnotationStore with annotations in backend store', function () {
+describe('Annotator.Plugins.Store with annotations in backend store', function () {
     before_each(function () {
         el = $('<div></div>')[0];
         mock_request().and_return('[{"ranges":[],"text":"hello","id":1}]', 'text/plain');
-        a = new AnnotationStore({}, el);
+        a = new Annotator.Plugins.Store({}, el);
     });
 
     it('should load the annotations into its registry', function () {

spec/spec.dom.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <link type="text/css" rel="stylesheet" href="jspec/jspec.css" />
@@ -10,13 +11,13 @@
     <script src="../src/vendor/jquery.sji.js"></script>
     <script src="../src/extensions.js"></script>
     <script src="../src/annotator.js"></script>
-    <script src="../src/annotation_store.js"></script>
+    <script src="../src/plugins/store.js"></script>
     <script>
       jQuery(function () {
         JSpec
         .exec('extensions_spec.js')
         .exec('annotator_spec.js')
-        .exec('annotation_store_spec.js')
+        .exec('plugins/store_spec.js')
         .run()
         .report();
       });

src/annotator.js

@@ -392,6 +392,10 @@ this.Annotator = DelegatorClass.extend({
             this.dom.viewer.hide();
         }
     },
+
+    addPlugin: function (klass, options) {
+        new klass(options, this.element);
+    },
 
     _mousePosition: function (e) {
         return {
@@ -408,6 +412,8 @@ this.Annotator = DelegatorClass.extend({
     }
 });
 
+Annotator.Plugins = {};
+
 $.plugin('annotator', Annotator);
 
 })(jQuery);

src/annotation_store.js → src/plugins/store.js

@@ -1,6 +1,6 @@
 (function($){
 
-this.AnnotationStore = DelegatorClass.extend({
+Annotator.Plugins.Store = DelegatorClass.extend({
     events: {
         'annotationCreated': 'annotationCreated',
         'annotationDeleted': 'annotationDeleted',
@@ -184,6 +184,4 @@ this.AnnotationStore = DelegatorClass.extend({
     }
 });
 
-$.plugin('annotationStore', AnnotationStore);
-
 })(jQuery);

src/plugins/user.js

@@ -0,0 +1,9 @@
+(function($){
+
+Annotator.Plugins.User = DelegatorClass.extend({
+    init: function (options, element) {
+        console.log("Hello world! Initialised with: ", options, element);
+    }
+});
+
+})(jQuery);