Only show the citation on the standalone annotation

This fixes #1390. A new controller for the standalone annotation
allows us to determine how to render the annotation and this information
is passed down to the AnnotationController via a combination of scope
properties and attributes.

There are now two distinct states for an annotation, either embedded in
which the annotation is rendered on top of the original document or
standalone, where it appears separately from its document.

h/static/scripts/app.coffee

@@ -33,7 +33,7 @@ configure = [
       ]
 
     $routeProvider.when '/a/:id',
-      controller: 'ViewerController'
+      controller: 'AnnotationViewerController'
       templateUrl: 'viewer.html'
     $routeProvider.when '/editor',
       controller: 'EditorController'

h/static/scripts/controllers.coffee

@@ -509,6 +509,18 @@ class Editor
           target.showDiff = false
 
 
+class AnnotationViewer
+  this.$inject = ['$scope']
+  constructor: ($scope) ->
+    # Tells the view that these annotations are standalone
+    $scope.isEmbedded = false
+
+    # Provide no-ops until these methods are moved elsewere. They only apply
+    # to annotations loaded into the stream.
+    $scope.activate = angular.noop
+    $scope.openDetails = angular.noop
+
+
 class Viewer
   this.$inject = [
     '$location', '$rootScope', '$routeParams', '$scope',
@@ -521,6 +533,9 @@ class Viewer
     if $routeParams.q
       return $location.path('/page_search').replace()
 
+    # Tells the view that these annotations are embedded into the owner doc
+    $scope.isEmbedded = true
+
     {providers, threading} = annotator
 
     $scope.activate = (annotation) ->
@@ -808,5 +823,6 @@ angular.module('h.controllers', imports)
 .controller('AppController', App)
 .controller('EditorController', Editor)
 .controller('ViewerController', Viewer)
+.controller('AnnotationViewerController', AnnotationViewer)
 .controller('SearchController', Search)
 .controller('NotificationController', Notification)

h/static/scripts/directives/annotation.coffee

@@ -32,10 +32,15 @@ class Annotation
 
     if model.document and model.target.length
       domain = extractURIComponent(model.uri, 'hostname')
+
+      title = model.document.title or domain
+      if title.length > 30
+        title = title.slice(0, 30) + '…'
+
       $scope.document =
         uri: model.uri
         domain: domain
-        title: model.document.title or domain
+        title: title
 
     $scope.cancel = ($event) ->
       $event?.stopPropagation()
@@ -202,10 +207,12 @@ class Annotation
             $scope.model.highlightText.replace regexp, annotator.highlighter
 
 
-annotation = ['$filter', 'annotator', ($filter, annotator) ->
+annotation = ['$filter', '$parse', 'annotator', ($filter, $parse, annotator) ->
   link: (scope, elem, attrs, controller) ->
     return unless controller?
 
+    scope.embedded = $parse(attrs.annotationEmbedded)() is true
+
     # Bind shift+enter to save
     elem.bind
       keydown: (e) ->

h/static/styles/threads.scss

@@ -111,5 +111,5 @@ $threadexp-width: .6em;
 
 .annotation-citation-domain {
   color: $gray-light;
-  font-style: italic;
+  font-size: .923em;
 }

tests/js/controllers-test.coffee

+assert = chai.assert
+
+describe 'h.controllers', ->
+
+  beforeEach module('h.controllers')
+
+  describe 'AnnotationViewer', ->
+    $scope = null
+    annotationViewer = null
+
+    beforeEach inject ($controller, $rootScope) ->
+      $scope = $rootScope.$new()
+      annotationViewer = $controller 'AnnotationViewerController',
+        $scope: $scope
+
+    it 'sets the isEmbedded property to false', ->
+      assert.isFalse($scope.isEmbedded)

tests/js/directives/annotation-test.coffee

+assert = chai.assert
+
+describe 'h.directives.annotation', ->
+  $scope = null
+  annotation = null
+  createController = null
+
+  beforeEach module('h.directives.annotation')
+
+  beforeEach inject ($controller, $rootScope) ->
+    $scope = $rootScope.$new()
+    $scope.model =
+      document:
+        title: 'A special document'
+      target: [{}]
+      uri: 'http://example.com'
+
+    createController = ->
+      $controller 'AnnotationController',
+        $scope: $scope
+        $element: null
+        $location: {}
+        $rootScope: $rootScope
+        $sce: null
+        $timeout: sinon.spy()
+        $window: {}
+        annotator: {plugins: {}}
+        baseURI: null
+        drafts: null
+
+  it 'provides a document title', ->
+    controller = createController()
+    assert.equal($scope.document.title, 'A special document')
+
+  it 'truncates long titles', ->
+    $scope.model.document.title = '''A very very very long title that really
+    shouldn't be found on a page on the internet.'''
+    controller = createController()
+    assert.equal($scope.document.title, 'A very very very long title th…')
+
+  it 'provides a document uri', ->
+    controller = createController()
+    assert.equal($scope.document.uri, 'http://example.com')
+
+  it 'provides an extracted domain from the uri', ->
+    controller = createController()
+    assert.equal($scope.document.domain, 'example.com')
+
+  it 'uses the domain for the title if the title is not present', ->
+    delete $scope.model.document.title
+    controller = createController()
+    assert.equal($scope.document.title, 'example.com')
+
+  it 'skips the document object if no document is present on the annotation', ->
+    delete $scope.model.document
+    controller = createController()
+    assert.isUndefined($scope.document)
+
+  it 'skips the document object if the annotation has no targets', ->
+    $scope.model.target = []
+    controller = createController()
+    assert.isUndefined($scope.document)