Merge pull request #2123 from hypothesis/2053-scroll-sidebar-to-new-annotations-2

Scroll to new annotations on creation

h/static/scripts/directive/test/thread-test.coffee

@@ -42,6 +42,25 @@ describe 'thread', ->
 
   describe 'controller', ->
 
+    it 'returns true from isNew() for a new annotation', ->
+      createDirective()
+
+      # When the user clicks to create a new annotation in the browser, we get
+      # a ThreadController with a container with a message (the annotation)
+      # with no id.
+      controller.container = {message: {}}
+
+      assert(controller.isNew())
+
+    it 'returns false from isNew() for an old annotation', ->
+      createDirective()
+
+      # When we create a ThreadController for an old annotation, the controller
+      # has a container with a message (the annotation) with an id.
+      controller.container = {message: {id: 123}}
+
+      assert(not controller.isNew())
+
     describe '#toggleCollapsed', ->
       count = null
 

h/static/scripts/directive/thread.coffee

+uuid = require('node-uuid')
+
 ###*
 # @ngdoc type
 # @name thread.ThreadController
@@ -136,6 +138,17 @@ ThreadController = [
         return true
       return @filter.check(@container)
 
+    ###*
+    # @ngdoc method
+    # @name thread.ThreadController#isNew
+    # @description
+    # Return true if this is a newly-created annotation (e.g. the user has just
+    # created it by clicking the new annotation button in the browser),
+    # false otherwise.
+    ###
+    this.isNew = ->
+      return (this.id and not this.container?.message?.id)
+
     this._isFilterActive = ->
       if @filter
         @filter.active()
@@ -148,6 +161,8 @@ ThreadController = [
       else
         0
 
+    this.id = uuid.v4()
+
     this
 ]
 
@@ -174,8 +189,8 @@ isHiddenThread = (elem) ->
 # Directive that instantiates {@link thread.ThreadController ThreadController}.
 ###
 module.exports = [
-  '$parse', '$window', 'pulse', 'render',
-  ($parse,   $window,   pulse,   render) ->
+  '$parse', '$window', '$location', '$anchorScroll', 'pulse', 'render',
+  ($parse,   $window,   $location,   $anchorScroll,   pulse,   render) ->
     linkFn = (scope, elem, attrs, [ctrl, counter, filter]) ->
 
       # We would ideally use require for this, but searching parents only for a
@@ -210,6 +225,10 @@ module.exports = [
         render ->
           ctrl.container = thread
           scope.$digest()
+          if ctrl.isNew()
+            # Scroll the sidebar to show new annotations.
+            $location.hash(ctrl.id)
+            $anchorScroll()
 
     controller: ThreadController
     controllerAs: 'vm'

h/templates/client/viewer.html

@@ -32,7 +32,8 @@
       </ul>
     </span>
   </li>
-  <li class="paper thread"
+  <li id="{{vm.id}}"
+      class="paper thread"
       ng-class="{'js-hover': hasFocus(child.message)}"
       deep-count="count"
       thread="child" thread-filter