Merge "Add watchstar to sticky header (alternative)"
This commit is contained in:
commit
af2b4a0da4
|
@ -68,6 +68,16 @@ class SkinVector extends SkinMustache {
|
||||||
'tabindex' => '-1',
|
'tabindex' => '-1',
|
||||||
'class' => 'sticky-header-icon'
|
'class' => 'sticky-header-icon'
|
||||||
];
|
];
|
||||||
|
// Event and icon will be updated depending on watchstar state
|
||||||
|
private const WATCHSTAR_ICON = [
|
||||||
|
'href' => '#',
|
||||||
|
'id' => 'ca-watchstar-sticky-header',
|
||||||
|
'event' => 'watch-sticky-header',
|
||||||
|
'icon' => 'wikimedia-star',
|
||||||
|
'is-quiet' => true,
|
||||||
|
'tabindex' => '-1',
|
||||||
|
'class' => 'sticky-header-icon mw-watchlink'
|
||||||
|
];
|
||||||
private const EDIT_VE_ICON = [
|
private const EDIT_VE_ICON = [
|
||||||
'href' => '#',
|
'href' => '#',
|
||||||
'id' => 'ca-ve-edit-sticky-header',
|
'id' => 'ca-ve-edit-sticky-header',
|
||||||
|
@ -466,6 +476,7 @@ class SkinVector extends SkinMustache {
|
||||||
$btns = [
|
$btns = [
|
||||||
self::TALK_ICON,
|
self::TALK_ICON,
|
||||||
self::HISTORY_ICON,
|
self::HISTORY_ICON,
|
||||||
|
self::WATCHSTAR_ICON,
|
||||||
];
|
];
|
||||||
if ( $includeEditIcons ) {
|
if ( $includeEditIcons ) {
|
||||||
$btns[] = self::EDIT_WIKITEXT_ICON;
|
$btns[] = self::EDIT_WIKITEXT_ICON;
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
"wmf": {
|
"wmf": {
|
||||||
"linkMap": {
|
"linkMap": {
|
||||||
"\"addEventListener\"": "https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener",
|
"\"addEventListener\"": "https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener",
|
||||||
|
"jQuery": "https://api.jquery.com",
|
||||||
"Document": "https://developer.mozilla.org/docs/Web/API/Document",
|
"Document": "https://developer.mozilla.org/docs/Web/API/Document",
|
||||||
"Element": "https://developer.mozilla.org/docs/Web/API/Element",
|
"Element": "https://developer.mozilla.org/docs/Web/API/Element",
|
||||||
"Event": "https://developer.mozilla.org/docs/Web/API/Event",
|
"Event": "https://developer.mozilla.org/docs/Web/API/Event",
|
||||||
|
|
|
@ -117,18 +117,52 @@ function removeClassFromNodes( nodes, className ) {
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ensures a sticky header button has the correct attributes
|
||||||
|
*
|
||||||
|
* @param {HTMLElement} watchSticky
|
||||||
|
* @param {string} status 'watched', 'unwatched', or 'temporary'
|
||||||
|
*/
|
||||||
|
function updateStickyWatchlink( watchSticky, status ) {
|
||||||
|
/* eslint-disable mediawiki/class-doc */
|
||||||
|
watchSticky.classList.toggle( 'mw-ui-icon-wikimedia-star', status === 'unwatched' );
|
||||||
|
watchSticky.classList.toggle( 'mw-ui-icon-wikimedia-unStar', status === 'watched' );
|
||||||
|
watchSticky.classList.toggle( 'mw-ui-icon-wikimedia-halfStar', status === 'temporary' );
|
||||||
|
/* eslint-enable mediawiki/class-doc */
|
||||||
|
|
||||||
|
watchSticky.setAttribute( 'data-event-name', status === 'unwatched' ? 'watch-sticky-header' : 'unwatch-sticky-header' );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback for watchsar
|
||||||
|
*
|
||||||
|
* @param {jQuery} $link Watchstar link
|
||||||
|
* @param {boolean} isWatched The page is watched
|
||||||
|
* @param {string} [expiry] Optional expiry time
|
||||||
|
*/
|
||||||
|
function watchstarCallback( $link, isWatched, expiry ) {
|
||||||
|
updateStickyWatchlink(
|
||||||
|
// @ts-ignore
|
||||||
|
$link[ 0 ],
|
||||||
|
expiry !== 'infinity' ? 'temporary' :
|
||||||
|
isWatched ? 'watched' : 'unwatched'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Makes sticky header icons functional for modern Vector.
|
* Makes sticky header icons functional for modern Vector.
|
||||||
*
|
*
|
||||||
* @param {HTMLElement} headerElement
|
* @param {HTMLElement} headerElement
|
||||||
* @param {HTMLElement|null} history
|
* @param {HTMLElement|null} history
|
||||||
* @param {HTMLElement|null} talk
|
* @param {HTMLElement|null} talk
|
||||||
|
* @param {HTMLElement|null} watch
|
||||||
*/
|
*/
|
||||||
function prepareIcons( headerElement, history, talk ) {
|
function prepareIcons( headerElement, history, talk, watch ) {
|
||||||
const historySticky = headerElement.querySelector( '#ca-history-sticky-header' ),
|
const historySticky = headerElement.querySelector( '#ca-history-sticky-header' ),
|
||||||
talkSticky = headerElement.querySelector( '#ca-talk-sticky-header' );
|
talkSticky = headerElement.querySelector( '#ca-talk-sticky-header' ),
|
||||||
|
watchSticky = headerElement.querySelector( '#ca-watchstar-sticky-header' );
|
||||||
|
|
||||||
if ( !historySticky || !talkSticky ) {
|
if ( !historySticky || !talkSticky || !watchSticky ) {
|
||||||
throw new Error( 'Sticky header has unexpected HTML' );
|
throw new Error( 'Sticky header has unexpected HTML' );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -144,6 +178,22 @@ function prepareIcons( headerElement, history, talk ) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
talkSticky.parentNode.removeChild( talkSticky );
|
talkSticky.parentNode.removeChild( talkSticky );
|
||||||
}
|
}
|
||||||
|
if ( watch && watch.parentNode instanceof HTMLElement ) {
|
||||||
|
const watchContainer = watch.parentNode;
|
||||||
|
copyButtonAttributes( watch, watchSticky );
|
||||||
|
updateStickyWatchlink(
|
||||||
|
// @ts-ignore
|
||||||
|
watchSticky,
|
||||||
|
watchContainer.classList.contains( 'mw-watchlink-temp' ) ? 'temporary' :
|
||||||
|
watchContainer.getAttribute( 'id' ) === 'ca-watch' ? 'unwatched' : 'watched'
|
||||||
|
);
|
||||||
|
|
||||||
|
const watchLib = require( /** @type {string} */( 'mediawiki.page.watch.ajax' ) );
|
||||||
|
watchLib.watchstar( $( watchSticky ), mw.config.get( 'wgRelevantPageName' ), watchstarCallback );
|
||||||
|
} else {
|
||||||
|
// @ts-ignore
|
||||||
|
watchSticky.parentNode.removeChild( watchSticky );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -331,7 +381,8 @@ function makeStickyHeaderFunctional(
|
||||||
|
|
||||||
prepareIcons( headerElement,
|
prepareIcons( headerElement,
|
||||||
document.querySelector( '#ca-history a' ),
|
document.querySelector( '#ca-history a' ),
|
||||||
document.querySelector( '#ca-talk a' )
|
document.querySelector( '#ca-talk a' ),
|
||||||
|
document.querySelector( '#ca-watch a, #ca-unwatch a' )
|
||||||
);
|
);
|
||||||
|
|
||||||
const veEdit = document.querySelector( '#ca-ve-edit a' );
|
const veEdit = document.querySelector( '#ca-ve-edit a' );
|
||||||
|
|
|
@ -179,10 +179,13 @@
|
||||||
"class": "ResourceLoaderOOUIIconPackModule",
|
"class": "ResourceLoaderOOUIIconPackModule",
|
||||||
"variants": [],
|
"variants": [],
|
||||||
"icons": [
|
"icons": [
|
||||||
"history",
|
|
||||||
"speechBubbles",
|
|
||||||
"edit",
|
"edit",
|
||||||
"editLock",
|
"editLock",
|
||||||
|
"halfStar",
|
||||||
|
"history",
|
||||||
|
"speechBubbles",
|
||||||
|
"star",
|
||||||
|
"unStar",
|
||||||
"wikiText"
|
"wikiText"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -231,6 +234,7 @@
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"skins.vector.icons.js",
|
"skins.vector.icons.js",
|
||||||
"mediawiki.page.ready",
|
"mediawiki.page.ready",
|
||||||
|
"mediawiki.page.watch.ajax",
|
||||||
"mediawiki.util",
|
"mediawiki.util",
|
||||||
"mediawiki.experiments"
|
"mediawiki.experiments"
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue