Skip to content

Replace clearing lightbox plugin#3530

Merged
Simrayz merged 5 commits intomasterfrom
chore/3474-replace-clearing-lightbox-plugin
Sep 18, 2025
Merged

Replace clearing lightbox plugin#3530
Simrayz merged 5 commits intomasterfrom
chore/3474-replace-clearing-lightbox-plugin

Conversation

@Simrayz
Copy link
Copy Markdown
Contributor

@Simrayz Simrayz commented Sep 10, 2025 •
edited
Loading

Scope and purpose

Resolves #3474.

This PR replaces the Clearing Lightbox component from Foundation with a custom implementation, using:

  • A custom plugin (plugins/lightbox.js) for handling the lightbox gallery.
  • A reusable partial template that generates a gallery and enables the plugin (with the [data-lightbox] attribute).
  • A new scss stylesheet that is based on _clearing.scss, but replaces it entirely.

The Clearing Lightbox is one of the last Foundation JS plugins in use in the codebase, and as such had to be replaced by bespoke code.

This pull request

  • Adds a reusable Lightbox component with js, css and template partial.
  • Removes all instances of [data-clearing] from the codebase
  • Removes _clearing.scss stylesheet

Features

  • Navigate with arrow left and arrow right
  • Close lightbox with the Esc key

How to test

The Lightbox has been added to both Rooms and Locations.

  1. Find a Room or Location
  2. Add a few images
  3. Click an image on the main Room/Location page
  4. Repeat for the Room or Location you did not test

Screenshots

Before

image

After

image

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to NAV can be found in the
Hacker's guide to NAV.

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation
  • Linted/formatted the code with ruff, easiest by using pre-commit
  • The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See https://cbea.ms/git-commit/
  • This pull request is based on the correct upstream branch: For a patch/bugfix affecting the latest stable version, it should be based on that version's branch (<major>.<minor>.x). For a new feature or other additions, it should be based on master.
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this adds a new Python source code file: Added the boilerplate header to that file

@Simrayz Simrayz self-assigned this Sep 10, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Sep 10, 2025 •
edited
Loading

Test results

    27 files      27 suites   44m 23s ⏱️
 2 518 tests  2 518 ✅ 0 💤 0 ❌
18 534 runs  18 534 ✅ 0 💤 0 ❌

Results for commit e40d990.

♻️ This comment has been updated with latest results.

@codecov
Copy link
Copy Markdown

codecov bot commented Sep 10, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.09%. Comparing base (d590f08) to head (e40d990).
⚠️ Report is 316 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #3530      +/-   ##
==========================================
+ Coverage   62.08%   62.09%   +0.01%     
==========================================
  Files         611      611              
  Lines       44865    44865              
  Branches       43       43              
==========================================
+ Hits        27856    27861       +5     
+ Misses      16999    16994       -5     
  Partials       10       10

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Simrayz Simrayz requested a review from a team September 11, 2025 07:16
@Simrayz Simrayz marked this pull request as ready for review September 11, 2025 07:16
@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Sep 11, 2025

Sonarqube is complaining about using the image variable in alt alt attribute, claiming that an alt should not contain the word "image". Since it is a variable, this is not actually the case.

@johannaengland
Copy link
Copy Markdown
Contributor

johannaengland commented Sep 11, 2025

Sonarqube is complaining about using the image variable in alt alt attribute, claiming that an alt should not contain the word "image". Since it is a variable, this is not actually the case.

I marked it as false positive on Sonarqube :)

@Simrayz Simrayz mentioned this pull request Sep 15, 2025
Merged
9 tasks
johannaengland
johannaengland requested changes Sep 16, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@johannaengland johannaengland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the thumbnails are different comparing master to this branch

Before:
image

After:
Screenshot from 2025-09-16 10-56-28

@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Sep 17, 2025

I think the thumbnails are different comparing master to this branch

@johannaengland You are correct that the thumbnails are different, and this was an intentional choice. The "Clearing lightbox" thumbnails don't really have a max width, so the thumbnails grow larger than they need to be in order to show a small preview of the image. Adding limitations to height/width makes the images more consistent with each other. However, I modified the styles slightly to allow images to grow wider to a maximum ratio of 16/9.

image

johannaengland
johannaengland requested changes Sep 17, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@johannaengland johannaengland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very strange, now the banner with the title of the picture ends up in the picture:
image

Have a look if you can reproduce this

@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Sep 17, 2025 •
edited
Loading

Very strange, now the banner with the title of the picture ends up in the picture: image

Have a look if you can reproduce this

Yeah... I didn't think to resize the window vertically. Thanks! I modified the styles to use less absolute positioning, and use flexbox instead. I also added some vertical margins to the image so it doesn't touch the top of the viewport.

image

johannaengland
johannaengland approved these changes Sep 18, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@johannaengland johannaengland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job!

@Simrayz Simrayz force-pushed the chore/3474-replace-clearing-lightbox-plugin branch from a5eb683 to e40d990 Compare September 18, 2025 09:40
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Sep 18, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@Simrayz Simrayz merged commit ca3d95a into master Sep 18, 2025
19 checks passed
@Simrayz Simrayz deleted the chore/3474-replace-clearing-lightbox-plugin branch September 18, 2025 10:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@johannaengland johannaengland johannaengland approved these changes

Assignees

@Simrayz Simrayz

Labels

cleanup javascript modernisation

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Replace Clearing Lightbox JS

3 participants

@Simrayz @johannaengland @lunkwill42