refactor: Move order by equipmentment button to top of view

test/spec/controllers/sortableInventoryCtrlSpec.js

@@ -1,23 +1,29 @@
-'use strict';
+describe('Sortable Inventory Controller', () => {
+  let scope;
 
-describe('Sortable Inventory Controller', function() {
-  var scope;
-
-  beforeEach(inject(function($rootScope, $controller) {
+  beforeEach(inject(($rootScope, $controller) => {
     scope = $rootScope.$new();
     $controller('SortableInventoryController', {$scope: scope});
   }));
 
-  it('has no default sort order', function(){
-    expect(scope.order).to.not.exist;
+  it('defaults scope.order to name', () => {
+    expect(scope.order).to.eql('text()')
   });
 
-  it('sets sort criteria for all standard attributes', function(){
-    var oldOrder = scope.order;
+  describe('#setOrder', () => {
+    it('sets sort criteria for all standard attributes', () =>{
+      let oldOrder = scope.order;
 
-    var attrs = ['con', 'int', 'per', 'str', 'name', 'set'];
+      let attrs = [
+        'constitution',
+        'intelligence',
+        'perception',
+        'strength',
+        'name',
+        'set'
+      ];
 
-    attrs.forEach(function (attribute) {
+      attrs.forEach((attribute) => {
         scope.setOrder(attribute);
         expect(scope.order).to.exist;
         expect(scope.order).to.not.eql(oldOrder);
@@ -25,8 +31,12 @@ describe('Sortable Inventory Controller', function() {
       });
     });
 
-  it('does nothing when missing sort criteria', function(){
+    it('does nothing when missing sort criteria', () =>{
+      scope.order = null;
+
       scope.setOrder('foooo');
+
       expect(scope.order).to.not.exist;
     });
   });
+});

website/public/css/inventory.styl

@@ -32,13 +32,6 @@ menu.pets div
   display: inline-block
   vertical-align: top
 
-span.sort-menu
-  width: 100%
-  display: block
-
-span.sort-menu > span.btn-group
-  margin-left: 10px
-
 .current-pet
     left: 0px
     bottom: 0px

website/public/js/controllers/sortableInventoryCtrl.js

@@ -1,17 +1,19 @@
 habitrpg.controller('SortableInventoryController', ['$scope',
   function ($scope) {
-
-    // doing this in a function causes 10 $digest iteration error
-    attributeSort = {
-      con: ['-con', '-(con+int+per+str)'],
-      int: ['-int', '-(con+int+per+str)'],
-      per: ['-per', '-(con+int+per+str)'],
-      str: ['-str', '-(con+int+per+str)'],
+    var attributeSort = {
+      constitution: ['-con', '-(con+int+per+str)'],
+      intelligence: ['-int', '-(con+int+per+str)'],
+      perception: ['-per', '-(con+int+per+str)'],
+      strength: ['-str', '-(con+int+per+str)'],
       name: 'text()',
       set: 'set'
     }
 
+    $scope.order = attributeSort.name;
+    $scope.orderChoice = 'name';
+
     $scope.setOrder = function (order) {
+      $scope.orderChoice = order;
       if (order in attributeSort) {
         $scope.order = attributeSort[order];
       }

website/views/options/inventory/equipment.jade

@@ -1,6 +1,6 @@
 .container-fluid
   .row
-    .col-md-6.border-right
+    .col-md-6.border-right(ng-controller="SortableInventoryController")
       h3.equipment-title.hint(popover-trigger='mouseenter',
         popover-placement='right', popover-append-to-body='true',
         popover=env.t('battleGearText'))=env.t('battleGear')
@@ -12,27 +12,31 @@
           |  
           =env.t('autoEquipBattleGear')
 
-      div
+      .btn-toolbar
+        .btn-group
           button.btn.btn-default(type="button", ng-click='dequip("battleGear");') {{env.t("unequipBattleGear")}}
+        .btn-group
+          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
+            | Order By: {{env.t(orderChoice)}} #[span.caret]
+          ul.dropdown-menu
+            - each attr in ["name", "set"]
+              li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
+            li.divider(role="separator")
+            - each attr in ["constitution", "intelligence", "perception", "strength"]
+              li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
 
       li.customize-menu.inventory-gear
         menu.pets-menu(label='{{::label}}', ng-show='gear[klass]',
-          ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}', ng-controller="SortableInventoryController")
-          span(class="sort-menu") {{env.t('orderBy')}}
-            span.btn-group.btn-group-xs
-              button.btn.btn-default(ng-click='setOrder("name")')=env.t('name')
-              button.btn.btn-default(ng-if='klass == "armoire"' ng-click='setOrder("set")')=env.t('set')
-            span.btn-group.btn-group-xs
-              button.btn.btn-default(ng-repeat='attr in ["con", "int", "per", "str"]', ng-click='setOrder(attr)') {{env.t(attr)}}
+          ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
           div(ng-repeat='item in gear[klass] | orderBy: order')
-            button.customize-option(, class='shop_{{::item.key}}',
+            button.customize-option(class='shop_{{::item.key}}',
               ng-class='{selectableInventory: user.items.gear.equipped[item.type] == item.key}',
               ng-click='equip(item.key, "equipped")',
               popover='{{::item.notes()}}', popover-title='{{::item.text()}}',
               popover-trigger='mouseenter', popover-placement='right',
               popover-append-to-body='true')
 
-    .col-md-6
+    .col-md-6(ng-controller="SortableInventoryController")
       h3.equipment-title.hint(popover-trigger='mouseenter',
         popover-placement='right', popover-append-to-body='true',
         popover=env.t('costumeText'))=env.t('costume')
@@ -44,9 +48,19 @@
           |  
           =env.t('useCostume')
 
-      div
+      .btn-toolbar
+        .btn-group
           button.btn.btn-default(type="button", ng-click='dequip("costume");') {{env.t("unequipCostume")}}
           button.btn.btn-default(type="button", ng-click='dequip("petMountBackground");') {{env.t("unequipPetMountBackground")}}
+        .btn-group
+          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
+            | Order By: {{env.t(orderChoice)}} #[span.caret]
+          ul.dropdown-menu
+            - each attr in ["name", "set"]
+              li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
+            li.divider(role="separator")
+            - each attr in ["constitution", "intelligence", "perception", "strength"]
+              li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
 
       li.customize-menu(ng-if='!user.preferences.costume')
         .well.use-costume-info
@@ -56,13 +70,7 @@
 
       li.customize-menu(ng-if='user.preferences.costume')
         menu.pets-menu(label='{{::label}}', ng-show='gear[klass]',
-          ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}', ng-controller="SortableInventoryController")
-          span(class="sort-menu") {{env.t('orderBy')}}
-            span.btn-group.btn-group-xs
-              button.btn.btn-default(ng-click='setOrder("name")')=env.t('name')
-              button.btn.btn-default(ng-if='klass == "armoire"' ng-click='setOrder("set")')=env.t('set')
-            span.btn-group.btn-group-xs
-              button.btn.btn-default(ng-repeat='attr in ["con", "int", "per", "str"]', ng-click='setOrder(attr)') {{env.t(attr)}}
+          ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
           div(ng-repeat='item in gear[klass] | orderBy:order')
             button.customize-option(class='shop_{{::item.key}}',
               ng-class='{selectableInventory: user.items.gear.costume[item.type] == item.key}',