re-add bootstrap-multiselect

benthemonkey · Oct 11, 2015 · 1366d30 · 1366d30
1 parent de1b179
commit 1366d30
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 30 deletions.
diff --git a/css/points-center.css b/css/points-center.css
@@ -47,14 +47,6 @@ legend{
   padding: 6px 4px;
 }
 
-.dropdown-menu ul{
-    margin-bottom: 0;
-}
-
-.dropdown-menu input[type="checkbox"]{
-    margin-left: 5px;
-}
-
 /* committee colors
 .Exec         td { background-color: #2f7ed8!important; }
 .Academic     td { background-color: #0d233a!important; color: white; }

diff --git a/gulpfile.js b/gulpfile.js
@@ -71,6 +71,7 @@ var stylesheetsShare = function(opts) {
     var stream = gulp.src([
         'node_modules/bootstrap/dist/css/bootstrap.css',
         'node_modules/bootstrap/dist/css/bootstrap-theme.css',
+        'node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css',
         'node_modules/font-awesome/css/font-awesome.css',
         'node_modules/nprogress/nprogress.css',
         'css/typeahead.js-bootstrap.css',

diff --git a/js/points-center/admin.js b/js/points-center/admin.js
@@ -101,9 +101,9 @@ module.exports = {
     init: function() {
         var quarter = $('[data-current-quarter]').text();
 
-        // $('.multiselect').multiselect({
-        //     buttonClass: 'btn btn-default'
-        // });
+        $('.multiselect').multiselect({
+            buttonClass: 'btn btn-default'
+        });
 
         $('[data-toggle="popover"]').popover().on('click', function() {
             return false;

diff --git a/js/points-center/index.js b/js/points-center/index.js
@@ -2,6 +2,7 @@
 
 window.$ = window.jQuery = require('jquery');
 require('bootstrap');
+require('../../node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect');
 
 $(function() {
     var nprogress = require('nprogress');

diff --git a/js/points-center/table.js b/js/points-center/table.js
@@ -5,8 +5,8 @@ var utils = require('./utils');
 var i, table, events;
 
 var columnFilter = function() {
-    var committees = $('#committeeFilter').find('input:checked').map(function() {
-        return this.value;
+    var committees = $('#committeeFilter').find('option:selected').map(function() {
+        return this.innerHTML;
     }).get();
     var ims = $('#imFilter').val();
     var n = 0;
@@ -107,7 +107,10 @@ module.exports = {
 
         $('#imFilter').on('change', columnFilter);
 
-        $('#committeeFilter input').on('click', columnFilter);
+        $('#committeeFilter').multiselect({
+            buttonClass: 'btn btn-default',
+            onChange: columnFilter
+        }).siblings('.placeholder').hide();
 
         $('#noFilter').on('click', function() {
             localStorage.spc_tab_noFilter = 1;

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "js/points-center/index.js",
   "dependencies": {
     "bootstrap": "3.3.5",
+    "bootstrap-multiselect": "0.9.13",
     "datatables": "1.10.9",
     "font-awesome": "4.4.0",
     "highcharts-browserify": "0.1.5",

diff --git a/spc-table.php b/spc-table.php
@@ -56,22 +56,21 @@
 			</select>
 		</div>
 		<div class="form-group">
-			<div class="dropdown">
-				<a class="btn btn-default" data-toggle="dropdown" href="#">Committees <b class="caret"></b></a>
-				<form class="dropdown-menu" id="committeeFilter">
-					<ul class="list-unstyled">
-						<li><label><input type="checkbox" value="Exec" checked> Exec</label></li>
-						<li><label><input type="checkbox" value="Academic" checked> Academic</label></li>
-						<li><label><input type="checkbox" value="Facilities" checked> Facilities</label></li>
-						<li><label><input type="checkbox" value="Faculty" checked> Faculty</label></li>
-						<li><label><input type="checkbox" value="IT" checked> IT</label></li>
-						<li><label><input type="checkbox" value="Philanthropy" checked> Philanthropy</label></li>
-						<li><label><input type="checkbox" value="Publications" checked> Publications</label></li>
-						<li><label><input type="checkbox" value="Social" checked> Social</label></li>
-						<li><label><input type="checkbox" value="CA" checked> CA</label></li>
-						<li><label><input type="checkbox" value="Other" checked> Other</label></li>
-					</ul>
-				</form>
+			<label for="committeeFilter">Committes:</label><br>
+			<select class="multiselect" multiple="multiple" id="committeeFilter" style="display: none;">
+				<option selected>Exec</option>
+				<option selected>Academic</option>
+				<option selected>Facilities</option>
+				<option selected>Faculty</option>
+				<option selected>IT</option>
+				<option selected>Philanthropy</option>
+				<option selected>Publications</option>
+				<option selected>Social</option>
+				<option selected>CA</option>
+				<option selected>Other</option>
+			</select>
+			<div class="btn-group placeholder">
+				<div class="btn btn-default">All selected (10) <b class="caret"></b></div>
 			</div>
 		</div>
 		<div class="form-group">