Add V1 viewsort feature.

The viewsort feature allows users to better control the annotations that appear in the sidebar. The view control allows users to select either SCREEN (in which the sidebar only displays annotations that are currently visible on screen) or DOCUMENT (All annotation on the page are visible in the sidebar). The sort feature allows users to sort annotations by newest, oldest, or location (where they fall in the document). Both controls are implemented in simple tabs below the topbar.

The sort feature is implemented using Angular's very useful OrderBy attribute on ng-repeat.

The view control is implemented using updateviewer.

h/css/common.scss

@@ -1230,3 +1230,31 @@ h3.stream {
 .fadeOut-setup.fadeOut-start{
     opacity:0;
 }
+
+// View and Sort tabs ////////////////////
+
+.viewsort {
+  height: 180px;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;    
+  display: block !important;
+  position: absolute;
+  top: -2px;
+  right: 0px;
+}
+
+.viewtab, .sorttab {
+  @include smallshadow(0);
+  border-bottom-right-radius: 2em 5em;
+  border-bottom-left-radius: 2em 5em;
+  font-family: $sansFontFamily;
+  background: $white;
+  border: solid .1em $grayLighter;
+  padding: 4px 4px 0 4px;
+  margin: -6px 3px 0 3px;
+  width: auto;
+  display: inline-block;
+  top: 31px;
+  z-index: 4;   
+}
\ No newline at end of file

h/js/controllers.coffee

@@ -755,6 +755,17 @@ class Viewer
     annotator
   ) ->
     {providers, threading} = annotator
+    $scope.view = 'Screen'
+    $scope.sort = 'Newest'
+    $scope.views = [
+        {view:'Screen'}
+        {view:'Document'}]
+    $scope.sorts = [
+        {sort:'Newest'}
+        {sort:'Oldest'}
+        {sort:'Location'}]
+    $scope.predicate = 'updated'
+    $scope.reverse = true
 
     $scope.focus = (annotation) ->
       if angular.isArray annotation
@@ -774,6 +785,32 @@ class Viewer
           method: 'scrollTo'
           params: annotation.$$tag
 
+    $scope.applyview = (view) ->
+      $scope.view = view
+      if $scope.view == 'Screen'
+        annotator.updateViewer($rootScope.annotations)
+      
+      if $scope.view == 'Document'
+        annotator.updateViewer(annotator.plugins.Store.annotations)
+        
+      for p in providers
+        p.channel.notify
+          method: 'setDynamicBucketMode'
+          params: $scope.view == 'Screen'
+
+    $scope.applysort = (sort) ->
+      $scope.sort = sort
+      if $scope.sort == 'Newest'
+        $scope.predicate = 'updated'
+        $scope.reverse = true
+      if $scope.sort == 'Oldest'
+        $scope.predicate = 'updated'
+        $scope.reverse = false
+      if $scope.sort == 'Location'
+        $scope.predicate = 'target[0].selector[2].start'
+        $scope.reverse = false
+
+
 class Search
   this.$inject = ['$filter', '$location', '$rootScope', '$routeParams', '$sce', '$scope', 'annotator']
   constructor: ($filter, $location, $rootScope, $routeParams, $sce, $scope, annotator) ->

h/js/services.coffee

@@ -218,11 +218,11 @@ class Hypothesis extends Annotator
 
     .bind('showViewer', (ctx, ids=[]) =>
       return unless this.discardDrafts()
-      this.showViewer this._getAnnotationsFromIDs ids
+      $rootScope.$apply => this.showViewer this._getAnnotationsFromIDs ids
     )
 
     .bind('updateViewer', (ctx, ids=[]) =>
-      this.updateViewer this._getAnnotationsFromIDs ids
+      $rootScope.$apply => this.updateViewer this._getAnnotationsFromIDs ids
     )
 
     .bind('setTool', (ctx, name) =>
@@ -320,7 +320,6 @@ class Hypothesis extends Annotator
       ($location, $rootScope) =>
         @buildReplyList annotations
         $rootScope.annotations = annotations
-        $rootScope.$digest()
     ]
     this
 
@@ -333,7 +332,6 @@ class Hypothesis extends Annotator
         @buildReplyList annotations
         $rootScope.annotations = annotations
         $location.path('/viewer').replace()
-        $rootScope.$digest()
     ]
     this