Problem/Motivation

  • Bug with drupal 10, because jquery once is removed.
  • The decimal does not work
  • Code standard has many bugs

Proposed resolution

this patch will fixed

  1. Drupal 10 compatible
  2. Code standard when we run "phpcs --standard=Drupal,DrupalPractice range_slider"
  3. Add a step in the widget field settings (if the step is not defined, it will take the step = 1). If not decimal field doesn't work
  4. Fixed #output__field_prefix, #output__field_suffix is not defined in the widget
  5. Add feature if suffix or prefix is % it will convert output to %
  6. Add composer.json

Sorry I confused the patch file for a personal project in last post. this patch is good

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

lazzyvn created an issue. See original summary.

lazzyvn’s picture

Issue summary: View changes
lazzyvn’s picture

StatusFileSize
new9.11 KB

just change slector .js-form-type--range-slider (not .js-form-type-range-slider)

metasim’s picture

StatusFileSize
new303 bytes

The patch applies successfully, except on the .info.yml file at line #5 on

core_version_requirement

,

range_slider.info.yml.rej:

--- range_slider.info.yml	(revision 7c067925566449a7e7830c746fc3dde7a108ba1a)
+++ range_slider.info.yml	(date 1677972525355)
@@ -2,4 +2,4 @@
 type: module
 description: Integration with https://rangeslider.js.org
 core: 8.x
-core_version_requirement: ^8 || ^9
+core_version_requirement: ^8 || ^9 || ^10

Also while testing the patch I get a js error

Uncaught TypeError: $(...).find(...).findOnce is not a function

on `range_slider/js/range-slider.js:59`

The new replacement for the same is once.filter() as per this

Based on this I think the findOnce() can be replaced with the following line of code by making use of the once.filter()

const filteredElements = once.filter('rangeSlider','.form-type-range-slider input, .js-form-type-range-slider input');
        filteredElements.forEach(function () {
          $(this).rangeslider('destroy');
        })
baikho’s picture

Status: Needs review » Needs work

Thanks all for your work on this. Could we please apply the changes via a fork merge request to ensure the tests run?

Moving back to "Needs work" as per #4.

lazzyvn’s picture

@metasim
should i remove core 8.x in info?
line 59 can we make ? like this? $(context).find('.js-form-type--range-slider input').once.filter('rangeSlider').rangeslider('destroy');
i dont know how to test

be aware that the input class is now js-form-type--range-slider (double --) and no longer js-form-type-range-slider (maybe work with jquery )
@baikho I commit but git is not allowed to make a merge request. Another module I can make a merge request

lazzyvn’s picture

new patch fixed js once

bbombachini’s picture

metasim’s picture

StatusFileSize
new198.74 KB
new228.67 KB

@lazzyvn I tried testing the new MR, for some reason the diff.patch still fails on .info.yml file

--- range_slider.info.yml
+++ range_slider.info.yml
@@ -1,5 +1,4 @@
 name: Range Slider
 type: module
 description: Integration with https://rangeslider.js.org
-core: 8.x
-core_version_requirement: ^8 || ^9
+core_version_requirement: ^8.8 || ^9 || ^10

After manually changing the core_version_requirement and adding ^10 to it I tested it.
Findings:
Drupal Test Version: 10
Browsers Tested on: Chrome and Firefox

The module seems to work fine on both, see the attached screenshots.

However If you look at the element classes I did not find the class mentioned by you with double dash i.e
js-form-type--range-slider
I found 2 classes namely
js-form-type-range-slider& form-type--range-slider

Based on the screenshots when I click the submit button the value seems to update fine based on the position of the slider.

lazzyvn’s picture

StatusFileSize
new24.7 KB

I check claro theme core/themes/claro/templates/form-element.html.twig
there is 'form-item--' ~ name|clean_class, on line 23
so i think it's better if we take 'js-form-type-'~type as selector
I add option use library, if we don't want to use rangeslider.js library, we can use original type range html5, it will be easy to customize with css.
I create a new merge request
I also add a patch
Please merge and release new version for drupal 10

lazzyvn’s picture

Issue summary: View changes
StatusFileSize
new12.47 KB
metasim’s picture

@lazzyvn I tested this patch on Drupal core version 9.5.9

The patch applies successfully,
On testing this range slider on a custom form,
There were no errors on console or php.

On submit the range slider returns the values as expected .

lazzyvn’s picture

@baikho: please release new version

baikho’s picture

Sorry but the tests are still failing in the Merge Requests, so this can't be merged yet.

WRT #13 please apply changes onto a Merge Request as a Patch will fail to apply on Composer as you can see in both #3 and #13.

baikho’s picture

Version: 8.x-1.x-dev » 2.0.x-dev

Bumping version given CR Remove jQuery dependency from the once feature, and we are to discard Core 8.x / core_version_requirement: ^8 compatibility in .info.yml

lazzyvn’s picture

Pardon my ignorance, but why are we changing the class to .js-form-type--range-slider input? This will likely break any JS or CSS in existing projects. What theme are you using?
No it doesn't.
I checked all theme you can find in
\web\core\themes\[theme]\templates\form-element.html.twig

or another theme admin like Bootstrap 5 admin, Gin ...
it uses always

'js-form-type-' ~ type|clean_class,
'form-item-' ~ name|clean_class,

Only claro theme have

'js-form-type-' ~ type|clean_class,
'form-type--' ~ type|clean_class,
'form-item--' ~ name|clean_class,

So the best selector for all of theme is
'js-form-type-' ~ type|clean_class,

baikho’s picture

#19 Thanks for clarifying.

Sorry, I see now that the selector in patch #13 is correct, I was looking at Merge request !4

raunak.singh’s picture

@baikho thanks for maintaining this module well. I have query there is any timeline when we are able to see stable version of range_slider for drupal 10?

lazzyvn’s picture

StatusFileSize
new14.49 KB

Oh i forgot to add \range_slider\config\schema\range_slider.schema.yml

use_library:
type: string
label: 'Use library'
step:
type: string
label: 'Step'

that's why it fails the test. With this patch i think it will pass all test

raunak.singh’s picture

@lazzyvn Test fail to apply this patch.

lazzyvn’s picture

No, It says pass, there is a problem with git on Jenkins because branch 2.x is not release

Patch Failed to Apply - View results on dispatcher

fatal: git apply: bad git-diff - expected /dev/null on line 349
range_slider 2.0.x-dev branch result
PHP 8.1 & MySQL 5.7, D9.5 1 pass most recent, 10 Jun 2023 at 17:06 CEST
History
Updated Result
11 Aug 2023 at 11:14 CEST
PHP 8.1 & MySQL 5.7, D9.5 Patch Failed to Apply
11 Aug 2023 at 11:12 CEST
PHP 8.1 & MySQL 5.7, D10.0.7 Patch Failed to Apply

baikho’s picture

@baikho thanks for maintaining this module well. I have query there is any timeline when we are able to see stable version of range_slider for drupal 10?

#21, once my review remarks in Merge request !4 have been resolved and the tests pass. Thank you

rhiss’s picture

Hi, just a little change to the patch because of "The 'core_version_requirement' constraint (^9.2 || ^10) requires the 'core' key not be set ..."

baikho’s picture

StatusFileSize
new39.45 KB

I manually tested updated Merge request !4, but it doesn't work and the slider doesn't render. In the meantime I'm going to take the changes only needed for D10 compatibility, please raise the other changes in a new issue as they need more work. Thank you

  • baikho committed f861e757 on 2.0.x
    Issue #3346027 by lazzyvn, baikho, rhiss, metasim, bbombachini: Drupal...
baikho’s picture

Status: Needs work » Fixed

baikho’s picture

Title: Fixed drupal 10 compatible, step, Code standard, decimal. » Drupal 10 compatibility
lazzyvn’s picture

StatusFileSize
new28.71 KB

Oh you are right i forgot commit file Element/RangeSlider.php


    if (!empty($element['#use_library'])) {
      $element['#attached']['drupalSettings']['range_slider']['elements']['#' . $element['#id']]['use_library'] = $element['#use_library'];
    }

I recommit right nows
It must show like this

recommit

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.