Extension:Popups

The Popups extension displays "hovercards" − popups with summaries of article contents when the user hovers over an article link.

This is an initiative of the Design team, to move popular Gadgets into beta-feat>Special:MyLanguage/Beta Features|Beta Features. Mockups and more information available at hover>Special:MyLanguage/Beta Features/Hovercards|Hovercards.

== Dependencies ==

This extension has a hard dependency on ext-txtextract>Special:MyLanguage/Extension:TextExtracts|Extension:TextExtracts and ext-pgimg>Special:MyLanguage/Extension:PageImages|Extension:PageImages. There is also an optional dependency on beta-feat>Special:MyLanguage/Beta Features|Beta Features (without BetaFeatures, it loads for all users) and ext-eventlog>Special:MyLanguage/Extension:EventLogging|Extension:EventLogging (for logging).

Installation

 * Install the dependencies.


 * Enable the beta feature

Content
The popups show an image (if one is available), a small text excerpt and the timestamp of the last edit.

Image
The image comes from the ext-pgimg>Special:MyLanguage/Extension:PageImages|Extension:PageImages which returns the single most appropriate thumbnail associated with an article. It ignores maintenance templates, stubs, flag icons etc.

Text
The text comes from the ext-txtextract>Special:MyLanguage/Extension:TextExtracts|Extension:TextExtracts from which a plain-text extract is requested (see that extension for exclusions). [https://phabricator.wikimedia.org/diffusion/EPOP/browse/master/resources/ext.popups.core.js;2c17c7dcffb665eba0a7a630872c05170b5d9041$48 Two sentences] are requested from the intro section and a limit is put through CSS that makes sure that text doesn't overflow from the card. This is done by applying a [https://phabricator.wikimedia.org/diffusion/EPOP/browse/master/resources/ext.popups.core.js;2c17c7dcffb665eba0a7a630872c05170b5d9041$110 max-height] on that element. This approach would provide the same visual solution regardless of the language's script. A major con is that the text stops abruptly and ellipses can't be added.

Show/hide timing
The timing of the show/hide can currently be adjusted via code, which should be added to your local Special:MyPage/common.js or global.js file :

Renderers
This extensions currently has only one renderer, that is for ordinary pages.

New renderers for different kind of pages, or things like references can be easily added.

One needs to create a new object with the following methods:


 * init
 * createPopup
 * getOffset
 * getClasses
 * processPopup

You can see details of these methods in ext.popups.renderer.article.js or this [https://gerrit.wikimedia.org/r/#/c/139827/ patch that adds a renderer for references].