Module: renderer

Methods

(static) bindBehavior(preview, behavior) → {void}

Binds the behavior to the interactive elements of the preview.

Parameters:
Name Type Description
preview ext.popups.Preview
behavior ext.popups.PreviewBehavior
Source:
Returns:
Type
void

(static) createDisambiguationPreview(model) → {ext.popups.Preview}

Creates an instance of the disambiguation preview.

Parameters:
Name Type Description
model ext.popups.PagePreviewModel
Source:
Returns:
Type
ext.popups.Preview

(static) createEmptyPreview(model) → {ext.popups.Preview}

Creates an instance of the DTO backing a preview. In this case the DTO represents a generic preview, which covers the following scenarios:

  • The page doesn't exist, i.e. the user hovered over a redlink or a redirect to a page that doesn't exist.
  • The page doesn't have a viable extract.
Parameters:
Name Type Description
model ext.popups.PagePreviewModel
Source:
Returns:
Type
ext.popups.Preview

(static) createLayout(isPreviewTall, measures, pointerSpaceSize, dir) → {ext.popups.PreviewLayout}

Parameters:
Name Type Description
isPreviewTall boolean
measures ext.popups.Measures
pointerSpaceSize number

Space reserved for the pointer
dir string

'ltr' if left-to-right, 'rtl' if right-to-left.
Source:
Returns:
Type
ext.popups.PreviewLayout

(static) createPagePreview(model) → {ext.popups.Preview}

Creates an instance of the DTO backing a preview.

Parameters:
Name Type Description
model ext.popups.PagePreviewModel
Source:
Returns:
Type
ext.popups.Preview

(static) createPreviewWithType(model) → {ext.popups.Preview}

Creates an instance of a Preview based on the type property of the PreviewModel

Parameters:
Name Type Description
model ext.popups.PreviewModel
Source:
Returns:
Type
ext.popups.Preview

(static) createReferencePreview(model) → {ext.popups.Preview}

Parameters:
Name Type Description
model ext.popups.ReferencePreviewModel
Source:
Returns:
Type
ext.popups.Preview

(static) getClasses(preview, layout) → {Array.<string>}

Generates a list of declarative CSS classes that represent the layout of the preview.

Parameters:
Name Type Description
preview ext.popups.Preview
layout ext.popups.PreviewLayout
Source:
Returns:
Type
Array.<string>

(static) getThumbnailClipPathID(isTall, flippedY, flippedX) → {string|undefined}

Gets the thumbnail SVG clip-path element ID as specified in pointer-mask.svg.

Parameters:
Name Type Description
isTall boolean

Sugar around preview.hasThumbnail && thumbnail.isTall
flippedY boolean
flippedX boolean
Source:
Returns:
Type
string | undefined

(static) hasPointerOnImage(preview, layout) → {boolean}

is there a pointer on the image of the preview?

Parameters:
Name Type Description
preview ext.popups.Preview
layout ext.popups.PreviewLayout
Source:
Returns:
Type
boolean

(static) hide(preview) → {jQuery.Promise.<void>}

Extracted from mw.popups.render.closePopup.

Parameters:
Name Type Description
preview ext.popups.Preview
Source:
Returns:

A promise that resolves when the preview has faded out.

Type
jQuery.Promise.<void>

(static) init() → {void}

Initializes the renderer.

Source:
Returns:
Type
void

(static) layoutPreview(preview, layout, classes, predefinedLandscapeImageHeight, pointerSpaceSize, windowHeight) → {void}

Lays out the preview given the layout.

If the thumbnail is landscape and isn't the full height of the thumbnail container, then pull the extract up to keep whitespace consistent across previews.

Parameters:
Name Type Description
preview ext.popups.Preview
layout ext.popups.PreviewLayout
classes Array.<string>

class names used for layout out the preview
predefinedLandscapeImageHeight number

landscape image height
pointerSpaceSize number
windowHeight number
Source:
Returns:
Type
void

(static) registerPreviewUI(type, previewFnopt)

Parameters:
Name Type Attributes Description
type string
previewFn function <optional>
Source:

(static) render(model) → {ext.popups.Preview}

Renders a preview given data from the Gateway. The preview is rendered and added to the DOM but will remain hidden until the show method is called.

Previews are rendered at:

The position of the mouse when the user dwells on the link with their

mouse.

The centermost point of the link when the user dwells on the link with

their keyboard or other assistive device.

Since the content of the preview doesn't change but its position might, we distinguish between "rendering" - generating HTML from a MediaWiki API response - and "showing/hiding" - positioning the layout and changing its orientation, if necessary.

Parameters:
Name Type Description
model ext.popups.PreviewModel
Source:
Returns:
Type
ext.popups.Preview

(static) setThumbnailClipPath(preview, layout) → {void}

Sets the thumbnail SVG clip-path.

If the preview should be oriented differently, then the pointer is updated, e.g. if the preview should be flipped vertically, then the pointer is removed.

Note: SVG clip-paths are supported everywhere but clip-paths as CSS properties are not (https://caniuse.com/#feat=css-clip-path). For this reason, RTL flipping is handled in JavaScript instead of CSS.

Parameters:
Name Type Description
preview ext.popups.Preview
layout ext.popups.PreviewLayout
Source:
Returns:
Type
void

(static) show(preview, measures, _link, behavior, token, container, dir) → {jQuery.Promise.<void>}

Shows the preview.

Extracted from mw.popups.render.openPopup.

TODO: From the perspective of the client, there's no need to distinguish between rendering and showing a preview. Merge #render and Preview#show.

Parameters:
Name Type Description
preview ext.popups.Preview
measures ext.popups.Measures
_link HTMLElement

event target (unused)
behavior ext.popups.PreviewBehavior
token string
container Object

DOM object to which pointer masks are appended
dir string

'ltr' if left-to-right, 'rtl' if right-to-left.
Source:
Returns:

A promise that resolves when the promise has faded in.

Type
jQuery.Promise.<void>

(inner) hide() → {jQuery.Promise.<void>}

Hides the preview.

See hide for more detail.

Source:
Returns:
Type
jQuery.Promise.<void>

(inner) show(event, boundActions, token) → {jQuery.Promise.<void>}

Shows the preview given an event representing the user's interaction with the active link, e.g. an instance of MouseEvent.

See show for more detail.

Parameters:
Name Type Description
event Event
boundActions Object

The bound action creators that were (likely) created in boot.js.
token string

The unique token representing the link interaction that resulted in showing the preview
Source:
Returns:
Type
jQuery.Promise.<void>