Merge pull request #316 from hypothesis/annotation-viewer-component

Convert AnnotationViewerController to a component

src/sidebar/app.js

@@ -62,8 +62,7 @@ function configureLocation($locationProvider) {
 function configureRoutes($routeProvider) {
   $routeProvider.when('/a/:id',
     {
-      controller: 'AnnotationViewerController',
-      template: require('./templates/annotation_viewer_content.html'),
+      template: '<annotation-viewer-content search="search"></annotation-viewer-content>',
       reloadOnSearch: false,
       resolve: resolve,
     });
@@ -128,8 +127,6 @@ module.exports = angular.module('h', [
   'ngRaven',
 ])
 
-  .controller('AnnotationViewerController', require('./annotation-viewer-controller'))
-
   // The root component for the application
   .directive('hypothesisApp', require('./directive/app'))
 
@@ -137,6 +134,7 @@ module.exports = angular.module('h', [
   .component('annotation', require('./components/annotation').component)
   .component('annotationShareDialog', require('./components/annotation-share-dialog'))
   .component('annotationThread', require('./components/annotation-thread'))
+  .component('annotationViewerContent', require('./components/annotation-viewer-content'))
   .component('dropdownMenuBtn', require('./components/dropdown-menu-btn'))
   .component('excerpt', require('./components/excerpt'))
   .component('groupList', require('./components/group-list'))

src/sidebar/annotation-viewer-controller.js → src/sidebar/components/annotation-viewer-content.js

 'use strict';
 
-var angular = require('angular');
-
 /**
  * Fetch all annotations in the same thread as `id`.
  *
@@ -25,27 +23,25 @@ function fetchThread(store, id) {
 }
 
 // @ngInject
-function AnnotationViewerController (
-  $location, $routeParams, $scope,
-  annotationUI, rootThread, streamer, store, streamFilter, annotationMapper
+function AnnotationViewerContentController (
+  $location, $routeParams, annotationUI, rootThread, streamer, store,
+  streamFilter, annotationMapper
 ) {
+  var self = this;
+
   annotationUI.setAppIsSidebar(false);
 
   var id = $routeParams.id;
 
-  // Provide no-ops until these methods are moved elsewere. They only apply
-  // to annotations loaded into the stream.
-  $scope.focus = angular.noop;
-
-  $scope.search.update = function (query) {
+  this.search.update = function (query) {
     $location.path('/stream').search('q', query);
   };
 
   annotationUI.subscribe(function () {
-    $scope.rootThread = rootThread.thread(annotationUI.getState());
+    self.rootThread = rootThread.thread(annotationUI.getState());
   });
 
-  $scope.setCollapsed = function (id, collapsed) {
+  this.setCollapsed = function (id, collapsed) {
     annotationUI.setCollapsed(id, collapsed);
   };
 
@@ -77,4 +73,11 @@ function AnnotationViewerController (
   });
 }
 
-module.exports = AnnotationViewerController;
+module.exports = {
+  controller: AnnotationViewerContentController,
+  controllerAs: 'vm',
+  bindings: {
+    search: '<',
+  },
+  template: require('../templates/annotation_viewer_content.html'),
+};

src/sidebar/test/annotation-viewer-controller-test.js → src/sidebar/components/test/annotation-viewer-content-test.js

@@ -30,32 +30,20 @@ function FakeStore(annots) {
   };
 }
 
-describe('AnnotationViewerController', function () {
+describe('annotationViewerContent', function () {
 
   before(function () {
     angular.module('h', [])
-      .controller('AnnotationViewerController',
-        require('../annotation-viewer-controller'));
+      .component('annotationViewerContent',
+        require('../annotation-viewer-content'));
   });
 
   beforeEach(angular.mock.module('h'));
 
-  // Return the $controller service from Angular.
-  function getControllerService() {
-    var $controller;
-    angular.mock.inject(function (_$controller_) {
-      $controller = _$controller_;
-    });
-    return $controller;
-  }
-
   function createController(opts) {
     var locals = {
       $location: {},
       $routeParams: { id: 'test_annotation_id' },
-      $scope: {
-        search: {},
-      },
       annotationUI: {
         setAppIsSidebar: sinon.stub(),
         setCollapsed: sinon.stub(),
@@ -84,7 +72,14 @@ describe('AnnotationViewerController', function () {
         loadAnnotations: sinon.spy(),
       },
     };
-    locals.ctrl = getControllerService()('AnnotationViewerController', locals);
+
+    var $componentController;
+    angular.mock.inject(function (_$componentController_) {
+      $componentController = _$componentController_;
+    });
+    locals.ctrl = $componentController('annotationViewerContent', locals, {
+      search: {},
+    });
     return locals;
   }
 

src/sidebar/templates/annotation_viewer_content.html

 <thread-list
-  on-change-collapsed="setCollapsed(id, collapsed)"
-  on-force-visible="forceVisible(thread)"
+  on-change-collapsed="vm.setCollapsed(id, collapsed)"
+  on-force-visible="vm.forceVisible(thread)"
   show-document-info="true"
-  thread="rootThread">
+  thread="vm.rootThread">
 </thread-list>