mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 19:21:39 +00:00
377 lines
11 KiB
JavaScript
377 lines
11 KiB
JavaScript
( function ( M, track, config ) {
|
|
var
|
|
mobile = M.require( 'mobile.startup' ),
|
|
PageGateway = mobile.PageGateway,
|
|
toast = mobile.toast,
|
|
time = mobile.time,
|
|
skin = M.require( 'mobile.init/skin' ),
|
|
TitleUtil = M.require( 'skins.minerva.scripts/TitleUtil' ),
|
|
issues = M.require( 'skins.minerva.scripts/pageIssues' ),
|
|
downloadPageAction = M.require( 'skins.minerva.scripts/downloadPageAction' ),
|
|
router = require( 'mediawiki.router' ),
|
|
OverlayManager = mobile.OverlayManager,
|
|
CtaDrawer = mobile.CtaDrawer,
|
|
Icon = mobile.Icon,
|
|
Button = mobile.Button,
|
|
Anchor = mobile.Anchor,
|
|
overlayManager = OverlayManager.getSingleton(),
|
|
page = M.getCurrentPage(),
|
|
redLinks = page.getRedLinks(),
|
|
api = new mw.Api(),
|
|
thumbs = page.getThumbnails(),
|
|
eventBus = mobile.eventBusSingleton,
|
|
namespaceIDs = mw.config.get( 'wgNamespaceIds' );
|
|
|
|
/**
|
|
* Event handler for clicking on an image thumbnail
|
|
* @param {JQuery.Event} ev
|
|
* @ignore
|
|
*/
|
|
function onClickImage( ev ) {
|
|
// Do not interfere with non-left clicks or if modifier keys are pressed.
|
|
if ( ( ev.button !== 0 && ev.which !== 1 ) ||
|
|
ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey ) {
|
|
return;
|
|
}
|
|
|
|
ev.preventDefault();
|
|
routeThumbnail( $( this ).data( 'thumb' ) );
|
|
}
|
|
|
|
/**
|
|
* @param {JQuery.Element} thumbnail
|
|
* @ignore
|
|
*/
|
|
function routeThumbnail( thumbnail ) {
|
|
router.navigate( '#/media/' + encodeURIComponent( thumbnail.getFileName() ) );
|
|
}
|
|
|
|
/**
|
|
* Add routes to images and handle clicks
|
|
* @method
|
|
* @ignore
|
|
*/
|
|
function initMediaViewer() {
|
|
thumbs.forEach( function ( thumb ) {
|
|
thumb.$el.off().data( 'thumb', thumb ).on( 'click', onClickImage );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Hijack the Special:Languages link and replace it with a trigger to a languageOverlay
|
|
* that displays the same data
|
|
* @ignore
|
|
*/
|
|
function initButton() {
|
|
// This catches language selectors in page actions and in secondary actions (e.g. Main Page)
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
var $primaryBtn = $( '.language-selector' );
|
|
|
|
if ( $primaryBtn.length ) {
|
|
// We only bind the click event to the first language switcher in page
|
|
$primaryBtn.on( 'click', function ( ev ) {
|
|
ev.preventDefault();
|
|
|
|
if ( $primaryBtn.attr( 'href' ) || $primaryBtn.find( 'a' ).length ) {
|
|
router.navigate( '/languages' );
|
|
} else {
|
|
toast.show( mw.msg( 'mobile-frontend-languages-not-available' ) );
|
|
}
|
|
} );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns a rejected promise if MultimediaViewer is available. Otherwise
|
|
* returns the mediaViewerOverlay
|
|
* @method
|
|
* @ignore
|
|
* @param {string} title the title of the image
|
|
* @return {JQuery.Deferred|Overlay}
|
|
*/
|
|
function makeMediaViewerOverlayIfNeeded( title ) {
|
|
if ( mw.loader.getState( 'mmv.bootstrap' ) === 'ready' ) {
|
|
// This means MultimediaViewer has been installed and is loaded.
|
|
// Avoid loading it (T169622)
|
|
return $.Deferred().reject();
|
|
}
|
|
|
|
return mobile.mediaViewer.overlay( {
|
|
api: api,
|
|
thumbnails: thumbs,
|
|
title: decodeURIComponent( title ),
|
|
eventBus: eventBus
|
|
} );
|
|
}
|
|
|
|
// Routes
|
|
overlayManager.add( /^\/media\/(.+)$/, makeMediaViewerOverlayIfNeeded );
|
|
overlayManager.add( /^\/languages$/, function () {
|
|
return mobile.languageOverlay( new PageGateway( api ) );
|
|
} );
|
|
|
|
// Setup
|
|
$( function () {
|
|
initButton();
|
|
initMediaViewer();
|
|
} );
|
|
|
|
/**
|
|
* Initialisation function for last modified module.
|
|
*
|
|
* Enhances an element representing a time
|
|
* to show a human friendly date in seconds, minutes, hours, days
|
|
* months or years
|
|
* @ignore
|
|
* @param {JQuery.Object} [$lastModifiedLink]
|
|
*/
|
|
function initHistoryLink( $lastModifiedLink ) {
|
|
var delta, historyUrl, msg, $bar,
|
|
ts, username, gender;
|
|
|
|
historyUrl = $lastModifiedLink.attr( 'href' );
|
|
ts = $lastModifiedLink.data( 'timestamp' );
|
|
username = $lastModifiedLink.data( 'user-name' ) || false;
|
|
gender = $lastModifiedLink.data( 'user-gender' );
|
|
|
|
if ( ts ) {
|
|
delta = time.getTimeAgoDelta( parseInt( ts, 10 ) );
|
|
if ( time.isRecent( delta ) ) {
|
|
$bar = $lastModifiedLink.closest( '.last-modified-bar' );
|
|
$bar.addClass( 'active' );
|
|
$bar.find( '.mw-ui-icon-minerva-clock' ).addClass( 'mw-ui-icon-minerva-clock-invert' );
|
|
$bar.find( '.mw-ui-icon-mf-arrow-gray' ).addClass( 'mw-ui-icon-mf-arrow-invert' );
|
|
}
|
|
msg = time.getLastModifiedMessage( ts, username, gender, historyUrl );
|
|
$lastModifiedLink.replaceWith( msg );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialisation function for last modified times
|
|
*
|
|
* Enhances .modified-enhancement element
|
|
* to show a human friendly date in seconds, minutes, hours, days
|
|
* months or years
|
|
* @ignore
|
|
*/
|
|
function initModifiedInfo() {
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
$( '.modified-enhancement' ).each( function () {
|
|
initHistoryLink( $( this ) );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Initialisation function for user creation module.
|
|
*
|
|
* Enhances an element representing a time
|
|
+ to show a human friendly date in seconds, minutes, hours, days
|
|
* months or years
|
|
* @ignore
|
|
* @param {JQuery.Object} [$tagline]
|
|
*/
|
|
function initRegistrationDate( $tagline ) {
|
|
var msg, ts;
|
|
|
|
ts = $tagline.data( 'userpage-registration-date' );
|
|
|
|
if ( ts ) {
|
|
msg = time.getRegistrationMessage( ts, $tagline.data( 'userpage-gender' ) );
|
|
$tagline.text( msg );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialisation function for registration date on user page
|
|
*
|
|
* Enhances .tagline-userpage element
|
|
* to show human friendly date in seconds, minutes, hours, days
|
|
* months or years
|
|
* @ignore
|
|
*/
|
|
function initRegistrationInfo() {
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
$( '#tagline-userpage' ).each( function () {
|
|
initRegistrationDate( $( this ) );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Initialize and inject the download button
|
|
*
|
|
* There are many restrictions when we can show the download button, this function should handle
|
|
* all device/os/operating system related checks and if device supports printing it will inject
|
|
* the Download icon
|
|
* @ignore
|
|
*/
|
|
function appendDownloadButton() {
|
|
var $downloadAction = downloadPageAction( skin,
|
|
config.get( 'wgMinervaDownloadNamespaces', [] ), window );
|
|
|
|
if ( $downloadAction ) {
|
|
|
|
$downloadAction.insertAfter( '.page-actions-menu__list-item:first-child' );
|
|
|
|
track( 'minerva.downloadAsPDF', {
|
|
action: 'buttonVisible'
|
|
} );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Tests a URL to determine if it links to a local User namespace page or not.
|
|
*
|
|
* Assuming the current page visited is hosted on metawiki, the following examples would return
|
|
* true:
|
|
*
|
|
* https://meta.wikimedia.org/wiki/User:Foo
|
|
* /wiki/User:Foo
|
|
* /wiki/User:Nonexistent_user_page
|
|
*
|
|
* The following examples return false:
|
|
*
|
|
* https://en.wikipedia.org/wiki/User:Foo
|
|
* /wiki/Foo
|
|
* /wiki/User_talk:Foo
|
|
*
|
|
* @param {string} url
|
|
* @return {boolean}
|
|
*/
|
|
function isUserUri( url ) {
|
|
var
|
|
title = TitleUtil.newFromUri( url ),
|
|
namespace = title ? title.getNamespaceId() : undefined;
|
|
return namespace === namespaceIDs.user;
|
|
}
|
|
|
|
/**
|
|
* Strip the edit action from red links to nonexistent User namespace pages.
|
|
* @return {void}
|
|
*/
|
|
function initUserRedLinks() {
|
|
redLinks.filter( function ( _, element ) {
|
|
// Filter out non-User namespace pages.
|
|
return isUserUri( element.href );
|
|
} ).each( function ( _, element ) {
|
|
var uri = new mw.Uri( element.href );
|
|
if ( uri.query.action !== 'edit' ) {
|
|
// Nothing to strip.
|
|
return;
|
|
}
|
|
|
|
// Strip the action.
|
|
delete uri.query.action;
|
|
|
|
// Update the element with the new link.
|
|
element.href = uri.toString();
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Initialize red links call-to-action
|
|
*
|
|
* Upon clicking a red link, show an interstitial CTA explaining that the page doesn't exist
|
|
* with a button to create it, rather than directly navigate to the edit form.
|
|
*
|
|
* Special case T201339: following a red link to a user or user talk page should not prompt for
|
|
* its creation. The reasoning is that user pages should be created by their owners and it's far
|
|
* more common that non-owners follow a user's red linked user page to consider their
|
|
* contributions, account age, or other activity.
|
|
*
|
|
* For example, a user adds a section to a Talk page and signs their contribution (which creates
|
|
* a link to their user page whether exists or not). If the user page does not exist, that link
|
|
* will be red. In both cases, another user follows this link, not to edit create a page for
|
|
* that user but to obtain information on them.
|
|
*
|
|
* @ignore
|
|
*/
|
|
function initRedlinksCta() {
|
|
redLinks.filter( function ( _, element ) {
|
|
// Filter out local User namespace pages.
|
|
return !isUserUri( element.href );
|
|
} ).on( 'click', function ( ev ) {
|
|
var drawerOptions = {
|
|
progressiveButton: new Button( {
|
|
progressive: true,
|
|
label: mw.msg( 'mobile-frontend-editor-redlink-create' ),
|
|
href: $( this ).attr( 'href' )
|
|
} ).options,
|
|
closeAnchor: new Anchor( {
|
|
progressive: true,
|
|
label: mw.msg( 'mobile-frontend-editor-redlink-leave' ),
|
|
additionalClassNames: 'hide'
|
|
} ).options,
|
|
events: {
|
|
'click .hide': 'hide' // Call CtaDrawer.hide() on closeAnchor click.
|
|
},
|
|
content: mw.msg( 'mobile-frontend-editor-redlink-explain' ),
|
|
actionAnchor: false
|
|
},
|
|
drawer = new CtaDrawer( drawerOptions );
|
|
|
|
// use preventDefault() and not return false to close other open
|
|
// drawers or anything else.
|
|
ev.preventDefault();
|
|
drawer.show();
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Initialize page edit action link (#ca-edit)
|
|
*
|
|
* Mark the edit link as disabled if the user is not actually able to edit the page for some
|
|
* reason (e.g. page is protected or user is blocked).
|
|
*
|
|
* Note that the link is still clickable, but clicking it will probably open a view-source
|
|
* form or display an error message, rather than open an edit form.
|
|
*
|
|
* FIXME: Review this code as part of T206262
|
|
*
|
|
* @ignore
|
|
*/
|
|
function initEditLink() {
|
|
var
|
|
// FIXME: create a utility method to generate class names instead of
|
|
// constructing temporary objects. This affects disabledEditIcon,
|
|
// enabledEditIcon, enabledEditIcon, and disabledClass and
|
|
// a number of other places in the code base.
|
|
disabledEditIcon = new Icon( {
|
|
name: 'edit',
|
|
glyphPrefix: 'minerva'
|
|
} ),
|
|
enabledEditIcon = new Icon( {
|
|
name: 'edit-enabled',
|
|
glyphPrefix: 'minerva'
|
|
} ),
|
|
enabledClass = enabledEditIcon.getGlyphClassName(),
|
|
disabledClass = disabledEditIcon.getGlyphClassName();
|
|
|
|
if ( mw.config.get( 'wgMinervaReadOnly' ) ) {
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
$( '#ca-edit' )
|
|
.removeClass( enabledClass )
|
|
.addClass( disabledClass );
|
|
}
|
|
}
|
|
|
|
$( function () {
|
|
// Update anything else that needs enhancing (e.g. watchlist)
|
|
initModifiedInfo();
|
|
initRegistrationInfo();
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
initHistoryLink( $( '.last-modifier-tagline a' ) );
|
|
appendDownloadButton();
|
|
initRedlinksCta();
|
|
initUserRedLinks();
|
|
initEditLink();
|
|
// Setup the issues banner on the page
|
|
// Pages which dont exist (id 0) cannot have issues
|
|
if ( !page.isMissing ) {
|
|
issues.init( overlayManager, page );
|
|
}
|
|
} );
|
|
|
|
M.define( 'skins.minerva.scripts/overlayManager', overlayManager );
|
|
}( mw.mobileFrontend, mw.track, mw.config ) );
|