Re-implement hiliting annotation cards on hover

... over the highlights in the document

h/static/scripts/guest.coffee

@@ -260,8 +260,13 @@ class Annotator.Guest extends Annotator
      method: "showEditor"
      params: annotation.$$tag

  onAnchorMouseover: ->
  onAnchorMouseout: ->
  hiliteInViewer: (annotations, state) =>
    @panel?.notify
      method: "setHighlightState"
      params:
        tags: (a.$$tag for a in annotations)
        state: state

  onAnchorMousedown: ->

  checkForStartSelection: (event) =>
@@ -304,6 +309,22 @@ class Annotator.Guest extends Annotator
      # Tell sidebar to show the viewer for these annotations
      this.showViewer annotations

  # When hovering on a highlight in highlighting mode,
  # tell the sidebar to hilite the relevant annotations
  onAnchorMouseover: (event) ->
    if @visibleHighlights or @tool is 'highlight'
      event.stopPropagation()
      annotations = event.data.getAnnotations(event)
      this.hiliteInViewer annotations, true

  # When leaving a highlight (with the cursor) in highlighting mode,
  # tell the sidebar to stop hiliting the relevant annotations
  onAnchorMouseout: (event) ->
    if @visibleHighlights or @tool is 'highlight'
      event.stopPropagation()
      annotations = event.data.getAnnotations(event)
      this.hiliteInViewer annotations, false

  # When clicking on a highlight in highlighting mode,
  # tell the sidebar to bring up the viewer for the relevant annotations
  onAnchorClick: (event) =>

h/static/scripts/services.coffee

@@ -164,6 +164,12 @@ class Hypothesis extends Annotator
        this.updateViewer this._getLocalAnnotations(tags)
    )

    .bind('setHighlightState', (ctx, data) =>
      @element.scope().$apply =>
        annotations = this._getLocalAnnotations data.tags
        this.setViewerHighlightState annotations, data.state
    )

    .bind('toggleViewerSelection', (ctx, tags=[]) =>
      @element.scope().$apply =>
        this.toggleViewerSelection this._getLocalAnnotations(tags)
@@ -231,6 +237,14 @@ class Hypothesis extends Annotator
    @_setSelectedAnnotations selected
    this

  setViewerHighlightState: (annotations, state) ->
    scope = @element.scope()
    hilited = scope.hilitedAnnotations or {}
    for a in annotations
      hilited[a.id] = state
    scope.hilitedAnnotations = hilited
    this

  updateViewer: (annotations=[]) ->
    # TODO: re-implement
    this

h/static/styles/threads.scss

@@ -6,7 +6,7 @@ $threadexp-width: .6em;
    margin-bottom: .72em;
  }

  .card-emphasis {
  .card_emphasis {
    box-shadow: 6px 6px 8px -2px $gray-light;
  }
}

h/templates/client/viewer.html

@@ -34,6 +34,7 @@
    </span>
  </li>
  <li class="paper thread"
      ng-class="{card_emphasis: hilitedAnnotations[child.message.id]}"
      deep-count="count"
      thread="child" thread-filter
      thread-collapsed="!search.query"