Go to file
Stephen Niedzielski 2eeaa0a2e4 Hygiene: consolidate clip-path manipulation
The clip-path SVG property was conditionally set in thumbnail.js and
also conditionally set or removed in renderer.js. This patch refactors
the logic to occur in a single place, renderer.js.

The refactor was made with the following considerations:

• The one condition under which thumbnail.js would set clip-path was,
  given a thumbnail exists, the thumbnail was not tall and clip-path
  would be set to `url(#mwe-popups-mask)`. Otherwise, thumbnail.js would
  not set clip-path.

• The logic in renderer.js for setting the attribute doesn't change
  since overwriting the clip-path is equivalent to not having a
  preexisting value. The case for removing the attribute itself is
  replaced by inverting the condition, `flippedY`, and combining it with
  the thumbnail.js condition, `!isTall`. The operation is only valid for
  an existing thumbnail so the `hasThumbnail` remains unchanged.

This patch also clarifies that the "flipped" classes are exclusively set
by using an if / else chain instead of reconsidering all inputs for each
condition.

Bug: T190831
Change-Id: I4062ec7068dcadecbdbc4791447ea2ed1ce2a1de
2018-04-13 09:25:22 -05:00
doc Merge "Doc: ADR for replacing Mustache with ES6 strings" 2018-03-23 15:57:33 +00:00
i18n Hygiene: remove unused strings 2018-04-11 22:47:54 +00:00
images BetaFeatures logo: Merge logo and title path 2017-11-28 10:30:37 -08:00
includes PopupsContext::areDependenciesMet should respect PopupsGateway config 2018-03-28 16:31:15 -07:00
resources Hygiene: consolidate clip-path manipulation 2018-04-13 09:25:22 -05:00
src Hygiene: consolidate clip-path manipulation 2018-04-13 09:25:22 -05:00
tests Hygiene: consolidate clip-path manipulation 2018-04-13 09:25:22 -05:00
.babelrc Hygiene: enable Babel transpilation 2018-03-20 07:59:14 -05:00
.eslintrc.es5.json Hygiene: favor string templates over concatenation 2018-03-21 08:05:55 -05:00
.eslintrc.json Hygiene: restrict use of $.each and fix offenders 2018-03-21 14:24:22 -05:00
.gitattributes Hide package lock file from git diff 2018-03-14 19:06:51 +00:00
.gitignore Generate docs inside doc folder 2017-05-30 10:16:57 -04:00
.gitreview Merge remote-tracking branch 'gerrit/mpga' 2017-02-14 11:20:17 -08:00
.istanbul.yml Hygiene: Tidy up QUnit references 2017-05-04 15:53:44 +01:00
.phpcs.xml build: Updating mediawiki/mediawiki-codesniffer to 15.0.0 2017-12-30 02:19:18 +00:00
.stylelintrc.json build: Update linters 2018-02-04 22:09:45 +00:00
CODE_OF_CONDUCT.md Add CODE_OF_CONDUCT.md 2017-06-07 15:30:07 +04:30
composer.json build: Updating mediawiki/mediawiki-codesniffer to 17.0.0 2018-03-29 05:09:20 +00:00
COPYING Add COPYING file 2014-02-06 15:38:46 +05:30
extension.json Hygiene: remove unused strings 2018-04-11 22:47:54 +00:00
Gruntfile.js Add eslint auto-fixing to Gruntfile 2018-03-27 12:57:40 -07:00
jsdoc.json Generate docs inside doc folder 2017-05-30 10:16:57 -04:00
package-lock.json Update mw-node-qunit to 3.1.0 2018-04-09 11:58:04 +02:00
package.json Update mw-node-qunit to 3.1.0 2018-04-09 11:58:04 +02:00
Popups.php Hygiene: Update required MediaWiki version 2017-07-24 16:12:03 +02:00
README.md Doc: add image to readme 2018-03-27 14:12:12 -05:00
webpack.config.js Up the max asset and entry point sizes 2018-03-27 12:57:17 -07:00

Popups

mediawiki/extensions/Popups

See https://www.mediawiki.org/wiki/Extension:Popups for more information about what it does.

Development

Popups uses an asset bundler so when developing for the extension you'll need to run a script to assemble the frontend assets.

You can find the frontend source files in src/, the compiled sources in resources/dist/, and other frontend assets managed by resource loader in resources/*.

After an npm install:

  • On one terminal, kickstart the bundler process:
    • npm start Will run the bundler in watch mode, re-assembling the files on file change.
    • npm run build Will compile the assets just once, ready for deployment. You must run this step before sending the patch or CI will fail (so that sources and built assets are in sync).
  • On another terminal, run tests and linting tools:
    • npm test To run the linting tools and the tests.
      • You can find the QUnit tests that depend on running MediaWiki under tests/qunit/
      • You can find the isolated QUnit tests under tests/node-qunit/, which you can run with npm run test:node
    • We recommend you install a file watcher like nodemon to watch sources and auto run linting and tests.
      • npm install -g nodemon
      • Example running linting and node unit tests:
        • nodemon -w src/ --exec "grunt lint:all && npm run test:node"
    • Get code coverage report with npm run coverage
      • Reports printed in the coverage/ folder

Developers are likely to work with local MediaWiki instances that do not have content to test with. To reduce this pain, you can create a single page with a list of links that point to an existing and external wiki by using the following config flag:

$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = 'https://en.wikipedia.org/api/rest_v1/page/summary/';

Popups works with a local copy of the Mobile Content Service too:

$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = 'http://localhost:6927/en.wikipedia.org/v1/page/summary/';

Terminology

  • Hovercard - Deprecated term for popup.
  • Link preview - A similar user feature in the Android native app.
  • Navpop / nav pop - A popup-like UI from the NavigationPopups gadget.
  • Popup - Generic term for a dialog that appears to float above a link that is being hovered over by a cursor.
  • Page preview - A specific type of popup that shows a page summary.
  • Preview - A synonym for popup.