Show:

Members

...

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

wasCollapsedDuringResize :boolean

...

.checkboxHack :CheckboxHack

...

Methods

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:

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:

bindPinnableToggleButtons(header)

...
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:

bindSidebarClickEvent(checkbox, button)

...
Bind the event handler that saves the sidebar state to the click event on the sidebar button.
Parameters:
Name Type Description
checkbox HTMLElement | null
button HTMLElement | null
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:

collapseSidebar(checkbox)

...
Collapses the sidebar if screen resolution too small.
Parameters:
Name Type Description
checkbox HTMLInputElement
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:

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

expandSidebar(checkbox)

...
Expands the sidebar when the window is resized if it was previously collapsed.
Parameters:
Name Type Description
checkbox HTMLInputElement
Source:

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

fireScrollHook(direction, hook)

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

generateUrl(suggestion, meta) → {string}

...
Used by the Vue-enhanced search component to generate URLs for the search results. Adds a `wprov` paramater to the URL to satisfy the SearchSatisfaction instrumentation.
Parameters:
Name Type Description
suggestion SearchResultPartial | string
meta GenerateUrlMeta
Source:
See:
Returns:
Type
string

generateUrl()

...

getScrollVariables(hook) → {scrollVariables}

...
Return the correct variables based on hook type.
Parameters:
Name Type Description
hook string the type of hook
Source:
Returns:
Type
scrollVariables

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

isPersistentEnabled() → {boolean}

...
Checks if persistent is enabled at current time. When a user is using a browser with a screen resolution of < 1000 it is assumed that it is preferred that the sidebar remains closed across page views, as otherwise it gets in the way of reading. More context at T316191.
Source:
Returns:
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, userMenu, userMenuStickyContainer, stickyObserver, stickyIntersection, disableEditIcons)

...
Makes sticky header functional for modern Vector.
Parameters:
Name Type Description
header Element
userMenu Element
userMenuStickyContainer 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:

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:

prepareUserMenu(userMenu) → {Element}

...
Parameters:
Name Type Description
userMenu Element
Source:
Returns:
cloned userMenu
Type
Element

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 localStorage.
Parameters:
Name Type Description
feature string
enabled boolean
Source:

saveSidebarState(checkbox, timeout, shouldTriggerResize) → {any}

...
Execute a debounced API request to save the sidebar user preference. The request is meant to fire 1000 milliseconds after the last click on the sidebar button.
Parameters:
Name Type Description
checkbox HTMLInputElement
timeout number duration
shouldTriggerResize boolean whether a resize event is needed.
Source:
Returns:
Type
any

setDataAttribute(toggleBtn)

...
Sets data attribute for click tracking purposes.
Parameters:
Name Type Description
toggleBtn HTMLElement
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:

setupSearchIfNeeded(header)

...
Parameters:
Name Type Description
header Element
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

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

GenerateUrlMeta

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

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
generateUrl 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:

scrollVariables

...
Type:
  • Object
Properties:
Name Type Description
scrollHook string
scrollContextBelow string
scrollContextAbove string
scrollAction string
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

...

StickyHeaderProps

...
Type:
  • Object
Properties:
Name Type Description
header Element
userMenu 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

...