#3624561: Add Focus Mode module for review.

This should not actually be merged; it's just meant for easy review and creation of a "real" LMS focus mode project.

As I noted in the issue, I used Claude Code for most of the backend code. I asked it for some initial logic, which I'm totally open to adjusting. When I told it this will eventually be its own project it added composer.json, .gitlab-ci.yml, phpcs.xml and phpstan.neon.

For the frontend, regardless of how the backend logic works, it needs the following in order to display right:

  • drupalSettings.lms.focusMode with mode, courseId, activityId, layoutReset, selectors.fill, selectors.keep. Absent entirely when focus mode is off; both scripts return early on that. The store also reads drupalSettings.user.uid for its session keys.
  • state_store and init in the head, init second. layout attached only when layoutReset is true.
  • In the markup: .lms-focus-mode-container with tabindex="-1" around the activity, .lms-focus-mode-keep on the answer form, .lms-focus-mode-start-screen-submit on the submit button. The toggle bar and start screen come from the SDC components; they need their data-lms-focus-mode-toggle and data-lms-focus-mode-start attributes and the five __label--* and two __icon--* classes.
  • The answer form must be a <form>, and a sibling of the activity build rather than its parent.
  • One activity per page, and a single direct child of body containing the chain down to the container.

Some assumptions the module is currently making about pages:

  • It accounts for the presence of the normal admin menu
  • Accessibility: It tries to preserve the skip link and screen reader announcements, but the markup for those can vary and themers will need to do their own testing.

Note: The fancy slide-in/slide-out animations currently require some custom theming because the frontend needs to know which container elements need that animation and their approximate starting size. Out of the box, the module provides a fade animation. I need to add some documentation to the README for that.

I didn't include a FunctionalJavascript test because I'm still trying to get that working on my local. I plan to include one in the actual project.

Most of my testing was on xAPI activities; other types of activities will probably need more robust tests to make sure they are at least presentable.

Admin settings can be found at: /admin/lms/settings/focus-mode

I designed the admin UX based on how I'd want it set up. But I'm just one person and I expect actual testing with other humans will result in some adjustments.

Merge request reports

Loading