blacklight-hierarchy 6.5.0 → 6.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0087020faf523fb8671351fa18c62b7d4f2bd09f254b24564a5a5d7aac9d5593'
-  data.tar.gz: 6ffb7349402eea8340d105cc747d95d0089c94a552700f5f1106cb6fb069173a
+  metadata.gz: 141fa38233321f2397dfd254b51bc790f0be05647b5e3d6d907084999c73c6dc
+  data.tar.gz: d13151db84464e2c7485488e33b97fa455adf64823944e09fa40f41e4441cd7e
 SHA512:
-  metadata.gz: 66d064cea30098266d2276b2806775a348250f8f1eb9bd27958018502589dbd6402bf18273ab1cd034e85a6747ef0fa74aee88e93d0d1bda71552284c656d192
-  data.tar.gz: 685bd238b6bec0f0c41d2b3bbd831111734c3b472f5949e8f27b90f13ffa3c387784d486b617b4cab07ba5b16e490bd6584c94b0c20e557f0c0479a5697107d3
+  metadata.gz: 2bb3a06e042232ab2d95f68276692100e322723b99dc8b70c7f5dbdf28238b14e7fcaa5486becd5b95c7a97c0df5703614bac09fa75a61800e18ec47ae72891a
+  data.tar.gz: 024e46f594e967e271e57ee64f7cc0994a67ce0d7529625d422176feba5b5f7de62276774c2a3466e63795249e8d4a21525a158af6d7cf1e942ee94fbb8e0487

data/.github/workflows/ruby.yml

@@ -28,6 +28,10 @@ jobs:
             rails_version: "7.1.3.4"
             name: "Blacklight 7"
             blacklight_version: "7.38.0"
+          - ruby: "3.4"
+            rails_version: "8.0.2"
+            name: "Blacklight 9 beta"
+            blacklight_version: "9.0.0.beta2"
     env:
       BLACKLIGHT_VERSION: ${{ matrix.blacklight_version }}
     steps:

data/README.md

@@ -100,13 +100,13 @@ config.add_facet_field 'tag_facet', sort: 'alpha', label: 'Tag', component: Blac
 ```
 
 ### Changing the icons
-We store our closed/open icons as the SASS variables `$b-h-closed-icon` and `$b-h-closed-icon` in `hierarchy.scss`. By default we use SVGs provided by the [Font Awesome](https://github.com/FortAwesome/Font-Awesome) library. To change the icon, reassign these SASS variables with new SVG code.
+We store our closed/open icons as the CSS variables `--bl-h-closed-icon` and `--bl-h-closed-icon` in `hierarchy.css`. By default we use SVGs provided by the [Font Awesome](https://github.com/FortAwesome/Font-Awesome) library. To change the icon, reassign these CSS variables with new SVG code.
 
-```scss
-  /* app/assets/stylesheets/blacklight/hierarchy/hierarchy.scss */
+```css
+  /* app/assets/stylesheets/blacklight/hierarchy/hierarchy.css */
 
-  // plus sign
-  $b-h-closed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d='M200 344V280H136C122.7 280 112 269.3 112 256C112 242.7 122.7 232 136 232H200V168C200 154.7 210.7 144 224 144C237.3 144 248 154.7 248 168V232H312C325.3 232 336 242.7 336 256C336 269.3 325.3 280 312 280H248V344C248 357.3 237.3 368 224 368C210.7 368 200 357.3 200 344zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z'/></svg>") !default;
+  /* plus sign */
+  --bl-h-closed-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free %28Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License%29 Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M200 344V280H136C122.7 280 112 269.3 112 256C112 242.7 122.7 232 136 232H200V168C200 154.7 210.7 144 224 144C237.3 144 248 154.7 248 168V232H312C325.3 232 336 242.7 336 256C336 269.3 325.3 280 312 280H248V344C248 357.3 237.3 368 224 368C210.7 368 200 357.3 200 344zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z'/%3e%3c/svg%3e");
 ```
 
 
@@ -124,10 +124,6 @@ en:
       toggle_aria_label: Toggle call number section
 ```
 
-### Javascript
-
-The javascript in this project requires jquery, but it's up to you to provide it in a way that best works for your project.  You may consider the jquery-rails gem or if you use webpacker, you could use the jquery npm package.
-
 ## Caveats
 
 This code was ripped out of another project, and is still quite immature as a standalone project. Every effort has been made to make it as plug-and-play as possible, but it may stomp on Blacklight in unintended ways (e.g., ways that made sense in context of its former host app, but which aren't compatible with generic Blacklight). Proceed with caution, and report issues.

data/app/assets/javascripts/blacklight/hierarchy/hierarchy.js

@@ -1,31 +1,31 @@
-Blacklight.onLoad(function(){
-  Blacklight.do_hierarchical_facet_expand_contract_behavior();
-});
+Blacklight.onLoad(() => Blacklight.do_hierarchical_facet_expand_contract_behavior())
 
-(function($) {
-  Blacklight.do_hierarchical_facet_expand_contract_behavior = function() {
-    $( Blacklight.do_hierarchical_facet_expand_contract_behavior.selector ).each (
-        Blacklight.hierarchical_facet_expand_contract
-     );
+(() => {
+  Blacklight.do_hierarchical_facet_expand_contract_behavior = () => {
+    const elements = document.querySelectorAll(Blacklight.do_hierarchical_facet_expand_contract_behavior.selector)
+    elements.forEach(elem => Blacklight.hierarchical_facet_expand_contract(elem))
   }
-  Blacklight.do_hierarchical_facet_expand_contract_behavior.selector = '[data-controller="b-h-collapsible"]';
-  Blacklight.do_hierarchical_facet_expand_contract_behavior.handle = '[data-action="click->b-h-collapsible#toggle"]';
-  Blacklight.do_hierarchical_facet_expand_contract_behavior.list = '[data-b-h-collapsible-target="list"]';
+  Blacklight.do_hierarchical_facet_expand_contract_behavior.selector = '[data-controller="b-h-collapsible"]'
+  Blacklight.do_hierarchical_facet_expand_contract_behavior.handle = '[data-action="click->b-h-collapsible#toggle"]'
+  Blacklight.do_hierarchical_facet_expand_contract_behavior.list = '[data-b-h-collapsible-target="list"]'
 
-  Blacklight.hierarchical_facet_expand_contract = function() {
-    var li = $(this);
-    li.addClass('twiddle');
+  Blacklight.hierarchical_facet_expand_contract = (element) => {
+    element.classList.add('twiddle')
 
-    $(Blacklight.do_hierarchical_facet_expand_contract_behavior.list, this).each(function() {
-      if($('span.selected', this).length != 0){
-        li.addClass('twiddle-open');
-        li.children('.collapse').addClass('show');
+    const lists = element.querySelectorAll(Blacklight.do_hierarchical_facet_expand_contract_behavior.list)
+
+    lists.forEach((list) => {
+      if (list.querySelector('span.selected')) {
+        element.classList.add('twiddle-open')
+        const collapseElement = element.querySelector('.collapse')
+        if (collapseElement) {
+          collapseElement.classList.add('show')
+        }
       }
-    });
+    })
 
     // attach the toggle behavior to the li tag
-    li.children(Blacklight.do_hierarchical_facet_expand_contract_behavior.handle).click(function(e){
-      li.toggleClass('twiddle-open');
-    });
-  };
-})(jQuery);
+    const handle = element.querySelector(Blacklight.do_hierarchical_facet_expand_contract_behavior.handle)
+    handle?.addEventListener('click', () => element.classList.toggle('twiddle-open'))
+  }
+})()

data/app/assets/stylesheets/blacklight/hierarchy/hierarchy.css

@@ -0,0 +1,100 @@
+:root {
+  --bl-h-remove-color: var(--bs-secondary-color);
+
+  /* plus sign */
+  --bl-h-closed-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free %28Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License%29 Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M200 344V280H136C122.7 280 112 269.3 112 256C112 242.7 122.7 232 136 232H200V168C200 154.7 210.7 144 224 144C237.3 144 248 154.7 248 168V232H312C325.3 232 336 242.7 336 256C336 269.3 325.3 280 312 280H248V344C248 357.3 237.3 368 224 368C210.7 368 200 357.3 200 344zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z'/%3e%3c/svg%3e");
+
+  /* minus sign */
+  --bl-h-opened-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free %28Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License%29 Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M312 232C325.3 232 336 242.7 336 256C336 269.3 325.3 280 312 280H136C122.7 280 112 269.3 112 256C112 242.7 122.7 232 136 232H312zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z'/%3e%3c/svg%3e");
+}
+
+.facet-hierarchy {
+  list-style-type: none;
+  padding-left: 0;
+  flex: 1 1 100%;
+  width: 100%;
+
+  ul {
+    list-style-type: none;
+    padding-left: 0.75rem;
+    flex: 1 1 100%;
+    width: 100%;
+  }
+
+  .facet-label {
+    flex: 1;
+  }
+
+  .facet-select {
+    flex: 1;
+    word-break: break-word;
+  }
+
+  .facet-count {
+    float: right;
+    flex: 0 0 auto;
+    padding-left: 0.5rem;
+  }
+
+  .toggle-handle {
+    border: 0;
+    margin: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    vertical-align: top;
+    display: flex;
+    align-items: flex-start;
+
+    .closed,
+    .opened {
+      display: none;
+    }
+  }
+
+  .twiddle > .toggle-handle {
+    background-color: transparent;
+  }
+
+  .twiddle > .toggle-handle .toggle-icon {
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-top: 0.25rem;
+    min-height: 1.1rem;
+    min-width: 1.1rem;
+  }
+
+  .twiddle > .toggle-handle .closed {
+    background-image: var(--bl-h-closed-icon);
+    display: inline-block;
+  }
+
+  .twiddle > .toggle-handle .opened {
+    display: none;
+  }
+
+  .twiddle-open > .toggle-handle .closed {
+    display: none;
+  }
+
+  .twiddle-open > .toggle-handle .opened {
+    background-image: var(--bl-h-opened-icon);
+    display: inline-block;
+  }
+
+  .h-node,
+  .h-leaf {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 3px 0;
+    align-items: center;
+  }
+
+  .h-leaf {
+    padding-left: 1.5rem;
+  }
+
+  .remove {
+    color: var(--bl-h-remove-color);
+  }
+}

data/app/components/blacklight/hierarchy/facet_field_list_component.rb

@@ -2,7 +2,8 @@
 
 module Blacklight
   module Hierarchy
-    class FacetFieldListComponent < Blacklight::FacetFieldListComponent
+    superklass = defined?(Blacklight::Facets::ListComponent) ? Blacklight::Facets::ListComponent : Blacklight::FacetFieldListComponent
+    class FacetFieldListComponent < superklass
       DELIMITER = '_'
 
       # @param [Blacklight::Configuration::FacetField] as defined in controller with config.add_facet_field (and with :partial => 'blacklight/hierarchy/facet_hierarchy')

data/app/components/blacklight/hierarchy/selected_qfacet_value_component.html.erb

@@ -1,8 +1,5 @@
 <span class="facet-label">
   <%= content_tag :span, label_value, id: id, class: 'selected' %>
 </span>
-<%= link_to(remove_href, class: 'remove') do %>
-  <span class="remove-icon" aria-hidden="true">✖</span>
-  <span class="sr-only"><%= t('blacklight.search.facets.selected.remove') %></span>
-<% end %>
+<%= remove_link %>
 <%= render_facet_count %>

data/app/components/blacklight/hierarchy/selected_qfacet_value_component.rb

@@ -3,6 +3,7 @@
 module Blacklight
   module Hierarchy
     # Standard display of a SELECTED facet value, no link, special span with class, and 'remove' button.
+    # This is similar to Blacklight::Facet::SelectedValueComponent
     class SelectedQfacetValueComponent < QfacetValueComponent
       def initialize(field_name:, item:)
         @field_name = field_name
@@ -14,6 +15,13 @@ module Blacklight
       def remove_href
         helpers.search_action_path(helpers.search_state.filter(field_name).remove(item.qvalue).params)
       end
+
+      def remove_link
+        link_to(remove_href, class: "remove ps-2", rel: "nofollow") do
+          render(Blacklight::Icons::RemoveComponent.new(aria_hidden: true)) +
+            tag.span(t(:'blacklight.search.facets.selected.remove'), class: 'visually-hidden')
+        end
+      end
     end
   end
 end

data/lib/blacklight/hierarchy/version.rb

@@ -1,5 +1,5 @@
 module Blacklight
   module Hierarchy
-    VERSION = '6.5.0'.freeze
+    VERSION = '6.7.0'.freeze
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blacklight-hierarchy",
-  "version": "6.4.0",
+  "version": "6.7.0",
   "description": "[![Build Status](https://github.com/sul-dlss/blacklight-hierarchy/workflows/CI/badge.svg)](https://github.com/sul-dlss/blacklight-hierarchy/actions?query=branch%3Amain)",
   "main": "app/assets/javascripts/blacklight/hierarchy/hierarchy.js",
   "files": [
@@ -19,7 +19,6 @@
   "homepage": "https://github.com/sul-dlss/blacklight-hierarchy#readme",
   "devDependencies": {},
   "dependencies": {
-    "blacklight-frontend": ">=7.1 || 8.0",
-    "jquery": ">=3.0"
+    "blacklight-frontend": ">=7.1 <10.0.0"
   }
 }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: blacklight-hierarchy
 version: !ruby/object:Gem::Version
-  version: 6.5.0
+  version: 6.7.0
 platform: ruby
 authors:
 - Michael B. Klein
 bindir: exe
 cert_chain: []
-date: 2025-04-04 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: blacklight
@@ -152,7 +152,7 @@ files:
 - Rakefile
 - app/assets/javascripts/blacklight/hierarchy/blacklight_hierarchy_controller.js
 - app/assets/javascripts/blacklight/hierarchy/hierarchy.js
-- app/assets/stylesheets/blacklight/hierarchy/hierarchy.scss
+- app/assets/stylesheets/blacklight/hierarchy/hierarchy.css
 - app/components/blacklight/hierarchy/facet_field_component.html.erb
 - app/components/blacklight/hierarchy/facet_field_component.rb
 - app/components/blacklight/hierarchy/facet_field_list_component.html.erb
@@ -200,7 +200,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.3
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Hierarchical Facets for Blacklight
 test_files:

data/app/assets/stylesheets/blacklight/hierarchy/hierarchy.scss

@@ -1,100 +0,0 @@
-// plus sign
-$b-h-closed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d='M200 344V280H136C122.7 280 112 269.3 112 256C112 242.7 122.7 232 136 232H200V168C200 154.7 210.7 144 224 144C237.3 144 248 154.7 248 168V232H312C325.3 232 336 242.7 336 256C336 269.3 325.3 280 312 280H248V344C248 357.3 237.3 368 224 368C210.7 368 200 357.3 200 344zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z'/></svg>") !default;
-// minus sign
-$b-h-opened-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d='M312 232C325.3 232 336 242.7 336 256C336 269.3 325.3 280 312 280H136C122.7 280 112 269.3 112 256C112 242.7 122.7 232 136 232H312zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z'/></svg>") !default;
-
-$text-muted: #777 !default;
-
-:root {
-  --text-muted: #{$text-muted};
-}
-
-.facet-hierarchy {
-  list-style-type: none;
-  padding-left: 0;
-  flex: 1 1 100%;
-  width: 100%;
-
-  ul {
-    list-style-type: none;
-    padding-left: 0.75rem;
-    flex: 1 1 100%;
-    width: 100%;
-  }
-
-  .facet-label {
-    flex: 1;
-  }
-
-  .facet-select {
-    flex: 1;
-    word-break: break-word;
-  }
-
-  .facet-count {
-    float: right;
-    flex: 0 0 auto;
-    padding-left: 0.5rem;
-  }
-
-  .toggle-handle {
-    border: 0;
-    margin: 0;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    vertical-align: top;
-    display: flex;
-    align-items: flex-start;
-
-    .closed,
-    .opened {
-      display: none;
-    }
-  }
-
-  .twiddle > .toggle-handle {
-    background-color: transparent;
-  }
-
-  .twiddle > .toggle-handle .toggle-icon {
-    background-position: center;
-    background-repeat: no-repeat;
-    margin-top: 0.25rem;
-    min-height: 1.1rem;
-    min-width: 1.1rem;
-  }
-
-  .twiddle > .toggle-handle .closed {
-    background-image: escape-svg($b-h-closed-icon);
-    display: inline-block;
-  }
-
-  .twiddle > .toggle-handle .opened {
-    display: none;
-  }
-
-  .twiddle-open > .toggle-handle .closed {
-    display: none;
-  }
-
-  .twiddle-open > .toggle-handle .opened {
-    background-image: escape-svg($b-h-opened-icon);
-    display: inline-block;
-  }
-
-  .h-node,
-  .h-leaf {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 3px 0;
-  }
-
-  .h-leaf {
-    padding-left: 1.5rem;
-  }
-
-  .remove {
-    color: var(--text-muted);
-  }
-}