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) createLayout(isPreviewTall, eventData, linkData, windowData, pointerSize, dir) → {ext.popups.PreviewLayout}

Parameters:
Name Type Description
isPreviewTall boolean
eventData Object

Data related to the event that triggered showing a popup

Properties
Name Type Description
pageX number
pageY number
clientY number
linkData Object

Data related to the link that’s used for showing a popup

Properties
Name Type Description
clientRects ClientRectList

list of rectangles defined by four edges

offset Object
width number
height number
windowData Object

Data related to the window

Properties
Name Type Description
scrollTop number
width number
height number
pointerSize 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) 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) 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) 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, pointerSize) → {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

pointerSize number
Source:
Returns:
Type
void

(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, event, $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
event Event
$link JQuery

event target

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) createDisambiguationPreview(model) → {ext.popups.Preview}

Creates an instance of the disambiguation preview.

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

(inner) 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.PreviewModel
Source:
Returns:
Type
ext.popups.Preview

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

Creates an instance of the DTO backing a preview.

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

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

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

(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>