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

Fix pointer class behaviour

Browse source 
Add unit tests for landscape previews.

Bug: T287520
Change-Id: Ib9a7635b532248a4f44c308d7bb5dc7ab08667e6
This commit is contained in:
jdlrobson 2021-08-04 13:33:54 -07:00
parent a0754c8cf9
commit 75a9d81755
5 changed files with 153 additions and 9 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.

35
src/ui/renderer.js
View file

@ -442,6 +442,29 @@ export function createLayout(
};
}
/**
* is there a pointer on the image of the preview?
*
* @param {ext.popups.Preview} preview
* @param {ext.popups.PreviewLayout} layout
* @return {boolean}
*/
export function hasPointerOnImage( preview, layout ) {
if ( ( !preview.hasThumbnail || preview.isTall && !layout.flippedX ) &&
!layout.flippedY ) {
return false;
}
if ( preview.hasThumbnail ) {
if (
( !preview.isTall && !layout.flippedY ) ||
( preview.isTall && layout.flippedX )
) {
return true;
}
}
return false;
}
/**
* Generates a list of declarative CSS classes that represent the layout of
* the preview.
@ -467,14 +490,10 @@ export function getClasses( preview, layout ) {
classes.push( 'flipped-x' );
}
if ( ( !preview.hasThumbnail || preview.isTall && !layout.flippedX ) &&
!layout.flippedY ) {
classes.push( 'mwe-popups-no-image-pointer' );
}
if ( preview.hasThumbnail && !preview.isTall && !layout.flippedY ) {
classes.push( 'mwe-popups-image-pointer' );
}
classes.push(
hasPointerOnImage( preview, layout ) ?
'mwe-popups-image-pointer' : 'mwe-popups-no-image-pointer'
);
if ( preview.isTall ) {
classes.push( 'mwe-popups-is-tall' );

2
src/ui/templates/popup/popup.less
View file

@ -36,7 +36,7 @@
.mwe-popups-container {
color: @colorText;
margin-top: -9px;
margin-top: -8px;
padding-top: 9px;
text-decoration: none;

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

@ -784,6 +784,7 @@ QUnit.test( '#getClasses when no thumbnail is available', ( assert ) => {
[
'mwe-popups-fade-in-down',
'flipped-y',
'mwe-popups-no-image-pointer',
'mwe-popups-is-not-tall'
],
'Y flipped.'
@ -817,6 +818,7 @@ QUnit.test( '#getClasses when no thumbnail is available', ( assert ) => {
[
'mwe-popups-fade-in-down',
'flipped-x-y',
'mwe-popups-no-image-pointer',
'mwe-popups-is-not-tall'
],
'X and Y flipped.'
@ -861,6 +863,7 @@ QUnit.test( '#getClasses when a non-tall thumbnail is available', ( assert ) =>
[
'mwe-popups-fade-in-down',
'flipped-y',
'mwe-popups-no-image-pointer',
'mwe-popups-is-not-tall'
],
'Y flipped.'
@ -894,6 +897,7 @@ QUnit.test( '#getClasses when a non-tall thumbnail is available', ( assert ) =>
[
'mwe-popups-fade-in-down',
'flipped-x-y',
'mwe-popups-no-image-pointer',
'mwe-popups-is-not-tall'
],
'X and Y flipped.'
@ -939,6 +943,7 @@ QUnit.test( '#getClasses when a tall thumbnail is available', ( assert ) => {
[
'mwe-popups-fade-in-down',
'flipped-y',
'mwe-popups-no-image-pointer',
'mwe-popups-is-tall'
],
'Y flipped.'
@ -955,6 +960,7 @@ QUnit.test( '#getClasses when a tall thumbnail is available', ( assert ) => {
[
'mwe-popups-fade-in-up',
'flipped-x',
'mwe-popups-image-pointer',
'mwe-popups-is-tall'
],
'X flipped.'
@ -971,6 +977,7 @@ QUnit.test( '#getClasses when a tall thumbnail is available', ( assert ) => {
[
'mwe-popups-fade-in-down',
'flipped-x-y',
'mwe-popups-image-pointer',
'mwe-popups-is-tall'
],
'X and Y flipped.'
@ -1151,6 +1158,124 @@ QUnit.test( '#layoutPreview - portrait preview, flipped X, has thumbnail, big he
);
} );
QUnit.test( '#hasPointerOnImage', ( assert ) => {
const cases = [
{
preview: {
hasThumbnail: false
},
layout: {},
expected: false,
reason: 'If no thumbnails no chance pointer will be on image'
},
{
preview: {
isTall: true,
hasThumbnail: true
},
layout: {
flippedX: false,
flippedY: false
},
expected: false,
reason: '(landscape) Pointer on left, image on right'
},
{
preview: {
isTall: true,
hasThumbnail: true
},
layout: {
flippedX: false,
flippedY: true
},
expected: false,
reason: '(landscape) Pointer on left, image on right'
},
{
preview: {
isTall: true,
hasThumbnail: true
},
layout: {
flippedX: true,
flippedY: true
},
expected: true,
reason: '(landscape) Pointer on bottom right, image on right'
},
{
preview: {
isTall: false,
hasThumbnail: true
},
layout: {
flippedX: false,
flippedY: false
},
expected: true,
reason: '(portrait) Pointer on top left, image on top'
},
{
preview: {
isTall: false,
hasThumbnail: true
},
layout: {
flippedX: true,
flippedY: false
},
expected: true,
reason: '(portrait) Pointer on top right, image on top'
},
{
preview: {
isTall: false,
hasThumbnail: true
},
layout: {
flippedX: false,
flippedY: true
},
expected: false,
reason: '(portrait) Pointer on bottom left, image on top'
},
{
preview: {
isTall: false,
hasThumbnail: true
},
layout: {
flippedX: true,
flippedY: true
},
expected: false,
reason: '(portrait) Pointer on bottom right, image on top'
},
{
preview: {
isTall: true,
hasThumbnail: true
},
layout: {
flippedX: true,
flippedY: false
},
expected: true,
reason: '(landscape) Pointer on top right, image on right'
}
];
cases.forEach( ( testCase ) => {
assert.strictEqual(
renderer.hasPointerOnImage( testCase.preview, testCase.layout ),
testCase.expected,
testCase.reason
);
} );
} );
QUnit.test( '#layoutPreview - tall preview, has thumbnail, flipped Y', ( assert ) => {
const preview = createPagePreview( true, true, { height: 200 } ),
layout = {