Sticky header edit icons trigger via JavaScript
Current expected behaviour: the editor experience will load and the user will be thrown to the top of the page. Bug: T293158 Change-Id: I3585616c2244a6b91ef5f160beb1cf51af3599aa
This commit is contained in:
parent
c822029e38
commit
0663087dd5
|
@ -21,6 +21,7 @@
|
|||
"Document": "https://developer.mozilla.org/docs/Web/API/Document",
|
||||
"Element": "https://developer.mozilla.org/docs/Web/API/Element",
|
||||
"Event": "https://developer.mozilla.org/docs/Web/API/Event",
|
||||
"EventTarget": "https://developer.mozilla.org/docs/Web/API/EventTarget",
|
||||
"HTMLElement": "https://developer.mozilla.org/docs/Web/API/HTMLElement",
|
||||
"Node": "https://developer.mozilla.org/docs/Web/API/Node",
|
||||
"NodeList": "https://developer.mozilla.org/docs/Web/API/NodeList",
|
||||
|
|
|
@ -60,7 +60,7 @@ function makeNodeTrackable( node ) {
|
|||
|
||||
/**
|
||||
*
|
||||
* @param {null|HTMLElement|Node} node
|
||||
* @param {null|HTMLElement|Node|EventTarget} node
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function toHTMLElement( node ) {
|
||||
|
@ -122,12 +122,15 @@ function prepareIcons( header, history, talk ) {
|
|||
* @param {HTMLElement|null} primaryEdit
|
||||
* @param {boolean} isProtected
|
||||
* @param {HTMLElement|null} secondaryEdit
|
||||
* @param {Function} disableStickyHeader function to call to disable the sticky
|
||||
* header.
|
||||
*/
|
||||
function prepareEditIcons(
|
||||
header,
|
||||
primaryEdit,
|
||||
isProtected,
|
||||
secondaryEdit
|
||||
secondaryEdit,
|
||||
disableStickyHeader
|
||||
) {
|
||||
const
|
||||
primaryEditSticky = toHTMLElement(
|
||||
|
@ -158,8 +161,38 @@ function prepareEditIcons(
|
|||
} else {
|
||||
removeNode( protectedSticky );
|
||||
copyButtonAttributes( primaryEdit, primaryEditSticky );
|
||||
|
||||
primaryEditSticky.addEventListener( 'click', function ( ev ) {
|
||||
const target = toHTMLElement( ev.target );
|
||||
const $ve = $( primaryEdit );
|
||||
|
||||
if ( target && $ve.length ) {
|
||||
const event = $.Event( 'click' );
|
||||
$ve.trigger( event );
|
||||
// The link has been progressively enhanced.
|
||||
if ( event.isDefaultPrevented() ) {
|
||||
disableStickyHeader();
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
} );
|
||||
if ( secondaryEdit ) {
|
||||
copyButtonAttributes( secondaryEdit, wikitextSticky );
|
||||
wikitextSticky.addEventListener( 'click', function ( ev ) {
|
||||
const target = toHTMLElement( ev.target );
|
||||
if ( target ) {
|
||||
const $edit = $( secondaryEdit );
|
||||
if ( $edit.length ) {
|
||||
const event = $.Event( 'click' );
|
||||
$edit.trigger( event );
|
||||
// The link has been progressively enhanced.
|
||||
if ( event.isDefaultPrevented() ) {
|
||||
disableStickyHeader();
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} else {
|
||||
removeNode( wikitextSticky );
|
||||
}
|
||||
|
@ -251,22 +284,24 @@ function makeStickyHeaderFunctional(
|
|||
const isProtected = !!protectedEdit;
|
||||
const primaryEdit = protectedEdit || ( veEdit || ceEdit );
|
||||
const secondaryEdit = veEdit ? ceEdit : null;
|
||||
const disableStickyHeader = () => {
|
||||
// eslint-disable-next-line mediawiki/class-doc
|
||||
header.classList.remove( STICKY_HEADER_VISIBLE_CLASS );
|
||||
stickyObserver.unobserve( stickyIntersection );
|
||||
};
|
||||
|
||||
prepareEditIcons(
|
||||
header,
|
||||
toHTMLElement( primaryEdit ),
|
||||
isProtected,
|
||||
toHTMLElement( secondaryEdit )
|
||||
toHTMLElement( secondaryEdit ),
|
||||
disableStickyHeader
|
||||
);
|
||||
|
||||
stickyObserver.observe( stickyIntersection );
|
||||
|
||||
// When Visual Editor is activated, hide sticky header.
|
||||
mw.hook( 've.activationComplete' ).add( () => {
|
||||
// eslint-disable-next-line mediawiki/class-doc
|
||||
header.classList.remove( STICKY_HEADER_VISIBLE_CLASS );
|
||||
stickyObserver.unobserve( stickyIntersection );
|
||||
} );
|
||||
mw.hook( 've.activate' ).add( disableStickyHeader );
|
||||
|
||||
// When Visual Editor is deactivated, by cliking "read" tab at top of page, show sticky header.
|
||||
mw.hook( 've.deactivationComplete' ).add( () => {
|
||||
|
|
Loading…
Reference in New Issue