resources cleanup, .hbs->.handlebars, details work

hypothesis/js/src/hypothesis.coffee

@@ -53,7 +53,7 @@ class Hypothesis extends Annotator
     # Create a sidebar if one does not exist. This is a singleton element --
     # even if multiple instances of the app are loaded on a page (some day).
     if not @sidebar?
-      sidebar = $(Handlebars.templates['sidebar']())
+      sidebar = $(Handlebars.templates.sidebar())
       Annotator.prototype.sidebar = sidebar
       @sidebar = sidebar
       @sidebar.addClass('collapse')
@@ -78,14 +78,6 @@ class Hypothesis extends Annotator
     @viewer.hide()
     .on("edit", this.onEditAnnotation)
     .on("delete", this.onDeleteAnnotation)
-    .addField({
-      load: (field, annotation) =>
-        if annotation.text
-          $(field).escape(annotation.text)
-        else
-          $(field).html("<i>#{_t 'No Comment'}</i>")
-        this.publish('annotationViewerTextField', [field, annotation])
-      })
     this
 
 
@@ -113,7 +105,6 @@ class Hypothesis extends Annotator
     )
     this
 
-
   onHeatmapClick: (event) =>
     y = event.pageY - @wrapper.offset().top
     target = d3.bisect(@heatmap.index, y)-1
@@ -122,12 +113,42 @@ class Hypothesis extends Annotator
     this.showViewer(annotations)
     @heatmap.updateHeatmap()
 
-  showViewer: (annotations) ->
-    @viewer.element.find('.annotator-listing').replaceWith(
-      Handlebars.templates['summaries']({
-        annotations: annotations
-      })
-    )
+  showViewer: (annotations=[], detail=false) ->
+    listing = d3.select(@viewer.element.find('.annotator-listing').get(0))
+
+    if not detail
+      summaries = listing.selectAll('li').data(annotations)
+
+      summaries.enter().append('li')
+      summaries.exit().remove()
+      summaries
+        .classed('hyp-widget', true)
+        .classed('hyp-reply', false)
+        .classed('hyp-summary', true)
+        .html((a, i) => Handlebars.templates.summary(a))
+        .on 'click', (d, i) =>
+          this.showViewer([d], true)
+    else
+      details = listing.selectAll('li').data(annotations)
+
+      details.enter().append('li')
+      details.exit().remove()
+      details
+        .classed('hyp-widget', true)
+        .classed('hyp-annotation', true)
+        .classed('hyp-summary', false)
+        .html((a, i) => Handlebars.templates.detail(a))
+
+      excerpt = listing.selectAll('.hyp-widget.hyp-excerpt')
+        .data(annotations[0..1])
+
+      excerpt.enter().insert('li', '.hyp-annotation')
+      excerpt.exit().remove()
+      excerpt
+        .classed('hyp-widget', true)
+        .classed('hyp-excerpt', true)
+        .text((d) -> d.quote)
+
     @viewer.show()
     $(document.documentElement).addClass('hyp-collapse')
     @sidebar.removeClass('collapse')
@@ -137,7 +158,7 @@ class Hypothesis extends Annotator
       @editor.load(annotation)
       controls = @editor.element.find('.annotator-controls')
       @editor.element.find('.annotator-listing').replaceWith(
-        Handlebars.templates['editor'](annotation)
+        Handlebars.templates.editor(annotation)
       )
       controls.detach().appendTo(@editor.element.find('.hyp-meta'))
       $(document.documentElement).addClass('hyp-collapse')

hypothesis/sass/app.scss

@@ -534,15 +534,12 @@ $heatmap-width: 15px;
 .hyp-reply {
   @include base-annotation;
   border-left: 1px dotted #999999;
-  .hyp-meta {
-    padding-left: $thread-padding; }
+
   .hyp-body {
-    padding-left: $thread-padding;
     margin-top: 0.6em;
-    position: relative; }
-  .hyp-nothread {
-    padding-right: $thread-padding;
-    padding-bottom: 1em; }
+    padding-left: $thread-padding;
+    position: relative;
+  }
 
   .hyp-score {
     position: absolute;
@@ -593,7 +590,6 @@ $heatmap-width: 15px;
 
   .hyp-collapsed {
     font-size: 0.9em;
-    padding-right: $thread-padding;
     .hyp-content {
       padding-left: 0.5em;
       overflow: hidden;
@@ -632,17 +628,11 @@ $heatmap-width: 15px;
   .hyp-innerwrap {
     position: relative;
   }
-  .hyp-meta {
-    //padding-left: $thread-padding * 2; }
-  }
+
   .hyp-body {
-    //padding-left: $thread-padding * 2;
     margin-top: 0.5em;
     position: relative; }
-  .hyp-nothread {
-    //padding-right: $thread-padding;
-    //padding-bottom: 1em; }
-  }
+
   .hyp-scorecontrol {
     display: none;
     position: absolute;
@@ -655,33 +645,24 @@ $heatmap-width: 15px;
   background: hsla(0, 0%, 100%, 1);
   @include smallshadow(2px, 3px, 0.2);
   cursor: pointer;
-  margin: {
-    left: 1em;
-    right: 1em;
-    top: 1em; };
+  margin: 1em;
   padding: 1em;
-/*  &:hover {
+
+  &:hover {
     @include smallshadow(2px, 4px, 0.2);
     bottom: 1px; }
   &:active {
     @include smallshadow(2px, 3px, 0.2);
-    bottom: -1px; }*/
+    bottom: -1px;
+  }
+
   .hyp-innerwrap {
     position: relative;
-    }
-  .hyp-meta {
-//    padding-left: $thread-padding * 2;
-    }
-  .hyp-body {
-//    padding-left: $thread-padding * 2;
-    }
-  .hyp-nothread {
-//    padding-right: $thread-padding;
-//    padding-bottom: 1em;
-    }
+  }
+
   .hyp-body {
     margin-top: 0.5em;
-    }
+  }
 
   .hyp-bottombar {
     margin-top: 0.8em;
@@ -714,6 +695,9 @@ $heatmap-width: 15px;
     }
 
 
+.hyp-widget {
+  @include border-radius(.2em);
+}
 
 /*
 	Mobile layout