View source for Wiki143:Tools/Navigation popups

{{Short description|Wikipedia gadget for article previews}}
{{pp-semi-indef}}
{{shortcut|WP:POP|WP:POPUP|WP:POPUPS|WP:NAVPOP|WP:NAVPOPS}}
{{Redirect|WP:POP|WikiProject Pop music|Wikipedia:WikiProject Pop music}}
{{Tool warning|navigation popups}}
[[File:Navigation popups icon.svg|right|150px|thumb|Navigation popups Icon]]
[[File:Navigation popups enwiki Vector.png|400px|thumb|Navigation popups in action. In this screenshot, the user is hovering the mouse over a link to the [[encyclopedia]] article.]]
[[File:Hovercard english.png|400px|thumb|An example of [[mw:Page Previews|Page Previews]], which is {{strong|NOT}} the same as this tool called Navigation popups.]]
'''Navigation popups''' is an opt-in Wikipedia [[Wikipedia:Gadget|gadget]] (feature) that offers article previews and several functions through popup windows when hovering over [[Wikipedia:Wikilinks|wikilinks]]. It should not be confused with the default [[mw:Page Previews|Page Previews]] and [[mw:Reference Tooltips|Reference Tooltips]], which appear for all registered and unregistered users and serve as more reader-focused popups.

== Installation ==

* Navigate to and enable:
:: {{myprefs|Gadgets|Browsing|check="{{int:Gadget-Navigation_popups}}"}}
* Click {{button|Save}}
* Consider [[Wikipedia:Bypass your cache|bypassing your browser's cache]]. 

If you encounter difficulties, consider reviewing the [[/FAQ|§ Frequently asked questions]].

== Features ==
[[File:Popups-toggle-size-small.png|thumb|Small image preview for an article (Classic skin screenshot, but works fine with Vector/Monobook).]]
[[File:Popups-toggle-size-large.png|thumb|Click to enlarge preview.]]
[[File:Revert popups.jpg|thumb|Reverting using popups – hover over history item and select revert. Click to enlarge preview.]]
[[File:Navigation popups quick tour.ogv|thumb|Navigation popups quick tour]]

* [[Mouseover]] [[tooltips]] on articles (including user pages):
** Preview the first part of the article text when mousing over a link to an article
** Preview the first image in the article
*** {{small|If there is an infobox with an image, and it is not a Wikidata-powered infobox, the image in the infobox will be taken as the first image.}}
*** {{small|The image shown in the preview can be controlled by adding an image hint to the article, in the form of an invisible HTML comment: {{nowrap|<code><nowiki>&lt;!-- popup [[File:Desired_Preview_Image.jpg]] --&gt;</nowiki></code>}}.}}
** Preview selected user information [user/user talk namespace]: pronoun preference, user groups, edit count, account registration date, date of most recent edit
** Preview selected page information: size, number of links, number of images, number of categories and page age
** Tells you about redirects, stubs and disambiguation pages
** One click access to edit page, page history, most recent edit, edits by most recent contributor,{{efn|name=on-selected-browsers-ie|On selected browsers, including Microsoft Internet Explorer}} changes since my edit,{{efn|name=on-selected-browsers-ie}} move page, what links here, related changes, watch or unwatch, protect or unprotect (for administrators), talk page, edit talk page and start new topic in talk page
** See the Wikidata QID for the target page, if one exists
* Mouseover on image links:
** Preview images
** Preview file descriptions
** Preview file links
** Tells you if the image is on Commons
* Mouseover on user links:
** One-click access to user page, user space, user talk, edit user talk, new section in user talk, e-mail user, contributions and contributions tree, (for administrators) deleted user contributions, user log, (for administrators) block user, edit counter ([https://tools.wmflabs.org/supercount/index.php?project=en.wikipedia User Analysis Tool]), block log
* Mouseover on footnotes:
** Preview contents of footnotes
* Mouseover on any wikilink:
** Clear pop-up cache{{efn|name=on-selected-browsers-mff|On selected browsers, including Mozilla Firefox}}
** Enable/disable previews{{efn|name=on-selected-browsers-mff}}
** Enable/disable pop-ups{{efn|name=on-selected-browsers-mff}}
* Preview diffs and access both revisions in watchlist, history and related changes
* Preview selected wikilinks when editing (use the mouse to select one wikilink)
* One-click revert of vandalism from history browser (see image) 
* Shortcut keys (optional)
* Automatically fix links to bypass redirects and disambiguation pages (optional)
* Should work on all Wikimedia wikis

== Installation ==
You must have a user account to install and use the Navigation popups feature. If you do not have an account, you will need to <span class="plainlinks">[{{fullurl:Special:UserLogin|type=signup&returnto={{FULLPAGENAMEE}}}} create one]</span> and log in.

* Go to {{myprefs|9|Browsing|check={{int:Gadget-Navigation_popups}}}} 

===Other wikis or [[m:Special:MyPage/global.js|global.js]]===
Add the following to your user script file ([[w:Special:MyPage/common.js|common.js]] or [[m:Special:MyPage/global.js|global.js]]):
<syntaxhighlight lang="javascript">
mw.loader.load('https://en.wikipedia.org/w/load.php?modules=ext.gadget.Navigation_popups'); // [[w:Wikipedia:Tools/Navigation popups]]
</syntaxhighlight>

After saving the page, [[Wikipedia:Bypass your cache|clear your browser's cache]] (on [[Internet Explorer]] {{Keypress|Ctrl|F5}}; on [[Mozilla Firefox]] {{Keypress|Shift|Ctrl|R}}; on [[Opera (web browser)|Opera]] {{Keypress|F5}}). Assuming that you have not disabled JavaScript in your browser, a popup should appear whenever you hover your mouse over an internal link in Wikipedia. If you use more than one web browser, or more than one PC, you may need to clear the caches for each so that the popup appears.

To install the script on the Commons or Wiktionary, repeat this procedure on those wikis.

To '''uninstall''' the script, delete the above lines from the same page and clear your browser's cache.

== Usage guide ==
This tool generates "popup hints" when you hover the mouse pointer over active links and images. These popups provide information about the link's target and give quick access to a number of relevant actions.

If you hold the shift key then you can drag the popup around.

Popups depend on the type of link:

*'''Links to ordinary articles''': popup provides a preview of the first paragraph and image of the article; the Actions menu allows to view the History and Talk page of the article, to edit and watch the article etc.
*'''In the edit box''': Highlight a <nowiki>[[wiki link]]</nowiki> to get an article popup.
*'''Diff links''': On history or watchlist pages, hover over diff links like "(cur)" or "(prev)" to get a summary of the difference; the Actions menu allows you to revert or undo the edit.
*'''User: links''': information about the status of the user; User menu gives access to Talk page, recent contributions etc.
*'''Image links''': information from image's description page
*'''In popups''': most of the links in popup windows will open new popups when hovered over.

== Configuration (optional) ==
There are dozens of configurable settings that add or remove various powerful features, explained in depth below.

=== Seven optional structures ===
There are seven built-in style variations: shortmenus (default), menus, lite, original, nostalgia, fancy, fancy2. 
* To change your selection, see the two <code>popupStructure</code> bits in the ''#Options'' just below. 
* For more specific details on each, see [[/Structure examples]].

<gallery mode="nolines" widths=250px heights=400px>
Popups_shortmenus.png|'''Shortmenus (default)'''
Popups_menus.png|Menus
Lite.png|Lite
Original (structure).png|Original
Popups_nostalgia.png|Nostalgia
Fancy.png|Fancy
Fancy2.png|Fancy2
</gallery>

=== Changing the appearance of your popups ===
By editing your user [[Cascading Style Sheets|CSS]] file, you can change the appearance of the popups. Your user CSS file has exactly the same name as the JavaScript file, but with "css" instead of "js" at the end. So you should edit [[Special:MyPage/skin.css|your current skin's .css page]].

Here is an example that makes the text a bit bigger.
<syntaxhighlight lang="css">
.navpopup {font-size: 0.875em !important;}
.popup_menu {margin-top: 1.1em !important;}
</syntaxhighlight>

Here is an example which gives an orange-flavoured popup with a border and changes the font used. This makes the popups look pretty silly, but it shows the sort of thing you can do if you feel like it.

<syntaxhighlight lang="css">
.navpopup { 
  background-color: #FFBE20  !important;
  font-family:      serif    !important;
  color:            #404     !important;
  font-size:        medium   !important;
}
</syntaxhighlight>

=== Options ===
There are some options that you can set. To do so, edit your [[Special:MyPage/skin.js|user JavaScript file]] and add a line of the form <code>window.<var>option</var> = <var>value</var>;</code> where <code><var>option</var></code> and <code><var>value</var></code> are chosen from the table below. For example, to turn on extensive menus and turn on admin links, you need to add something like this in your JavaScript file:

<syntaxhighlight lang="JavaScript">
window.popupStructure = 'menus';
window.popupAdminLinks = true;
</syntaxhighlight>

{| class="wikitable sortable" style="border-spacing: 4px" border="1"
|+ Configuration options
|-
!Option
!Values<br />{{Center|1=<small>Default in <code>{{Hilite|1='''bold'''}}</code></small>}}
!class="unsortable"|Description
{{/General options}}<!--
-->{{/Edit summary options}}<!--
-->{{/Preview options}}<!--
-->{{/Technical options}}<!--
-->{{/Experimental options}}
|}

More options may be added, and requests for more configurability are welcome.

=== Advanced customization ===
==== Adding filters ====
You can define custom filters for articles. These are JavaScript functions which are run after the page statistics are generated, and their output is appended (as HTML) to that part of the popup. (Note that if simplePopups is true or popupSummaryData is false, then nothing will be displayed.)

The way to set this up is to write a filter function which accepts a string (the wikitext of the article) as input, and returns a fragment of HTML. Repeat for as many filters as you want, and then create an array <code>extraPopupFilters</code> which contains all of the functions, in the order in which you want them to be run.

For example, let's say you want to be told whenever the wikitext of an article contains a table written using HTML tags rather than wiki markup. One way to do this is to add the following to [[special:mypage/common.js|your user JavaScript file]]:

<syntaxhighlight lang="JavaScript">
// initialize the array - only do this once
window.extraPopupFilters = [];

// define the function
function popupFilterHtmlTable (wikiText) {
  if (/<table/i.test(wikiText)) return '&lt;table&gt;';
  else return '';
};

// add the function to the array (you can repeat this for lots of functions)
extraPopupFilters.push(popupFilterHtmlTable);
</syntaxhighlight>

Then when a popup is generated for a page containing an HTML table, you should see &lt;table&gt; in the popup. (It may also appear for other pages, such as this page. Correcting this defect is left as an exercise for the reader.)

==== Other examples ====
If you want to enable <code>popupRedlinkRemoval</code>, <code>popupFixRedirs</code> and <code>popupFixDabs</code> features in all pages except the [[Help:Special page|special ones]], [[Help:Page history|histories]] and [[Help:Show preview|previews]] (where those features are obviously useless) you can add these lines to your user JavaScript file:

<syntaxhighlight lang="JavaScript">
// Normally features are enabled
var toFix = true;

// In special pages, histories and previews disable them
if ( mw.config.get( 'wgCanonicalNamespace' ) === 'Special' ||
	$.inArray( mw.util.getParamValue( 'action' ), [ 'history', 'submit' ] ) !== -1 )
{
	toFix = false;
}
// 
window.popupRedlinkRemoval = toFix;
window.popupFixRedirs = toFix;
window.popupFixDabs = toFix;
</syntaxhighlight>

== Translations ==
Please see [[/Translation|this page]] for translations of the script interface and of this page into other languages. You'll also find instructions for creating a translation yourself.

== Browser problems ==
=== [[Firefox]] ===
If a user on Firefox with the [[Adblock Plus]] extension installed cannot see the popup, only the normal tooltip, Adblock Plus may be blocking the operation of navigational popups. This can be solved by adding an exception to the filtering rules – go to the [[Main Page]], click the icon in the browser toolbar, and turn off ''[Block ads on] This website: <span style="font-family:monospace;">en.wikipedia.org</span>.''

This tool should not be affected by any browser popup blocking settings.

==[[WP:Userboxes|Userboxes]]==
{{Usbktop}}
{{Usbk|User:The Anonymouse/Userboxes/Navigation popups}}
{{Usbk|User:UBX/Navigation popups}}
{{Usbkbottom}}

There is also a Navigation popups topicon. {{Tl|Navigation popups topicon}}.

== Feedback ==
Please see [[{{TALKPAGENAME}}]], or the associated [https://phabricator.wikimedia.org/project/profile/2055/ Phabricator project] (for implementation-related discussion).

== Notes ==
{{Notelist}}

== Credits and external links ==
This tool was primarily written by [[User:Lupin|Lupin]], who is currently no longer active on Wikipedia.
It depends on some other people's work:
*[[User:Pilaf/InstaView]] ([[née]] [[User:Pilaf/Live Preview|Live Preview]]) by [[User:Pilaf|Pilaf]] for article previewing
*a JavaScript [[MD5]] hash function by Paul Johnston and others, available [http://pajhome.org.uk/crypt/md5 here]
*[http://www.youngpup.net/2001/domdrag domdrag] by [[Aaron Boodman]]
*An [http://ejohn.org/projects/JavaScript-diff-algorithm/ implementation] of a diff algorithm by John Resig 
Older versions of the tool used [http://www.bosrup.com/web/overlib overlib] by Erik Bosrup.

=== Contributors ===
* [[User:Lupin|Lupin]]&nbsp;– original development, has not been active on Wikipedia since 2009.
* [[User:Brian0918|Brian0918]]&nbsp;– a little code and lots of inspiration
* [[User:Eddideigel|Eddideigel]]&nbsp;– translation work
* [[User:IceKarma|IceKarma]]&nbsp;– aborting download code, making much better use of bandwidth
* [[User:Mike Dillon|Mike Dillon]]&nbsp;– the page age code
* [[User:Yurik|Yurik]]&nbsp;– with his fantastic [[User:Yurik/Query_API|MediaWiki BotQuery extension]]
* [[User:Zocky|Zocky]]&nbsp;– the menus
* [[User:Zyxw|Zyxw]]&nbsp;– preview enhancements
* [[User:TheDJ|TheDJ]]&nbsp;– conversion from [[User:Yurik/Query API|BotQuery]] to [[mw:API|API]].
* ...and many more with helpful suggestions, comments and bug reports

{{Wikipedia technical help}}
{{Wikipedia:Tools/Navigation popups/Navbox}}

[[Category:Wikipedia scripts| Navigation popups]]
[[Category:Wikipedia tools]]

{{ombox|text=The developer of popups ({{u|Lupin}}) has not been active on Wikipedia since 2009.}}