WIP - demo revisions to use Tomselect without Stimulus

app/assets/javascripts/trln_argon/multi_select.js

@@ -0,0 +1,11 @@
+Blacklight.onLoad(function () {
+  document.querySelectorAll('.multi-select').forEach((el)=>{
+    let settings = {
+      plugins: ['checkbox_options',
+                'caret_position',
+                // 'input_autogrow',
+                'clear_button']
+    };
+    new TomSelect(el, settings);
+  });
+});

app/assets/javascripts/trln_argon/trln_argon.js

@@ -15,5 +15,4 @@
 //= require trln_argon/advanced_search_tt_menu.js
 //= require trln_argon/autocomplete.js
 //= require tom-select/tom-select.complete.js
-//= require trln_argon/controllers/multi_select_controller.js
-//= require stimulus/stimulus.umd.js
+//= require trln_argon/multi_select.js

app/assets/stylesheets/trln_argon/blacklight_advanced_search.scss

@@ -8,6 +8,7 @@ h2.query-criteria-heading label {
 }
 
 #advanced_search_facets {
+  --bl-facet-margin-bottom: 1rem;
   .col-form-label {
     text-align: left;
   }
@@ -54,14 +55,3 @@ h2.query-criteria-heading label {
     font-weight: 700;
   }
 }
-
-.card {
-  margin-top: 1rem !important; /* Override with higher value */
-  margin-bottom: 1rem !important; /* Override with higher value */
-}
-
-.ts-wrapper.multi .ts-control [data-value] {
-  background-color: #eeeeee !important;;
-  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%) !important;
-  text-shadow: none !important; /* Remove text-shadow */
-}

app/assets/stylesheets/trln_argon/trln_argon_dependencies.scss

@@ -10,7 +10,4 @@
 
 @import 'font-awesome';
 
-// @import 'chosen';
-
-@import 'tom-select/tom-select.default.min.css';
 @import 'tom-select/tom-select.bootstrap5.min.css';

app/components/trln_argon/multi_select_facet_component.html.erb

@@ -1,16 +1,16 @@
-<%= render(@layout.new(facet_field: @facet_field)) do |component| %>  
-    <% component.with_label do %>  
-      <%= @facet_field.label %>  
-    <% end %>  
-    <% component.with_body do %>  
-      <div class="facet-multi-select">  
-        <select <%= tag.attributes(select_attributes.merge(placeholder: t('blacklight_advanced_search.form.placeholder'))) %>>  
-          <% presenters.each do |presenter| %>  
-            <option <%= tag.attributes(option_attributes(presenter: presenter)) %>>  
-              <%= "#{presenter.label} (#{number_with_delimiter(presenter.hits)})" %>  
-            </option>  
-          <% end %>  
-        </select>  
-      </div>  
-    <% end %>  
+<%= render(@layout.new(facet_field: @facet_field)) do |component| %>
+    <% component.with_label do %>
+      <%= @facet_field.label %>
+    <% end %>
+    <% component.with_body do %>
+      <div class="facet-multi-select p-2">
+        <select <%= tag.attributes(select_attributes.merge(placeholder: t('blacklight_advanced_search.form.placeholder'))) %>>
+          <% presenters.each do |presenter| %>
+            <option <%= tag.attributes(option_attributes(presenter: presenter)) %>>
+              <%= "#{presenter.label} (#{number_with_delimiter(presenter.hits)})" %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+    <% end %>
   <% end %>

app/components/trln_argon/multi_select_facet_component.rb

@@ -28,14 +28,10 @@ def presenters
     # @return [Hash] HTML attributes for the select element
     def select_attributes
       {
-        class: "#{@facet_field.key}-select",
+        class: "#{@facet_field.key}-select multi-select",
         name: "f_inclusive[#{@facet_field.key}][]",
         placeholder: I18n.t('facets.advanced_search.placeholder'),
-        multiple: true,
-        data: {
-          controller: 'multi-select',
-          multi_select_plugins_value: select_plugins.to_json
-        }
+        multiple: true
       }
     end
 
@@ -46,14 +42,5 @@ def option_attributes(presenter:)
         selected: presenter.selected? ? 'selected' : nil
       }
     end
-
-    # TomSelect functionality can be expanded with plugins. `checkbox_options`
-    # allow us to use the existing advanced search facet logic by using checkboxes.
-    # More plugins can be found here: https://tom-select.js.org/plugins/
-    #
-    # @return [Array<String>] array of TomSelect plugins
-    def select_plugins
-      %w[checkbox_options caret_position input_autogrow clear_button]
-    end
   end
 end