Skip to main content
Light Dark System

Expose Mixin

ExposeMixin Mixin

Overview

ExposeMixin adds “click it to see it bigger”: a widget showing an image, a file or a linked entry gains a full-screen gallery on click, with the other items from the same list to page through.

export class Et2ImageExpose extends ExposeMixin(Et2Image) {}

Used by et2-image-expose, et2-description-expose and et2-link.

What gets shown

getMedia() turns the widget’s value into the gallery’s list of items. The default handles the shapes eTemplate already uses - a VFS stat, a link, an image URL - so most widgets need nothing.

mediaContentFunction is the hook for a widget whose value is none of those: give it a function and it is asked for the media list instead.

exposeValue is the value the gallery is built from, which is not always the widget’s own value - in a list, it is the row’s.

In a list

The interesting case is a widget inside a Nextmatch row: the gallery is populated from the whole list, not just the clicked row, so the user can page through every image in the result set.

That has a consequence worth knowing when working on this code: a row widget has no widget-tree parent, the clicked widget can be detached mid-gallery as rows are recycled, and the list’s total count reads zero while a reload is in flight. The mixin handles those; code added around it has to expect them too.

The gallery is blueimp-gallery⁠, created once and reused - the mixin appends a single #blueimp-gallery element to the document body the first time it is needed, rather than one per widget.

Used by

This mixin is applied by the following widgets.

Properties

Name Description Type Default
exposeValue Get the info needed to determine if this widget’s value allows it to participate in expose It needs to have a path, and we use mime to determine if it can expose It’s also passed to getMedia() when we’re not reading from a nextmatch ExposeValue -
mediaContentFunction Function to extract an image list “Normally” we’ll try to pull a list of images from the nextmatch or show just the current widget, but if you know better you can provide a method to get the list. any -

Methods

Name Description Arguments
getMedia() Get the info needed to show the given value as slide(s) _value is (usually?) pulled from egw.dataGetUIDdata() Override this _value:
_handleClick() Just override the normal click handler _ev: MouseEvent