Skip to content

Commit

Permalink
Add tom-select
Browse files Browse the repository at this point in the history
  • Loading branch information
Genia Kazymova committed Feb 7, 2025
1 parent 366f5aa commit 745cf0b
Show file tree
Hide file tree
Showing 17 changed files with 7,743 additions and 1,886 deletions.
2 changes: 1 addition & 1 deletion VERSION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3.0.1
3.0.2
8 changes: 0 additions & 8 deletions app/assets/javascripts/trln_argon/advanced_search_scope.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,5 @@ Blacklight.onLoad(function() {
var action = $(this).val();
$(".advanced").attr("action", "/" + action);
});

// fix labeling for fields generated by Chosen jquery library (https://harvesthq.github.io/chosen/)
$("[id$='_chosen']").each(function() {
$the_id = $(this).attr('id');
$aria_label = $(this).attr('id').replace('_chosen', '_label');
$('#' + $the_id + ' .chosen-search-input').attr('aria-labelledby', $aria_label);
});

});
});
7 changes: 0 additions & 7 deletions app/assets/javascripts/trln_argon/advanced_search_select.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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.text)}</div>`;
},
},
});
}

disconnect() {
this.select?.destroy();
}
});
} else {
console.error("Stimulus is not loaded yet.");
}
});
5 changes: 3 additions & 2 deletions app/assets/javascripts/trln_argon/trln_argon.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@
//= require trln_argon/progressive_links.js
//= require trln_argon/physical_media_facet.js
//= require bootstrap
//= require chosen.jquery.js
//= require blacklight/hierarchy/hierarchy.js
//= require trln_argon/location_facet.js
//= require trln_argon/advanced_search_select.js
//= require trln_argon/results_count_for_toggle.js
//= require trln_argon/google_books_preview.js
//= require trln_argon/fulltext_links.js
Expand All @@ -16,3 +14,6 @@
//= require trln_argon/typeahead.bundle.js
//= 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
15 changes: 11 additions & 4 deletions app/assets/stylesheets/trln_argon/blacklight_advanced_search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ h2.query-criteria-heading label {
.col-form-label {
text-align: left;
}

.chosen-search-input {
color: #767676;
}
}

#advanced_search {
Expand Down Expand Up @@ -58,3 +54,14 @@ 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 */
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,7 @@

@import 'font-awesome';

@import 'chosen';
// @import 'chosen';

@import 'tom-select/tom-select.default.min.css';
@import 'tom-select/tom-select.bootstrap5.min.css';
16 changes: 16 additions & 0 deletions app/components/trln_argon/multi_select_facet_component.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +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 %>
<% end %>
59 changes: 59 additions & 0 deletions app/components/trln_argon/multi_select_facet_component.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
module TrlnArgon
# 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

# @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
1 change: 1 addition & 0 deletions config/locales/trln_argon.en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ en:
sort_label: "Sort results by"
start_over: "Start over"
search_btn: 'Search'
placeholder: 'Select facets...'

trln_argon:

Expand Down
16 changes: 8 additions & 8 deletions lib/trln_argon/controller_override.rb
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,13 @@ module ControllerOverride
collapse: false,
show: true,
component: TrlnArgon::FacetFieldCheckboxesComponent,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent
config.add_facet_field TrlnArgon::Fields::AVAILABLE_FACET.to_s,
label: TrlnArgon::Fields::AVAILABLE_FACET.label,
limit: true,
collapse: false,
show: true,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent
config.add_facet_field TrlnArgon::Fields::LOCATION_HIERARCHY_FACET.to_s,
label: TrlnArgon::Fields::LOCATION_HIERARCHY_FACET.label,
limit: -1,
Expand All @@ -221,17 +221,17 @@ module ControllerOverride
# This helper is still needed for the label in constraints
helper_method: :location_filter_display,
component: Blacklight::Hierarchy::FacetFieldListComponent,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent
config.add_facet_field TrlnArgon::Fields::RESOURCE_TYPE_FACET.to_s,
label: TrlnArgon::Fields::RESOURCE_TYPE_FACET.label,
limit: true,
collapse: false,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent
config.add_facet_field TrlnArgon::Fields::PHYSICAL_MEDIA_FACET.to_s,
label: TrlnArgon::Fields::PHYSICAL_MEDIA_FACET.label,
limit: true,
collapse: false,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent
config.add_facet_field TrlnArgon::Fields::SUBJECT_TOPICAL_FACET.to_s,
label: TrlnArgon::Fields::SUBJECT_TOPICAL_FACET.label,
limit: true,
Expand All @@ -244,11 +244,11 @@ module ControllerOverride
# This helper is still needed for the label in constraints
helper_method: :call_number_filter_display,
component: Blacklight::Hierarchy::FacetFieldListComponent,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent
config.add_facet_field TrlnArgon::Fields::LANGUAGE_FACET.to_s,
label: TrlnArgon::Fields::LANGUAGE_FACET.label,
limit: true,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent

# See Range Facet Configuration options:
# https://github.com/projectblacklight/blacklight_range_limit?tab=readme-ov-file#range-facet-configuration
Expand Down Expand Up @@ -284,7 +284,7 @@ module ControllerOverride
fq: "#{TrlnArgon::Fields::DATE_CATALOGED_FACET}:[NOW-3MONTH/DAY TO NOW]" } },
label: TrlnArgon::Fields::DATE_CATALOGED_FACET.label,
limit: true,
advanced_search_component: TrlnArgon::AdvancedSearchFacetFieldComponent
advanced_search_component: TrlnArgon::MultiSelectFacetComponent

# Hierarchical facet configuration
# See: https://github.com/sul-dlss/blacklight-hierarchy/blob/main/README.md
Expand Down
Loading

0 comments on commit 745cf0b

Please sign in to comment.