Show:

Members

...
Type:
Source:

(constant) initSearchToggle

...
Functions and variables to implement sticky header.
Source:

(constant) INPUT_LOCATION_MOVED

...
The value of the `inputLocation` property of any and all SearchSatisfaction events sent by the corresponding instrumentation.
Source:
See:

.checkboxHack :CheckboxHack

...
Type:
Source:

Methods

add(container, message, classesopt, timeoutopt, autoCloseopt)

...
Adds and show a popup to the user to point them to the new location of the element
Parameters:
Name Type Attributes Default Description
container Element
message string
classes Array.<string> <optional>
timeout number <optional>
 4000
autoClose boolean <optional>
 true
Source:

addInterwikiLinkToMainMenu()

...
Copies interwiki links to main menu Temporary solution to T287206, can be removed when the new ULS built in Vue.js has been released and contains this
Source:

addNamespacesGadgetSupport()

...
In https://phabricator.wikimedia.org/T313409 #p-namespaces was renamed to #p-associatedPages This code maps items added by gadgets to the new menu. This code can be removed in MediaWiki 1.40.
Source:

addNoIconClass(item)

...
T320691: Add a `.vector-tab-noicon` class to any tabbed menu item that is added by a gadget so that the menu item has the correct padding and margin.
Parameters:
Name Type Description
item HTMLElement
Source:

addPinnableElementIndicator(pinnableElementId)

...
Create the indicators for the pinnable element
Parameters:
Name Type Description
pinnableElementId string | undefined
Source:

addPortletLinkHandler(item, data)

...
Parameters:
Name Type Description
item HTMLElement
data PortletLinkData
Source:

addVisualEditorHooks(stickyIntersection, observer)

...
Add hooks for sticky header when Visual Editor is used.
Parameters:
Name Type Description
stickyIntersection Element intersection element
observer IntersectionObserver
Source:

addWprovToSearchResultUrls(results, offset) → {Array.<SearchResultPartial>}

...
Return a new list of search results, with the `wprov` parameter added to each result's url (if any).
Parameters:
Name Type Description
results Array.<SearchResultPartial> Not modified.
offset number Offset to add to the index of each result.
Source:
Returns:
Type
Array.<SearchResultPartial>

bind()

...
Enhance dropdownMenu functionality and accessibility using core's checkboxHack.
Source:

bindPinnableBreakpoint(header)

...
Binds pinnable breakpoint to allow automatic unpinning of pinnable elements with pinnedContainerId and unpinnedContainerId defined
Parameters:
Name Type Description
header HTMLElement
Source:

bindPinnableToggleButtons(header)

...
Binds all the toggle buttons in a pinnableElement to the click handler that enables pinnability.
Parameters:
Name Type Description
header HTMLElement
Source:

bindSearchBoxHandler(searchBox, header)

...
Binds event handlers necessary for the searchBox to disappear when the user clicks outside the searchBox.
Parameters:
Name Type Description
searchBox HTMLElement
header HTMLElement
Source:

bindToggleClickHandler(searchBox, header, searchToggle)

...
Binds event handlers necessary for the searchBox to show when the toggle is clicked.
Parameters:
Name Type Description
searchBox HTMLElement
header HTMLElement
searchToggle Element
Source:

copyAttribute(from, to, attribute)

...
Copies attribute from an element to another.
Parameters:
Name Type Description
from Element
to Element
attribute string
Source:

copyButtonAttributes(from, to)

...
Copies attribute from an element to another.
Parameters:
Name Type Description
from Element
to Element
Source:

createIconElement(menuElement, parentElement, id) → {HTMLElement|undefined}

...
Create an icon element to be appended inside the anchor tag.
Parameters:
Name Type Description
menuElement HTMLElement | null
parentElement HTMLElement | null
id string | null
Source:
Returns:
Type
HTMLElement | undefined

deferUntilFrame(callback, frameCount)

...
Helper method that calls a specified callback before the browser has performed a specified number of repaints. Uses `requestAnimationFrame` under the hood to determine the next repaint.
Parameters:
Name Type Description
callback function
frameCount number The number of frames to wait before calling the specified callback.
Source:

disablePinningAtBreakpoint(header, e)

...
Callback for matchMedia listener that overrides the pinnable header's stored state at a certain breakpoint and forces it to unpin. Usage of 'e.matches' assumes a `max-width` not `min-width` media query.
Parameters:
Name Type Description
header HTMLElement
e MediaQueryList | MediaQueryListEvent
Source:

enableCssAnimations(document) → {void}

...
Wait for first paint before calling this function. That's its whole purpose. Some CSS animations and transitions are "disabled" by default as a workaround to this old Chrome bug, https://bugs.chromium.org/p/chromium/issues/detail?id=332189, which otherwise causes them to render in their terminal state on page load. By adding the `vector-animations-ready` class to the `html` root element **after** first paint, the animation selectors suddenly match causing the animations to become "enabled" when they will work properly. A similar pattern is used in Minerva (see T234570#5779890, T246419). Example usage in Less: ```less .foo { color: #f00; transform: translateX( -100% ); } // This transition will be disabled initially for JavaScript users. It will never be enabled for // non-JavaScript users. .vector-animations-ready .foo { transition: transform 100ms ease-out; } ```
Parameters:
Name Type Description
document Document
Source:
Returns:
Type
void

fetchJson(resource, initopt) → {AbortableFetch}

...
A wrapper which combines native fetch() in browsers and the following json() call.
Parameters:
Name Type Attributes Description
resource string
init RequestInit <optional>
Source:
Returns:
Type
AbortableFetch

firePageTitleScrollHook(direction)

...
Fire a hook to be captured by WikimediaEvents for scroll event logging.
Parameters:
Name Type Description
direction string the scroll direction
Source:

generateUrl()

...
Source:

getAvailableViewMenuWidth() → {number}

...
Calculate the available width for adding links in the veiws menu, i.e. the remaining space in the toolbar between the right-navigation and left-navigation elements.
Source:
Returns:
remaining available pixels in page toolbar or Zero if remaining space is negative.
Type
number

getClass(name, featureEnabled) → {string}

...
Get name of feature class.
Parameters:
Name Type Description
name string
featureEnabled boolean
Source:
Returns:
Type
string

getDocumentScrollPaddingTop() → {number}

...
Return the computed value of the `scroll-margin-top` CSS property of the document element which is also used for the scroll intersection threshold (T317661).
Source:
Returns:
Value of scroll-margin-top OR 75 if falsy. 75 derived from @scroll-padding-top LESS variable https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/894696/3/resources/common/variables.less ?
Type
number

getWprovFromResultIndex(index) → {string}

...
Generates the value of the `wprov` parameter to be used in the URL of a search result and the `wprov` hidden input. See https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikimediaEvents/+/refs/heads/master/modules/ext.wikimediaEvents/searchSatisfaction.js and also the top of that file for additional detail about the shape of the parameter.
Parameters:
Name Type Description
index number
Source:
Returns:
Type
string

hide()

...
Hide the sticky header.
Source:

init()

...
adds a toggle button
Source:

init(document)

...
Initialize main menu and collapsed TOC enhancements.
Parameters:
Name Type Description
document Document
Source:

init()

...
Upgrades Echo for icon consistency. Undos work inside Echo to replace our button.
Source:

init(window) → {void}

...
Parameters:
Name Type Description
window Window
Source:
Returns:
Type
void

init()

...
Collapsible tabs for Vector
Source:

initAfterEs6Module()

...
Because stickyHeader.js clones the user menu, it must initialize before dropdownMenus.js initializes in order for the sticky header's user menu to bind the necessary checkboxHack event listeners. This is solved by using mw.loader.using to ensure that the skins.vector.es6 module initializes first followed by initializing this module. If the es6 module loading fails (which can happen in browsers that don't support es6), continue to initialize this module.
Source:

initMainMenu(checkbox, button, target) → {void}

...
Improve the interactivity of the main menu by binding checkbox hack enhancements.
Parameters:
Name Type Description
checkbox HTMLElement | null
button HTMLElement | null
target HTMLElement | null
Source:
Returns:
Type
void

initScrollObserver(show, hide) → {IntersectionObserver}

...
Create an observer for showing/hiding feature and for firing scroll event hooks.
Parameters:
Name Type Description
show function functionality for when feature is visible
hide function functionality for when feature is hidden
Source:
Returns:
Type
IntersectionObserver

initSearchLoader(document)

...
Initialize the loading of the search module as well as the loading indicator. Only initialize the loading indicator when not using the core search module.
Parameters:
Name Type Description
document Document
Source:

initStickyHeader(props)

...
Parameters:
Name Type Description
props StickyHeaderProps
Source:

isAllowedAction(action) → {boolean}

...
Determines if sticky header should be visible for a given action.
Parameters:
Name Type Description
action string
Source:
Returns:
Type
boolean

isAllowedNamespace(namespaceNumber) → {boolean}

...
Determines if sticky header should be visible for a given namespace.
Parameters:
Name Type Description
namespaceNumber number
Source:
Returns:
Type
boolean

isEnabled(name) → {boolean}

...
Checks if the feature is enabled.
Parameters:
Name Type Description
name string
Source:
Returns:
Type
boolean

isInViewport(element) → {boolean}

...
Check if element is in viewport.
Parameters:
Name Type Description
element Element
Source:
Returns:
Type
boolean

isPinned(header) → {boolean}

...
Parameters:
Name Type Description
header HTMLElement
Source:
Returns:
Returns true if the element is pinned and false otherwise.
Type
boolean

loadSearchModule(element, moduleName, startMarker, afterLoadFn)

...
Loads the search module via `mw.loader.using` on the element's focus event. Or, if the element is already focused, loads the search module immediately. After the search module is loaded, executes a function to remove the loading indicator.
Parameters:
Name Type Description
element Element search input.
moduleName string resourceLoader module to load.
startMarker string | null
afterLoadFn null | function function to execute after search module loads.
Source:

main() → {void}

...
Source:
Returns:
Type
void

main(window) → {void}

...
Parameters:
Name Type Description
window Window
Source:
Returns:
Type
void

makeNodeTrackable(node)

...
Makes a node trackable by our click tracking instrumentation.
Parameters:
Name Type Description
node Element
Source:

makeStickyHeaderFunctional(header, userLinksDropdown, stickyObserver, stickyIntersection, disableEditIcons)

...
Makes sticky header functional for modern Vector.
Parameters:
Name Type Description
header Element
userLinksDropdown Element
stickyObserver IntersectionObserver
stickyIntersection Element
disableEditIcons boolean
Source:

markLoadEnd(startMarker, endMarker, measureMarker)

...
Marks when the lazy load has completed.
Parameters:
Name Type Description
startMarker string
endMarker string
measureMarker string
Source:

module:SectionObserver(props) → {SectionObserver}

...
Observe intersection changes with the viewport for one or more elements. This is intended to be used with the headings in the content so that the corresponding section(s) in the table of contents can be "activated" (e.g. bolded). When sectionObserver notices a new intersection change, the `props.onIntersection` callback will be fired with the corresponding section as a param. Because sectionObserver uses a scroll event listener (in combination with IntersectionObserver), the changes are throttled to a default maximum rate of 200ms so that the main thread is not excessively blocked. IntersectionObserver is used to asynchronously calculate the positions of the observed tags off the main thread and in a manner that does not cause expensive forced synchronous layouts.
Parameters:
Name Type Description
props SectionObserverProps
Source:
Returns:
Type
SectionObserver

module:TableOfContents(props) → {TableOfContents}

...
Initializes the sidebar's Table of Contents.
Parameters:
Name Type Description
props TableOfContentsProps
Source:
Returns:
Type
TableOfContents

module:WebABTest(props) → {WebABTest}

...
Initializes an AB test experiment. Example props: webABTest({ name: 'nameOfExperiment', buckets: { unsampled: { samplingRate: 0.25 }, control: { samplingRate: 0.25 }, treatment1: { samplingRate: 0.25 }, treatment2: { samplingRate: 0.25 } }, token: 'token' });
Parameters:
Name Type Description
props WebABTestProps
Source:
Returns:
Type
WebABTest

movePinnableElement(pinnableElementId, newContainerId)

...
Parameters:
Name Type Description
pinnableElementId string
newContainerId string
Source:

onFetchEnd(event)

...
Parameters:
Name Type Description
event FetchEndEvent
Source:

onSuggestionClick(event)

...
Parameters:
Name Type Description
event SuggestionClickEvent | SearchSubmitEvent
Source:

pinnableElementClickHandler(header)

...
Event handler that toggles the pinnable elements pinned state. Also moves the pinned element when those params are provided (via data attributes).
Parameters:
Name Type Description
header HTMLElement PinnableHeader element.
Source:

prepareEditIcons(header, primaryEdit, isProtected, secondaryEdit, addSection, disableStickyHeader)

...
Render sticky header edit or protected page icons for modern Vector.
Parameters:
Name Type Description
header Element
primaryEdit Element | null
isProtected boolean
secondaryEdit Element | null
addSection Element | null
disableStickyHeader function function to call to disable the sticky header.
Source:

prepareIcons(header, history, talk, subject, watch)

...
Makes sticky header icons functional for modern Vector.
Parameters:
Name Type Description
header Element
history Element | null
talk Element | null
subject Element | null
watch Element | null
Source:

prepareUserLinksDropdown(userLinksDropdown) → {Element}

...
Clones the existing user menu (excluding items added by gadgets) and adds to the sticky header ensuring it is not focusable and that elements are no longer collapsible (since the sticky header itself collapses at low resolutions) and updates click tracking event names. Also wires up the logout link so it works in a single click.
Parameters:
Name Type Description
userLinksDropdown Element
Source:
Returns:
cloned userLinksDropdown
Type
Element

removeAll(selectoropt)

...
Remove all popups
Parameters:
Name Type Attributes Default Description
selector string <optional>
 .vector-popup-notification
Source:

removeClassFromNodes(nodes, className)

...
Parameters:
Name Type Description
nodes NodeList
className string
Source:

removeNode(node)

...
Parameters:
Name Type Description
node Element
Source:

removeNodes(nodes)

...
Parameters:
Name Type Description
nodes NodeList
Source:

renderSearchLoadingIndicator(event)

...
Event callback that shows or hides the loading indicator based on the event type. The loading indicator states are: 1. Show on input event (while user is typing) 2. Hide on focusout event (when user removes focus from the input ) 3. Show when input is focused, if it contains a query. (in case user re-focuses on input)
Parameters:
Name Type Description
event Event
Source:

save(feature, enabled)

...
Saves preference to user preferences and/or cookies.
Parameters:
Name Type Description
feature string
enabled boolean
Source:

setDataAttribute(toggleBtn)

...
Sets data attribute for click tracking purposes.
Parameters:
Name Type Description
toggleBtn HTMLElement
Source:

setFocusAfterToggle(pinnableElementId)

...
Sets focus on the correct toggle button depending on the pinned state. Also opens the dropdown containing the unpinned element.
Parameters:
Name Type Description
pinnableElementId string
Source:

setLoadingIndicatorListeners(element, attach, eventCallback)

...
Attaches or detaches the event listeners responsible for activating the loading indicator.
Parameters:
Name Type Description
element Element
attach boolean
eventCallback function
Source:

setSavedPinnableState(header)

...
Saves the persistent pinnable state in the element's dataset so that it can be overridden at lower resolutions and the reverted to at wider resolutions. This is not necessarily the elements current state, but it seeks to represent the state of the saved user preference.
Parameters:
Name Type Description
header HTMLElement
Source:

setupSearchIfNeeded(header)

...
Parameters:
Name Type Description
header Element
Source:

setupTableOfContents(tocElement, bodyContent, initSectionObserverFn) → {tableOfContents|null}

...
Parameters:
Name Type Description
tocElement HTMLElement | null
bodyContent HTMLElement | null
initSectionObserverFn initSectionObserver
Source:
Returns:
Type
tableOfContents | null

show(popupWidget, timeoutopt)

...
Toggle the popup widget
Parameters:
Name Type Attributes Default Description
popupWidget any popupWidget from oojs-ui cannot use type because it's not loaded yet
timeout number <optional>
 4000
Source:

show()

...
Show the sticky header.
Source:

suffixStickyAttribute(node, attribute)

...
Suffixes an attribute with a value that indicates it relates to the sticky header to support click tracking instrumentation.
Parameters:
Name Type Description
node Element
attribute string
Source:

suffixStickyHref(node)

...
Suffixes the href attribute of a node with a value that indicates it relates to the sticky header to support tracking instrumentation. Distinct from suffixStickyAttribute as it's intended to support followed links recording their origin.
Parameters:
Name Type Description
node Element
Source:

toggle(name)

...
Parameters:
Name Type Description
name string
Source:
Throws:
if unknown feature toggled.
Type
Error

toggleDocClasses(name, overrideopt) → {boolean}

...
Parameters:
Name Type Attributes Description
name string feature name
override boolean <optional>
 option to force enabled or disabled state.
Source:
Throws:
if unknown feature toggled.
Type
Error
Returns:
The new feature state (false=disabled, true=enabled).
Type
boolean

togglePinnableClasses(header)

...
Toggle classes on the body and pinnable element
Parameters:
Name Type Description
header HTMLElement pinnable element
Source:

unsuffixStickyHref(node)

...
Undoes the effect of suffixStickyHref
Parameters:
Name Type Description
node Element
Source:
...
Ensures a sticky header button has the correct attributes
Parameters:
Name Type Description
watchSticky Element
status string 'watched', 'unwatched', or 'temporary'
Source:

urlGenerator(config) → {UrlGenerator}

...
Generates URLs for suggestions like those in MediaWiki's mediawiki.searchSuggest implementation.
Parameters:
Name Type Description
config MwMap
Source:
Returns:
Type
UrlGenerator

watchstarCallback($link, isWatched, expiryopt)

...
Callback for watchsar
Parameters:
Name Type Attributes Description
$link jQuery Watchstar link
isWatched boolean The page is watched
expiry string <optional>
 Optional expiry time
Source:

Type Definitions

AbortableFetch

...
Type:
  • Object
Properties:
Name Type Description
fetch Promise.<any>
abort function
Source:

FetchEndEvent

...
Type:
  • Object
Properties:
Name Type Description
numberOfResults number
query string
Source:

generateUrl(searchResult, paramsopt, articlePathopt) → {string}

...
Parameters:
Name Type Attributes Description
searchResult RestResult | SearchResult | string
params UrlParams <optional>
articlePath string <optional>
Source:
Returns:
Type
string

InitStickyHeaderABTests

...
Initialize sticky header AB tests and determine whether to show the sticky header based on which buckets the user is in.
Type:
  • Object
Properties:
Name Type Description
disableEditIcons boolean Should the sticky header have an edit icon
showStickyHeader boolean Should the sticky header be shown
Source:

Instrumentation

...
Type:
  • Object
Properties:
Name Type Description
listeners Object
getWprovFromResultIndex function
addWprovToSearchResultUrls function
Source:

NullableAbortController

...
Type:
  • Object
Properties:
Name Type Description
signal AbortSignal | undefined
abort function
Source:

OnIntersection(element)

...
Parameters:
Name Type Description
element HTMLElement The section that triggered the new intersection change.
Source:

PortletLinkData

...
Adds icon placeholder for gadgets to use.
Type:
  • Object
Properties:
Name Type Description
id string | null
Source:

RestResult

...
Type:
  • Object
Properties:
Name Type Attributes Description
id number
key string
title string
description string <optional>
thumbnail RestThumbnail | null <optional>
Source:

RestThumbnail

...
Type:
  • Object
Properties:
Name Type Attributes Description
url string
width number | null <optional>
height number | null <optional>
Source:

SearchResult

...
Type:
  • Object
Properties:
Name Type Attributes Description
id number
key string
title string
description string <optional>
thumbnail SearchResultThumbnail <optional>
Source:

SearchResultPartial

...
Type:
  • Object
Properties:
Name Type Attributes Description
title string
url string <optional>
Source:

SearchResultThumbnail

...
Type:
  • Object
Properties:
Name Type Attributes Description
url string
width number <optional>
height number <optional>
Source:

SearchSubmitEvent

...
Type:
Source:

StickyHeaderProps

...
Type:
  • Object
Properties:
Name Type Description
header Element
userLinksDropdown Element
observer IntersectionObserver
stickyIntersection Element
disableEditIcons boolean
Source:

SuggestionClickEvent

...
Type:
  • Object
Properties:
Name Type Description
numberOfResults number
index number
Source:

UrlGenerator

...
Type:
  • Object
Properties:
Name Type Description
generateUrl generateUrl
Source:

UrlParams

...
Type:
  • Object
Source: