Refactor of media library to vanilla JS.

CommentFileSizeAuthor
#20 3294523_js_error_selectAll.png808.26 KBInaW

Issue fork gin-3294523

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:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

saschaeggi created an issue. See original summary.

saschaeggi’s picture

Status: Active » Needs review
darvanen’s picture

Status: Needs review » Needs work

Had a look through the changes, on the whole they look good but the views.forEach(...) call makes some things obvious that really weren't in the JQuery version. Most of my comments revolve around the implied support for multiple views on a page.

saschaeggi’s picture

Status: Needs work » Needs review

This can be re-reviewed :)

darvanen’s picture

Status: Needs review » Needs work

Couple of detailed answers/expansions, please excuse if tone reads as anything other than helpful, trying to be as explicit as I can :)

saschaeggi’s picture

Status: Needs work » Needs review

Changes made. Ready for review again

saschaeggi’s picture

Issue tags: +Drupal10
saschaeggi’s picture

Issue tags: +#Drupal10PortingDay, +Drupal 10 compatibility
saschaeggi’s picture

Kristen Pol’s picture

Issue tags: -#Drupal10PortingDay +Drupal 10 porting day

Fixing tag.

Kristen Pol’s picture

Issue tags: -Drupal10 +Drupal 10

Whoops... 2 tags needed fixing... fixing the other one now.

saschaeggi’s picture

Ready for re-review 😃

saschaeggi’s picture

LittleCoding’s picture

Status: Needs review » Needs work

It seems to be the case that these `override` JS files are written directly in JS rather than in ES6 and built out to a JS. It would be better to have these files built by a set of ES6 as is the case in core themes like Classy.

saschaeggi’s picture

Status: Needs work » Needs review

As we don't transpile ES6 anymore I rather think we can remove the JS compilation task in a follow-up.

LittleCoding’s picture

Directly jumping to using ES6 would have the theme with a different browser support level vs D9 core. In terms of core this direct use of ES6 is not planned until D10. I thought the goal if this current round of updates was to remove jQuery dependencies while keep the same level of browser support as the active Drupal cores, is this not the case?

saschaeggi’s picture

Directly jumping to using ES6 would have the theme with a different browser support level vs D9 core. In terms of core this direct use of ES6 is not planned until D10.

That is correct. Gin does not support IE11 and is ahead of core in that regard. E.g. we extensively make use of CSS3 features like vars, mask-images etc.

I thought the goal if this current round of updates was to remove jQuery dependencies while keep the same level of browser support as the active Drupal cores, is this not the case?

No, the same level as Gin supported before.

LittleCoding’s picture

Well then, this section would be ahead of things then. Looks and works great from my testing. Maybe just some developer commenting of the JS.

InaW’s picture

Status: Needs review » Needs work
FileSize
808.26 KB

I did some functional testing today for this MR. I noticed the following JS Error when I click to "Add media" on a Media Field and then select or unselect an existing media item:

Uncaught TypeError: Cannot read properties of null (reading 'checked')
    at HTMLDivElement.<anonymous> (<anonymous>:158:27)

The error gets triggered in media_library.view.js:53 from this change https://git.drupalcode.org/project/gin/-/merge_requests/162/diffs#fd46d7...

It seems to be an issue with the selectAll selector:

The media item was added successfully to the media field regardless of the JS error. Otherwise, I could not find any errors.

saschaeggi’s picture

Status: Needs work » Needs review

@InaW great finding! I've added a check for selectAll

saschaeggi’s picture

InaW’s picture

Status: Needs review » Needs work

@saschaeggi thanks for the fix, I couldn't reproduce the error anymore.

I did some more testing and noticed this two JS Errors:

There seems to be an issue with the bulkOperations Selector when I try to select a media item in the media library:
media_library.view.js:67 Uncaught TypeError: Cannot read properties of null (reading 'classList')

I get a second error when I have multiple media items in the media library and select them all. I get the following error selecting the last item:
media_library.view.js:57 Uncaught TypeError: Cannot set properties of null (setting 'checked')

saschaeggi’s picture

Status: Needs work » Needs review

@InaW thanks for testing, should be fixed now 👍

InaW’s picture

Status: Needs review » Reviewed & tested by the community

Looks good to me now, I couldn't find any more bugs. I am changing the status to reviewed 👍

saschaeggi’s picture

Great, thank you InaW! 👏

saschaeggi’s picture

LittleCoding’s picture

Status: Reviewed & tested by the community » Needs work

Just doing a re-read of the Drupal JS Coding standards and it looks like the `@file` comment to start a JS file is required -- https://www.drupal.org/docs/develop/standards/javascript/javascript-codi...

saschaeggi’s picture

Status: Needs work » Reviewed & tested by the community

That actually refers to the closure and not the file comment. I'll move this back to RTBC as it's not necessary nor blocking and could be added later on in a follow-up (if we see the need for it) 👍

LittleCoding’s picture

👍

saschaeggi’s picture

  • saschaeggi committed 0d08d4f on 8.x-3.x
    Issue #3294523: [JS Refactor] media library
    
saschaeggi’s picture

Status: Reviewed & tested by the community » Fixed

Thanks!

Status: Fixed » Closed (fixed)

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