Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

System: replaced the legacy Thickbox library with an AJAX-based modal window #1854

Merged
merged 3 commits into from
Sep 30, 2024

Conversation

SKuipers
Copy link
Member

@SKuipers SKuipers commented Sep 28, 2024

Gibbon has used Thickbox for many years as it's solution for modal windows. With the addition of HTMX & Alpine, the whole Thickbox library can be removed with a couple small tweaks to the code.

This PR adds a global modal that can be triggered with HTMX to load content. It's styled with Tailwind and interactive through Alpine. The modal window uses the Alpine Focus plugin to ensure input focus and scrollbars are trapped in the modal when it is open.

The Thickbox script and style includes have been removed from index.php, and the /lib folder has been removed. For backwards compatibility, a section of code has been added to setup.js to convert all existing Thickbox links to use HTMX, which also includes any additional modules.

Motivation and Context
Refactoring to replace all old jQuery libraries with more modern code.

How Has This Been Tested?
Locally.

Screenshots
Screenshot 2024-09-28 at 1 17 46 PM
Screenshot 2024-09-28 at 1 18 09 PM

@SKuipers SKuipers merged commit 2ea1820 into GibbonEdu:v28.0.00 Sep 30, 2024
5 checks passed
@SKuipers SKuipers deleted the feature/Thickbox-Replace branch October 1, 2024 06:09
@SKuipers SKuipers added this to the UI Refresh milestone Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

1 participant