How to add Chosen JS library to theme?

Question

We are attempting to figure out how to properly add Chosen library to our custom theme. The main reason for doing this is to be able to add the Chosen JS files, but use a custom css file where we can control the output.

After reviewing Chosen Module we found that it adds a lot of bloat that we don't necessarily need and have found it difficult to override the css that is used.

Here is what we tried, but cannot get it to use the chosen.min.css and need help to see how it can be done.

mytheme.libraries.yml file

chosenjs:
    version: 1.x
    css:
       theme:
          css/chosen.min.css: { minified:true }
    js:
      js/chosen.min.js: { minified:true }

The chosen.min.js has the necessary settings to get the functionality we needed.

Answer 1

If the code posted above is correct, the indentation is off. It should look something like this:

search:
  version: VERSION
  js:
    extras/js/drupal/search/sort.js: {}
    extras/js/drupal/search/filter.js: {}

See how js is not indented under version?

The second part of it is you have to tell Drupal to load it either sitewide, or on demand:

Sitewide, you need to declare this in your theme info yaml:

libraries:
  - mytheme/search

If you want to do it on demand, something like:

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  $current_path = \Drupal::service('path.current')->getPath();

  // We really want to minimize the loading of these two libraries
  // for anonymous users. so far, we only need it on any /search* path.
  if (preg_match('/\/search+/', $current_path)) {
    $attachments['#attached']['library'][] = 'core/drupal';
    $attachments['#attached']['library'][] = 'core/jquery';
    $attachments['#attached']['library'][] = 'mytheme/search';
  }
}

Or you can put it in a specific twig template i.e. node.html.twig like this

{{ attach_library('mytheme/search') }}

Answer 2

Do you want to use the un-compressed versions? Because after enabling Drupal aggregation for JavaScript, this will then compress and minify everything. In your example, you are using the minified versions. I also need to add Chosen and Select2. Chosen 1.8.7 is located on https://github.com/harvesthq/chosen/releases/tag/v1.8.7.

I need the 5 files listed below.

chosen.jquery.js
chosen.proto.js
chosen.css
chosen-sprite.png
[email protected]

My libraries file is the following.

global-styling:
  css:
    theme:
      css/style.css: {}

  js:
    js/chosen.jquery.js: {}
    js/chosen.proto.js: {}
    js/datatables-init.js: {}
    js/datatables.js: {}

Then inside the sass directory, I place chosen.css and use import so it gets compiled into the main CSS file. We already did this with the datatables, but it came with SCSS instead of CSS.

Where do the 2 images go? I place the 2 png image files inside /assets/images/. This is where all of the theme images go. chosen-sprite.png will not work in this folder because chosen.css is pointing to this image in the root directory the way it comes in the original library.

Also, it will be difficult to upgrade this library because the files are in 3 different places.