Methods
bindBehavior(preview, behavior)static
#
Binds the behavior to the interactive elements of the preview.
Parameters:
Name | Type | Description |
---|---|---|
preview |
ext.popups.Preview | |
behavior |
ext.popups.PreviewBehavior |
- Source:
createDisambiguationPreview(model) → {ext.popups.Preview}static
#
Creates an instance of the disambiguation preview.
Parameters:
Name | Type | Description |
---|---|---|
model |
- Source:
Returns:
- Type
- ext.popups.Preview
createEmptyPreview(model) → {ext.popups.Preview}static
#
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 |
- Source:
Returns:
- Type
- ext.popups.Preview
createLayout(isPreviewTall, measures, pointerSpaceSize, dir) → {ext.popups.PreviewLayout}static
#
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:
createPagePreview(model) → {ext.popups.Preview}static
#
Creates an instance of the DTO backing a preview.
Parameters:
Name | Type | Description |
---|---|---|
model |
- Source:
Returns:
- Type
- ext.popups.Preview
createPreviewWithType(model) → {ext.popups.Preview}static
#
Creates an instance of a Preview based on the type property of the PreviewModel
Parameters:
Name | Type | Description |
---|---|---|
model |
- Source:
Returns:
- Type
- ext.popups.Preview
getClasses(preview, layout) → {Array.<string>}static
#
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>
getThumbnailClipPathID(isTall, flippedY, flippedX) → {string|undefined
}static
#
undefined
}static
#
Gets the thumbnail SVG clip-path element ID as specified in pointer-mask.svg.
Parameters:
Name | Type | Description |
---|---|---|
isTall |
boolean | Sugar around
|
flippedY |
boolean | |
flippedX |
boolean |
- Source:
Returns:
- Type
-
string
|
undefined
hasPointerOnImage(preview, layout) → {boolean}static
#
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
hide(preview) → {jQuery.Promise.<void>}static
#
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>
init()static
#
Initializes the renderer.
- Source:
layoutPreview(preview, layout, classes, predefinedLandscapeImageHeight, pointerSpaceSize, windowHeight)static
#
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:
registerPreviewUI(type, previewFn, doNotRequireSummary)static
#
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
type |
string | ||
previewFn |
function |
optional |
|
doNotRequireSummary |
boolean |
optional |
does this type require a summary to be renderable? |
- Source:
render(model) → {ext.popups.Preview}static
#
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 |
- Source:
Returns:
- Type
- ext.popups.Preview
requiresSummary(type) → {boolean}static
#
Check whether this render type requires a summary to be rendered.
Parameters:
Name | Type | Description |
---|---|---|
type |
string | of preview |
- Source:
Returns:
- Type
- boolean
setThumbnailClipPath(preview, layout)static
#
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:
show(preview, measures, _link, behavior, token, container, dir) → {jQuery.Promise.<void>}static
#
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>
hide() → {jQuery.Promise.<void>}inner
#
show(event, boundActions, token) → {jQuery.Promise.<void>}inner
#
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>