Problem/Motivation

jQuery UI Dialog and Autocomplete both need to be shimmed: #2158943: Add a native dialog element to deprecate the jQuery UI dialog #3076171: Provide a new library to replace jQuery UI autocomplete
Both features use jQuery UI position(). Instead of including position() in the scope of either of those issues, it should be scoped to its own issue as all of these jUI shim issues are already quite large, and this can easily get its own scope.

Steps to reproduce

Proposed resolution

Create a custom version of jQuery UI position in /misc, to be used instead of the position within jQuery UI. It will be modified to meet Drupal coding standards and so that it extends jQuery instead of jQuery UI. This only requires changing assumptions regarding the presence of $.ui to non-UI jQuery.

Because jQuery UI position does not have any fixed dependencies on other parts of jQuery UI, making a custom version for use in core is acceptably maintainable.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3201170

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

bnjmnm created an issue. See original summary.

bnjmnm’s picture

StatusFileSize
new30.92 KB
new56.58 KB
  • The tests in both patches pass locally, but don't currently pass on DrupalCI. This is likely due to viewport size differences, and several of the expected values can be different depending on viewport size. The test explicitly sets viewport size, but it may have been done in a way that DrupalCI interprets differently than local.
  • The shim is currently only applied to the deprecated jquery.ui.position: library. There are still several libraries that call position-min.jsdirectly that would need this replaced with the shim. That's a next step
  • The shim covers these position config options: my:, at:, of:, collision: (other than of: accepting an Event as a value). Currently, using:, within: are not shimmed.
bnjmnm’s picture

Status: Active » Needs review
Issue tags: +JavaScript
StatusFileSize
new31.25 KB
new62.73 KB

Nightwatch tests should work on DrupalCI now. For a task this large there is certainly more to do (much of which is elaborated on in the prior comment), but setting to needs review as it is a large task that should get additional eyes on it.

In addition to the steps mentioned, I plan to do another round of comments as the logic of the shim is complex.

bnjmnm’s picture

Already spotted another requirement. Contextual links has a call

$nestedContextual.css({
        top: $nestedContextual.position().top + height
      });

That can result in

jqueryui.position.popper.adapter.js?v=9.2.0-dev:63 Uncaught TypeError: Cannot read property 'of' of undefined
    at S.fn.init.position (jqueryui.position.popper.adapter.js?v=9.2.0-dev:63)
    at adjustIfNestedAndOverlapping (contextual.js?v=9.2.0-dev:48)
    at initContextual (contextual.js?v=9.2.0-dev:85)
    at contextual.js?v=9.2.0-dev:111

I suspect this is because there should be a default value for "of". Will include in next steps.

bnjmnm’s picture

StatusFileSize
new62.59 KB

Needed a reroll

lauriii’s picture

  1. +++ b/core/core.libraries.yml
    @@ -653,13 +653,19 @@ jquery.ui.mouse:
    -  js:
    -    assets/vendor/jquery.ui/ui/position-min.js: { weight: -11.8, minified: true }
    

    Would it be possible to add some integration tests with dialog for example? I think it could be simple since we already have quite extensive test coverage here.

  2. +++ b/core/misc/jqueryui.position.popper.adapter.es6.js
    @@ -0,0 +1,369 @@
    +      let tipPosition = {
    

    Should we find a more generic name to call the element than tip?

  3. +++ b/core/misc/jqueryui.position.popper.adapter.es6.js
    @@ -0,0 +1,369 @@
    +      if (reference === document.body) {
    

    There's over 100 lines inside this if statement which makes reading this a bit challenging 😅 Would it be possible to move at least some of this outside here?

  4. +++ b/core/misc/jqueryui.position.popper.adapter.es6.js
    @@ -0,0 +1,369 @@
    +        if (referenceAttach.vertical !== 'center') {
    ...
    +          // If vertical positioning is centered, use top offset and
    +          // base it on halved client height.
    

    IMO this would be easier to read if the if condition was flipped especially given that the comment explaining this is now in the else statement.

  5. +++ b/core/tests/Drupal/Nightwatch/Tests/jQueryUIPositionShimTest.js
    @@ -0,0 +1,980 @@
    +const testScenarios = {
    

    Any thoughts on running these tests also on RTL?

bnjmnm’s picture

StatusFileSize
new69.41 KB
new45.28 KB

This addresses #6.2-4 and some nontrivial refactoring to make it more readable.

Will look into the tests mentioned in #6.1 and #6.5

nod_’s picture

Didn't go through the whole patch yet, only looked at the js shim

nod_’s picture

Status: Needs review » Needs work

Taking a step back I'm not sure what is supposed to happen here.

The jquery ui position is a ~560 lines script depends only on jQuery (and "vesion"), it improve the existing jQuery position method: https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/assets/vendo...

This patch introduces a ~520 lines script that depends on jquery and popperjs.

To me this suggest the complexity of this script is not in how it's implemented but in what the API supports.

What is the net improvement we're looking for? If we do that simply because we want to deprecate jquery ui, why not take the position script used for shims and remove it when we remove the shims no?

nod_’s picture

Following a meeting with bnjmnm, lauriii, gabor, and myself, todo:

  • Take the code from jquery ui and importing in core as much as-is as possible, keep the tests that have been written here.
bnjmnm’s picture

Title: Create jQuery UI position to Popper shim. » Address jQuery UI position dependency
Issue summary: View changes
Status: Needs work » Needs review

Updated IS and code to reflect the approach mentioned in #11

nod_’s picture

Status: Needs review » Needs work

Couple of details

nod_’s picture

Status: Needs work » Needs review

Looking good, haven't gone though the tests yet

zrpnr’s picture

Status: Needs review » Needs work

This is truly impressive work, especially considering you created the Nightwatch tests to match to match the jQuery UI qUnit tests.
To compare I tested the new code in position.es6.js and postion.js against the original qUnit tests and both pass.

Just the with scrollbars qUnit test was missing from the Nightwatch tests, but it looks like you already have the scrollx element in place.

Really appreciated the updated postion.es6.js style, especially the destructuring and prettier formatting for ternary statements.
Also very thoughtful to add comments!

Since the code is being "updated" - why not also fix some of the variable names?
hindex for example could be camelCased then it would not need to be added to dictionary.txt
destructure was unused.

These are all in just in test files and could be camelCased or renamed.

  • fractionselement
  • fractionsparent
  • hindex
  • largebox
  • parentx
  • scrollx
  • vindex
  • withinbugger
  • withinsmaller

These are internal variable names and could also be renamed or camelCased to avoid adding to dictionary.txt

  • rhorizontal
  • roffset
  • rpercent
  • rposition
  • rvertical

I think the only word that needs to be added is flipfit since that's one of the exposed options in position.

bnjmnm’s picture

Status: Needs work » Needs review

All current MR feedback addressed.

bnjmnm’s picture

Added the with scrollbars test. Per #15

zrpnr’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new14.6 KB

My only concerns were addressed, by adding the with scrollbars test and removing all the unnecessary additions to dictionary.txt, and good call re-adding flipfit back as-is, since that is part of the API. This still passes all the original qUnit tests so I'm confident the Nightwatch tests match.

I also found it particularly notable that you created Nightwatch tests to match the visual tests in jQuery UI- the originals weren't even automated!
Goes by so fast that I had to make a screen recording to be able to appreciate it :)

nightwatch position test

nod_’s picture

Confirmed that the code has only cosmetic changes between jquery ui and our version. It's the least amount of work in the least disruptive way while still securing our side of things.
Tests are very exhaustive and most if not all the position permutations are tested.

Huge amount of work, well done.
RTBC +1

  • lauriii committed 9289782 on 9.2.x
    Issue #3201170 by bnjmnm, nod_, lauriii, zrpnr: Address jQuery UI...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Committed 9289782 and pushed to 9.2.x. Thanks!

Status: Fixed » Closed (fixed)

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