User:BrandonXLF/PortletLinks.js
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
![]() | This user script seems to have a documentation page at User:BrandonXLF/PortletLinks. |
/*** Portlet Link Manager ***/
// Easily add and manage custom portlet linls
// Documentation at [[en:w:User:BrandonXLF/PortletLinks]]
// By [[en:w:User:BrandonXLF]]
$(function() {
var vars = ['area', 'url', 'text', 'title', 'id', 'nnode', 'key'],
areas = [
'p-cactions',
'p-personal',
'p-personal-sticky-header',
'p-views',
'p-tb',
'left-navigation',
'p-navigation',
'p-interaction',
'footer',
'footer-places'
],
i = 0,
links = JSON.parse(mw.user.options.get('userjs-portletmanager') || '[]');
function randHex() {
return Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
}
function randColor() {
return '#' + randHex() + randHex() + randHex();
}
function startedit(e) {
e.stopPropagation();
$('.plm .focused').removeClass('focused');
var el = $(this);
$('#largeeditor').val(el.val()).off('input keypress paste click').attr('placeholder', '');
$('#largeeditor').on('input keypress paste', function() {
el.addClass('focused');
el.val(this.value);
});
$('#largeeditor').on('click', function(e) {
e.stopPropagation();
el.addClass('focused');
});
}
function syncedit() {
if ($(this).is(':focus')) {
$('#largeeditor').val(this.value);
}
}
function row(link) {
var i = 0,
j = 0,
tr = $('<tr>').attr('data-row', '')
.append($('<td style="border:1px solid #888;white-space:nowrap;width:1px;text-align:center;">')
.append($('<img src="http://up.wiki.x.io/wikipedia/commons/b/bc/Not_allowed.svg" style="height:1em;cursor:pointer;">')
.click(function() {
$(this).closest('tr').remove();
})
)
.append(
'<img title="Drag" class="drag" src="' +
'http://up.wiki.x.io/wikipedia/commons/3/30/OOjs_UI_icon_draggable.svg' +
'" style="height:1.15em;cursor:move;">'
)
);
for (i = 0; i < vars.length; i++) {
var td = $('<td>').appendTo(tr),
input = vars[i] === 'area'
? $('<select>')
: $('<input>')
.val(link ? link[vars[i]] : '')
.css('width', '100%')
.click(startedit);
input
.on('input keypress paste', syncedit)
.attr('data-name', vars[i])
.appendTo(td);
if (vars[i] === 'area') {
for (j = 0; j < areas.length; j++)
td.children().append(
$('<option>' + areas[j] + '</option>')
.attr('selected', areas[j] == link.area ? '' : null)
);
}
if (vars[i] == 'key')
td.children().css('width', '3em');
}
$('#editor tr:last').before(tr);
}
function addLinks() {
var link;
$('.plm-portletitem').remove();
for (i = 0; i < links.length; i++) {
link = links[i];
try {
var linkEl = mw.util.addPortletLink(
link.area,
/^(https|http|):?\/\/.*/.exec(link.url)
? link.url.replace(/\$PAGENAME\$/g, encodeURIComponent(mw.config.get('wgPageName')))
: mw.util.getUrl(link.url.replace(/\$PAGENAME\$/g, encodeURIComponent(mw.config.get('wgPageName')))),
link.text,
link.id || 'plm-portletitem-' + (i + 1),
link.title,
link.key,
link.nnode
);
linkEl.className += ' plm-portletitem';
} catch (e) {
console.error('PortletLinks.js: Unable to add portlet link to #' + link.area + ' for ' + link.url);
}
}
link = mw.util.addPortletLink('p-navigation', mw.util.getUrl('Special:BlankPage/PortletManager'), '(edit portlet links)');
if (link) link.className += ' plm-portletitem';
}
function save() {
var el = this;
links = [];
$('#editor').find('[data-row]').each(function() {
var item = {};
$(this).find('[data-name]').each(function() {
item[this.getAttribute('data-name')] = this.value;
});
links.push(item);
});
el.src = 'http://up.wiki.x.io/wikipedia/commons/7/7a/Ajax_loader_metal_512.gif';
el.title = 'Saving...';
el.style.cursor = 'initial';
mw.user.options.set('userjs-portletmanager', JSON.stringify(links));
new mw.Api()
.saveOption('userjs-portletmanager', JSON.stringify(links))
.done(function(r) {
addLinks();
el.src = 'http://up.wiki.x.io/wikipedia/commons/9/97/PICOL_icon_Floppy_disk.svg';
el.title = 'Save';
el.style.cursor = 'Pointer';
mw.notify(
r.options == 'success'
? 'Saved portlet links successfully!'
: 'An error occurred while saving.',
{
tag: 'portletlinks',
type: r.options == 'success' ? 'notice' : 'error'
}
);
})
.fail(function() {
el.src = 'http://up.wiki.x.io/wikipedia/commons/9/97/PICOL_icon_Floppy_disk.svg';
el.title = 'Save';
el.style.cursor = 'Pointer';
mw.notify(
'An error occurred while saving.',
{
tag: 'portletlinks',
type: 'error'
}
);
});
}
addLinks();
if (window.location.search.includes('showportlets=true')) {
var el = $('<div>').prependTo(mw.util.$content);
for (i = 0; i < areas.length; i ++) {
var color = randColor();
$('#' + areas[i]).css({outline: '2px solid ' + color, outlineOffset: Math.round(Math.random() * 2) - 4 + 'px'});
el.append($('<div>')
.css({
border: '1px solid #000',
display: 'inline-block',
width: '1em',
height: '1em',
background: color,
marginRight: '5px',
verticalAlign: 'middle',
marginBottom: '5px'
}))
.append($('<div>')
.text(areas[i])
.css({
marginRight: '5px',
verticalAlign: 'middle',
marginBottom: '5px',
display: 'inline-block'
})
);
mw.util.addPortletLink(areas[i], '#', areas[i].toUpperCase());
}
}
if (mw.config.get('wgPageName') === 'Special:BlankPage/PortletManager') {
document.title = 'Manage custom portlet links - ' + mw.config.get('wgSiteName');
mw.util.addCSS(
'.plm input:focus, .plm select:focus, .plm textarea:focus, .plm .focused { outline:0; border-color: #36c; box-shadow: inset 0 0 0 1px #36c; }' +
'.plm button, .plm input, .plm select { border: 1px solid #888; padding: 4px; box-sizing: border-box; }' +
'.plm select { padding: 3px 4px; max-width: 10em; }' +
'#editor th { border: 1px solid #888; padding: 2px; }'
);
$(document).click(function() {
$('.plm .focused').removeClass('focused');
$('#largeeditor').off('input keypress paste click').val('').attr('placeholder', 'Select a cell to edit it.');
});
mw.loader.getScript('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js').then(function() {
mw.util.$content.find('.mw-body-content').empty()
.addClass('plm')
.append('<h1>Manage custom portlet links</h1>')
.append($('<table id="editor" cellspacing="0" cellpadding="0" style="margin-top:1em;border:1px solid #888;"><tr class="nodrag"><td rowspan="2" style="border:1px solid #888;text-align:center;padding:4px;"><img title="Save" style="cursor:pointer;height:1.5em;" id="savecell" src="http://up.wiki.x.io/wikipedia/commons/9/97/PICOL_icon_Floppy_disk.svg"></td><td colspan="7"><input style="width:100%;border-bottom-width:1px;" id="largeeditor" placeholder="Select a cell to edit it."></td><tr class="nodrag"><th style="width:1%;">Area</th><th>URL</th><th>Text</th><th>Tooltip</th><th>ID</th><th>Next node</th><th style="width:1px;">Key</th></tr></table>').sortable({items: 'tr:not(.nodrag)', handle: '.drag'}).wrap('<div style="margin-top:0.5em;border: 1px solid #a2a9b1;border-radius:2px;padding:10px 5px;">'))
.append('<div style="margin-top:1em;border:2px solid #888;padding:5px;"><p>Remember to save your changes! <a target="_blank" href="' + mw.config.get('wgArticlePath').replace('$1', 'Special:MyPage/common.js') + '">Your common.js</a>. <a target="_blank" href="' + mw.config.get('wgArticlePath').replace('$1', 'Special:MyPage/common.css') + '">Your common.css</a>. <a target="_blank" href="' + mw.config.get('wgScript') + '?showportlets=true">Show portlets</a>.</p><table><tr><th style="text-align:left;">Area</th><td>The portlet link region to add the link.</td></tr><tr><th style="text-align:left;">URL</th><td>The target URL of the link. Use <code>$PAGENAME$</code> for the current full page name. Use <code>//</code> to link to a full URL.</tr><tr><th style="text-align:left;">Text</th><td>The text to show as the link. There is no default.</td></tr><tr><th style="text-align:left;">ID</th><td>The ID of the link HTML element.</td></tr><tr><th style="text-align:left;">Tooltip</th><td>Tooltip (title) to show for the link.</td></tr><tr><th style="text-align:left;">Next node </th><td>CSS selector for the node that comes after the link. Use <code><i>selector</i> + *</code> to have the selector be the previous node.</td></tr><tr><th style="text-align:left;">Key</th><td>The access key for the link. See <a href="http://en.wiki.x.io/wiki/Access_key">the article on access keys</a> for more information.</td></tr></table></div>');
$('#savecell').click(save);
$('#editor').append($('<tr class="nodrag"><td style="border:1px solid #a2a9b1;text-align:center;" colspan="8"></td></tr>').find('td').append($('<span style="display:inline-block;font-size:1.2em;border-radius:100%;background:#888;color:white;width:1em;line-height:1em;height:1em;margin:4px;cursor:pointer;" title="Add">+</span>').click(row)).parent());
for (i = 0; i < links.length; i++) row(links[i]);
});
}
});