#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.focusModewithmode,courseId,activityId,layoutReset,selectors.fill,selectors.keep. Absent entirely when focus mode is off; both scripts return early on that. The store also readsdrupalSettings.user.uidfor its session keys.state_storeandinitin the head,initsecond.layoutattached only whenlayoutResetis true.- In the markup:
.lms-focus-mode-containerwithtabindex="-1"around the activity,.lms-focus-mode-keepon the answer form,.lms-focus-mode-start-screen-submiton the submit button. The toggle bar and start screen come from the SDC components; they need theirdata-lms-focus-mode-toggleanddata-lms-focus-mode-startattributes 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
bodycontaining 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.