Offer an alternative slider based on nouislider for Facets Range Widget

Attached path resolved this issue

I would say these need to be added as dependencies in composer.json but that doesn't really work when this module is packaged as a submodule of facets. Perhaps it should be a separate project.

Ultimately I think the jquery plugin should be replaced with something more modern, but this patch would do the job in the interim.

I agree 100% with everything you said here. It should be seperate and more modern. The tests seem to fail now though, any clue why that is?

So could we say this submodule isn't supported in Drupal 9? or is there a new project for it?

I think applying #3could work for now.

For what it's worth, I'm using https://github.com/IonDen/ion.rangeSlider for a replacement of jQuery UI's slider. If I get time, I'll try contributing back, but I suspect replacing the widget in use isn't going to go smoothly for anyone already using the jQuery UI slider - e.g. if they have added their own theming or JS etc on top of it. If we were to replace the widget for something more modern like this, would that mean we need to start a new major version of the module perhaps to signify the backwards-compatibility break?

Patch #3 does not apply to 8.x-1.8.

Patch #8 on the other issue does apply but does not resolve the issue. Range slider does not appear.

One of these 2 issues should probably be closed as a duplicate.

Just in case, I also tried adding "drupal/jquery_ui_slider": "^1.1" and "npm-asset/jquery-ui-slider": "^1.12.1" to composer.json in my home directory. They did install, but didn't help.

I was still having issues on my site even after using the dependencies patch, so I attempted to make a patch using nouislider.

Granted, I don't know JavaScript well and it took a lot of Google's help combined with liberal console logging and banging my head against my desk, so I'm sure there is room for improvement, but here it is for review.

@seth.e.shaw Good idea!

Which version of noUiSlider did you test it with, and how to install it? I see references to nouislider.min.js and nouislider.min.css in facets_range_widget.libraries.yml but I can't find those files in either the repository at https://refreshless.com/nouislider/ or at https://packagist.org/packages/leongersen/nouislider, which confused me. I did however find them from some obscure sources by Googling, and put them in /libraries/nouislider/distribute/

When I use the slider I just see a plain bar. I don't see any pips or text related to the min/max values. I can click on it, which gives me the green stripe, then my page refreshes and the bar is empty again.

@nick-hope, I used composer to get npm-asset/nouislider. Which reminded me, I should have updated the README, so here is another patch and interdiff.

Let me know if the npm-asset version fixes the issue. Otherwise, perhaps it is a difference in browser or Drupal theme? I was using Chrome and Bartik.

composer require npm-asset/nouislider would only offer me version 14.6.3 at the highest, even though higher versions are seen at https://www.npmjs.com/package/nouislider. I tried a few times. So I installed 14.6.3 and now the pips are visible and slider is basically working.

I still can't work out where the actual 15.1.1 nouislider.min.js and nouislider.min.css files are on https://www.npmjs.com/package/nouislider or https://github.com/leongersen/noUiSlider so I can't manually overwrite with that later version.

I have a lot of problems with actually using it on my development site, but some of that is probably due to the complexity of my facet logic. Feels like Ajax-related issues too. Some issues I had:

1. After making it a dependent facet, when I select the parent facet (that it depends on), the slider does not appear unless I refresh the page.
2. After adjusting the slider, the parent facet becomes deselected.
3. Sometimes when I release the mouse after sliding the pips, both pips illogically jump to a value such as 1 or 4.
4. I kept getting in a situation where the "reset facets" link from the facets summary was not visible, despite the URL showing that the slider facet had set values, and the only way I could reset this slider was by manually deleting the arguments in the URL.

@nick-hope,

Apologies, I did test with 14.6.3. I checked the wrong spot when I reported to you my version above.

I can't speak to the dependent or AJAX implications... I had focused on those facet settings items used the the original JS constructor. I might be able to take a look at what is happening there but, again, my JS skills are limited.

Which means I updated the README incorrectly... 🤦‍♂️

Another patch. This one adds the facet object to the window variable so that sites can add their own callbacks to the slider.

Hi thanks for working on this. I ran into a few issues with #17:

1. After updating my composer.json per the Readme file, I could not get composer to download the file (see below), so I had to grab the library manually and place it in /libraries/nouislider. I decided to grab the 14.6.3 version since that was what was mentioned above.
2. The slider appears to be working, but I'm getting a ton of Javascript Uncaught Errors, most of which are repeats, but see below.

[Composer\Downloader\TransportException]
  curl error 60 while downloading https://asset-packagist.org/packages.json: SSL certificate problem: certificate has expired

This error appeared once in the console:

Uncaught Error: noUiSlider (14.6.3): create requires a single element, got: null
    at Object.create (<anonymous>:2:25149)
    at Object.Drupal.facets.addSlider (<anonymous>:22:16)
    at Object.attach (<anonymous>:15:25)
    at drupal.js?v=9.3.0-dev:27
    at Array.forEach (<anonymous>)
    at Object.Drupal.attachBehaviors (drupal.js?v=9.3.0-dev:24)
    at HTMLScriptElement.<anonymous> (ajax.js?v=9.3.0-dev:569)
    at Function.each (jquery.min.js?v=3.6.0:2)
    at a.fn.init.each (jquery.min.js?v=3.6.0:2)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0-dev:567)

And this error repeated many times:

drupal.js?v=9.3.0-dev:16 Uncaught Error: noUiSlider (14.6.3): Slider was already initialized.
    at Object.create (<anonymous>:2:25247)
    at Object.Drupal.facets.addSlider (<anonymous>:22:16)
    at Object.attach (<anonymous>:15:25)
    at drupal.js?v=9.3.0-dev:27
    at Array.forEach (<anonymous>)
    at Object.Drupal.attachBehaviors (drupal.js?v=9.3.0-dev:24)
    at HTMLScriptElement.<anonymous> (ajax.js?v=9.3.0-dev:569)
    at Function.each (jquery.min.js?v=3.6.0:2)
    at a.fn.init.each (jquery.min.js?v=3.6.0:2)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0-dev:567)

I have one faceted slider, and can share the site if needed in a DM.

Unfortunately the SSL connection for asset-packagist uses a certificate which recently expired. There are fixes/workarounds that can be applied in the meantime (see https://github.com/hiqdev/asset-packagist/issues/140#issuecomment-932445671), though sadly this doesn't inspire confidence in the service, which has been great until now!

Another note about this is the new slider doesn't seem to play well with the other facets.

For example, if you add checkboxes for a taxonomy, check one of the checkboxes, the range slider goes wonky, with only the start year showing.

In order to fix the js errors replace

+++ b/modules/facets_range_widget/js/slider.js
@@ -12,37 +11,48 @@
+          Drupal.facets.addSlider(document.getElementById(facet), facet_settings);
...
 

by

// target facet element from context
let facet_element = context.querySelector('#' + facet);
if(facet_element) {
  Drupal.facets.addSlider(facet_element, facet_settings);
}

I also had the js issue, so have reworked the patch from #17 to incorporate the suggestion in #23 which appears to work for me nicely now.

Sorry, previous commit was missing the readme work, have added this now to this patch

Let's get it tested.

the patch in #25 does not work for me. I am getting the following javascript error:

Uncaught ReferenceError: noUiSlider is not defined
addSlider https://-------/modules/composer/facets/modules/facets_range_widget/js/slider.js?v=9.2.8:26
attach https://-------/modules/composer/facets/modules/facets_range_widget/js/slider.js?v=9.2.8:18
etc.

I used composer to install the nouislider library; it installed v15.5.0. I am using Drupal v9.2.8 and the latest version of the Facets module (1.8.0).

I tested #25 against 2.0.x and it seems to work fine for my use case.

However I also needed AJAX along with the range slider. Here is a patch that allows the change handler function to be updated as seen in Issue #3052574.

The most recent patch/MR (#124) in that issue updates the change handler function to work with views AJAX. This patch allows that change to be propagated to nouislider; but it the AJAX patch is not required.

I update the patch from #28 to more appropriately configure nouislider so that it uses a true range setup with step. This should now allow it to work in conjunction with https://www.drupal.org/project/facets/issues/2898801#comment-13814446 which gives a single min/max value to improve performance.

Rework #29 as https://git.drupalcode.org/project/facets/-/merge_requests/43

The patch itself look good to me. But don't we need a kind of upgrade path? At least some documentation about the change in the README.

But to ease the process, I think we should add the dependency to facets' composer.json, even if people might not use the sub-module. That would eliminate the complexity about fetching assets. And it provides the upgrade path ;-)

What do you think?

#29 and the merge request need more work.

I successfully applied the patch in #29, however the check in facets_range_widget.module needs to be updated to recognise nouislider otherwise it still throws an error that "The jquery ui slider pips library is not installed".

Also, with reference #33, I don't think you can just add nouislider as a dependency as it is an npm-asset and needs additional composer.json configuration as referenced in the readme. I assume that's why there wasn't a dependency originally.

#29 applied for me to 2.0.0 but will no longer apply to 2.0.1.

Rerolled patch #29
Please test, just did a quick fix

#37 works, but just make sure you have the latest version of nouislider.

#37 still doesn't fix the check in facets_range_widget.module to recognise nouislider instead of slider pips, it still throws an error that "The jquery ui slider pips library is not installed".

People that are testing this must have both libraries installed?

I'll try and put an environment together so I can upload a patch.

I can confirm that #37 basically works. Thou I had to uninstall and reinstall the module after applying the patch.

Patch based on #37 with the addition of changing the library check to nouislider, else it will give a warning as it currently checks for the old library.

Updated the wording of the warning message, to say that it is noUiSlider which is missing

Please replace
$requirements['facets_range_widget_pips_slider'] = [
with
$requirements['facets_range_widget_nouislider'] = [
in facets_range_widget.install

@marksmith

Just a reroll of patch from #25 for 2/28/2022 commit 8a9574df.

If #3186953: JS errors for slider facet solves the issue as well, I prefer to commit that one because its dependencies are easy to manage automatically.
The nouislider based alternative should be implemented as a new module instead.

Reroll #45 against 2.0.2

As mentioned in #47, nouislider has to be provided as an alternative, not as replacement.

Seems that nouislider is not accessible out of box. Not sure how difficult it is to make it compliant.

It would be nice if we had an alternate slider that was in fact accessible out of box.

Possibly make https://www.drupal.org/project/nouislider a dependency, or an optional dependency.

I don't understrand why #45 was a reroll of #25 instead of #44 ?
#44 was working but #45 (and subsequent patches) are not
#45 does not keep min, max and step settings

So here is a reroll of #44 against 2.0.5

The facets range widget works on Drupal 9.4 with jQuery UI Slider & Touch punch since commit 768ed43.

I have already switched my dev site to this, however if we are pursuing nouislider, then as this issue has been updated to, it needs to be an option or sub module.

The patches should no longer replace the libraries that are now working.

Is it necessary to offer an alternative now that jQueryUI is being maintained again?

See this module implementation with many settings of NoUiSlider and input/inputs fields and keyboard interaction!
https://www.drupal.org/project/facets_range_nouislider

Here is a reroll of #55 against 2.0.9