golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Define sticky header ULS behaviour 

* It sticks to the header on scroll
* It hides when the sticky header hides

Bug: T296680
Change-Id: I5a4e2ba42e172ea55fbdac8f35ec895f6b2756cd
This commit is contained in:
jdlrobson 2021-12-03 11:36:15 -08:00 committed by Jdlrobson
parent a7c16c7f30
commit 51cce2d0d4
3 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/skins.vector.es6/stickyHeader.js
View File

@ -10,6 +10,8 @@ const
STICKY_HEADER_USER_MENU_CONTAINER_CLASS = 'vector-sticky-header-icon-end',
FIRST_HEADING_ID = 'firstHeading',
USER_MENU_ID = 'p-personal',
ULS_STICKY_CLASS = 'uls-dialog-sticky',
ULS_HIDE_CLASS = 'uls-dialog-sticky-hide',
VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle',
STICKY_HEADER_EXPERIMENT_NAME = 'vector.sticky_header_2021_11';
@ -36,6 +38,8 @@ function show() {
// eslint-disable-next-line mediawiki/class-doc
header.classList.add( STICKY_HEADER_VISIBLE_CLASS );
}
// eslint-disable-next-line mediawiki/class-doc
document.body.classList.remove( ULS_HIDE_CLASS );
}
/**
@ -45,6 +49,8 @@ function hide() {
if ( header ) {
// eslint-disable-next-line mediawiki/class-doc
header.classList.remove( STICKY_HEADER_VISIBLE_CLASS );
// eslint-disable-next-line mediawiki/class-doc
document.body.classList.add( ULS_HIDE_CLASS );
}
}
@ -438,6 +444,27 @@ function initStickyHeader( observer ) {
setupSearchIfNeeded( header );
// @ts-ignore
addVisualEditorHooks( header, stickyIntersection, observer );
// Make sure ULS outside sticky header disables the sticky header behaviour.
// @ts-ignore
mw.hook( 'mw.uls.compact_language_links.open' ).add( function ( $trigger ) {
if ( $trigger.attr( 'id' ) !== 'p-lang-btn-sticky-header' ) {
const bodyClassList = document.body.classList;
bodyClassList.remove( ULS_HIDE_CLASS );
bodyClassList.remove( ULS_STICKY_CLASS );
}
} );
// Make sure ULS dialog is sticky.
// @ts-ignore
const langBtn = header.querySelector( '#p-lang-btn-sticky-header' );
if ( langBtn ) {
langBtn.addEventListener( 'click', function () {
const bodyClassList = document.body.classList;
bodyClassList.remove( ULS_HIDE_CLASS );
bodyClassList.add( ULS_STICKY_CLASS );
} );
}
}
module.exports = {

3
skin.json
View File

@ -282,7 +282,8 @@
"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
"+oojs-ui-core.styles": "skinStyles/ooui.less",
"mediawiki.special": "skinStyles/mediawiki.special.less",
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less"
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less"
}
},
"config": {

16
skinStyles/ext.uls.compactlinks.less Normal file
View File

@ -0,0 +1,16 @@
// Sticky header ULS behavior.
.uls-dialog-sticky {
.uls-menu {
position: fixed;
/* stylelint-disable-next-line declaration-no-important */
top: 60px !important;
}
&.uls-dialog-sticky-hide {
.uls-menu {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
}