Test TomSelect and Stimulus

app/assets/javascripts/trln_argon/controllers/application.js

@@ -0,0 +1,5 @@
+document.addEventListener("DOMContentLoaded", function () {
+    if (!window.Stimulus) {
+      window.Stimulus = Stimulus.Application.start();
+    }
+  });

app/assets/javascripts/trln_argon/controllers/multi_select_controller.js

@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", function () {
+    if (window.Stimulus) {
+      // Only register the controller if Stimulus is loaded
+      const application = window.Stimulus.Application.start();
+
+      application.register("multi-select", class extends Stimulus.Controller {
+        static values = { plugins: Array };
+
+        connect() {
+          this.select = new TomSelect(this.element, {
+            plugins: this.pluginsValue,
+            render: {
+              item: function (data, escape) {
+                return `<div>${escape(data.value)}</div>`;
+              },
+            },
+          });
+        }
+
+        disconnect() {
+          this.select?.destroy();
+        }
+      });
+    } else {
+      console.error("Stimulus is not loaded yet.");
+    }
+  });
+

app/assets/javascripts/trln_argon/trln_argon.js

@@ -16,5 +16,6 @@
 //= require trln_argon/advanced_search_tt_menu.js
 //= require trln_argon/autocomplete.js
 //= require tom-select/tom-select.complete.js
-//= require trln_argon/controllers/tom_select_controller.js
-//= require trln_argon/controllers/tom_select_init.js
+//= require trln_argon/controllers/multi_select_controller.js
+//= require stimulus/stimulus.umd.js
+//= require trln_argon/controllers/application.js

app/components/trln_argon/multi_select_facet_component.html.erb

@@ -4,7 +4,7 @@
     <% end %>  
     <% component.with_body do %>  
       <div class="facet-multi-select">  
-        <select <%= tag.attributes(select_attributes) %>>  
+        <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)})" %>  

app/components/trln_argon/multi_select_facet_component.rb

@@ -1,58 +1,59 @@
 module TrlnArgon
-      # Multi select facet component using TomSelect
-      class MultiSelectFacetComponent < Blacklight::Component
-        def initialize(facet_field:, layout: nil)
-          @facet_field = facet_field
-          @layout = layout == false ? FacetFieldNoLayoutComponent : Blacklight::FacetFieldComponent
-        end
-
-        # @return [Boolean] whether to render the component
-        def render?
-          presenters.any?
-        end
-
-        # @return [Array<Blacklight::FacetFieldPresenter>] array of facet field presenters
-        def presenters
-          return [] unless @facet_field.paginator
-
-          return to_enum(:presenters) unless block_given?
-
-          @facet_field.paginator.items.each do |item|
-            yield @facet_field.facet_field
-                              .item_presenter
-                              .new(item, @facet_field.facet_field, helpers, @facet_field.key, @facet_field.search_state)
-          end
-        end
-
-        # @return [Hash] HTML attributes for the select element
-        def select_attributes
-          {
-            class: "#{@facet_field.key}-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
-            }
-          }
-        end
-
-        # @return [Hash] HTML attributes for the option elements within the select element
-        def option_attributes(presenter:)
-          {
-            value: presenter.value,
-            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
+  # Multi select facet component using TomSelect
+  class MultiSelectFacetComponent < Blacklight::Component
+    def initialize(facet_field:, layout: nil)
+      super()
+      @facet_field = facet_field
+      @layout = layout == false ? FacetFieldNoLayoutComponent : Blacklight::FacetFieldComponent
+    end
+
+    # @return [Boolean] whether to render the component
+    def render?
+      presenters.any?
+    end
+
+    # @return [Array<Blacklight::FacetFieldPresenter>] array of facet field presenters
+    def presenters
+      return [] unless @facet_field.paginator
+
+      return to_enum(:presenters) unless block_given?
+
+      @facet_field.paginator.items.each do |item|
+        yield @facet_field.facet_field
+                          .item_presenter
+                          .new(item, @facet_field.facet_field, helpers, @facet_field.key, @facet_field.search_state)
       end
-  end
+    end
+
+    # @return [Hash] HTML attributes for the select element
+    def select_attributes
+      {
+        class: "#{@facet_field.key}-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
+        }
+      }
+    end
+
+    # @return [Hash] HTML attributes for the option elements within the select element
+    def option_attributes(presenter:)
+      {
+        value: presenter.value,
+        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

config/locales/trln_argon.en.yml

@@ -66,6 +66,7 @@ en:
             sort_label: "Sort results by"
             start_over: "Start over"
             search_btn: 'Search'
+            placeholder: 'Select facets...'
 
     trln_argon: