Merge pull request #2640 from robertknight/t91-sort_dropdown_refactor

Extract sort dropdown into own component

h/static/scripts/app.coffee

@@ -125,6 +125,7 @@ module.exports = angular.module('h', [
 .directive('dropdownMenuBtn', require('./directive/dropdown-menu-btn'))
 .directive('publishAnnotationBtn', require('./directive/publish-annotation-btn'))
 .directive('searchStatusBar', require('./directive/search-status-bar'))
+.directive('sortDropdown', require('./directive/sort-dropdown'))
 .directive('topBar', require('./directive/top-bar'))
 
 .filter('converter', require('./filter/converter'))

h/static/scripts/directive/sort-dropdown.js

+module.exports = function () {
+  return {
+    restrict: 'E',
+    scope: {
+      sortBy: '=',
+      sortOptions: '=',
+      onChangeSortBy: '&',
+    },
+    templateUrl: 'sort_dropdown.html',
+  }
+}

h/static/scripts/directive/test/sort-dropdown-test.js

+'use strict';
+
+var util = require('./util');
+
+describe('sortDropdown', function () {
+  before(function () {
+    angular.module('app', [])
+      .directive('sortDropdown', require('../sort-dropdown'));
+  });
+
+  beforeEach(function () {
+    angular.mock.module('app');
+    angular.mock.module('h.templates');
+  });
+
+  it('should update the sort mode on click', function () {
+    var changeSpy = sinon.spy();
+    var elem = util.createDirective(document, 'sortDropdown', {
+      sortOptions: ['Newest', 'Oldest'],
+      sortBy: 'Newest',
+      onChangeSortBy: {
+        args: ['sortBy'],
+        callback: changeSpy,
+      }
+    });
+    var links = elem.find('li');
+    angular.element(links[0]).click();
+    assert.calledWith(changeSpy, 'Newest');
+  });
+});

h/static/scripts/directive/test/util.js

@@ -23,6 +23,26 @@ function hyphenate(name) {
  *
  *  { attrA: 'initial-value', scopeProperty: scopeValue }
  *
+ * The initial value may be a callback function to invoke. eg:
+ *
+ * var domElement = createDirective('myComponent', {
+ *  onEvent: function () {
+ *    console.log('event triggered');
+ *  }
+ * });
+ *
+ * If the callback accepts named arguments, these need to be specified
+ * via an object with 'args' and 'callback' properties:
+ *
+ * var domElement = createDirective('myComponent', {
+ *   onEvent: {
+ *     args: ['arg1'],
+ *     callback: function (arg1) {
+ *       console.log('callback called with arg', arg1);
+ *     }
+ *   }
+ * });
+ *
  * @param {Document} document - The DOM Document to create the element in
  * @param {string} name - The name of the directive to instantiate
  * @param {Object} [attrs] - A map of attribute names (in camelCase) to initial
@@ -55,6 +75,8 @@ function createDirective(document, name, attrs, initialScope, initialHtml) {
     var attrKey = key;
     if (typeof attrs[key] === 'function') {
       attrKey += '()';
+    } else if (attrs[key].callback) {
+      attrKey += '(' + attrs[key].args.join(',') + ')';
     }
     templateElement.setAttribute(attrName, attrKey);
   });
@@ -62,7 +84,11 @@ function createDirective(document, name, attrs, initialScope, initialHtml) {
 
   // setup initial scope
   Object.keys(attrs).forEach(function (key) {
-    $scope[key] = attrs[key];
+    if (attrs[key].callback) {
+      $scope[key] = attrs[key].callback;
+    } else {
+      $scope[key] = attrs[key];
+    }
   });
 
   // compile the template

h/static/scripts/stream-controller.coffee

@@ -51,6 +51,7 @@ module.exports = class StreamController
     fetch(20)
 
     $scope.isStream = true
+    $scope.sortOptions = ['Newest', 'Oldest']
     $scope.sort.name = 'Newest'
     $scope.threadRoot = threading.root
     $scope.loadMore = fetch

h/static/scripts/widget-controller.coffee

@@ -12,6 +12,7 @@ module.exports = class WidgetController
   ) ->
     $scope.isStream = true
     $scope.threadRoot = threading.root
+    $scope.sortOptions = ['Newest', 'Oldest', 'Location']
 
     @chunkSize = 200
     loaded = []

h/templates/client/sort_dropdown.html

+<span class="ng-cloak" dropdown keyboard-nav>
+  <span role="button"
+        data-toggle="dropdown"
+        dropdown-toggle>
+    Sorted by {{sortBy | lowercase}}
+    <i class="h-icon-arrow-drop-down"></i>
+  </span>
+  <ul class="dropdown-menu pull-right" role="menu">
+    <li ng-repeat="sortOption in sortOptions"
+        ng-click="onChangeSortBy({sortBy: sortOption})"
+        ><a class="dropdown-menu__link" href="">{{sortOption}}</a></li>
+  </ul>
+</span>

h/templates/client/viewer.html

@@ -11,20 +11,11 @@
     on-clear-selection="clearSelection()">
   </search-status-bar>
   <li ng-show="isStream">
-    <span class="ng-cloak" dropdown keyboard-nav>
-      <span role="button"
-            data-toggle="dropdown"
-            dropdown-toggle>
-        Sorted by {{sort.name | lowercase}}
-        <i class="h-icon-arrow-drop-down"></i>
-      </span>
-      <ul class="dropdown-menu pull-right" role="menu">
-        <li ng-click="sort.name = option"
-            ng-hide="option == 'Location' && !isSidebar"
-            ng-repeat="option in ['Newest', 'Oldest', 'Location']"
-            ><a class="dropdown-menu__link" href="">{{option}}</a></li>
-      </ul>
-    </span>
+    <sort-dropdown
+      sort-by="sort.name"
+      sort-options="sortOptions"
+      on-change-sort-by="sort.name = sortBy">
+    </sort-dropdown>
   </li>
   <li id="{{vm.id}}"
       class="paper thread"