wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-23 23:24:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve popup pointer positioning

Browse source 
Bug: T217737
Change-Id: Id478b8cc8dc7aefdd07dde5d5567aa0a1d8ee970
This commit is contained in:
Andrew Kostka 2019-03-15 12:40:38 +00:00
parent 8aad5981e4
commit 42ee00fe37
4 changed files with 72 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
resources/dist/index.js vendored
View file

Binary file not shown.

BIN
resources/dist/index.js.map.json vendored
View file

Binary file not shown.

21
src/ui/renderer.js
View file

@ -15,7 +15,8 @@ const mw = mediaWiki,
$window = $( window ),
landscapePopupWidth = 450,
portraitPopupWidth = 320,
pointerSize = 8; // Height of the pointer.
pointerSize = 8, // Height of the pointer.
maxLinkWidthForCenteredPointer = 28; // Link with roughly < 4 chars.
/**
* Extracted from `mw.popups.createSVGMasks`. This is just an SVG mask to point
@ -373,9 +374,23 @@ export function createLayout(
) + windowData.scrollTop + pointerSize :
// Position according to link position or size
linkData.offset.top + linkData.height + pointerSize,
offsetLeft = eventData.pageX ? eventData.pageX : linkData.offset.left;
offsetLeft;
const clientTop = eventData.clientY ? eventData.clientY : offsetTop;
if ( eventData.pageX ) {
if ( linkData.width > maxLinkWidthForCenteredPointer ) {
// For wider links, position the popup's pointer at the
// mouse pointer's location. (x-axis)
offsetLeft = eventData.pageX;
} else {
// For smaller links, position the popup's pointer at
// the link's center. (x-axis)
offsetLeft = linkData.offset.left + linkData.width / 2;
}
} else {
offsetLeft = linkData.offset.left;
}
// X Flip
if ( offsetLeft > ( windowData.width / 2 ) ) {
offsetLeft += ( !eventData.pageX ) ? linkData.width : 0;
@ -386,7 +401,7 @@ export function createLayout(
}
if ( eventData.pageX ) {
offsetLeft += ( flippedX ) ? 20 : -20;
offsetLeft += ( flippedX ) ? 18 : -18;
}
// Y Flip

56
tests/node-qunit/ui/renderer.test.js
View file

@ -577,7 +577,7 @@ QUnit.test( '#createLayout - portrait preview, mouse event, link is on the top l
{
offset: {
top: 1154,
left: 232
left: 234
},
flippedX: dir !== 'ltr',
flippedY: false,
@ -629,7 +629,7 @@ QUnit.test( '#createLayout - tall preview, mouse event, link is on the bottom ce
{
offset: {
top: 1242,
left: 156
left: 158
},
flippedX: dir !== 'ltr',
flippedY: true,
@ -688,6 +688,58 @@ QUnit.test( '#createLayout - empty preview, keyboard event, link is on the cente
} );
} );
QUnit.test( '#createLayout - empty preview, mouse event, popup pointer is in the correct position', ( assert ) => {
const isPreviewTall = false,
eventData = {
pageX: 205,
pageY: 1146,
clientY: 36
},
linkData = {
clientRects: [ {
bottom: 37,
height: 13,
left: 201,
right: 227,
top: 24,
width: 26
} ],
offset: {
top: 1134,
left: 201
},
width: 26,
height: 13
},
windowData = {
scrollTop: 1109,
width: 1239,
height: 827
},
pointerSize = 8;
const cases = [ { dir: 'ltr' }, { dir: 'rtl' } ];
cases.forEach( ( { dir }, i ) => {
const layout = renderer.createLayout(
isPreviewTall, eventData, linkData, windowData, pointerSize, dir
);
assert.deepEqual(
layout,
{
offset: {
top: 1154,
left: 196
},
flippedX: dir !== 'ltr',
flippedY: false,
dir
},
`Case ${i}: the layout is correct.`
);
} );
} );
QUnit.test( '#getClasses when no thumbnail is available', ( assert ) => {
const cases = [
// [ previewOptions, layoutOptions, expected, message ]