LinkPreview

LinkPreview shows article preview on link hover. Inspired by mw:extension:Popups.

Installation

Importing multiple scripts? This quick guide shows how to combine the imports.

For site-wide use, an administrator can add the line below to the wiki's MediaWiki:ImportJS page.

dev:LinkPreview/code.js

For personal use, add the code snippet below to your global.js page (for use on all wikis) or your common.js page on your wiki (for use on a single wiki). Note that personal JS must be enabled for your account.

importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:LinkPreview/code.js',
    ]
});

Settings

Available through window.pPreview.

Create configuration object (do it at first): window.pPreview = $.extend(true, window.pPreview, {RegExp: (window.pPreview || {}).RegExp || {} });

csize : 100 - cache size. Example: window.pPreview.csize = 100;
debug : false - debug mode, verbose output. Also available as &debug=1. Example: window.pPreview.debug = true;
apid : false - use api to retrieve data. Faster (only one request performed), but obeys image restrictions (too small images will not be used to build preview). Example: window.pPreview.apid = true;
defimage : - default image source (before article image loaded). Example: window.pPreview.defimage = 'https://wikia.nocookie.net/someimage';
noimage : - image-not-found source. Example: same as defimage.
delay : 100 - hover reaction delay. Example: window.pPreview.delay = 100;
dock : '#mw-content-text, #article-comments' - article container. Example: window.pPreview.dock = '#mw-content-text';
fixContentHook : true - ensure #mw-content-text (article content) was processed.
scale : {r: '?', t: '/scale-to-width-down/350?'} - replace r to t in the img src (vignette-based scaling). Use scale=false if no scaling nedeed. Example: window.pPreview.scale = {r: '?', t: '/scale-to-width-down/350?'};
tlen : 1000 - max text length. Example: window.pPreview.tlen = 1000;
wholepage : false - parse whole page instead of section 0. Also available as &wholepage=1. Example: window.pPreview.wholepage = true;
RegExp.iimages : [] - array of RegExp or plain text. Ignored images, will not be used to build preview. Example: window.pPreview.RegExp.iimages = [/myimage\.png/, new RegExp('myim.*'), 'some text'];
RegExp.ipages : [] - array of RegExp or plain text. Ignored pages, preview will not show up. Example: same as iimages.
RegExp.ilinks : [] - array of RegExp or plain text. Ignored links, will have not preview on it. Example: same as iimages.
RegExp.iclasses : [] - array of strings. Ignored classes, links with these classes will have not preview on it. window.pPreview.RegExp.iclasses = ['myclass1', 'myclass2'];
RegExp.iparents : ['[id^=flytabs]'] - array of strings (jQuery/DOM objects are permitted, but not tested). Ignored parent elements, children links of these elements will have not preview on it. By default, tabviews are ignored. window.pPreview.RegExp.iparents = ['.myclass', '#myid', 'div[data-ignore-me=1]'];.
RegExp.onlyinclude : [] - array of strings (jQuery/DOM objects are permitted, but not tested). Selector to include. If selector found, then other content will be ignored. Example: window.pPreview.RegExp.onlyinclude = ['.myclass', '#myid', '[data-include-me=1]'];

Mega example

window.pPreview = $.extend(true, window.pPreview, {RegExp: (window.pPreview || {}).RegExp || {} });
window.pPreview.defimage = 'https://vignette.wikia.nocookie.net/borderlands/images/0/05/Ajax.gif/revision/latest/scale-to-width-down/350?cb=20170626182120&path-prefix=ru';
window.pPreview.noimage = 'https://vignette.wikia.nocookie.net/borderlands/images/f/f5/%D0%97%D0%B0%D0%B3%D0%BB%D1%83%D1%88%D0%BA%D0%B0.png/revision/latest/scale-to-width-down/200?cb=20160122074659&path-prefix=ru';
window.pPreview.tlen = 1000;
window.pPreview.RegExp.iparents = ['.myclass', '#myid', 'div[data-ignore-me=1]'];

Addons

newpages.js: adds preview button to Special:NewPages elements. Preview will shown up on the upper-left corner.

Demo

Hover the mouse over the links: