Changes: LinkPreview

Revision as of 22:40, 16 October 2019

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:

@@ Line 3: / Line 3: @@
 |Description = Script for preview links on hover
 |Author = [[user:fngplg|fngplg]]
-|Updated = {{#dpl:suppresserrors=1|namespace=MediaWiki|titleregexp=^{{#titleparts:{{PAGENAME}}|1|0}}(/+{{!}}\.)|ordermethod=lastedit|addeditdate=1|userdateformat=Y.m.d|mode=userformat|replaceintitle=(.*?/),|format=,%DATE% (%TITLE%),<br>}}<!--{{Updated}}-->
-|Code = {{#dpl:suppresserrors=1|namespace=MediaWiki|titleregexp=^{{#titleparts:{{PAGENAME}}|1|0}}(/+{{!}}\.)|ordermethod=titlewithoutnamespace,lastedit|addeditdate=1|userdateformat=Y.m.d|mode=userformat|replaceintitle=(.*?/),|format=,[[%PAGE%¦%TITLE%]] (%DATE%),<br>}}<!--[[MediaWiki:{{BASEPAGENAME}}/code.js|code.js]]<br>[[MediaWiki:{{BASEPAGENAME}}/code.css|code.css]]<br>[[MediaWiki:{{BASEPAGENAME}}/newpages.js|newpages.js]]-->
-|Skins = omb
-|Languages = {{l|en|ru}}
 |Status = stable
 |Scope = ps
 |Image file = Linkpreview_shot.png
-|Examples = [[w:c:ru.borderlands|ru.borderlands]]}}
+|Examples = [[w:c:ru.borderlands|ru.borderlands]]
+|Type = site}}
-'''{{BASEPAGENAME}}''' shows article preview on link hover. Inspired by [[mw:extension:Popups]].
+'''LinkPreview''' shows article preview on link hover. Inspired by [[mw:extension:Popups]].
 ==Installation==
-{{Script Install/ImportJS}}
+{{Script Install/Plain|LinkPreview/code.js}}
 ==Settings==
 Available through <code>window.pPreview</code>.
@@ Line 20: / Line 17: @@
 *csize : 100 - cache size. Example: <code>window.pPreview.csize = 100;</code>
 *debug : false - debug mode, verbose output. Also available as &debug=1. Example: <code>window.pPreview.debug = true;</code>
+*apid : false - use [http://community.wikia.com/api/v1#!/Articles/getDetails_get_1 api] to retrieve data. Faster (only one request performed), but obeys image restrictions (too small images will not be used to build preview). Example: <code>window.pPreview.apid = true;</code>
 *defimage : - default image source (before article image loaded). Example: <code>window.pPreview.defimage = 'https://wikia.nocookie.net/someimage';</code>
 *noimage : - image-not-found source. Example: same as defimage.
 *delay : 100 - hover reaction delay. Example: <code>window.pPreview.delay = 100;</code>
 *dock : '#mw-content-text, #article-comments' - article container. Example: <code>window.pPreview.dock = '#mw-content-text';</code>
+*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: <code>window.pPreview.scale = {r: '?', t: '/scale-to-width-down/350?'};</code>
 *tlen : 1000 - max text length. Example: <code>window.pPreview.tlen = 1000;</code>
 *wholepage : false - parse whole page instead of section 0. Also available as &wholepage=1. Example: <code>window.pPreview.wholepage = true;</code>
-*RegExp.iimages : [] - array of [https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp RegExp] or plain text. Ignored images, will not be used to build preview. Example: <code>window.pPreview.RegExp.iimages = [/myimage\.png/, new RegExp('myim.*'), 'some text'];</code>
+*RegExp.iimages : [] - array of [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp RegExp] or plain text. Ignored images, will not be used to build preview. Example: <code>window.pPreview.RegExp.iimages = [/myimage\.png/, new RegExp('myim.*'), 'some text'];</code>
 *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.
@@ Line 42: / Line 41: @@
 ==Addons==
 ;[[MediaWiki:{{BASEPAGENAME}}/newpages.js|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:
+*[[LinkPreview/ru]]
+*[[MediaWiki:LinkPreview/code.js]]
+*[[Help:Advanced_CSS_and_JS]]