MediaWiki:Gadget-MoreMenu.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**
* WARNING: GLOBAL GADGET FILE
* Compiled from source at https://github.com/wikimedia-gadgets/MoreMenu
* Please submit code changes as a pull request to the source repository at https://github.com/wikimedia-gadgets/MoreMenu
* Are there missing translations? See [[meta:MoreMenu#Localization]].
* Want to add custom links? See [[meta:MoreMenu#Customization]].
*
* Script: MoreMenu.js
* Version: 5.2.0
* Author: MusikAnimal
* License: MIT
* Documentation: [[meta:MoreMenu]]
* GitHub: https://github.com/wikimedia-gadgets/MoreMenu
* Skins: Vector, Timeless, Monobook, Modern
* Browsers: See [[mw:Compatibility#Browsers]]
**/
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/** Script starts here, waiting for the DOM to be ready before calling init(). */
$(function () {
window.MoreMenu = window.MoreMenu || {};
if (window.moreMenuDebug) {
/* eslint-disable no-console */
console.info('[MoreMenu] Debugging enabled. To disable, check your personal JS and remove `MoreMenu.debug = true;`.');
}
var api = new mw.Api();
/**
* Flag to suppress warnings shown by the msg() function.
* This is set by the addItem() method, since user-provided
* messages may not be stored in `MoreMenu.messages`.
*/
var ignoreI18nWarnings = false;
/** RTL helpers. */
var isRtl = $('html').prop('dir') === 'rtl';
var leftKey = isRtl ? 'right' : 'left';
var rightKey = isRtl ? 'left' : 'right';
/**
* Configuration to be passed to MoreMenu.user.js, MoreMenu.page.js,
* and handlers of the 'moremenu.ready' hook.
*/
var config = new function () {
/** Project-level */
this.project = {
domain: mw.config.get('wgServerName'),
siteName: mw.config.get('wgSiteName'),
dbName: mw.config.get('wgDBname'),
noticeProject: mw.config.get('wgNoticeProject'),
contentLanguage: mw.config.get('wgContentLanguage')
};
/** Page-level */
this.page = {
name: mw.config.get('wgPageName'),
nsId: mw.config.get('wgNamespaceNumber'),
"protected": !!mw.config.get('wgRestrictionEdit') && mw.config.get('wgRestrictionEdit').length || !!mw.config.get('wgRestrictionCreate') && mw.config.get('wgRestrictionCreate').length,
id: mw.config.get('wgArticleId'),
movable: !mw.config.get('wgIsMainPage') && !!$('#ca-move').length
};
if (this.page.nsId === -1 && !!mw.config.get('wgRelevantPageName') && mw.config.get('wgRelevantPageName').length && this.page.name !== mw.config.get('wgRelevantPageName')) {
$.extend(this.page, {
name: mw.config.get('wgRelevantPageName'),
id: mw.config.get('wgRelevantArticleId')
});
this.page.nsId = mw.Title.newFromText(this.page.name).namespace;
}
$.extend(this.page, {
escapedName: this.page.name.replace(/[?!'"()*]/g, escape),
encodedName: encodeURIComponent(this.page.name)
});
/** Currently viewing user (you). */
this.currentUser = {
skin: mw.config.get('skin'),
groups: mw.config.get('wgUserGroups'),
// Keyed by user group name, values have keys 'rights' and 'canAddRemoveGroups'.
groupsData: {},
rights: []
};
/**
* Target user (when viewing user pages, Special:Contribs, etc.).
* Also will contain data retrieved from the API such as their user groups and block status.
*/
this.targetUser = {
name: mw.config.get('wgRelevantUserName') || '',
groups: [],
rights: [],
blocked: false,
ipRange: false
};
if (!this.targetUser.name && mw.config.get('wgCanonicalSpecialPageName') === 'Contributions' && !$('.mw-userpage-userdoesnotexist')[0]) {
/**
* IP range at Special:Contribs, where wgRelevantUserName isn't set.
* @see https://phabricator.wikimedia.org/T206954
*/
this.targetUser.name = mw.config.get('wgTitle').split('/').slice(1).join('/');
this.targetUser.ipRange = true;
/** Some things don't work for IPv4 ranges (block log API), but do for IPv6 ranges... */
this.targetUser.ipv4Range = mw.util.isIPv4Address(this.targetUser.name.split('/')[0]);
}
$.extend(this.targetUser, {
escapedName: this.targetUser.name.replace(/[?!'"()*]/g, escape),
encodedName: encodeURIComponent(this.targetUser.name)
});
}();
/**
* Log a message to the console.
* @param {string} message
* @param {string} [level] Level accepted by `console`, e.g. 'debug', 'info', etc.
*/
function log(message) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'debug';
if (!(window.moreMenuDebug || level !== 'debug')) {
return;
}
message = "[MoreMenu] ".concat(message);
if (['', 'warn', 'error'].indexOf(level) >= 0) {
message += '\nSee https://w.wiki/9Se for documentation.';
}
/* eslint-disable no-console */
console[level](message);
}
/**
* Get a MoreMenu module.
* @param {string} name Title of module, such as 'user', which pulls in MoreMenu.user.js.
* @return {Object} All modules return Objects.
*/
function getModule(name) {
if (!MoreMenu[name]) {
log("Missing module MoreMenu.".concat(name, ".js"), 'warn');
}
return MoreMenu[name];
}
/**
* Get translation for the given key.
* @param {string} key As defined in MoreMenu.messages.js
* @param {boolean} [ignore] Set to true to suppress warnings if the message doesn't exist.
* This also can be prevented by setting `ignoreI18nWarnings`.
* @return {string}
*/
function msg(key) {
var ignore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var translation = getModule('messages')[key];
if (!translation && !ignore && !ignoreI18nWarnings) {
log("Missing translation for \"".concat(key, "\" in MoreMenu.messages.en.js"), 'warn');
}
return getModule('messages')[key] || key;
}
/**
* Check whether the message exists.
* @param {string} key
* @return {boolean}
*/
function msgExists(key) {
return undefined !== getModule('messages')[key];
}
/**
* Normalize the given ID into the expected format.
* @param {string} id
* @return {string}
*/
function normalizeId(id) {
return id.toLowerCase().replace(/\s+/g, '-');
}
/**
* Generate a unique ID for a menu item.
* @param {string} parentKey The message key for the parent menu ('user' or 'page').
* @param {string} [itemKey] The message key for the link itself.
* @param {string} [submenuKey] The message key for the submenu that the item is within.
* @return {string} For example, 'c-user-user-logs-block-log' for User > User logs > Block log.
*/
function getItemId(parentKey, itemKey) {
var submenuKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
return "mm-".concat(normalizeId(parentKey)) + (submenuKey ? "-".concat(normalizeId(submenuKey)) : '') + (typeof itemKey === 'string' ? "-".concat(normalizeId(itemKey)) : '');
}
/**
* Load translations if viewing in non-English. MoreMenu first looks for translations on Meta,
* at MediaWiki:Gadget-MoreMenu.messages.en.js (replacing 'en' with the requested language).
* To override locally, define it before MoreMenu.js in your wiki's gadget definition.
* See [[meta:MoreMenu#Localization]] for more.
* @return {jQuery.Promise}
*/
function loadTranslations() {
var dfd = $.Deferred();
var lang = mw.config.get('wgUserLanguage');
if (lang === 'en') {
return dfd.resolve();
}
/** Check Metawiki. */
mw.loader.getScript('https://meta.wikimedia.org/w/index.php?action=raw&ctype=text/javascript' + "&title=MediaWiki:Gadget-MoreMenu.messages.".concat(lang, ".js")).then(function () {
return dfd.resolve();
});
return dfd;
}
/**
* Get promises needed for initializing the script, such as user rights and block status.
* @return {jQuery.Promise[]}
*/
function getPromises() {
var promises = new Array(4);
/** Note that the blocks API doesn't work for IPv4 ranges. */
if (config.targetUser.name && !config.targetUser.ipv4Range) {
promises[0] = api.get({
action: 'query',
list: 'users|blocks',
ususers: config.targetUser.name,
bkusers: config.targetUser.name,
usprop: 'blockinfo|groups|rights|emailable',
bkprop: 'id'
});
}
config.currentUser.rights = JSON.parse(mw.storage.session.getObject('mmUserRights'));
if (!config.currentUser.rights) {
promises[1] = mw.user.getRights();
}
config.currentUser.groupsData = JSON.parse(mw.storage.session.getObject('mmMetaUserGroups'));
if (!config.currentUser.groupsData) {
promises[2] = api.get({
action: 'query',
meta: 'siteinfo',
siprop: 'usergroups'
});
}
promises[3] = loadTranslations();
return promises;
}
/**
* Do the given groups and/or rights indicate the user is allowed to change other user's groups?
* @param {Array} groups
* @param {Array} rights
* @return {boolean}
*/
function canAddRemoveGroups(groups, rights) {
if (rights && rights.indexOf('userrights') >= 0) {
/** User explicitly has rights to change user groups. */
return true;
}
var valid = groups.some(function (group) {
return config.currentUser.groupsData[group] && config.currentUser.groupsData[group].canAddRemoveGroups;
});
if (!valid) {
/** Clear cache and fall back to false. */
mw.storage.remove('metaUserGroups');
}
return valid;
}
/**
* Check if any of the given values are present in the permitted values.
* @param {number | string | Array} permitted
* @param {number | string | Array} given
* @return {boolean}
*/
function hasConditional(permitted, given) {
/** Convert to arrays if non-array. */
permitted = $.makeArray(permitted);
given = $.makeArray(given);
if (!permitted.length) {
/** No requirements, so validations pass. */
return true;
}
if (!given.length) {
/** Nothing given to compare to the permitted values, so validations fail. */
return false;
}
/** Loop through to see if a given value is present in the permitted values. */
return given.some(function (item) {
return permitted.indexOf(item) >= 0;
});
}
/**
* Generate HTML for a menu item.
* @param {string} parentKey Message key for the parent menu ('user' or 'page').
* @param {string} itemKey Message key for menu item.
* @param {string} itemData Configuration for this menu item.
* @param {string} [submenuKey] The message key for the submenu that the item is within.
* @return {string} The raw HTML.
*/
function getItemHtml(parentKey, itemKey, itemData) {
var submenuKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
/* eslint-disable max-len */
var namespaceExclusion = itemData.namespaceExclude ? !hasConditional(itemData.namespaceExclude, config.page.nsId) : true;
var databaseExclusion = itemData.databaseExclude ? !hasConditional(itemData.databaseExclude, config.page.dbName) : true;
/**
* Keys are the name of the check, values are the expressions.
* This system is used only to make for easier debugging.
* @type {Object}
*/
var conditions = {
/** Project */
noticeProject: hasConditional(itemData.noticeProjectRestrict, config.project.noticeProject),
database: hasConditional(itemData.databaseRestrict, config.project.dbName) && databaseExclusion,
/** Page */
namespaceRestrict: hasConditional(itemData.namespaceRestrict, config.page.nsId) && namespaceExclusion,
pageExists: itemData.pageExists && config.page.id > 0 || !itemData.pageExists,
pageDeleted: itemData.pageDeleted ? !config.page.id : true,
pageProtected: itemData.pageProtected ? config.page["protected"] : true,
pageMovable: itemData.pageMovable ? config.page.movable : true,
/** Current user */
currentUserGroups: hasConditional(itemData.currentUserGroups, config.currentUser.groups),
currentUserRights: hasConditional(itemData.currentUserRights, config.currentUser.rights),
currentUserChangeGroups: itemData.currentUserChangeGroups ? canAddRemoveGroups(config.currentUser.groups, config.currentUser.rights) : true,
/** Other */
visibility: undefined !== itemData.visible ? !!itemData.visible : true
};
if (config.targetUser.name) {
/** Target user */
$.extend(conditions, {
targetUserGroups: hasConditional(itemData.targetUserGroups, config.targetUser.groups),
targetUserRights: hasConditional(itemData.targetUserRights, config.targetUser.rights),
targetUserBlocked: itemData.targetUserBlocked !== undefined ? config.targetUser.blocked === itemData.targetUserBlocked : true,
targetUserChangeGroups: itemData.targetUserChangeGroups ? canAddRemoveGroups(config.targetUser.groups, config.targetUser.rights) : true,
targetUserIp: itemData.targetUserIp ? mw.util.isIPAddress(config.targetUser.name) || config.targetUser.ipRange && itemData.targetUserIpRange : true,
targetUserIpRange: config.targetUser.ipRange ? itemData.targetUserIpRange : true
});
}
var passed = true;
for (var condition in conditions) {
passed &= conditions[condition];
if (!passed) {
log("".concat(parentKey, "/").concat(itemKey, " failed on ").concat(condition));
/** Validations failed, no markup to return */
return '';
}
}
/** Markup for the menu item. */
var titleAttr = msgExists("".concat(itemKey, "-desc")) || itemData.description ? " title=\"".concat(itemData.description ? itemData.description : msg("".concat(itemKey, "-desc")), "\"") : '';
var styleAttr = itemData.style ? " style=\"".concat(itemData.style, "\"") : '';
return "\n\t\t\t<li id=\"".concat(getItemId(parentKey, itemKey, submenuKey), "\" class=\"mm-item mw-list-item\">\n\t\t\t\t<a href=\"").concat(itemData.url, "\"").concat(titleAttr).concat(styleAttr, ">\n\t\t\t\t\t<span>").concat(msg(itemData.title || itemKey), "</span>\n\t\t\t\t</a>\n\t\t\t</li>");
}
/**
* Apply CSS based on the skin. This is done here because it is fast enough,
* not that much CSS, and saves users from having to import one more thing.
* @return {CSSStyleSheet|null}
*/
function addCSS() {
switch (config.currentUser.skin) {
case 'vector':
return mw.util.addCSS("\n\t\t\t\t.mm-tab .vector-menu-content {\n\t\t\t\t\theight: initial;\n\t\t\t\t\toverflow: initial !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu .mw-list-item {\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: #ffffff;\n\t\t\t\t\tborder: 1px solid #a2a9b1;\n\t\t\t\t\tmin-width: 120px !important;\n\t\t\t\t\t".concat(rightKey, ": inherit !important;\n\t\t\t\t\ttop: -1px !important;\n\t\t\t\t}\n\t\t\t\t#p-views {\n\t\t\t\t\tpadding-left: inherit !important;\n\t\t\t\t\tpadding-right: inherit !important;\n\t\t\t\t}\n\t\t\t\t#p-views .vector-menu-content::after {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.rtl #p-views .vector-menu-content::before {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.mm-submenu .mm-item {\n\t\t\t\t\tfont-size: inherit !important;\n\t\t\t\t}\n\t\t\t"));
case 'vector-2022':
return mw.util.addCSS("\n\t\t\t\t#p-page-dropdown .vector-dropdown-content,\n\t\t\t\t#p-user-dropdown .vector-dropdown-content {\n\t\t\t\t\theight: initial;\n\t\t\t\t\toverflow-x: initial !important;\n\t\t\t\t\toverflow-y: initial !important;\n\t\t\t\t\ttop: 35px !important;\n\t\t\t\t}\n\t\t\t\t#p-page-dropdown .vector-dropdown-content::after,\n\t\t\t\t#p-user-dropdown .vector-dropdown-content::after {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu .mw-list-item {\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: #ffffff;\n\t\t\t\t\tbox-shadow: 0 2px 6px -1px rgba(0,0,0,0.2);\n\t\t\t\t\tmin-width: 120px !important;\n\t\t\t\t\tpadding: 1px 10px;\n\t\t\t\t\ttop: -1px !important;\n\t\t\t\t}\n\t\t\t\t#p-views {\n\t\t\t\t\tpadding-left: inherit !important;\n\t\t\t\t\tpadding-right: inherit !important;\n\t\t\t\t}\n\t\t\t");
case 'timeless':
return mw.util.addCSS("\n\t\t\t\t.mm-submenu-wrapper {\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: #f8f9fa;\n\t\t\t\t\tborder: 1px solid rgb(200, 204, 209);\n\t\t\t\t\tbox-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);\n\t\t\t\t\tpadding: 1.2em 1.5em !important;\n\t\t\t\t\ttop: -1.2em;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\tz-index: 95;\n\t\t\t\t}\n\t\t\t\t.mm-submenu::after {\n\t\t\t\t\tborder-bottom: 8px solid transparent;\n\t\t\t\t\tborder-top: 8px solid transparent;\n\t\t\t\t\tborder-".concat(leftKey, ": 8px solid rgb(200, 204, 209);\n\t\t\t\t\tcontent: '';\n\t\t\t\t\theight: 0;\n\t\t\t\t\tpadding-").concat(rightKey, ": 4px;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 20px;\n\t\t\t\t\twidth: 0;\n\t\t\t\t\t").concat(rightKey, ": -13px;\n\t\t\t\t}\n\t\t\t\t@media screen and (max-width: 1339px) and (min-width: 1100px) {\n\t\t\t\t\t.mm-submenu::after {\n\t\t\t\t\t\tborder-").concat(leftKey, ": none;\n\t\t\t\t\t\tborder-").concat(rightKey, ": 8px solid rgb(200, 204, 209);\n\t\t\t\t\t\tpadding-").concat(leftKey, ": 4px;\n\t\t\t\t\t\tpadding-").concat(rightKey, ": inherit;\n\t\t\t\t\t\t").concat(rightKey, ": inherit;\n\t\t\t\t\t\t").concat(leftKey, ": -35px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@media screen and (max-width: 850px) {\n\t\t\t\t\t.mm-submenu {\n\t\t\t\t\t\ttop: -2.2em;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"));
case 'monobook':
return mw.util.addCSS("\n\t\t\t\t.mm-tab {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\t.mm-menu {\n\t\t\t\t\tbackground: #fff;\n\t\t\t\t\tborder-bottom: 1px solid #aaa;\n\t\t\t\t\t".concat(leftKey, ": -1px;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tz-index: 99;\n\t\t\t\t}\n\t\t\t\t.mm-menu ~ a {\n\t\t\t\t\tz-index: 99 !important;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: #fff;\n\t\t\t\t\tborder-bottom: 1px solid #aaa;\n\t\t\t\t\tborder-top: 1px solid #aaa;\n\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tmin-width: 75px;\n\t\t\t\t\ttop: -1px;\n\t\t\t\t\tz-index: 95;\n\t\t\t\t}\n\t\t\t\t.mm-item, .mm-submenu-wrapper {\n\t\t\t\t\tbackground: #fff !important;\n\t\t\t\t\tborder-top: 0 !important;\n\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\tmargin: 0 !important;\n\t\t\t\t\tpadding: 0 !important;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t\t.mm-item a, .mm-submenu-wrapper a {\n\t\t\t\t\tbackground: transparent !important;\n\t\t\t\t\ttext-transform: none !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu a:hover {\n\t\t\t\t\ttext-decoration: underline !important;\n\t\t\t\t}\n\t\t\t"));
case 'modern':
return mw.util.addCSS("\n\t\t\t\t.mm-menu, .mm-submenu {\n\t\t\t\t\tbackground: #f0f0f0 !important;\n\t\t\t\t\tborder: solid 1px #666;\n\t\t\t\t}\n\t\t\t\t.mm-menu {\n\t\t\t\t\tborder-top: none;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tz-index: 99;\n\t\t\t\t}\n\t\t\t\t.mm-submenu-wrapper > a {\n\t\t\t\t\tcursor: default !important;\n\t\t\t\t}\n\t\t\t\t.mm-item, .mm-submenu-wrapper {\n\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\tfloat: none !important;\n\t\t\t\t\theight: inherit !important;\n\t\t\t\t\tmargin: 0 !important;\n\t\t\t\t\tpadding: 0 !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu a {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tpadding: 3px 10px !important;\n\t\t\t\t\ttext-transform: none !important;\n\t\t\t\t\ttext-decoration: none !important;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t\t.mm-menu a:hover {\n\t\t\t\t\ttext-decoration: underline !important;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\t".concat(leftKey, ": 100%;\n\t\t\t\t\tmin-width: 120px !important;\n\t\t\t\t\ttop: 0;\n\t\t\t\t}\n\t\t\t"));
default:
return null;
}
}
/**
* Get CSS for the submenu.
* @param {jQuery} $element
* @return {Object} To be passed to $.css()
*/
function getSubmenuCss($element) {
switch (config.currentUser.skin) {
case 'vector':
case 'vector-2022':
return _defineProperty({}, leftKey, $element.outerWidth());
case 'timeless':
return _defineProperty({}, $(window).width() <= 1339 && $(window).width() >= 1100 ? leftKey : rightKey, $element.outerWidth() + 11);
case 'monobook':
return _defineProperty({}, leftKey, $element.outerWidth() - 2);
default:
return {};
}
}
/**
* Add hover listeners to the submenus. This may be re-called as many times as needed.
*/
function addListeners() {
$('.mm-submenu-wrapper').each(function hoverMenus() {
$(this).off('mouseenter').on('mouseenter', function hoverMenusMouseenter() {
$(this).find('.mm-submenu').css(getSubmenuCss($(this))).show();
}).off('mouseleave').on('mouseleave', function hoverMenusMouseleave() {
$(this).find('.mm-submenu').hide();
});
});
}
/**
* Sort alphabetically by translation.
* @param {Array} i18nKeys
* @return {Array}
*/
function sortByTranslation(i18nKeys) {
return i18nKeys.sort(function (a, b) {
var nameA = msg(a).toLowerCase();
var nameB = msg(b).toLowerCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
}
/**
* Sort given menu items alphabetically, leaving submenus at the top (unsorted),
* and respecting the 'insertAfter' option for each item, if present.
* @param {Object} items
* @return {string[]} Item IDs.
*/
function sortItems(items) {
var itemKeys = Object.keys(items);
/** The labels for the submenus are not sorted. */
var submenus = itemKeys.filter(function (itemKey) {
return !items[itemKey].url;
});
/** All other menu items (top-level) are sorted alphabetically. */
var sortedItemKeys = sortByTranslation(itemKeys.filter(function (itemKey) {
return !!items[itemKey].url;
}));
/** Loop through again, rearranging based on the 'insertAfter' option. */
var newItemKeys = sortedItemKeys;
sortedItemKeys.forEach(function (itemKey) {
var target = items[itemKey].insertAfter;
var newIndex;
if (target === false) {
/** False means put at the top. */
newIndex = 0;
} else if (target === true) {
/** True means put at the bottom. */
newIndex = itemKeys.length;
} else if (!target) {
/** Nothing to do. */
return;
} else {
newIndex = newItemKeys.indexOf(target);
/**
* Insert at end if target wasn't found.
* The +1 is because it goes after the target.
*/
newIndex = newIndex === -1 ? newItemKeys.length : newIndex + 1;
}
/** Remove the original placement, and insert after the target. */
newItemKeys.splice(newItemKeys.indexOf(itemKey), 1);
newItemKeys.splice(newIndex, 0, itemKey);
});
/** Combine and return, with the submenus coming first. */
return submenus.concat(newItemKeys);
}
/**
* Get the markup for the menu based on the given data.
* @param {string} parentKey Message key for the parent menu ('user' or 'page').
* @param {Object} items Menu items, as provided by MoreMenu.user.js and MoreMenu.page.js
* @param {string} [submenuKey] Used to ensure the generated IDs include the submenu name.
* @return {string} Raw HTML.
*/
function getMenuHtml(parentKey, items, submenuKey) {
var html = '';
var submenuClasses = config.currentUser.skin === 'vector' || config.currentUser.skin === 'vector-2022' ? 'vector-menu-content-list' : '';
sortItems(items).forEach(function (itemKey) {
var item = items[itemKey];
var itemHtml = '';
if (!item.url) {
/** This is a submenu. */
itemHtml += "\n\t\t\t\t\t<li style=\"position:relative;\" id=\"".concat(getItemId(parentKey, itemKey), "\" class=\"mm-submenu-wrapper mw-list-item\">\n\t\t\t\t\t<a style=\"font-weight: bold\"><span>").concat(msg(itemKey), "…</span></a>\n\t\t\t\t\t<ul class=\"menu mm-submenu ").concat(submenuClasses, "\" style=\"display: none; position: absolute;\">");
sortItems(item).forEach(function (submenuItemKey) {
itemHtml += getItemHtml(parentKey, submenuItemKey, item[submenuItemKey], itemKey);
});
itemHtml += '</ul></li>';
if ($(itemHtml).last().find('.mm-submenu li').length === 0) {
/** No items in the submenu, so don't show the submenu at all. */
itemHtml = '';
}
} else {
itemHtml += getItemHtml(parentKey, itemKey, item, submenuKey);
}
html += itemHtml;
});
return html;
}
/**
* Draw menu for the Vector skin.
* @param {string} parentKey Message key for the parent menu ('user' or 'page').
* @param {string} html As generated by getMenuHtml().
*/
function drawMenuVector(parentKey, html) {
var menu = mw.util.addPortlet("p-".concat(parentKey), msg(parentKey), '#p-cactions');
menu.classList.add("mm-".concat(parentKey));
menu.classList.add('mm-tab');
// Temporarily add and then remove an entry, so that mw.util.addPortletLink() does its thing.
mw.util.addPortletLink("p-".concat(parentKey), '#', 'temp');
// Now replace with our custom HTML, and add missing classes.
var menuContent = menu.querySelector('ul');
menuContent.innerHTML = html;
menuContent.classList.add('mm-menu');
}
/**
* Draw menu for the Timeless skin.
* @param {string} parentKey Message key for the parent menu ('user' or 'page').
* @param {string} html As generated by getMenuHtml().
*/
function drawMenuTimeless(parentKey, html) {
html = "<div role=\"navigation\" class=\"mw-portlet mm-".concat(parentKey, " mm-tab\" id=\"p-").concat(parentKey, "\" aria-labelledby=\"p-").concat(parentKey, "-label\">") + "<h3 id=\"p-".concat(parentKey, "-label\">").concat(msg(parentKey), "</h3>") + "<div class=\"mw-portlet-body\"><ul class=\"mm-menu\">".concat(html, "</ul></div></div>");
if ($('#p-cactions').length) {
$(html).insertBefore($('#p-cactions'));
} else {
$('#page-tools .sidebar-inner').prepend(html);
}
}
/**
* Draw menu for the Monobook skin.
* @param {string} parentKey Message key for the parent menu ('user' or 'page').
* @param {string} html As generated by getMenuHtml().
*/
function drawMenuMonobook(parentKey, html) {
html = "<li id=\"ca-".concat(parentKey, "\" class=\"mm-").concat(parentKey, " mm-tab\">") + "<a href=\"javascript:void(0)\">".concat(msg(parentKey), "</a>") + "<ul class=\"mm-menu\" style=\"display:none\">".concat(html, "</ul>") + '</li>';
var $tab = $(html).insertAfter($('#ca-nstab-special, #ca-edit, #ca-ve-edit, #ca-page, #ca-viewsource, #ca-talk').last());
var $menu = $tab.find('.mm-menu');
/** Add hover listeners. */
$tab.on('mouseenter', function () {
$menu.show();
$tab.find('> a').css({
'z-index': 99
});
}).on('mouseleave', function () {
$menu.hide();
$tab.find('> a').css({
'z-index': 'inherit'
});
});
}
/**
* Draw menu for the Modern skin.
* @param {string} parentKey Message key for the parent menu ('user' or 'page').
* @param {string} html As generated by getMenuHtml().
*/
function drawMenuModern(parentKey, html) {
html = "<li id=\"ca-".concat(parentKey, "\" class=\"mm-").concat(parentKey, " mm-tab\">") + "<a href=\"javascript:void(0)\">".concat(msg(parentKey), "</a>") + "<ul class=\"mm-menu\" style=\"display:none\">".concat(html, "</ul>") + '</li>';
var $tab = $(html).insertAfter($('#ca-nstab-special, #ca-edit, #ca-ve-edit, #ca-page, #ca-viewsource, #ca-talk').last());
var $menu = $tab.find('.mm-menu');
/** Position the menu. */
$menu.css({
left: isRtl ? $tab.position().left - $menu.width() + $tab.width() + 7 : $tab.position().left,
top: $tab.offset().top + $tab.outerHeight()
});
/** Add hover listeners. */
$tab.on('mouseenter', function () {
$menu.show();
}).on('mouseleave', function () {
$menu.hide();
});
}
/**
* Determine which menus to display and insert them into the DOM.
*/
function drawMenus() {
var menus = {};
/** Determine which menus to draw. */
if (config.page.nsId >= 0) {
$.extend(menus, getModule('page')(config));
}
if (config.targetUser.name) {
$.extend(menus, getModule('user')(config));
}
/** Preemptively add the appropriate CSS. */
addCSS();
Object.keys(menus).forEach(function (key) {
var html = getMenuHtml(key, menus[key]);
switch (config.currentUser.skin) {
case 'vector-2022':
case 'vector':
drawMenuVector(key, html);
break;
case 'monobook':
drawMenuMonobook(key, html);
break;
case 'modern':
drawMenuModern(key, html);
break;
case 'timeless':
drawMenuTimeless(key, html);
break;
default:
log("'".concat(config.currentUser.skin, "' is not a supported skin."), 'error');
}
});
addListeners();
}
/**
* Monobook and Modern have 'History' and 'Watch' links as tabs. To conserve space, they are moved to the Page menu.
* This method is called before and after the menus are drawn, to ensure positioning is calculated correctly.
* Listeners on these links are preserved, but we do change the element IDs to our pattern (e.g. `mm-page-history`).
* @param {boolean} [replace] True to replace the links in .mm-page with the native links, false just hides them.
*/
function handleHistoryAndWatchLinks() {
var replace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var monobookModern = ['monobook', 'modern'].indexOf(config.currentUser.skin) !== -1;
var $histLink = $('#ca-history');
var $watchLink = $('.mw-watchlink');
var $moveLink = $('#ca-move');
if (replace) {
if (monobookModern) {
$('#mm-page-watch').replaceWith($watchLink.addClass('mm-item').prop('id', 'mm-page-watch').show());
$('#mm-page-history').replaceWith($histLink.addClass('mm-item').prop('id', 'mm-page-history').show());
}
$('#mm-page-move-page').replaceWith($moveLink.addClass('mm-item').prop('id', 'mm-page-move-page').show());
return;
}
/** No need to ask for translations when these already live on the page. */
MoreMenu.messages.watch = $watchLink.text() || 'watch';
MoreMenu.messages.history = $histLink.text() || 'history';
/** Hide the links so that the positioning is calculated correctly in drawMenus() */
if (monobookModern) {
$watchLink.hide();
$histLink.hide();
}
$moveLink.hide();
}
/**
* Add a MutationObserver to look for items added/removed from the given menus.
* If they are empty, the container is hidden, otherwise it's unhidden.
* MutationObserver implementation courtesy of LunarTwilight. See https://github.com/wikimedia-gadgets/MoreMenu/pull/1
* @param {string | Array} ids Selector for the menu to observe (a parent of the <ul> element).
*/
function addMutationObserver(ids) {
if (typeof ids === 'string') {
ids = [ids];
}
ids.forEach(function (id) {
var $parent = $(id);
if (!$parent.length) {
return;
}
var $menu = $parent.find('ul');
var menuIsEmpty = function menuIsEmpty() {
return $menu.html().trim() === '';
};
if (menuIsEmpty()) {
$parent.hide();
}
new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.addedNodes.length) {
$parent.show();
} else if (mutation.removedNodes.length) {
if (menuIsEmpty()) {
$parent.hide();
}
}
});
}).observe($menu.get(0), {
childList: true
});
});
}
/**
* For Vector/Timeless's native More menu, we keep track of how many times it gets populated over time,
* to intelligently determine whether we should leave it upfront to make the script feel more responsive.
*/
function observeCactionsMenu() {
/** Check local storage to see if user continually has items added to the native menu. */
var reAddCount = parseInt(mw.storage.get('mmNativeMenuUsage'), 10) || 0;
/** Ignore for non-Vector/Timeless, if user disabled this feature, or if reAddCount is high. */
if (['vector', 'vector-2022', 'timeless'].indexOf(config.currentUser.skin) === -1 || !!window.MoreMenu.disableAutoRemoval || reAddCount >= 5) {
return;
}
addMutationObserver('#p-cactions');
/** Wait 5 seconds before checking the reAddCount, to give other scripts time to populate the menu */
setTimeout(function () {
if ($('#p-cactions').find('li').length) {
// Set expiry to 24 hours.
mw.storage.set('mmNativeMenuUsage', reAddCount + 1, 60 * 60 * 24);
}
}, 5000);
}
/**
* Remove redundant links from the native More menu, and from the "Page tools" and "Userpage tools" in Timeless.
* This uses mw.storage to keep track of whether the native menu usually gets items added to it
* after MoreMenu has loaded. If this is the case, it will not remove the menu at all. This is to avoid
* the irritating "jumping" effect you get due to race conditions.
*/
function removeNativeLinks() {
var linksToRemove = ['#ca-protect', '#ca-unprotect', '#ca-delete', '#ca-undelete'];
if (config.currentUser.skin === 'timeless') {
linksToRemove.push.apply(linksToRemove, linksToRemove.concat(['#t-contributions', '#t-log', '#t-blockip', '#t-emailuser', '#t-userrights', '#t-info', '#t-pagelog']));
}
$(linksToRemove.join(',')).remove();
handleHistoryAndWatchLinks();
observeCactionsMenu();
/** Remove empty userpage tools menu in Timeless */
if (config.currentUser.skin === 'timeless') {
addMutationObserver('#p-userpagetools');
}
}
/**
* Removes the link to the block log if the user has never been blocked.
*/
function removeBlockLogLink() {
api.get({
action: 'query',
list: 'logevents',
letype: 'block',
letitle: "User:".concat(config.targetUser.name),
lelimit: 1
}).done(function (data) {
if (!data.query.logevents.length) {
$('#mm-user-blocks-view-block-log').remove();
}
});
}
/**
* Remove unneeded links and empty submenus.
*/
function removeUnneededLinks() {
handleHistoryAndWatchLinks(true);
/** Following logic only applies to the User menu. */
if (!config.targetUser.name) {
return;
}
removeBlockLogLink();
/** Observe all submenus, removing them if they're empty. */
addMutationObserver(['#mm-page-analysis', '#mm-page-search', '#mm-page-tools', '#mm-user-blocks', '#mm-user-analysis']);
if (config.targetUser.ipRange) {
$('#mm-user-user-logs').remove();
$('#mm-user-deleted-contributions').remove();
$('#mm-user-suppressed-contributions').remove();
}
}
/**
* Script entry point. The 'moremenu.ready' event is fired after the menus are drawn and populated.
*/
function init() {
$.when.apply(this, getPromises()).done(function (targetUserData, userRightsData, metaData) {
/** Target user data. */
if (targetUserData) {
$.extend(config.targetUser, targetUserData[0].query.users[0]);
if (targetUserData[0].query.blocks.length) {
config.targetUser.blocked = true;
config.targetUser.blockid = targetUserData[0].query.blocks[0].id;
}
}
/** Cache user rights of current user, if given. */
if (userRightsData) {
log('caching user rights');
mw.storage.session.setObject('mmUserRights', JSON.stringify(userRightsData));
config.currentUser.rights = userRightsData.slice();
}
/** Cache global user groups of current user, if given. */
if (metaData) {
log('caching global user groups');
config.currentUser.groupsData = {};
metaData[0].query.usergroups.forEach(function (el) {
config.currentUser.groupsData[el.name] = {
rights: el.rights,
canAddRemoveGroups: !!el.add || !!el.remove
};
});
mw.storage.session.setObject('mmMetaUserGroups', JSON.stringify(config.currentUser.groupsData));
}
removeNativeLinks();
drawMenus();
removeUnneededLinks();
mw.hook('moremenu.ready').fire(config);
});
}
/**
* Get the ID of the menu item preceding the given item.
* @param {string} menu The parent menu the item lives (or will live) under.
* @param {string} [submenu] The given item lives (or will live) under this submenu.
* @param {boolean | string} [insertAfter] The preceding item should be this one.
* @return {jQuery}
*/
function getBeforeItem(menu, submenu, insertAfter) {
var beforeItemKey = getItemId(menu, insertAfter || '', submenu);
return $("#".concat($.escapeSelector(beforeItemKey)));
}
/**
* PUBLIC METHODS
*/
/**
* Add an item (or submenu + its items) to a menu, given the full config hash for the item.
* @param {string} menu The parent menu to append to, either 'user' or 'page'.
* @param {Object} items A single item/submenu with structure matching config at MoreMenu.user or MoreMenu.page.
* @param {boolean | string} [insertAfter] Insert the item/submenu after the item with this ID.
* @param {string} [submenu] Insert into this submenu.
*/
MoreMenu.addItemCore = function (menu, items, insertAfter, submenu) {
if (!$(".mm-".concat(menu)).length) {
/** Menu not shown. */
return;
}
var menuId = submenu ? "#mm-".concat(menu, "-").concat(submenu) : ".mm-".concat(menu); // FYI the element has skin-defined IDs, so we use a CSS class instead.
var $menu = $(menuId);
if (!$menu.length) {
log("'".concat(menu).concat(submenu ? " ".concat(submenu) : '', "' menu with selector ").concat(menuId, " not found."), 'warn');
return;
}
/**
* Suppress "translation not found" warnings, since the user-provided `items`
* may intentionally not have definitions in MoreMenu.messages.
*/
ignoreI18nWarnings = true;
/** Ensure only one item (top-level menu item or submenu + items) is given. */
if (Object.keys(items).length !== 1) {
log('MoreMenu.addItemCore() was given multiple items. Ignoring all but the first.', 'warn');
items = items[Object.keys(items)[0]];
}
/** `items` could be a submenu. getMenuHtml() will work on single items, or a submenu and its items. */
var $html = $(getMenuHtml(menu, items, submenu));
/** Check if insertAfter ID is valid. */
var $beforeItem = getBeforeItem(menu, submenu, insertAfter);
var isSubmenuItem = $beforeItem.parents('.mm-submenu').length;
if ($beforeItem.length && (!submenu || submenu && isSubmenuItem)) {
/** insertAfter ID is valid. */
$beforeItem.after($html);
} else {
var newI18nKey = normalizeId(Object.keys(items)[0]);
var newId = getItemId(menu, newI18nKey, submenu);
/** Grab the visible top-level items (excluding submenus). */
var $topItems = submenu ? $(menuId).find('.mm-submenu > .mm-item') : $(menuId).find('.mm-menu > .mm-item');
if (insertAfter === true) {
$topItems.last().after($html);
return;
}
if (insertAfter === false) {
$topItems.first().before($html);
return;
}
if (!$beforeItem.length && insertAfter) {
/** insertAfter ID was either invalid or not found. */
log('getMenuHtml() was given an invalid `insertAfter`.', 'warn');
}
/** Create a list of the IDs and append the new ID. */
var ids = $topItems.toArray().map(function (el) {
return el.id;
}).concat([newId]);
/** Extract the i18n keys and sort alphabetically by translation. */
var i18nKeys = sortByTranslation(
// eslint-disable-next-line security/detect-non-literal-regexp
ids.map(function (id) {
return id.replace(new RegExp("^mm-".concat(menu, "-").concat(submenu ? "".concat(submenu, "-") : '')), '');
}));
/** Get the index of the preceding item. */
var beforeItemIndex = i18nKeys.indexOf(newI18nKey) - 1;
if (beforeItemIndex < 0) {
/** Alphabetically the new item goes first, so insert it before the existing first item. */
$("#".concat($.escapeSelector(ids[0]))).before($html);
} else {
/** Insert HTML after the would-be previous item in the menu. */
$("#".concat($.escapeSelector(getItemId(menu, i18nKeys[Math.max(0, i18nKeys.indexOf(newI18nKey) - 1)], submenu)))).after($html);
}
}
addListeners();
/** Reset flag to surface warnings about missing translations. */
ignoreI18nWarnings = false;
};
/**
* Add a single item to a menu.
* @param {string} menu Either 'page' or 'user'.
* @param {string} name Title for the link. Can either be a normal string or an i18n key.
* @param {Object} data Item data.
* @param {boolean | string} [insertAfter] Insert the link after the link with this ID.
*/
MoreMenu.addItem = function (menu, name, data, insertAfter) {
MoreMenu.addItemCore(menu, _defineProperty({}, name, data), insertAfter);
};
/**
* Add a single item to a submenu.
* @param {string} menu Either 'page' or 'user'.
* @param {string} submenu ID for the submenu (such as 'user-logs' or 'analysis').
* @param {string} name Title for the link. Can either be a normal string or an i18n key.
* @param {Object} data Item data.
* @param {boolean | string} [insertAfter] Insert the link after the link with this ID.
*/
MoreMenu.addSubmenuItem = function (menu, submenu, name, data, insertAfter) {
MoreMenu.addItemCore(menu, _defineProperty({}, name, data), insertAfter, submenu);
};
/**
* Add a new submenu.
* @param {string} menu Either 'page' or 'user'.
* @param {string} name Name for the submenu. Can either be a normal string or an i18n key.
* @param {Object} items Keys are the names for each link, and values are the item data.
* @param {boolean | string} [insertAfter] Insert the submenu after the link with this ID.
*/
MoreMenu.addSubmenu = function (menu, name, items, insertAfter) {
MoreMenu.addItemCore(menu, _defineProperty({}, name, items), insertAfter);
};
/**
* Add a link to the given menu.
* @param {string} menu Either 'page' or 'user'.
* @param {string} name Title for the link. Can either be a normal string or an i18n key.
* @param {string} url URL to point to.
* @param {boolean | string} [insertAfter] Insert the link after the link with this ID.
*/
MoreMenu.addLink = function (menu, name, url, insertAfter) {
MoreMenu.addItemCore(menu, _defineProperty({}, name, {
url: url
}), insertAfter);
};
/**
* Add a link to the given submenu.
* @param {string} menu Either 'page' or 'user'.
* @param {string} submenu ID for the submenu (such as 'user-logs' or 'analysis').
* @param {string} name Title for the link. Can either be a normal string or an i18n key.
* @param {string} url URL to point to.
* @param {boolean | string} [insertAfter] Insert the link after the link with this ID.
*/
MoreMenu.addSubmenuLink = function (menu, submenu, name, url, insertAfter) {
MoreMenu.addItemCore(menu, _defineProperty({}, name, {
url: url
}), insertAfter, submenu);
};
/** Entry point. */
init();
});