Remove vm.annotation -> vm.form

Clarify what this object actually is: the read-write variables for the
templates to write via ng-model.

h/static/scripts/directive/annotation.js

@@ -5,9 +5,9 @@ var events = require('../events');
 
 /** Return a domainModel tags array from the given vm tags array.
  *
- * domainModel.tags and vm.annotation.tags use different formats.  This
+ * domainModel.tags and vm.form.tags use different formats.  This
  * function returns a domainModel.tags-formatted copy of the given
- * vm.annotation.tags-formatted array.
+ * vm.form.tags-formatted array.
  *
  */
 function domainModelTagsFromViewModelTags(viewModelTags) {
@@ -124,8 +124,8 @@ function restoreFromDrafts(drafts, permissions, domainModel, vm) {
     } else {
       domainModel.permissions = permissions.shared(domainModel.group);
     }
-    vm.annotation.tags = viewModelTagsFromDomainModelTags(draft.tags);
-    vm.annotation.text = draft.text;
+    vm.form.tags = viewModelTagsFromDomainModelTags(draft.tags);
+    vm.form.text = draft.text;
   }
 }
 
@@ -147,7 +147,7 @@ function restoreFromDrafts(drafts, permissions, domainModel, vm) {
 function saveToDrafts(drafts, domainModel, vm) {
   drafts.update(
     domainModel, vm.isPrivate(),
-    domainModelTagsFromViewModelTags(vm.annotation.tags), vm.annotation.text);
+    domainModelTagsFromViewModelTags(vm.form.tags), vm.form.text);
 }
 
 /** Update domainModel from vm.
@@ -164,21 +164,21 @@ function saveToDrafts(drafts, domainModel, vm) {
  *
  */
 function updateDomainModel(domainModel, vm) {
-  domainModel.text = vm.annotation.text;
-  domainModel.tags = domainModelTagsFromViewModelTags(vm.annotation.tags);
+  domainModel.text = vm.form.text;
+  domainModel.tags = domainModelTagsFromViewModelTags(vm.form.tags);
 }
 
 /** Update the view model from the domain model changes. */
 function updateViewModel(domainModel, vm, permissions) {
   // Extend the view model with a copy of the domain model.
   // Note that copy is used so that deep properties aren't shared.
-  vm.annotation = {
+  vm.form = {
     text: domainModel.text,
     tags: viewModelTagsFromDomainModelTags(domainModel.tags),
   };
 
   vm.annotationURI = new URL(
-    '/a/' + vm.annotation.id, vm.baseURI).href;
+    '/a/' + domainModel.id, vm.baseURI).href;
 
   vm.document = extractDocumentMetadata(domainModel);
 }
@@ -222,8 +222,8 @@ function validate(domainModel) {
 
 /** Return a vm tags array from the given domainModel tags array.
  *
- * domainModel.tags and vm.annotation.tags use different formats.  This
- * function returns a vm.annotation.tags-formatted copy of the given
+ * domainModel.tags and vm.form.tags use different formats.  This
+ * function returns a vm.form.tags-formatted copy of the given
  * domainModel.tags-formatted array.
  *
  */
@@ -268,9 +268,12 @@ function AnnotationController(
     /** The currently active action - 'view', 'create' or 'edit'. */
     vm.action = 'view';
 
-    /** The view model, contains user changes to the annotation that haven't
-      * been saved to the server yet. */
-    vm.annotation = {};
+    /** vm.form is the read-write part of vm for the templates: it contains
+     *  the variables that the templates will write changes to via ng-model. */
+    vm.form = {};
+
+    // The remaining properties on vm are read-only properties for the
+    // templates.
 
     /** The baseURI for the website, e.g. 'https://hypothes.is/'. */
     vm.baseURI = $document.prop('baseURI');
@@ -518,8 +521,8 @@ function AnnotationController(
     *   otherwise.
     */
   vm.hasContent = function() {
-    var textLength = (vm.annotation.text || '').length;
-    var tagsLength = (vm.annotation.tags || []).length;
+    var textLength = (vm.form.text || '').length;
+    var tagsLength = (vm.form.tags || []).length;
     return (textLength > 0 || tagsLength > 0);
   };
 
@@ -645,7 +648,7 @@ function AnnotationController(
     }
 
     // Update stored tags with the new tags of this annotation.
-    var newTags = vm.annotation.tags.filter(function(tag) {
+    var newTags = vm.form.tags.filter(function(tag) {
       var tags = domainModel.tags || [];
       return tags.indexOf(tag.text) === -1;
     });

h/static/scripts/directive/test/annotation-test.js

@@ -289,25 +289,25 @@ describe('annotation.js', function() {
 
     it('copies text from viewModel into domainModel', function() {
       var domainModel = {};
-      var viewModel = {annotation: {text: 'bar', tags: []}};
+      var viewModel = {form: {text: 'bar', tags: []}};
 
       updateDomainModel(domainModel, viewModel);
 
-      assert.equal(domainModel.text, viewModel.annotation.text);
+      assert.equal(domainModel.text, viewModel.form.text);
     });
 
     it('overwrites text in domainModel', function() {
       var domainModel = {text: 'foo'};
-      var viewModel = {annotation: {text: 'bar', tags: []}};
+      var viewModel = {form: {text: 'bar', tags: []}};
 
       updateDomainModel(domainModel, viewModel);
 
-      assert.equal(domainModel.text, viewModel.annotation.text);
+      assert.equal(domainModel.text, viewModel.form.text);
     });
 
     it('doesn\'t touch other properties in domainModel', function() {
       var domainModel = {foo: 'foo', bar: 'bar'};
-      var viewModel = {annotation: {foo: 'FOO', tags: []}};
+      var viewModel = {form: {foo: 'FOO', tags: []}};
 
       updateDomainModel(domainModel, viewModel);
 
@@ -320,7 +320,7 @@ describe('annotation.js', function() {
     it('copies tag texts from viewModel into domainModel', function() {
       var domainModel = {};
       var viewModel = {
-        annotation: {
+        form: {
           tags: [
             {text: 'foo'},
             {text: 'bar'}
@@ -1079,17 +1079,17 @@ describe('annotation.js', function() {
     describe('#hasContent', function() {
       it('returns false if the annotation has no tags or text', function() {
         var controller = createDirective().controller;
-        controller.annotation.text = '';
-        controller.annotation.tags = [];
+        controller.form.text = '';
+        controller.form.tags = [];
         assert.ok(!controller.hasContent());
       });
 
       it('returns true if the annotation has tags or text', function() {
         var controller = createDirective().controller;
-        controller.annotation.text = 'bar';
+        controller.form.text = 'bar';
         assert.ok(controller.hasContent());
-        controller.annotation.text = '';
-        controller.annotation.tags = [
+        controller.form.text = '';
+        controller.form.tags = [
           {
             text: 'foo'
           }
@@ -1100,8 +1100,10 @@ describe('annotation.js', function() {
 
     describe('#hasQuotes', function() {
       it('returns false if the annotation has no quotes', function() {
-        var controller = createDirective().controller;
-        controller.annotation.target = [{}];
+        var annotation = defaultAnnotation();
+        annotation.target = [{}];
+        var controller = createDirective(annotation).controller;
+
         assert.isFalse(controller.hasQuotes());
       });
 
@@ -1414,12 +1416,12 @@ describe('annotation.js', function() {
           text: 'unsaved-text'
         });
         var controller = createDirective().controller;
-        assert.deepEqual(controller.annotation.tags, [
+        assert.deepEqual(controller.form.tags, [
           {
             text: 'unsaved-tag'
           }
         ]);
-        assert.equal(controller.annotation.text, 'unsaved-text');
+        assert.equal(controller.form.text, 'unsaved-text');
       });
 
       it('removes the draft when changes are discarded', function() {
@@ -1444,8 +1446,8 @@ describe('annotation.js', function() {
       it('updates the current draft', function() {
         var parts = createDirective();
         parts.controller.edit();
-        parts.controller.annotation.text = 'unsaved-text';
-        parts.controller.annotation.tags = [];
+        parts.controller.form.text = 'unsaved-text';
+        parts.controller.form.tags = [];
         fakeDrafts.get = sinon.stub().returns({
           text: 'old-draft'
         });
@@ -1788,20 +1790,20 @@ describe('annotation.js', function() {
           }
         }
       }).controller;
-      var originalText = controller.annotation.text;
+      var originalText = controller.form.text;
       // Simulate the user clicking the Edit button on the annotation.
       controller.edit();
       // Simulate the user typing some text into the annotation editor textarea.
-      controller.annotation.text = 'changed by test code';
+      controller.form.text = 'changed by test code';
       // Simulate the user hitting the Save button and wait for the
       // (unsuccessful) response from the server.
       controller.save();
       // At this point the annotation editor controls are still open, and the
       // annotation's text is still the modified (unsaved) text.
-      assert(controller.annotation.text === 'changed by test code');
+      assert(controller.form.text === 'changed by test code');
       // Simulate the user clicking the Cancel button.
       controller.revert();
-      assert(controller.annotation.text === originalText);
+      assert(controller.form.text === originalText);
     });
 
     // test that editing reverting changes to an annotation with
@@ -1815,9 +1817,9 @@ describe('annotation.js', function() {
       }).controller;
       controller.edit();
       assert.equal(controller.action, 'edit');
-      controller.annotation.text = 'this should be reverted';
+      controller.form.text = 'this should be reverted';
       controller.revert();
-      assert.equal(controller.annotation.text, void 0);
+      assert.equal(controller.form.text, void 0);
     });
   });
 });

h/templates/client/annotation.html

@@ -71,7 +71,7 @@
   <!-- Body -->
   <section name="text" class="annotation-body">
     <excerpt enabled="vm.feature('truncate_annotations') && !vm.editing()">
-      <markdown ng-model="vm.annotation.text"
+      <markdown ng-model="vm.form.text"
            read-only="!vm.editing()"
            ></markdown>
     </excerpt>
@@ -80,7 +80,7 @@
 
   <!-- Tags -->
   <div class="annotation-body form-field" ng-if="vm.editing()">
-    <tags-input ng-model="vm.annotation.tags"
+    <tags-input ng-model="vm.form.tags"
                 name="tags"
                 class="tags"
                 placeholder="Add tags…"
@@ -94,9 +94,9 @@
   </div>
 
   <div class="annotation-body tags tags-read-only"
-       ng-if="vm.annotation.tags.length && !vm.editing()">
+       ng-if="vm.form.tags.length && !vm.editing()">
     <ul class="tag-list">
-      <li class="tag-item" ng-repeat="tag in vm.annotation.tags">
+      <li class="tag-item" ng-repeat="tag in vm.form.tags">
         <a href="/stream?q=tag:'{{tag.text|urlencode}}'" target="_blank">{{tag.text}}</a>
       </li>
     </ul>