Merge pull request #90 from pulibrary/bootstrap_select_dropdown

Convert selects to bootstrap-select.

Gemfile

@@ -73,3 +73,6 @@ gem 'riiif'
 gem 'sidekiq'
 gem 'string_rtl'
 gem 'valhalla', path: 'valhalla'
+source 'https://rails-assets.org' do
+  gem 'rails-assets-bootstrap-select', '1.12.2'
+end

Gemfile.lock

@@ -64,6 +64,7 @@ PATH
 
 GEM
   remote: https://rubygems.org/
+  remote: https://rails-assets.org/
   specs:
     aasm (4.12.2)
       concurrent-ruby (~> 1.0)
@@ -490,6 +491,9 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 5.1.1)
       sprockets-rails (>= 2.0.0)
+    rails-assets-bootstrap-select (1.12.2)
+      rails-assets-jquery (>= 1.8)
+    rails-assets-jquery (2.2.4)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
       actionview (~> 5.x, >= 5.0.1)
@@ -727,6 +731,7 @@ DEPENDENCIES
   puma
   rack-mini-profiler
   rails (= 5.1.1)
+  rails-assets-bootstrap-select (= 1.12.2)!
   rails-controller-testing
   recipient_interceptor
   riiif

app/assets/javascripts/application.js

@@ -23,6 +23,8 @@
 //= require nestedSortable/jquery.mjs.nestedSortable
 //= require openseadragon/openseadragon
 //= require openseadragon/jquery
+//= require bootstrap-select
+//= require bootstrap_select_dropdown
 //= require valhalla/valhalla
 //= require_tree .
 $(document).ready(function() {

app/assets/javascripts/bootstrap_select_dropdown.js

@@ -0,0 +1,53 @@
+$(function (){
+    // for some strange reason selectpicker prevents the click-event. so just use mouseup
+    // when clicking on an optgroup "label", toggle it's "children"
+    $(document).on("mouseup", ".bootstrap-select .dropdown-header", function (){
+        var $optgroup = $(this),
+            $ul = $optgroup.closest("ul"),
+            optgroup = $optgroup.data("optgroup"),
+
+            // options that belong to this optgroup
+            $options = $ul.find("[data-optgroup="+optgroup+"]").not(".selected").not($optgroup);
+
+        // show/hide options
+        if($optgroup.hasClass("closed")) {
+          $options.show();
+        } else {
+          $options.hide();
+        }
+
+        $optgroup.toggleClass("closed");
+    });
+
+    // initially close all optgroups that have the class "closed"
+    $(document).on("loaded.bs.select", function (){
+        $(this).find(".dropdown-header.closed").each(function (){
+            var $optgroup = $(this),
+                $ul = $optgroup.closest("ul"),
+                optgroup = $optgroup.data("optgroup"),
+
+                // options that belong to this optgroup
+                $options = $ul.find("[data-optgroup="+optgroup+"]").not(".selected").not($optgroup);
+
+            // show/hide options
+            $options.hide();
+        });
+    });
+    $(document).on("changed.bs.select", function(){
+      $(this).find(".dropdown-header.closed").each(function(){
+        var $optgroup = $(this),
+            $ul = $optgroup.closest("ul"),
+            optgroup = $optgroup.data("optgroup"),
+
+            // options that belong to this optgroup
+            $options = $ul.find("[data-optgroup="+optgroup+"]").not(".selected").not($optgroup);
+
+        // show/hide options
+        if($optgroup.hasClass("closed")) {
+          $options.hide();
+        } else {
+          $options.show();
+        }
+      })
+    });
+});

app/assets/javascripts/figgy_boot.es6

@@ -8,6 +8,7 @@ export default class Initializer {
     this.initialize_form()
     this.structure_manager = new StructureManager
     this.modal_viewer = new ModalViewer
+    $("select").selectpicker({'liveSearch': true})
   }
 
   initialize_form() {

app/assets/javascripts/rights_note.js

@@ -1,10 +1,10 @@
 /* toggle rights note field based on which rights statement is selected */
 $(document).ready(function(){
-    $('.rights-statement').change(rights_note_visibility);
+    $('select.rights-statement').change(rights_note_visibility);
 });
 
 function rights_note_visibility() {
-    var stmt = $('.rights-statement');
+    var stmt = $('select.rights-statement');
     var note = $('.rights-note');
     if ( $.inArray(stmt.val(), stmt.data("notable"))  == -1) {
         note.val('');

app/assets/stylesheets/application.scss

@@ -41,3 +41,4 @@
 @import 'blacklight/blacklight';
 @import "hydra-editor/hydra-editor";
 @import "openseadragon/openseadragon";
+@import 'bootstrap-select';

app/views/records/edit_fields/_member_of_collection_ids.html.erb

@@ -1 +1 @@
-<%= f.input :member_of_collection_ids, collection: @collections, label_method: :title, value_method: :id, input_html: { multiple: f.object.multiple?(key) }, include_blank: true, required: f.object.required?(key) %>
+<%= f.input :member_of_collection_ids, collection: @collections, label_method: :title, value_method: :id, input_html: { multiple: f.object.multiple?(key) }, include_blank: false, required: f.object.required?(key) %>

spec/controllers/scanned_resources_controller_spec.rb

@@ -36,7 +36,7 @@
         expect(response.body).to have_field "Portion Note"
         expect(response.body).to have_field "Navigation Date"
         expect(response.body).to have_selector "#scanned_resource_append_id[value='#{parent.id}']", visible: false
-        expect(response.body).to have_select "Collections", name: "scanned_resource[member_of_collection_ids][]", options: ["", collection.title.first]
+        expect(response.body).to have_select "Collections", name: "scanned_resource[member_of_collection_ids][]", options: [collection.title.first]
         expect(response.body).to have_select "Rights Statement", name: "scanned_resource[rights_statement]", options: [""] + ControlledVocabulary.for(:rights_statement).all.map(&:label)
         expect(response.body).to have_select "PDF Type", name: "scanned_resource[pdf_type]", options: ["Color PDF", "Grayscale PDF", "Bitonal PDF", "No PDF"]
         expect(response.body).to have_select "Holding Location", name: "scanned_resource[holding_location]", options: [""] + ControlledVocabulary.for(:holding_location).all.map(&:label)