Merge pull request #88 from 18F/removing-chosen

Removing ChosenJS

openfecwebapp/tests/selenium/candidates_list_page_test.py

@@ -11,33 +11,21 @@ def setUp(self):
     def getFilterDivByName(self, name):
         return self.driver.find_element_by_xpath('//*[@for="' + name + '"]/..')
 
-    def openFilters(self):
-        self.driver.find_element_by_id('filter-toggle').click()
-
     def getColumn(self, index, data):
         return [row.find_elements_by_tag_name('td')[index].text
                 for row in data.find_elements_by_tag_name('tr')]
 
     def checkFilter(self, name, first_entry, second_entry,
                     count, index, result):
         self.driver.get(self.url)
-        self.openFilters()
         div = self.getFilterDivByName(name)
-        time.sleep(1)
-        div.find_element_by_xpath('./div/a/div/b').click()
-        self.assertEqual(
-            div.find_element_by_xpath('./div').get_attribute('class'),
-            ('chosen-container chosen-container-single '
-             'chosen-with-drop chosen-container-active'))
-        div.find_element_by_tag_name('input').send_keys(first_entry)
-        self.assertEqual(
-            len(div.find_elements_by_tag_name('li')),
-            count)
-        div.find_element_by_tag_name('input').send_keys(second_entry)
-        div.find_element_by_tag_name('input').send_keys(Keys.ENTER)
-        self.assertEqual(
-            div.get_attribute('class'),
-            'field active')
+        div.find_element_by_tag_name('select').send_keys(first_entry)
+        div.find_element_by_tag_name('select').send_keys(second_entry)
+        div.find_element_by_tag_name('select').send_keys(Keys.ENTER)
+        close_buttons = div.find_elements_by_xpath(
+            './/button[contains(@class, "button--remove")]'
+        )
+        self.assertEqual(len(close_buttons), 1)
         self.driver.find_element_by_id('category-filters').submit()
         results = (self.driver.find_elements_by_tag_name('tr'))
         col = [y.find_elements_by_tag_name('td')[index]
@@ -66,17 +54,14 @@ def testCandidateSorting(self):
 
     def testCandidatesFilterSideBar(self):
         self.driver.get(self.url)
-        self.openFilters()
         filters = self.driver.find_element_by_id('filters')
         self.assertIn('side-panel--open', filters.get_attribute('class'))
 
     def testCandidateNameFilter(self):
         self.driver.get(self.url)
-        self.openFilters()
         name_div = self.getFilterDivByName('name')
-        time.sleep(1)
         name_div.find_element_by_tag_name('input').send_keys('Alliegro')
-        name_div.find_element_by_tag_name('input').send_keys(Keys.ENTER)
+        self.driver.find_element_by_id('category-filters').submit()
         self.assertEqual(
             len(self.driver.find_element_by_tag_name('tbody')
                 .find_elements_by_tag_name('tr')),

openfecwebapp/tests/selenium/committees_list_page_test.py

@@ -11,32 +11,21 @@ def setUp(self):
     def getFilterDivByName(self, name):
         return self.driver.find_element_by_xpath('//*[@for="' + name + '"]/..')
 
-    def openFilters(self):
-        self.driver.find_element_by_id('filter-toggle').click()
-
     def getColumn(self, index, data):
         return [row.find_elements_by_tag_name('td')[index].text
                 for row in data.find_elements_by_tag_name('tr')]
 
     def checkFilter(self, name, first_entry, second_entry,
                     count, index, result):
         self.driver.get(self.url)
-        self.openFilters()
         cycle = self.getFilterDivByName(name)
-        cycle.find_element_by_xpath('./div/a/div/b').click()
-        self.assertEqual(
-            cycle.find_element_by_xpath('./div').get_attribute('class'),
-            ('chosen-container chosen-container-single '
-             'chosen-with-drop chosen-container-active'))
-        cycle.find_element_by_tag_name('input').send_keys(first_entry)
-        self.assertEqual(
-            len(cycle.find_elements_by_tag_name('li')),
-            count)
-        cycle.find_element_by_tag_name('input').send_keys(second_entry)
-        cycle.find_element_by_tag_name('input').send_keys(Keys.ENTER)
-        self.assertEqual(
-            cycle.get_attribute('class'),
-            'field active')
+        cycle.find_element_by_tag_name('select').send_keys(first_entry)
+        cycle.find_element_by_tag_name('select').send_keys(second_entry)
+        cycle.find_element_by_tag_name('select').send_keys(Keys.ENTER)
+        close_buttons = cycle.find_elements_by_xpath(
+            './/button[contains(@class, "button--remove")]'
+        )
+        self.assertEqual(len(close_buttons), 1)
         self.driver.find_element_by_id('category-filters').submit()
         results = (self.driver.find_elements_by_tag_name('tr'))
         col = [y.find_elements_by_tag_name('td')[index]
@@ -65,17 +54,15 @@ def testCommitteeSorting(self):
 
     def testCommitteesFilterSideBar(self):
         self.driver.get(self.url)
-        self.openFilters()
         filters = self.driver.find_element_by_id('filters')
         self.assertIn('side-panel--open', filters.get_attribute('class'))
 
     def testCommitteeNameFilter(self):
         self.driver.get(self.url)
-        self.openFilters()
         name_div = self.getFilterDivByName('name')
         time.sleep(1)
         name_div.find_element_by_tag_name('input').send_keys('pork')
-        name_div.find_element_by_tag_name('input').send_keys(Keys.ENTER)
+        self.driver.find_element_by_id('category-filters').submit()
         self.assertEqual(
             len(self.driver.find_element_by_tag_name('tbody')
                 .find_elements_by_tag_name('tr')),

static/js/init.js

@@ -22,12 +22,6 @@ $(document).ready(function() {
         new tablesort(this);
     });
 
-    $('#filter-toggle').click(function(){
-    	$('body').toggleClass('panel-active--left');
-        $('.side-panel--left').toggleClass('side-panel--open');
-        $(this).toggleClass('active');
-    })
-
     // Sticky page controls
     if ( $pageControls.length > 0 ) {
         var scrollPos,

static/js/modules/filters.js

@@ -8,6 +8,33 @@ var toTitleCase = function(str) {
     return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
 }
 
+// are the panels open?
+var open = true;
+
+var openFilterPanel = function() {
+    $('body').addClass('panel-active--left');
+    $('.side-panel--left').addClass('side-panel--open');
+    $('#filter-toggle').addClass('active').html('Hide Filters');
+    open = true;
+}
+
+var closeFilterPanel = function() {
+    $('body').removeClass('panel-active--left');
+    $('.side-panel--left').removeClass('side-panel--open');
+    $('#filter-toggle').removeClass('active').html('Show Filters');    
+    open = false;
+}
+
+openFilterPanel();
+
+$('#filter-toggle').click(function(){
+    if ( open === true ) {
+        closeFilterPanel();
+    } else {
+        openFilterPanel();
+    }
+})
+
 var activateFilter = function() {
     var $field;
 
@@ -16,7 +43,7 @@ var activateFilter = function() {
 
         $field = $('select[name=' + this.name + ']');
         addActiveStyle($field);
-        $field.val(this.value).trigger("chosen:updated");
+        $field.val(this.value);
     }
 };
 
@@ -32,43 +59,15 @@ var deactivateFilter = function() {
 };
 
 var bindFilters = function(e) {
-    $('#category-filters select, select[name=election_cycle]').chosen({
-        width: "100%",
-        allow_single_deselect: true
-    });
 
     if (typeof e !== 'undefined' && typeof e.query !== 'undefined') {
         $('#category-filters').find('input[name=name]').val(e.query).parents('.field').addClass('active');
 
         selectedFilters['name'] = e.query;
     }
 
-    // make select boxes work
-    $('#category-filters select').chosen().change(function(e, selected) {
-        // if there is no selected object, the user deselected the field
-        if (typeof selected === 'undefined') {
-            deactivateFilter.call(this);
-        }
-        else {
-            activateFilter.call(this);
-        }
-    });
-
-    // make name filter work
-    $('#category-filters input').on('input', function() {
-        var $nameField = $(this),
-            $plusButton = $nameField.siblings('.add-filter__button');
-
-        if ($nameField.val() === "") {
-            $plusButton.addClass('disabled');
-        }
-        else {
-            $plusButton.removeClass('disabled');
-        }
-    });
-
     // election cycle dropdown functionality
-    $('select[name=election_cycle]').chosen().change(function(e, selected) {
+    $('select[name=election_cycle]').change(function(e, selected) {
         var $e = $(e.target),
             url = document.location.origin
                 + '/'
@@ -80,14 +79,6 @@ var bindFilters = function(e) {
 
         document.location = url;
     });
-
-    // apply name filter
-    $('#category-filters').on('click', '.add-filter__button', function() {
-        var $plusButton = $(this);
-        if ($plusButton.hasClass('disabled') === false) {
-            activateFilter.call($plusButton.prev()[0]);
-        }
-    });
 };
 
 var selectedFilters = {};
@@ -134,17 +125,31 @@ var activateInitialFilters = function() {
     }
 
     if (open) {
-        $('#main').addClass('side--open');
+        $('body').addClass('panel-active--left');
     }
 }
 
+// Clearing the selects
+$('.button--remove').click(function(e){
+    e.preventDefault();
+    var removes = $(this).data('removes');
+    $('[name="' + removes + '"]').val('');
+    $(this).css('display', 'none');
+});
+
+$('.field select').change(function(){
+    var name = $(this).attr('name');
+    console.log(name);
+    if ( $(this).val() != '' ) {
+        $('[data-removes="' + name + '"]').css('display', 'block');
+    } else {
+        $('[data-removes="' + name + '"]').css('display', 'none');
+    }
+})
+
+
 module.exports = {
     init: function() {
-        // toggle filter drawer open/shut
-        $('#main').on('click', '.disclosure-toggle', function() {
-            $('.filter-field-container').slideToggle();
-            $(this).toggleClass('disclosure-toggle--closed')
-        });
 
         bindFilters();
 

static/styles/_base/_forms.scss

@@ -41,7 +41,7 @@ label + #{$all-text-inputs} {
 }
 
 #{$all-text-inputs} {
-  @include rem(height, 4.0rem);
+  height: 3rem;
 }
 
 textarea,
@@ -90,6 +90,7 @@ input[type="file"] {
 select {
   width: auto;
   max-width: 100%;
+  background: #fff;
 }
 
 

static/styles/_components/_alerts.scss

@@ -1,5 +1,5 @@
 #notice {
-  box-shadow: 0 0 2px 2px rgba(0,0,0,.2);
+  box-shadow: inset 0 -1px 1px 1px rgba(0, 0, 0, 0.5);
   padding: 20px;
   padding: 2rem;