Merge pull request #232 from jmcarp/feature/glossary-improvements

Feature/glossary improvements

package.json

@@ -38,6 +38,7 @@
     "gulp-util": "^3.0.4",
     "handlebars": "^2.0.0",
     "jquery": "^2.1.4",
+    "list.js": "git://github.com/slifszyc/list.js.git",
     "node-bourbon": "^4.2.2",
     "node-neat": "^1.7.1-beta1",
     "querystring": "^0.2.0",

static/js/modules/accordion.js

@@ -4,6 +4,10 @@ var $ = require('jquery');
 
 var events = require('./events.js');
 
+var defaultOpts = {
+  closeAll: false
+};
+
 var accordion = {
   SLT_HEADER: '.js-accordion_header',
   SLT_ITEM: '.js-accordion_item',
@@ -19,11 +23,13 @@ var accordion = {
    * Events
    *   accordion:active
    *   @param header {jQuery} The accordion header that is activated to be expanded.
+   *   @param opts {Object} A hash of options to use.
    *
    * @param $base {jQuery} The container of the accordion.
    */
-  init: function($base) {
+  init: function($base, opts) {
     var self = this;
+    this.options = $.extend({}, defaultOpts, opts);
     this.$headers = this.findHeaders($base);
     this.$items = this.findItems($base);
     this.$buttons = this.findButtons(this.$headers);
@@ -34,15 +40,21 @@ var accordion = {
 
     events.on(this.EV_EXPAND, function(props) {
       var $header = $(props.header);
-      self.hideAll();
+      if (self.options.closeAll) {
+        self.hideAll();
+      }
       if ($.inArray($header, self.$headers)) {
         self.showHeader($header);
       }
     });
     events.on(this.EV_COLLAPSE, function(props) {
       var $header = $(props.header);
       if ($.inArray($header, self.$headers)) {
-        self.hideAll();
+        if (self.options.closeAll) {
+          self.hideAll();
+        } else {
+          self.hideHeader($header);
+        }
       }
     });
   },
@@ -106,6 +118,20 @@ var accordion = {
     });
     this.$headers.toggleClass(this.CLS_COLLAPSED, true);
   },
+
+  /**
+   * Hide all items under the accordion header passed in.
+   * @param $header {jQuery} The header to hide items under.
+   */
+  hideHeader: function($header) {
+    var $items = this.findItemsFromHeader($header),
+        self = this;
+    $items.each(function() {
+      self.hide($(this));
+    });
+    $header.toggleClass(this.CLS_COLLAPSED, true);
+  },
+
   /**
    * Show all items under the accordion header passed in.
    * @param $header {jQuery} The header to show items under.

static/js/modules/charts.js

@@ -53,8 +53,11 @@ function chartSeries() {
         .call(drawScale, scale, dim);
 
       bars.each(function(d) {
-        d.size = scale(d.value);
-        // console.log(d.value, '->', d.height);
+        if (d.value < 0) {
+          d.size = 0;
+        } else {
+          d.size = scale(d.value);
+        }
       })
       .style(dim, function(d) {
         return d.size + '%';

static/js/modules/glossary.js

@@ -6,7 +6,7 @@ var $ = require('jquery');
 var _ = require('underscore');
 var terms = require('./terms');
 
-require('../vendor/list.min.js');
+var List = require('list.js');
 
 var glossaryLink = $('.term'),
     glossaryIsOpen = false,
@@ -19,35 +19,41 @@ var glossaryLink = $('.term'),
 
 // Builds the List in the glossary slide panel
 populateList = function(terms) {
-    var itemTemplate = '<li id="glossary-list-item">'
-                        + '<div class="js-accordion_header accordion__header">'
-                        + '<h4 class="glossary-term"></h4>'
-                        + '<a href="#" class="accordion__button js-accordion_button"></a>'
-                        + '</div>'
-                        + '<p class="glossary-definition js-accordion_item"></p>'
-                        + '</li>';
+    var itemTemplate = '<li id="glossary-list-item">' +
+                        '<div class="js-accordion_header accordion__header">' +
+                        '<h4 class="glossary-term"></h4>' +
+                        '<a href="#" class="accordion__button js-accordion_button"></a>' +
+                        '</div>' +
+                        '<p class="glossary-definition js-accordion_item"></p>' +
+                        '</li>';
     var options = {
         item: itemTemplate,
-        valueNames: ['glossary-term','glossary-definition'],
+        valueNames: ['glossary-term', 'glossary-definition'],
         listClass: 'glossary__list',
-        searchClass: 'glossary__search',
+        searchClass: 'glossary__search'
     };
-    glossaryList = new List('glossary',options,terms);
+    glossaryList = new List('glossary', options, terms);
     glossaryList.sort('glossary-term', {order: 'asc'});
-}
+};
 
 populateList(terms);
 
 // Adding title to all terms
 $('.term').attr('title', 'Click to define').attr('tabindex', 0);
 
 findTerm = function(term){
-    glossaryList.search(term, ['glossary-term']);
     $('.glossary__search').val(term);
     // Highlight the term and remove other highlights
     $('.term--highlight').removeClass('term--highlight');
     $('span[data-term="' + term + '"]').addClass('term--highlight');
-}
+    glossaryList.filter(function(item) {
+      return item._values['glossary-term'] === term;
+    });
+    // Hack: Expand text for selected item
+    _.each(glossaryList.visibleItems, function(item) {
+      $(item.elm).find('.accordion__button').click();
+    });
+};
 
 // Opens the glossary
 showGlossary = function() {
@@ -56,7 +62,7 @@ showGlossary = function() {
     $('#glossary-toggle').addClass('active');
     $('#glossary-search').focus();
     glossaryIsOpen = true;
-}
+};
 
 // Hides the glossary
 hideGlossary = function() {
@@ -66,7 +72,7 @@ hideGlossary = function() {
     $('#glossary-toggle').removeClass('active');
     glossaryIsOpen = false;
     clearTerm();
-}
+};
 
 clearTerm = function() {
     $('#glossary-term').html('');
@@ -91,5 +97,12 @@ module.exports = {
                 showGlossary();
             }
         });
+
+        // Hack: Remove filters applied by clicking a term on new user input
+        $('#glossary-search').on('input', function() {
+          if (glossaryList.filtered) {
+            glossaryList.filter();
+          }
+        });
     }
 };

static/js/modules/typeahead.js

@@ -116,9 +116,7 @@ module.exports = {
       window.location = window.location.origin + '/' + datasetName + '/' + datum.id;
     });
 
-    $('.twitter-typeahead').css({
-        display: 'flex',
-    });
+    $('.twitter-typeahead').addClass('flex-container').css('display','');
   },
 
   init: function(){

static/styles/_base/_forms.scss

@@ -112,6 +112,10 @@ select {
   &:focus {
     outline: 3px solid $focus;
   }
+
+  &::-ms-expand {
+    display: none;
+  }
 }
 
 select[multiple] {
@@ -123,6 +127,8 @@ select[multiple] {
 
 .input-button-combo {
   @include display(flex);
+  @include align-items(stretch);
+  @include flex-direction(row);
   @include justify-content(center);
   height: 4rem;
 

static/styles/_components/_glossary.scss

@@ -50,4 +50,4 @@
 
 .glossary-term {
 	margin-bottom: 0;
-}
+}

static/styles/_components/_search-bar.scss

@@ -43,7 +43,7 @@
 // Typeahead
 .twitter-typeahead {
   @include display(flex);
-  width: 100%;
+  width: 50%;
 }
 
 .tt-dropdown-menu {

static/styles/_layout/_layout.scss

@@ -53,6 +53,10 @@ body {
   @include span-columns(6);
 }
 
+.flex-container {
+  @include display(flex);
+}
+
 // Chunks
 // These are common grouping sizes, described by their desktop size
 

templates/committees.html

@@ -18,7 +18,7 @@ <h1><img width="32" height="32" class="category-icon" src="/static/img/icon-comm
   {% if pagination %}
     {% include 'partials/pagination.html' %}
   {% endif %}
-  <button id="filter-toggle" data-slide="left">Filter Results</button>
+  <button id="filter-toggle" data-slide="left">Show Filters</button>
 </div>
 
 <section class="results-content">