Merge pull request #236 from jtremback/flat

Heatmap containerization

h/css/app.scss

@@ -28,15 +28,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
   visibility: hidden;
 }
 
-.annotator-heatmap {
-  background: hsla(0, 0, 0, .1);
-  border: solid thin rgba($grayLighter, .4);
-  left: 17px;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  width: $heatmap-width;
-}
 
 
 .sliding-panels > li {
@@ -48,7 +39,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
   -webkit-overflow-scrolling: touch;
   padding: 1em;
   position: absolute;
-
   height: 100%;
   left: 0;
   right: 0;
@@ -82,7 +72,23 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
 
 
 
-//HEATMAP POINTERS////////////////////////////////
+//HEATMAP STUFF////////////////////////////////
+.annotator-heatmap {
+  height: 100%;
+  position: fixed;
+  top: 0;
+ 
+  svg {
+    background: hsla(0, 0, 0, .1);
+    border: solid thin rgba($grayLighter, .4);
+    left: 17px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: $heatmap-width;
+  }
+}
+
 .heatmap-pointer {
   @include user-select(none);
   @include transition-property(left);
@@ -91,7 +97,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
   // color: rgb(238, 238, 238);
   color: #666;
   left: 0px;
-  position: fixed;
+  position: absolute;
   height: 20.1px;
   width: 40.1px;
   vertical-align: middle;

h/js/controllers.coffee

@@ -22,7 +22,6 @@ class App
     {plugins, provider} = annotator
     heatmap = annotator.plugins.Heatmap
     heatmap.element.appendTo $element
-
     # Update the heatmap when the host is updated or annotations are loaded
     events  = ['hostUpdated', 'annotationsLoaded']
     for event in events
@@ -36,8 +35,12 @@ class App
                 hl
               offset: offset
 
+    heatmap.element.bind 'click', ->
+      $scope.$apply -> $location.path('/viewer').search(null).replace()
+      annotator.show()
+
     heatmap.subscribe 'updated', =>
-      tabs = d3.select(annotator.element[0])
+      tabs = d3.select(heatmap.element[0])
         .selectAll('div.heatmap-pointer')
         .data =>
           buckets = []
@@ -48,10 +51,6 @@ class App
               buckets.push i
           buckets
 
-      heatmap.element.bind 'click', ->
-        $scope.$apply -> $location.path('/viewer').search(null).replace()
-        annotator.show()
-
       {highlights, offset} = d3.select(heatmap.element[0]).datum()
       height = $(window).outerHeight(true)
       pad = height * .2
@@ -92,8 +91,8 @@ class App
             provider.setActiveHighlights null
 
         # Does one of a few things when a tab is clicked depending on type
-        .on 'mouseup', (bucket) =>
-          d3.event.preventDefault()
+        .on 'click', (bucket) =>
+          d3.event.stopPropagation()
           search = $location.search() or {}
           search.bucket = bucket
 

h/js/plugin/heatmap.coffee

@@ -5,22 +5,23 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
   # heatmap svg skeleton
   html: """
-        <svg class="annotator-heatmap"
-             xmlns="http://www.w3.org/2000/svg"
-             version="1.1">
-           <defs>
-             <linearGradient id="heatmap-gradient" x2="0" y2="100%">
-             </linearGradient>
-             <filter id="heatmap-blur">
-               <feGaussianBlur stdDeviation="0 2"></feGaussianBlur>
-             </filter>
-           </defs>
-           <rect x="0" y="0" width="100%" height="100%"
-                 fill="url('#heatmap-gradient')"
-                 filter="url('#heatmap-blur')" >
-           </rect>
-         </svg>
-         """
+        <div class="annotator-heatmap">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               version="1.1">
+             <defs>
+               <linearGradient id="heatmap-gradient" x2="0" y2="100%">
+               </linearGradient>
+               <filter id="heatmap-blur">
+                 <feGaussianBlur stdDeviation="0 2"></feGaussianBlur>
+               </filter>
+             </defs>
+             <rect x="0" y="0" width="100%" height="100%"
+                   fill="url('#heatmap-gradient')"
+                   filter="url('#heatmap-blur')" >
+             </rect>
+           </svg>
+        </div>
+        """
 
   # buckets of annotations that overlap
   buckets: []
@@ -49,7 +50,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
   updateHeatmap: (data) =>
     return unless d3?
-
+    
     wrapper = this.element.offsetParent()
     {highlights, offset} = data
 
@@ -159,7 +160,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
     opacity = d3.scale.pow().domain([0, max]).range([.1, .6]).exponent(2)
 
     # d3 selections
-    stops = d3.select(@element[0]).datum(data) # cache highlights
+    stops = d3.select(@element[0]).datum(data)
       .select('#heatmap-gradient')
       .selectAll('stop').data(stopData, (d) => d)
     stops.enter().append('stop')