Rework thread collapsing and editing interaction

Thread collapse handling is moved to the thread directive. This
directive no longer creates new scope (since the tranclusion of the
recursion was making it hard to propagate events up the thread
scopes).

Now, which children are being edited is tracked by every ancestor
so that threads cannot be collapsed if editing is taking place
below.

Fix #555

h/css/common.scss

@@ -772,9 +772,13 @@ blockquote {
   }
 
   //These are all the changes needed to collapse thread objects.
-  .collapsed {
+  &.collapsed {
     display: block !important;
 
+    .thread {
+      display: none;
+    }
+
     & > ul {
       max-height: 0;
       overflow: hidden;

h/js/controllers.coffee

@@ -227,6 +227,7 @@ class Annotation
   constructor: ($element, $location, $scope, annotator, drafts, $timeout) ->
     threading = annotator.threading
     $scope.action = 'create'
+    $scope.editing = false
 
     $scope.cancel = ->
       $scope.editing = false
@@ -315,6 +316,8 @@ class Annotation
     $scope.$on '$routeChangeStart', -> $scope.cancel() if $scope.editing
     $scope.$on '$routeUpdate', -> $scope.cancel() if $scope.editing
 
+    $scope.$watch 'editing', -> $scope.$emit 'toggleEditing'
+
     $scope.$watch 'model.$modelValue.id', (id) ->
       if id?
         $scope.thread = threading.getContainer id
@@ -394,21 +397,6 @@ class Viewer
       thread = threading.getContainer annotation.id
       (r.message for r in (thread.children or []))
 
-    $scope.toggleDetail = ($event) ->
-      # XXX: Super hacky nonsense here that should probably be handled
-      # by stopping the propagation or something. Also, the silly traversal
-      # of scope has got to stop.
-      $target = angular.element $event.target
-      if (
-        $event.target.tagName in ['A', 'BUTTON', 'INPUT', 'TEXTAREA'] or
-        $target.attr('ng-click') or
-        $target.attr('role') == 'button'
-      )
-        $target.scope()?.$parent?.$$prevSibling?.collapsed = false
-        @detail = true
-      else
-        @detail = !@detail
-
     $scope.sortThread = (thread) ->
       if thread?.message?.updated
         return new Date(thread.message.updated)

h/js/directives.coffee

@@ -208,11 +208,29 @@ tabReveal = ['$parse', ($parse) ->
 ]
 
 
-thread = ->
-  link: (scope, iElement, iAttrs, controller) ->
-    scope.collapsed = false
+thread = ['$timeout', ($timeout) ->
+  link: (scope, elem, attr, ctrl) ->
+    childrenEditing = {}
+
+    scope.toggleCollapsed = (event) ->
+      event.stopPropagation()
+      $timeout ->
+        return unless Object.keys(childrenEditing).length is 0
+        scope.collapsed = !scope.collapsed
+      , 10
+
+    scope.$on 'toggleEditing', (event) ->
+      {$id, editing} = event.targetScope
+      if editing
+        scope.collapsed = false
+        unless childrenEditing[$id]
+          event.targetScope.$on '$destroy', ->
+            $timeout (-> delete childrenEditing[$id]), 100
+          childrenEditing[$id] = true
+      else
+        delete childrenEditing[$id]
   restrict: 'C'
-  scope: true
+]
 
 
 userPicker = ->