settings: dropdown code cleanup

Author: René Kooi

src/views/users/settings/DropdownView.js

@@ -2,20 +2,19 @@ define(function (require, exports, module) {
 
   const Backbone = require('backbone');
   const $ = require('jquery');
-  const _ = require('underscore');
+  const { each, defer } = require('underscore');
 
   const DropdownView = Backbone.View.extend({
     className: 'extplug-dropdown',
-    tagName: 'div',
+
     initialize() {
       if (!this.options.selected) {
         this.options.selected = Object.keys(this.options.options)[0];
       }
 
       this.onDocumentClick = this.onDocumentClick.bind(this);
-      this.onBaseClick = this.onBaseClick.bind(this);
-      this.onRowClick = this.onRowClick.bind(this);
     },
+
     render() {
       this.$label = $('<label />').addClass('title').text(this.options.label);
       this.$dl = $('<dl />').addClass('dropdown');
@@ -27,14 +26,14 @@ define(function (require, exports, module) {
 
       this.$rows = $('<dd />');
       let selected;
-      _.each(this.options.options, function (text, value) {
+      each(this.options.options, (text, value) => {
         let row = $('<div />').addClass('row').data('value', value);
         let el = $('<span />').text(text);
         if (this.options.selected === value) {
           selected = row;
         }
         row.append(el).appendTo(this.$rows);
-      }, this);
+      });
 
       this.$dl
         .append(this.$selected)
@@ -44,23 +43,26 @@ define(function (require, exports, module) {
         .append(this.$label)
         .append(this.$dl);
 
-      this.$selected.on('click', this.onBaseClick);
-      this.$rows.on('click', this.onRowClick);
+      this.$selected.on('click', this.onBaseClick.bind(this));
+      this.$rows.on('click', this.onRowClick.bind(this));
       // trigger the above as a default
       if (selected) {
         selected.click();
       }
       return this;
     },
-    close() {
-      this.$dl.removeClass('open extplug-dropdown-up');
-      $(document).off('click', this.onDocumentClick);
-    },
+
     remove() {
       this.$('dt, dd').off();
       $(document).off('click', this.onDocumentClick);
       this._super();
     },
+
+    close() {
+      this.$dl.removeClass('open extplug-dropdown-up');
+      $(document).off('click', this.onDocumentClick);
+    },
+
     onBaseClick(e) {
       if (this.$dl.hasClass('open')) {
         this.close();
@@ -72,21 +74,27 @@ define(function (require, exports, module) {
         else {
           this.$dl.addClass('open extplug-dropdown-up');
         }
-        _.defer(() => {
+        defer(() => {
           $(document).on('click', this.onDocumentClick);
         });
       }
     },
+
     onRowClick(e) {
       let row = $(e.target).closest('.row');
-      this.$dl.find('.row').removeClass('selected');
+
+      this.$rows.children().removeClass('selected');
       row.addClass('selected');
-      this.$dl.removeClass('open');
       this.$selectedValue.text(row.text());
       this.trigger('change', row.data('value'));
+
+      // will be closed by onDocumentClick()
     },
+
     onDocumentClick(e) {
-      _.defer(this.close.bind(this));
+      defer(() => {
+        this.close();
+      });
     },
 
     canExpandDownward() {