Skip to Content
PluginsLumensArchitecture

Architecture

Simple. One hook, one template, one CSS gradient, one JS event listener.

Hook

db/hooks.php registers callback on after_standard_main_region_html_generation.

hook_callbacks::after_standard_main_region_html_generation():

  1. Checks local_lumens/enabled config.
  2. Checks local/lumens:use capability.
  3. Renders flashlight output class.

Flashlight Class

classes/output/flashlight.php is a named_templatable renderable. Uses template local_lumens/flashlight.

Template

templates/flashlight.mustache has three parts:

Div

<div id="local_lumens_flashlight" aria-hidden="true"></div>

CSS

Fixed overlay, full viewport, z-index 9999999999 (basically on top of everything).

pointer-events: none — clicks pass through to page below.

Radial gradient creates the flashlight:

background: radial-gradient(
    circle var(--flashlight-size) at var(--flashlight-x) var(--flashlight-y),
    rgba(0, 0, 0, 0) 0%,       /* center: fully transparent */
    rgba(0, 0, 0, 0) 5%,       /* still transparent */
    rgba(0, 0, 0, 0.95) 100%   /* edge: almost black */
);

CSS custom properties control position and size:

  • --flashlight-x, --flashlight-y — cursor position in px
  • --flashlight-size — circle radius (default 12.5vmax)

JS

Mouse tracking:

  1. On page load, check sessionStorage for saved position.
  2. mousemove listener updates --flashlight-x and --flashlight-y.
  3. navigation.addEventListener("navigate", ...) saves position to sessionStorage before page unload.

Position persists per tab session (sessionStorage, not localStorage).

LumensDevelopment