upgrade typeahead.js, use lodash templates instead of chained jquery …

…appends, clean up points table layout and styles, breakdown page loads much more nicely, and lots more

.eslintrc

@@ -79,7 +79,7 @@ rules:
     no-use-before-define: 2
 
     # Stylistic Rules
-    brace-style: [1, "1tbs"]
+    brace-style: [1, "1tbs", {"allowSingleLine": true}]
     camelcase: [1, {"properties": "never"}]
     comma-spacing: 1
     comma-style: [2, "last"]

css/points-center.css

@@ -10,22 +10,26 @@ legend{
   margin: 50px 20px 15px;
 }
 
-.slivkan-suggestion{
-  min-height: 30px;
+.tt-suggestion{
+  min-height: 30px!important;
+  height: auto!important;
 }
 
-.slivkan-suggestion img{
+.tt-menu {
+  min-width: 260px!important;
+}
+
+.tt-suggestion img{
   display: inline-block;
-  position: absolute;
-  right: 4px;
   height: 30px;
+  float: right;
           transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
 }
 
-.slivkan-suggestion img:hover{
+.tt-suggestion img:hover{
   z-index: 100;
   -webkit-transform: translate(0,60px) scale(5);
      -moz-transform: translate(0,60px) scale(5);
@@ -34,7 +38,7 @@ legend{
           transform: translate(0,60px) scale(5);
 }
 
-.slivkan-dupe{
+.tt-suggestion.dupe{
   color: #999999;
   font-style: italic;
 }
@@ -51,10 +55,6 @@ legend{
     margin-left: 5px;
 }
 
-.tt-dropdown-menu{
-  min-width: 260px;
-}
-
 /* committee colors
 .Exec         td { background-color: #2f7ed8!important; }
 .Academic     td { background-color: #0d233a!important; color: white; }

css/typeahead.js-bootstrap.css

@@ -1,80 +1,54 @@
-.twitter-typeahead {
-    width: 100%;
-    position: relative;
-}
-
-.twitter-typeahead .tt-input,
-.twitter-typeahead .tt-hint {
-    margin-bottom: 0;
-    width: 100%;
-    height: 34px;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.twitter-typeahead .tt-hint {
-    color: #a1a1a1;
-    z-index: 1;
-    padding: 4px; /*6px 12px;*/
-    border: 1px solid transparent;
-}
-
-.twitter-typeahead .tt-input {
-    z-index: 2;
-    border-radius: 4px;
-}
-
-.input-group-addon + .twitter-typeahead > .tt-input {
-    border-radius: 0!important;
-}
-
-.input-group-appended > .twitter-typeahead > .tt-input {
-    border-top-right-radius: 0!important;
-    border-bottom-right-radius: 0!important;
-}
-
-.tt-menu {
-    min-width: 160px;
-    margin-top: 2px;
-    padding: 5px 0;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, .2);
-    *border-right-width: 2px;
-    *border-bottom-width: 2px;
-    -webkit-border-radius: 6px;
-       -moz-border-radius: 6px;
-            border-radius: 6px;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-            box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    -webkit-background-clip: padding-box;
-       -moz-background-clip: padding;
-            background-clip: padding-box;
-}
-
-.tt-suggestion {
-    display: block;
-    padding: 4px;/*3px 20px;*/
-}
-
-.tt-suggestion.tt-cursor {
-    color: #fff;
-    background-color: #0081c2;
-    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
-    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
-    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
-    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
-}
-
-.tt-suggestion.tt-cursor a {
-    color: #fff;
-}
-
-.tt-suggestion p {
-    margin: 0;
+span.twitter-typeahead .tt-menu,
+span.twitter-typeahead .tt-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+}
+span.twitter-typeahead .tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #333333;
+  white-space: nowrap;
+}
+span.twitter-typeahead .tt-suggestion:hover,
+span.twitter-typeahead .tt-suggestion:focus,
+span.twitter-typeahead .tt-suggestion.tt-cursor {
+  color: #ffffff;
+  text-decoration: none;
+  outline: 0;
+  background-color: #337ab7;
+}
+span.twitter-typeahead {
+  width: 100%;
+}
+.input-group span.twitter-typeahead {
+  display: block !important;
+}
+.input-group span.twitter-typeahead .tt-menu {
+  top: 32px !important;
+}
+.input-group.input-group-lg span.twitter-typeahead .tt-menu {
+  top: 44px !important;
+}
+.input-group.input-group-sm span.twitter-typeahead .tt-menu {
+  top: 28px !important;
 }

js/points-center/admin.js

@@ -1,5 +1,9 @@
 'use strict';
 
+var _ = {
+    find: require('lodash/collection/find'),
+    forEach: require('lodash/collection/forEach')
+};
 var utils = require('./utils');
 var slivkans, nicknames;
 var submitConfigOrQuarterInfo = function(name, value, confirmMessage) {
@@ -24,8 +28,8 @@ var slivkanTypeahead = function() {
             utils.appendSlivkanInputs(1);
         }
     }
-    if (!target.hasClass('tt-query')) {
-        target.typeahead(utils.typeaheadOpts('slivkans', slivkans)).focus();
+    if (!target.hasClass('tt-input')) {
+        target.typeahead(null, utils.typeaheadOpts('slivkans', slivkans)).focus();
     }
 
     return false;
@@ -39,15 +43,14 @@ var validateSlivkanName = function(entry) {
 
     // clear duplicates
     $('#slivkan-entry-tab').find('.slivkan-entry').each(function() {
-        var $self = $(this);
+        var _name = $(this).val();
 
-        if ($self.val().length > 0) {
-            if (nameArray.indexOf($self.val()) === -1) {
-                nameArray.push($self.val());
+        if (_name.length > 0) {
+            if (nameArray.indexOf(_name) === -1) {
+                nameArray.push(_name);
             } else {
-                $self.val('');
+                $(this).val('');
                 $('#duplicate-alert').show();
-                submission.validateSlivkanName(self.parent(), true);
             }
         }
     });
@@ -58,7 +61,7 @@ var validateSlivkanName = function(entry) {
     }
 
     if (name.length > 0) {
-        if (slivkans.indexOfKey('full_name', name) === -1) {
+        if (!utils.findSlivkan(slivkans, name)) {
             valid = false;
         }
         utils.updateValidity(entry, valid);
@@ -70,30 +73,28 @@ var validateSlivkanName = function(entry) {
 };
 
 var addSlivkans = function(data) {
-    var i, entry, name;
-    var entries = $('.slivkan-entry-control', '#slivkan-entry-tab');
+    var $entries = $('.slivkan-entry-control', '#slivkan-entry-tab');
     var len = data.length;
 
-    entries.find('.slivkan-entry').val('');
+    $entries.find('.slivkan-entry').val('').each(function(i, el) {
+        utils.updateValidity($(el), null);
+    });
 
-    if (entries.length <= len) {
-        utils.appendSlivkanInputs(len - entries.length + 1);
-        entries = $('.slivkan-entry-control', '#slivkan-entry-tab');
+    if ($entries.length <= len) {
+        utils.appendSlivkanInputs(len - $entries.length + 1);
+        $entries = $('.slivkan-entry-control', '#slivkan-entry-tab');
     }
 
-    for (i = 0; i < len; i++) {
-        entry = entries.eq(i);
-        name = slivkans[slivkans.indexOfKey('nu_email', data[i].nu_email)].full_name;
-        entry.find('.slivkan-entry').val(name);
-        if (data[i].points) {
-            entry.find('.committee-points').val(data[i].points);
-        }
-        validateSlivkanName(entry);
-    }
+    _.forEach(data, function(slivkan, i) {
+        var $entry = $entries.eq(i);
+        var name = _.find(slivkans, { nu_email: slivkan.nu_email }).full_name;
 
-    for (i; i < entries.length; i++) {
-        validateSlivkanName(entries.eq(i));
-    }
+        $entry.find('.slivkan-entry').val(name);
+
+        if (slivkan.points) {
+            $entry.find('.committee-points').val(slivkan.points);
+        }
+    });
 };
 
 module.exports = {
@@ -238,10 +239,10 @@ module.exports = {
             utils.appendSlivkanInputs(9);
 
             $('#slivkan-entry-tab')
-                .on('focus', '.slivkan-entry', slivkanTypeahead)
-                .on('typeahead:closed', '.slivkan-entry.tt-query',
-                    { callback: validateSlivkanName },
-                    utils.destroyTypeahead);
+                .on('focus', '.slivkan-entry', slivkanTypeahead);
+                // .on('typeahead:close', '.slivkan-entry',
+                //     { callback: validateSlivkanName },
+                //     utils.destroyTypeahead);
 
             $('[data-edit-committee]').on('click', function() {
                 var committee = $('#edit-committee').val();
@@ -290,7 +291,7 @@ module.exports = {
                 for (i = 0; i < entries.length; i++) {
                     name = entries.eq(i).val();
                     if (name.length > 0) {
-                        nuEmailArray.push(slivkans[slivkans.indexOfKey('full_name', name)].nu_email);
+                        nuEmailArray.push(utils.findSlivkan(slivkans, name).nu_email);
                     }
 
                     if (isCommittee) {
@@ -311,6 +312,7 @@ module.exports = {
                         slivkans: nuEmailArray
                     };
                 }
+
                 $.post(
                     utils.ajaxRoot + '/ajax/submitCommitteeOrSuite.php',
                     formData,