diff --git a/css/stations.css b/css/stations.css index 8729376..fef8b3f 100644 --- a/css/stations.css +++ b/css/stations.css @@ -63,6 +63,16 @@ span.number { font-weight: bold; } +#stations-list #search { + border: none; + background-color: #e2e2e2; + border-radius: 5px; + width: 100%; + padding: 7px 10px; + margin-bottom: 10px; + box-sizing: border-box; +} + #stations-list .station-to-add { padding: 5px 0; font-weight: bold; @@ -78,15 +88,15 @@ span.number { border-top-right-radius: 3px; } -#stations-list .station-to-add:first-child:hover { - border-bottom: 1px solid #ef5800; -} - #stations-list .station-to-add:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } +#stations-list .station-to-add:first-child:hover { + border-bottom: 1px solid #ef5800; +} + #stations-list .station-to-add:hover { background-color: #ef5800; border-bottom: 1px solid #ef5800; diff --git a/js/popup.js b/js/popup.js index 9df8d8c..945dbfa 100644 --- a/js/popup.js +++ b/js/popup.js @@ -115,11 +115,17 @@ function showStationsList(e) { $('#main').removeClass('hide'); $('#stations-list').addClass('hide'); $('#add-station').removeClass('open'); + + // Remove search input listener + $('#search').off('keyup'); } else { // Display list of stations $('#main').addClass('hide'); $('#stations-list').removeClass('hide'); $('#add-station').addClass('open'); + + // Handle search input changes + $('#search').on('keyup', searchStation); } // Add stations to list @@ -134,8 +140,16 @@ function showStationsList(e) { } } +function searchStation() { + var value = $(this).val().toLowerCase(); + console.log(value); + $('.station-to-add').filter(function() { + $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); + }); +} + function addStation(event) { - // Track station adding + // Track station add _gaq.push(['_trackEvent', event.target.id, 'Adding station']); // Close stations list diff --git a/popup.html b/popup.html index 271408c..1f6299f 100644 --- a/popup.html +++ b/popup.html @@ -30,7 +30,13 @@