Get rid of jQuery in dialog events.

Created on 29 September 2023, 9 months ago
Updated 5 June 2024, 20 days ago

Problem/Motivation

https://www.drupal.org/project/drupal/issues/2158943 📌 Add a native dialog element to deprecate the jQuery UI dialog Needs work looks like a herculean task. Therefore, it is necessary to break it down into small sub-tasks that will bring us closer to the final result.

Proposed resolution

Remove jQuery Event from dialog events events. And pass the special `DrupalDialogEvent extends Event` instead.

API changes

Rewrite all core $(window).on({'dialog:... to customEvent listeners to avoid core gitlab CI failures about deprecation messages.

$(window).on('dialog:EVENTTYPE') still BC but their listeners will receive deprecation messages.

$(window).on('dialog:beforecreate') became window.addEventListener('dialog:beforecreate')

Deprecation script checking if old `dialog:beforecreate` presented in $._data(window, 'events');
If presented we trigger deprecation message.

Testing instructions.

1. Review changed dialogs. They should work as before patch.
2. Revert any of changed dialog. Or use some contrib module which uses `dialog:EVENTTYPE` -> you will get deprecation message in console while dialog after/before create/close.

📌 Task
Status

Fixed

Version

10.3

Component
Javascript 

Last updated less than a minute ago

Created by

🇷🇸Serbia finnsky

Live updates comments and jobs are added and updated live.
  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @finnsky
  • Open on Drupal.org →
    Environment: PHP 8.2 & MySQL 8
    last update 9 months ago
    Not currently mergeable.
  • last update 9 months ago
    Custom Commands Failed
  • Issue was unassigned.
  • Status changed to Needs review 9 months ago
  • last update 9 months ago
    30,345 pass, 2 fail
  • 🇷🇸Serbia finnsky

    Seems some cleanup needed in
    core/misc/dialog/dialog.position.js

  • last update 9 months ago
    30,345 pass, 2 fail
  • 🇷🇸Serbia finnsky

    Current Functional Javascript Test failure seems related to core/modules/block/js/block.js:139
    https://i.gyazo.com/1176e9dd6dd6554a6652f61ef36721e4.gif

    Not to this MR

  • First commit to issue fork.
  • last update 9 months ago
    30,377 pass
  • 🇺🇸United States smustgrave

    Only rebased to get tests to run again,

  • Status changed to RTBC 9 months ago
  • 🇺🇸United States smustgrave

    As we thought was random.

    Applied the MR and edited a view, used layout builder, and media library without issue, believe that would cover the js files.

    Still needs sign off from the javascript maintainer but from what I see the changes seem fine. Eventually is there any kind of rule or check we could add?

    Was told that can mark issues RTBC that are waiting on submaintainer so thats what I'm going to do.

  • last update 9 months ago
    30,378 pass, 2 fail
  • last update 9 months ago
    30,392 pass
  • last update 9 months ago
    30,397 pass
  • last update 9 months ago
    30,397 pass
  • last update 8 months ago
    30,413 pass
  • last update 8 months ago
    30,417 pass
  • 49:25
    52:11
    Queued
  • 🇷🇸Serbia finnsky

    Rebased

  • last update 8 months ago
    30,426 pass
  • last update 8 months ago
    30,434 pass
  • 🇩🇪Germany Anybody Porta Westfalica

    Just ran into this in Homebox 3.x implementation:
    Tried to replace

    jQuery(window).on("dialog:beforecreate", function (event) {
            jQuery("body:first").addClass("homebox-sidebar-open");
          });
          jQuery(window).on("dialog:beforeclose", function (event) {
            jQuery("body:first").removeClass("homebox-sidebar-open");
          });
    

    by

          window.addEventListener("dialog:beforecreate", function () {
            // Add the 'homebox-sidebar-open' class before creating the dialog
            document.body.classList.add("homebox-sidebar-open");
          });
          window.addEventListener("dialog:beforeclose", function () {
            // Remove the 'homebox-sidebar-open' class before closing the dialog
            document.body.classList.remove("homebox-sidebar-open");
          });
    

    BUT that's not possible: https://stackoverflow.com/questions/25256173/can-i-use-jquery-trigger-wi...

    So would be super cool to have this fixed or at least also trigger the vanilla JS event.

    The attached MR will not solve this, as it still uses jQuery .trigger() and .on()!
    So I guess we need to wait for 📌 Add a native dialog element to deprecate the jQuery UI dialog Needs work to solve this? Or can we go further by triggering a native event on window?

  • 🇷🇸Serbia finnsky

    @Anybody hi! thank for review.

    Yes this is small MR and only cares about event parameter. Not listener or event type.

    This is how we can move forward with small steps.

  • 13:25
    5:48
    Running
  • last update 8 months ago
    30,442 pass
  • last update 8 months ago
    30,464 pass
  • Status changed to Needs work 8 months ago
  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    What are the BC implications here? I assume anyone with a listener will have issues with the changes here.

    Can we do this in a BC compatible manner?

    Perhaps dispatch different events without jQuery and deprecate the old event?

  • 🇷🇸Serbia finnsky

    @larowlan

    Please take a look at the last commit! This is what you mean.

    @Anybody it will also work for your question.

  • Status changed to Needs review 8 months ago
  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    @finnsky 😍 love it!

  • Status changed to Needs work 8 months ago
  • 🇺🇸United States smustgrave

    Hate to do it but seems to have caused test failures.

  • 🇷🇸Serbia finnsky

    Seems exact reason of test failures is this deprecation message

  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    Something in core listening to the old events?

    If so, it works 😁

  • 🇷🇸Serbia finnsky

    Added condition to check if `dialog:beforecreated` listener presents on page.
    Only in this case old event will triggered. And deprecation message will appear.

  • Pipeline finished with Success
    8 months ago
    Total: 702s
    #42915
  • Status changed to Needs review 8 months ago
  • 🇷🇸Serbia finnsky

    It was 20 minutes Adventure! :)

    I had to replace all usages to new listeners because seems core not allows to keep deprecated messages.
    Checked all scripts/events manually. All fine Seems autotests also passed.

    Please review!

  • Pipeline finished with Failed
    8 months ago
    Total: 750s
    #44823
  • Pipeline finished with Success
    8 months ago
    #45341
  • Pipeline finished with Failed
    7 months ago
    Total: 749s
    #52398
  • Pipeline finished with Failed
    7 months ago
    Total: 860s
    #52624
  • Pipeline finished with Failed
    7 months ago
    #57193
  • 🇷🇸Serbia finnsky

    Some new tests failure gonna fix. Review still needed.

  • Pipeline finished with Failed
    7 months ago
    Total: 512s
    #57231
  • Status changed to Needs work 7 months ago
  • 🇫🇷France nod_ Lille

    I like this a lot.

    One major concern is the renaming of the event, I think we can avoid having to rename it because that would be a pain for contrib to deal with.

    I'd like to remove only the .trigger call, not addevent listeners yet. That will allow people to use dom events without breaking their existing code. Then we can remove jquery.on afterwards.

  • 🇫🇷France nod_ Lille

    tags

  • 🇷🇸Serbia finnsky

    Thank you for review. Gonna rework it according feedbacks.

  • Pipeline finished with Failed
    7 months ago
    Total: 469s
    #58562
  • 🇷🇸Serbia finnsky

    RE: #28

    We cannot keep Deprecation messages in current core code. Because of pipeline failures.
    So that's why i had to rework core `.on()` Seems it is minimal change we can provide in one MR.

  • Pipeline finished with Failed
    7 months ago
    #62277
  • Pipeline finished with Failed
    6 months ago
    Total: 161s
    #63658
  • Pipeline finished with Canceled
    6 months ago
    #63677
  • Status changed to Needs review 6 months ago
  • Pipeline finished with Failed
    6 months ago
    Total: 552s
    #63679
  • Pipeline finished with Canceled
    6 months ago
    Total: 33585s
    #63686
  • Status changed to Needs work 6 months ago
  • 🇩🇪Germany Anybody Porta Westfalica

    Tests are sadly still failing.

  • Pipeline finished with Failed
    6 months ago
    #63885
  • Pipeline finished with Failed
    6 months ago
    Total: 699s
    #66845
  • Pipeline finished with Failed
    6 months ago
    Total: 629s
    #66863
  • Pipeline finished with Failed
    5 months ago
    Total: 671s
    #78831
  • Pipeline finished with Success
    5 months ago
    Total: 503s
    #79987
  • Status changed to Needs review 5 months ago
  • 🇷🇸Serbia finnsky

    Probably that were random tests failures. Now seems passed on everything. Sending back to review.

  • Status changed to RTBC 5 months ago
  • 🇩🇪Germany Anybody Porta Westfalica

    Impressive work @finnsky! Back to RTBC. All feedback seems addressed.

  • 🇷🇸Serbia finnsky

    Let's review again. I forgot to rename one event.

  • Pipeline finished with Success
    5 months ago
    Total: 605s
    #80019
  • 🇷🇸Serbia finnsky

    it was just dialogAfterclose -> dialog:afterclose change. so keep in RTBC. Test still passed.

  • Pipeline finished with Success
    5 months ago
    Total: 638s
    #86281
  • 🇷🇸Serbia finnsky

    finnsky changed the visibility of the branch 11.x to hidden.

  • 🇳🇿New Zealand quietone New Zealand

    I'm triaging RTBC issues . I read the IS and the comments. I didn't find any unanswered questions.

    The issue summary includes a list of API changes. If that is up to date this needs a change record.

    Leaving at RTBC.

  • 🇬🇧United Kingdom catch
  • 🇷🇸Serbia finnsky

    Added some IS updates to be aligned with current state.

  • Pipeline finished with Success
    4 months ago
    Total: 489s
    #99257
  • Status changed to Needs work 4 months ago
  • 🇫🇷France nod_ Lille

    It's solid work, a couple of comments. Mainly about keeping the settings value alterable and using a subclass of Event instead of CustomEvent everywhere.

    Setting NW for feedback and the change record.

  • Pipeline finished with Canceled
    4 months ago
    Total: 194s
    #99314
  • Pipeline finished with Failed
    4 months ago
    Total: 163s
    #99322
  • Status changed to Needs review 4 months ago
  • Pipeline finished with Failed
    4 months ago
    Total: 165s
    #99344
  • Pipeline finished with Success
    4 months ago
    Total: 771s
    #99360
  • Pipeline finished with Success
    4 months ago
    Total: 520s
    #99377
  • Status changed to Needs work 4 months ago
  • 🇫🇷France nod_ Lille

    few things left, the change record needs more details

  • Status changed to Needs review 4 months ago
  • 🇷🇸Serbia finnsky

    Thank you! Fixed feedbacks

  • Pipeline finished with Failed
    4 months ago
    Total: 174s
    #99564
  • Pipeline finished with Success
    4 months ago
    Total: 669s
    #99572
  • Status changed to Needs work 4 months ago
  • The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • Status changed to Needs review 4 months ago
  • Pipeline finished with Success
    4 months ago
    Total: 473s
    #113769
  • Pipeline finished with Success
    4 months ago
    Total: 488s
    #117476
  • Pipeline finished with Success
    3 months ago
    Total: 479s
    #123290
  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    This looks great, thanks @finnsky for such a thorough solution

    Looks like nod_ has been reviewing this along the way, It looks good to me but I'll defer to his expertise.

    Removing the Needs Framework Manager tag

  • Pipeline finished with Success
    3 months ago
    Total: 591s
    #128364
  • Status changed to Needs work 3 months ago
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Switching to NW to address the (admittedly superficial-ish) feedback on the MR. I really like how this is approached - I've witnessed several attempts over the past few years to implement something like this and this approach not only solves the problem, but it does it pretty elegantly. The change record covers the necessary info, too, so I'm removing that tag

  • Pipeline finished with Success
    3 months ago
    Total: 1157s
    #131985
  • Status changed to Needs review 3 months ago
  • 🇷🇸Serbia finnsky

    Resolved feedbacks.
    Please rereview :)

  • Pipeline finished with Success
    3 months ago
    Total: 567s
    #132031
  • Pipeline finished with Success
    3 months ago
    Total: 635s
    #135115
  • Pipeline finished with Success
    3 months ago
    Total: 629s
    #141372
  • 🇷🇸Serbia finnsky

    @bnjmnm could you please review again? i just rebased

  • Pipeline finished with Success
    2 months ago
    Total: 1051s
    #146481
  • 🇷🇸Serbia finnsky

    @bnjmnm @nod_

    Thank you for reviews!
    Seems we are ready to go. I'll request some tests there.

  • Status changed to Needs work 2 months ago
  • 🇬🇧United Kingdom catch

    Looks like this needs a rebase.

  • Pipeline finished with Canceled
    2 months ago
    Total: 106s
    #149947
  • Status changed to Needs review 2 months ago
  • 🇫🇷France nod_ Lille

    rebased

  • Pipeline finished with Failed
    2 months ago
    Total: 990s
    #149949
  • Pipeline finished with Failed
    2 months ago
    Total: 989s
    #150090
  • Pipeline finished with Canceled
    2 months ago
    Total: 241s
    #150118
  • Pipeline finished with Canceled
    2 months ago
    Total: 120s
    #150125
  • Pipeline finished with Canceled
    2 months ago
    #150129
  • Pipeline finished with Failed
    2 months ago
    #150145
  • 🇷🇸Serbia finnsky

    It seems now has random failure in tests.

  • 🇫🇷France nod_ Lille

    reran the failing test, green now.

  • Status changed to Needs work 2 months ago
  • The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • Pipeline finished with Success
    2 months ago
    Total: 1052s
    #150499
  • Status changed to Needs review 2 months ago
  • 🇫🇷France nod_ Lille
  • Pipeline finished with Success
    2 months ago
    Total: 990s
    #153091
  • Pipeline finished with Success
    2 months ago
    Total: 503s
    #158058
  • Pipeline finished with Success
    about 2 months ago
    Total: 539s
    #158750
  • 🇫🇷France nod_ Lille

    I was involved with the code so I wanted to have another person RTBC so that I could commit but it doesn't seem to help get that in. It's a 11.x commit only.

  • Status changed to RTBC about 2 months ago
  • 🇮🇳India Pravesh_Poonia

    Replace $(window).on('dialog:beforecreate') with window.addEventListener('dialog:beforecreate').

    While $(window).on('dialog:EVENTTYPE') remains backward compatible, listeners will receive deprecation messages. Additionally, a deprecation script checks if the old dialog:beforecreate is present in $._data(window, 'events'), triggering a deprecation message if found."

    But checked MR, changes looking fixed now

  • 🇫🇷France nod_ Lille

    @Pravesh_Poonia I'm not sure what you mean by "But checked MR, changes looking fixed now" . Your text looks automated/generated, could you elaborate as to what you were trying to do? Thanks

  • 🇬🇧United Kingdom catch

    One small comment on the MR about the deprecation target - left a suggestion to change it to 10.3.0, but then I saw @nod_ say it's an 11.x commit only, it's not entirely clear to me why we wouldn't backport the deprecation to 10.3 too, generally we've avoided adding deprecations specific to the .0.0 of a new major so that modules don't get new warnings immediately after adding major version compatibility.

    I'm not qualified to review the details of the js here, but general +1 on the approach. Just had serious pain with dialog and the jQuery 4 update so any small steps we can take to simplifying it will help.

  • 🇫🇷France nod_ Lille

    I was being too cautious limiting to 11.x (was still provisional at the time, might be part of the reason too).

    So yeah, 11.x and 10.3.x otherwise it'll be hard to remake a patch

  • Pipeline finished with Success
    about 2 months ago
    Total: 614s
    #160774
    • bnjmnm committed 9b2d61c6 on 11.x
      Issue #3390549 by finnsky, nod_, smustgrave, larowlan, catch, bnjmnm:...
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    This is great!

    Committed to 11.x

    Will also commit to 10.3.x, but would first like to run tests on that combo as I've encountered a few JS patches that had unexpected backport surprises

  • Pipeline finished with Failed
    about 2 months ago
    Total: 178s
    #161040
  • 🇫🇷France nod_ Lille

    awesome, there was a conflict in libraries.yml on the backport, opened a MR for 10.3.x

  • 🇷🇸Serbia finnsky

    10.3.x pipeline passed now

  • Pipeline finished with Success
    about 2 months ago
    Total: 616s
    #161668
    • longwave committed 66faba3a on 10.3.x
      Issue #3390549 by finnsky, nod_, smustgrave, larowlan, catch, bnjmnm:...
  • Status changed to Fixed about 2 months ago
  • 🇬🇧United Kingdom longwave UK

    Committed and pushed 99af345889 to 10.4.x and 66faba3a71 to 10.3.x. Thanks!

    • longwave committed 99af3458 on 10.4.x
      Issue #3390549 by finnsky, nod_, smustgrave, larowlan, catch, bnjmnm:...
  • 🇫🇷France nod_ Lille

    Thanks! Published the change notice, does it need release note?

  • 🇬🇧United Kingdom longwave UK

    Deprecation is triggered automatically and we have a change record, there's nothing here that we need to notify site owners about in the release note that I can see.

  • Status changed to Fixed 20 days ago
  • 🇺🇸United States agentrickard Georgia (US)

    This is throwing fatal JS errors and breaking contrib modals:

    Uncaught TypeError: event is undefined
        handle https://xxxx/core/misc/dialog/dialog-deprecation.js?v=10.3.0-dev:12
        jQuery 7
        openDialog https://xxxx/core/misc/dialog/dialog.js?v=10.3.0-dev:83
        showModal https://xxxx/core/misc/dialog/dialog.js?v=10.3.0-dev:101
        attach https://xxxx/modules/contrib/moderated_content_bulk_publish/js/moderated_content_bulk_publish.js?semf9b:120
        jQuery 2
    
Production build 0.69.0 2024