Halogen.Widgets.Compare

Package

purescript-halogen-widgets

Repository

afcondon/purescript-halogen-widgets

A controlled before/after comparison wipe — the draggable-divider widget used for before/after image pairs (and any two registered, spatially overlaid renderings). A vertical handle splits the box: the before layer shows to its left, the after layer to its right. Dragging the handle requests a new divider position; the parent owns it.

Both layers are HH.PlainHTML — static content with no actions. That is the whole point of a comparison wipe (you compare two renderings, you don't interact through them), and it is what lets this be a proper leaf component on the contract: the widget owns the drag (document-level mousemove/mouseup, like Knob), while the caller's content arrives as inert HTML rather than through a children channel the type system lacks.

Geometry is plain CSS: two absolutely-positioned layers, the before one clipped with clip-path: inset(...) so its content keeps full width rather than squashing. The handle position is read back from the container's bounding rect on each move (library FFI via getBoundingClientRect).

type Input = { after :: PlainHTML, afterLabel :: Maybe String, before :: PlainHTML, beforeLabel :: Maybe String, disabled :: Boolean, height :: String, position :: Number }

data Output

data Query a

type Slot = Slot Query Output

component :: forall m. MonadAff m => Component Query Input Output m

defaultInput :: PlainHTML -> PlainHTML -> Input