6d34e401ff
This module produces 6 icons: ["clock", "profile"] * ["black", "gray", "white"] of which only 3 are needed: clock-gray, clock-white, profile-gray. This patch removes the module and moves the "clock" and "profile" icons into `skins.minerva.icons.images`. Since that module does not inline SVG's, the additional cost of adding these icons, which are loaded at startup, is minimal. The editLocked.svg icon has also been edited to correct its color. Bug: T218807 Change-Id: Ib54960eb556dfe0c1ae06d2f73d4f350e519e20f
414 lines
12 KiB
JavaScript
414 lines
12 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' ),
|
|
loader = mobile.rlModuleLoader,
|
|
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 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' ) );
|
|
}
|
|
} );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Make an instance of an ImageOverlay. This function assumes that the module
|
|
* providing the ImageOverlay has been asynchronously loaded.
|
|
* @method
|
|
* @ignore
|
|
* @param {string} title Url of image
|
|
* @return {ImageOverlay}
|
|
*/
|
|
function makeImageOverlay( title ) {
|
|
var ImageOverlay = M.require( 'mobile.mediaViewer/ImageOverlay' ),
|
|
imageOverlay = new ImageOverlay( {
|
|
api: api,
|
|
thumbnails: thumbs,
|
|
title: decodeURIComponent( title ),
|
|
eventBus: eventBus
|
|
} );
|
|
imageOverlay.on( ImageOverlay.EVENT_EXIT, function () {
|
|
// Actually dismiss the overlay whenever the cross is closed.
|
|
window.location.hash = '';
|
|
// Clear the hash.
|
|
router.navigate( '' );
|
|
} );
|
|
imageOverlay.on( ImageOverlay.EVENT_SLIDE, function ( nextThumbnail ) {
|
|
routeThumbnail( nextThumbnail );
|
|
} );
|
|
return imageOverlay;
|
|
}
|
|
|
|
/**
|
|
* Load image overlay
|
|
* @method
|
|
* @ignore
|
|
* @uses ImageOverlay
|
|
* @param {string} title Url of image
|
|
* @return {JQuery.Deferred|ImageOverlay}
|
|
*/
|
|
function loadImageOverlay( title ) {
|
|
if ( mw.loader.getState( 'mmv.bootstrap' ) === 'ready' ) {
|
|
// This means MultimediaViewer has been installed and is loaded.
|
|
// Avoid loading it (T169622)
|
|
return $.Deferred().reject();
|
|
}
|
|
if ( mw.loader.getState( 'mobile.mediaViewer' ) === 'ready' ) {
|
|
// If module already loaded, do this synchronously to avoid the event loop causing
|
|
// a visible flash (see T197110)
|
|
return makeImageOverlay( title );
|
|
}
|
|
return loader.loadModule( 'mobile.mediaViewer' ).then( function () {
|
|
return makeImageOverlay( title );
|
|
} );
|
|
}
|
|
|
|
// Routes
|
|
overlayManager.add( /^\/media\/(.+)$/, loadImageOverlay );
|
|
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 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 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 ),
|
|
// TODO: T213352 Temporary cache compatibility - to be deleted.
|
|
// Any conditionals using this boolean should be DELETED when the
|
|
// old page action menu is no longer being served to users.
|
|
// eslint-disable-next-line jquery/no-global-selector
|
|
oldPageActionsDOM = $( '#page-actions.hlist' ).length > 0;
|
|
|
|
if ( $downloadAction ) {
|
|
if ( oldPageActionsDOM ) {
|
|
$downloadAction.insertAfter( '#ca-watch' );
|
|
} else {
|
|
$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 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 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 ) );
|