Commit graph

21 commits

Author SHA1 Message Date
WMDE-Fisch a3f3cf9e3f build: Update eslint 0.26.0 and apply fixes
Mainly auto fixes but also getting rid of some straight forward lint
warnings to reduce the wall of issues a bit when running the tests.

Also removing some rule exceptions that seem to got more relaxed
upstream.

Change-Id: Icb4d73374583675be74517e6df6508314d61e8c2
2024-01-12 13:50:19 -05:00
Jon Robson 323d770d66 Use native JavaScript to build thumbnail clip path
Change-Id: Ib5d734fde88eaa20ec866722af3de37abe694add
2023-05-16 17:19:47 -07:00
Ed Sanders 883c8c1aca build: Update eslint-config-wikimedia to 0.22.1
Change-Id: I055517998ed06fccdf50ec31251ea6aa9040abb5
2022-02-28 13:18:24 +00:00
jdlrobson fa19ee0d4f Adjust previews to meet specifications
Apply max-heights and tweak some of the margin values

Bug: T284643
Change-Id: I0c8a77e10c36ae444e541bb52a8797594c77db63
2021-08-25 22:55:26 +00:00
Thiemo Kreuz a01c31efd7 Show medium size (<320 wide, but >=250 high) images as well
The requirement for landscape images is to be at least 320px
wide. The requirement for portrait images is more relaxed,
only 250px high. Images that fall between these two
requirements currently don't show a thumbnail, even if they
could.

This change affects a very specific group of images:
* Square images from 250 x 250 to 319 x 319.
* Landscape images from 251 x 250 to 319 x 250.
* Landscape images from 319 x 250 to 319 x 318.

The most extreme ratio is 319 x 250. This will be cut to
203 x 250. I.e. the absolute extreme are 58px missing left
and right, but never more.

Requested at https://www.mediawiki.org/wiki/Topic:Vwl97pm6as9fuf6k

Additional stories for testing more extreme small images:
* Small Tall - 300x1000px
* Small Short - 300x200px

Update tests accordingly.

Bug: T268999
Change-Id: I811f1c0e7e9b0c30280b36a61cc7831a5b9e58c8
2021-08-03 13:17:06 -06:00
Noam Rosenthal 7b0937c5a8 Use CSS clip-path instead of SVG when supported.
This reduces a lot of churn in creating the SVG
element and related helpers.

When IE11 is dropped, the SVG code-path can also be dropped.

Bug: T269336
Change-Id: I7f91192dedc2a78f1c7c84179cff1687593177c0
2021-01-05 19:26:24 +00:00
Ed Sanders 050911fe11 Use faster implicit conversion instead of Number.parseFloat
Change-Id: Ide478617475c73bfe6a81cdb171d606082a1448b
2020-03-03 17:26:55 +00:00
Ed Sanders 4d885286a3 eslint: Enforce template-curly-spacing
Change-Id: I5640e86cba25f6100c7814c2ef8a845941f73497
2019-08-15 10:24:43 +02:00
Nicholas Ray 6a25f70ad5 Use window.devicePixelRatio instead of deprecated jQuery.hidpi
jQuery.hidpi was deprecated by T127328
(https://gerrit.wikimedia.org/r/441614). This repo used the
"bracketedDevicePixelRatio" function from that plugin. Since browser
compatibility is good now for window.devicePixelRatio, this commit adds
a function which relies on that instead.

Bug: T198579
Change-Id: I56c234048d7741f12f35bfff5f7319c6e085c29f
2018-08-10 10:00:28 -06:00
Stephen Niedzielski 2a854f7649 Hygiene: forbid unused lint directives
Prevent outdated ESLint error waivers from littering the code by
enabling `--report-unused-disable-directives`.

Change-Id: I3b9c39131f030cf2c4113ecd947c3f4a8679bdfe
2018-07-02 14:59:40 -05:00
jdlrobson 6c17af260c Extracts can expand with narrow thumbnails
If a thumbnail is narrow, then the extract can expand to take
the available space. It does this via JavaScript taking the difference
between the normal space for a thumbnail minus the actual space needed
to display the thumbnail.

This removes unused whitespace in both the thumbnail and extract.

Bug: T192928
Change-Id: I59e87f9160e707fbce321a567c0a68e85f6d72ec
2018-06-28 16:34:41 -07:00
jdlrobson 21c8e6213e Add SVG border using polyline element
Since we use an SVG mask, we cannot use border-left to visually
separate the page preview thumbnail from the text. We can however
make use of a polyline and programatically work out it's start and
end.

Bug: T192928
Change-Id: I0f983a80e3210b2f7e9aa197d2a632680675973e
2018-06-28 11:23:48 -07:00
Stephen Niedzielski abc2026890 Hygiene: replace QUnit assert.equal with strictEqual()
Via jscodeshift:

  jscodeshift \
    -t jscodeshift-recipes/src/qunit-assert-equal-to-strictEqual.js \
    Popups/tests

Also, some very minor manual clean up.

https://github.com/niedzielski/jscodeshift-recipes/blob/5944e50/src/qunit-assert-equal-to-strictEqual.js

Additional change:
* Drop redundant clipPath parameter from createThumbnailElement - this
parameter does not exist in the function signature.

Change-Id: I209ecf2d54b6f5c17767aa2041d8f11cb368a9b5
2018-06-18 19:48:16 +00:00
Stephen Niedzielski 7c98c04e0b Fix: unwanted thumbnail spacing in RTL locales
Thumbnails are displayed as SVG image elements. The SVG itself has a
width 3px greater than necessary for landscape thumbnails specifically.
For left-to-right languages, this additional space is empty and
unnoticed. For right-to-left languages, this extra spaces shows as a gap
on one side of the thumbnail and exceeds the popup's bounds on the other
side.

This extra 3px appears to have been mistakenly applied to landscape
thumbnails when it is only applicable to portrait, for which it is
already accounted for. Remove the 3px slop.

Bug: T190831
Change-Id: I6096f416f7e102975c4753a6b093b192aa1b45d7
2018-04-26 08:59:00 -05:00
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
Stephen Niedzielski 007cc5ab7c Hygiene: favor string templates over concatenation
Update the ESLint config to favor ES6 strings where variables or string
concatenation is used and fix *all* offenders automatically via:

  eslint \
    --cache \
    --max-warnings 0 \
    --report-unused-disable-directives \
    --fix \
    src tests

Change-Id: I1a9345162348e5ded21d541e7a2ce251ea72ab5a
2018-03-21 08:05:55 -05:00
Stephen Niedzielski 57762e0417 Hygiene: favor const
Bug: T165036
Change-Id: I17d374eaac6627ca6a8ba178862b2a9cff2538c0
2018-03-21 10:44:24 +00:00
Stephen Niedzielski 0bee0906d4 Hygiene: replace var with let and const
eslint \
    --cache \
    --max-warnings 0 \
    --report-unused-disable-directives \
    --fix \
    src tests

Change-Id: I051275126ae7fa9affd16c2504017c0584f2d9c7
2018-03-20 14:14:02 -05:00
Stephen Niedzielski ece4670710 Hygiene: use arrow for anonymous functions
In some places, the arrow function seems more natural. This patch
approximates the following with manual amendments:

  find \
    -not \( \( -name node_modules -o -name .git -o -name vendor -o -name doc -o -name resources \) -prune \) \
    -iname \*.js|
  xargs -rd\\n sed -ri 's%function\s*(\([^)]*\))%\1 =>%g'

Files to focus on were identified with:

  rg -slg\!/resources/dist/ -g\!/i18n/ -g\!/doc/ 'this|self|arguments|bind|call|apply|new'|
  xargs -rd\\n git difftool -y

Bug: T165036
Change-Id: Ic66b6000b8fc000f9bfde39749f9cfa69924a13c
2018-03-20 09:27:08 -05:00
Stephen Niedzielski a67466acc0 Hygiene: replace obvious function methods
Replace easily identifiable object functions with method syntax:

  find \
    -not \( \( -name node_modules -o -name .git -o -name vendor -o -name doc -o -name resources \) -prune \) \
    -iname \*.js|
  xargs -rd\\n sed -ri 's%:\s*function\s*(\([^)]*\))%\1%g'

Bug: T165036
Change-Id: I90693ee99a6a36dff820dd5ae6f6000429763058
2018-03-20 09:27:07 -05:00
Stephen Niedzielski e26c12db52 Hygiene: move thumbnail code to separate file
Move thumbnail code from renderer to a separate file, thumbnail.

Bug: T165036
Change-Id: I6c55750ec302de6341e8e91dee34581ee66499d7
2018-03-14 14:19:41 -05:00