mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-23 15:16:50 +00:00
Hygiene: replace okies with ointers
I've yet to meet the bloke who knew how to take a poke without an explanation such that they have never mispoke. This patch which renames pokies to pointers will surely be my masterstroke. find \ -not \( \( -name node_modules -o -name .git -o -name vendor -o -name dist -o -name package-lock.json \) -prune \) \ -type f| xargs -rd\\n sed -ri 's%([Pp])(okey|okie)%\1ointer%g; s%([Pp])oke%\1oint%g' Bug: T190831 Change-Id: I363e6dd49bfcdb9515cd5fab2904a58725b18720
This commit is contained in:
Stephen Niedzielski
jdlrobson
parent
7c98c04e0b
commit
d7871bb9c4
BIN
resources/dist/index.js
vendored
BIN
resources/dist/index.js
vendored
Binary file not shown.
BIN
resources/dist/index.js.json
vendored
BIN
resources/dist/index.js.json
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 678 B After Width: | Height: | Size: 678 B |
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
import wait from '../wait';
|
||||
import pokeyMaskSVG from './pokey-mask.svg';
|
||||
import pointerMaskSVG from './pointer-mask.svg';
|
||||
import { SIZES, createThumbnail } from './thumbnail';
|
||||
import { previewTypes } from '../preview/model';
|
||||
import { renderPreview } from './templates/preview/preview';
|
||||
|
|
@ -14,30 +14,30 @@ const mw = window.mediaWiki,
|
|||
$window = $( window ),
|
||||
landscapePopupWidth = 450,
|
||||
portraitPopupWidth = 320,
|
||||
pokeySize = 8; // Height of the pokey.;
|
||||
pointerSize = 8; // Height of the pointer.
|
||||
|
||||
/**
|
||||
* Extracted from `mw.popups.createSVGMasks`. This is just an SVG mask to point
|
||||
* or "poke" at the link that's hovered over. The "pokey" appears to be cut out
|
||||
* of the image itself:
|
||||
* or "point" at the link that's hovered over. The "pointer" appears to be cut
|
||||
* out of the image itself:
|
||||
* _______ link
|
||||
* | | _/\_____ _/\____ <-- Pokey pointing at link
|
||||
* | | _/\_____ _/\____ <-- Pointer pointing at link
|
||||
* | :-] | + |xxxxxxx = | :-] |
|
||||
* |_______| |xxxxxxx |_______|
|
||||
* :
|
||||
* Thumbnail Pokey Page preview
|
||||
* image clip-path bubble w/ pokey
|
||||
* Thumbnail Pointer Page preview
|
||||
* image clip-path bubble w/ pointer
|
||||
*
|
||||
* SVG masks are used in place of CSS masks for browser support issues (see
|
||||
* https://caniuse.com/#feat=css-masks).
|
||||
*
|
||||
* @private
|
||||
* @param {Object} container DOM object to which pokey masks are appended
|
||||
* @param {Object} container DOM object to which pointer masks are appended
|
||||
*/
|
||||
export function createPokeyMasks( container ) {
|
||||
export function createPointerMasks( container ) {
|
||||
$( '<div>' )
|
||||
.attr( 'id', 'mwe-popups-svg' )
|
||||
.html( pokeyMaskSVG )
|
||||
.html( pointerMaskSVG )
|
||||
.appendTo( container );
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export function createPokeyMasks( container ) {
|
|||
* Initializes the renderer.
|
||||
*/
|
||||
export function init() {
|
||||
createPokeyMasks( document.body );
|
||||
createPointerMasks( document.body );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -229,7 +229,7 @@ export function createDisambiguationPreview( model ) {
|
|||
* @param {jQuery} $link event target
|
||||
* @param {ext.popups.PreviewBehavior} behavior
|
||||
* @param {String} token
|
||||
* @param {Object} container DOM object to which pokey masks are appended
|
||||
* @param {Object} container DOM object to which pointer masks are appended
|
||||
* @param {string} dir 'ltr' if left-to-right, 'rtl' if right-to-left.
|
||||
* @return {jQuery.Promise} A promise that resolves when the promise has faded
|
||||
* in
|
||||
|
|
@ -255,7 +255,7 @@ export function show(
|
|||
width: $window.width(),
|
||||
height: $window.height()
|
||||
},
|
||||
pokeySize,
|
||||
pointerSize,
|
||||
dir
|
||||
);
|
||||
|
||||
|
|
@ -263,7 +263,7 @@ export function show(
|
|||
|
||||
layoutPreview(
|
||||
preview, layout, getClasses( preview, layout ),
|
||||
SIZES.landscapeImage.h, pokeySize
|
||||
SIZES.landscapeImage.h, pointerSize
|
||||
);
|
||||
|
||||
preview.el.show();
|
||||
|
|
@ -356,12 +356,12 @@ export function hide( preview ) {
|
|||
* @param {number} windowData.scrollTop
|
||||
* @param {number} windowData.width
|
||||
* @param {number} windowData.height
|
||||
* @param {number} pokeySize Space reserved for the pokey
|
||||
* @param {number} pointerSize Space reserved for the pointer
|
||||
* @param {string} dir 'ltr' if left-to-right, 'rtl' if right-to-left.
|
||||
* @return {ext.popups.PreviewLayout}
|
||||
*/
|
||||
export function createLayout(
|
||||
isPreviewTall, eventData, linkData, windowData, pokeySize, dir
|
||||
isPreviewTall, eventData, linkData, windowData, pointerSize, dir
|
||||
) {
|
||||
let flippedX = false,
|
||||
flippedY = false,
|
||||
|
|
@ -373,9 +373,9 @@ export function createLayout(
|
|||
eventData.pageY - windowData.scrollTop,
|
||||
linkData.clientRects,
|
||||
false
|
||||
) + windowData.scrollTop + pokeySize :
|
||||
) + windowData.scrollTop + pointerSize :
|
||||
// Position according to link position or size
|
||||
linkData.offset.top + linkData.height + pokeySize,
|
||||
linkData.offset.top + linkData.height + pointerSize,
|
||||
offsetLeft = eventData.pageX ? eventData.pageX : linkData.offset.left;
|
||||
const clientTop = eventData.clientY ? eventData.clientY : offsetTop;
|
||||
|
||||
|
|
@ -397,7 +397,7 @@ export function createLayout(
|
|||
flippedY = true;
|
||||
|
||||
// Mirror the positioning of the preview when there's no "Y flip": rest
|
||||
// the pokey on the edge of the link's bounding rectangle. In this case
|
||||
// the pointer on the edge of the link's bounding rectangle. In this case
|
||||
// the edge is the top-most.
|
||||
offsetTop = linkData.offset.top;
|
||||
|
||||
|
|
@ -412,7 +412,7 @@ export function createLayout(
|
|||
) + windowData.scrollTop;
|
||||
}
|
||||
|
||||
offsetTop -= pokeySize;
|
||||
offsetTop -= pointerSize;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -453,11 +453,11 @@ export function getClasses( preview, layout ) {
|
|||
|
||||
if ( ( !preview.hasThumbnail || preview.isTall && !layout.flippedX ) &&
|
||||
!layout.flippedY ) {
|
||||
classes.push( 'mwe-popups-no-image-pokey' );
|
||||
classes.push( 'mwe-popups-no-image-pointer' );
|
||||
}
|
||||
|
||||
if ( preview.hasThumbnail && !preview.isTall && !layout.flippedY ) {
|
||||
classes.push( 'mwe-popups-image-pokey' );
|
||||
classes.push( 'mwe-popups-image-pointer' );
|
||||
}
|
||||
|
||||
if ( preview.isTall ) {
|
||||
|
|
@ -480,11 +480,11 @@ export function getClasses( preview, layout ) {
|
|||
* @param {ext.popups.PreviewLayout} layout
|
||||
* @param {string[]} classes class names used for layout out the preview
|
||||
* @param {number} predefinedLandscapeImageHeight landscape image height
|
||||
* @param {number} pokeySize
|
||||
* @param {number} pointerSize
|
||||
* @return {void}
|
||||
*/
|
||||
export function layoutPreview(
|
||||
preview, layout, classes, predefinedLandscapeImageHeight, pokeySize
|
||||
preview, layout, classes, predefinedLandscapeImageHeight, pointerSize
|
||||
) {
|
||||
const popup = preview.el,
|
||||
isTall = preview.isTall,
|
||||
|
|
@ -499,7 +499,7 @@ export function layoutPreview(
|
|||
) {
|
||||
popup.find( '.mwe-popups-extract' ).css(
|
||||
'margin-top',
|
||||
thumbnail.height - pokeySize
|
||||
thumbnail.height - pointerSize
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -522,8 +522,8 @@ export function layoutPreview(
|
|||
/**
|
||||
* Sets the thumbnail SVG clip-path.
|
||||
*
|
||||
* If the preview should be oriented differently, then the pokey is updated,
|
||||
* e.g. if the preview should be flipped vertically, then the pokey is
|
||||
* If the preview should be oriented differently, then the pointer is updated,
|
||||
* e.g. if the preview should be flipped vertically, then the pointer is
|
||||
* removed.
|
||||
*
|
||||
* Note: SVG clip-paths are supported everywhere but clip-paths as CSS
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
@cogIconSize: 30px;
|
||||
@lineHeight: 20px;
|
||||
|
||||
.mwe-popups-border-pokey-top( @size, @left, @color, @extra ) {
|
||||
.mwe-popups-border-pointer-top( @size, @left, @color, @extra ) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: ( @size + @extra ) solid transparent;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
left: @left;
|
||||
}
|
||||
|
||||
.mwe-popups-border-pokey-bottom( @size, @left, @color, @extra ) {
|
||||
.mwe-popups-border-pointer-bottom( @size, @left, @color, @extra ) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: ( @size + @extra ) solid transparent;
|
||||
|
|
@ -203,18 +203,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Triangles/Pokeys */
|
||||
&.mwe-popups-no-image-pokey {
|
||||
/* Triangles/Pointers */
|
||||
&.mwe-popups-no-image-pointer {
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-top( 8px, 10px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-top( 8px, 10px, @colorGray10, 0px );
|
||||
}
|
||||
|
||||
&:after {
|
||||
.mwe-popups-border-pokey-top( 7px, 7px, #fff, 4px );
|
||||
.mwe-popups-border-pointer-top( 7px, 7px, #fff, 4px );
|
||||
}
|
||||
}
|
||||
|
||||
&.flipped-x.mwe-popups-no-image-pokey {
|
||||
&.flipped-x.mwe-popups-no-image-pointer {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
|
|
@ -226,24 +226,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.mwe-popups-image-pokey {
|
||||
&.mwe-popups-image-pointer {
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-top( 9px, 9px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-top( 9px, 9px, @colorGray10, 0px );
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.mwe-popups-border-pokey-top( 8px, 6px, #fff, 4px );
|
||||
.mwe-popups-border-pointer-top( 8px, 6px, #fff, 4px );
|
||||
z-index: 112;
|
||||
}
|
||||
|
||||
&.flipped-x {
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-top( 9px, 273px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-top( 9px, 273px, @colorGray10, 0px );
|
||||
}
|
||||
|
||||
&:after {
|
||||
.mwe-popups-border-pokey-top( 8px, 269px, #fff, 4px );
|
||||
.mwe-popups-border-pointer-top( 8px, 269px, #fff, 4px );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
min-height: 242px;
|
||||
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-top( 9px, 420px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-top( 9px, 420px, @colorGray10, 0px );
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
|
|
@ -280,12 +280,12 @@
|
|||
|
||||
&.flipped-x-y {
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-bottom( 9px, 272px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-bottom( 9px, 272px, @colorGray10, 0px );
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.mwe-popups-border-pokey-bottom( 8px, 269px, #fff, 4px );
|
||||
.mwe-popups-border-pointer-bottom( 8px, 269px, #fff, 4px );
|
||||
z-index: 112;
|
||||
}
|
||||
|
||||
|
|
@ -293,11 +293,11 @@
|
|||
min-height: 242px;
|
||||
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-bottom( 9px, 420px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-bottom( 9px, 420px, @colorGray10, 0px );
|
||||
}
|
||||
|
||||
&:after {
|
||||
.mwe-popups-border-pokey-bottom( 8px, 417px, #fff, 4px );
|
||||
.mwe-popups-border-pointer-bottom( 8px, 417px, #fff, 4px );
|
||||
}
|
||||
|
||||
> div > a > svg {
|
||||
|
|
@ -312,11 +312,11 @@
|
|||
|
||||
&.flipped-y {
|
||||
&:before {
|
||||
.mwe-popups-border-pokey-bottom( 8px, 10px, @colorGray10, 0px );
|
||||
.mwe-popups-border-pointer-bottom( 8px, 10px, @colorGray10, 0px );
|
||||
}
|
||||
|
||||
&:after {
|
||||
.mwe-popups-border-pokey-bottom( 7px, 7px, #fff, 4px );
|
||||
.mwe-popups-border-pointer-bottom( 7px, 7px, #fff, 4px );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ QUnit.module( 'ext.popups#renderer', {
|
|||
}
|
||||
} );
|
||||
|
||||
QUnit.test( 'createPokeyMasks', ( assert ) => {
|
||||
QUnit.test( 'createPointerMasks', ( assert ) => {
|
||||
const $container = $( '<div>' ),
|
||||
cases = [
|
||||
[ 'clippath#mwe-popups-mask polygon', '0 8, 10 8, 18 0, 26 8, 1000 8, 1000 1000, 0 1000' ],
|
||||
|
|
@ -79,7 +79,7 @@ QUnit.test( 'createPokeyMasks', ( assert ) => {
|
|||
[ 'clippath#mwe-popups-landscape-mask-flip polygon', '0 0, 1000 0, 1000 242, 190 242, 182 250, 174 242, 0 242' ]
|
||||
];
|
||||
|
||||
renderer.createPokeyMasks( $container.get( 0 ) );
|
||||
renderer.createPointerMasks( $container.get( 0 ) );
|
||||
|
||||
cases.forEach( ( case_ ) => {
|
||||
assert.equal(
|
||||
|
|
@ -465,12 +465,12 @@ QUnit.test( '#createLayout - portrait preview, mouse event, link is on the top l
|
|||
width: 1239,
|
||||
height: 827
|
||||
},
|
||||
pokeySize = 8;
|
||||
pointerSize = 8;
|
||||
|
||||
const cases = [ { dir: 'ltr' }, { dir: 'rtl' } ];
|
||||
cases.forEach( ( { dir } ) => {
|
||||
const layout = renderer.createLayout(
|
||||
isPreviewTall, eventData, linkData, windowData, pokeySize, dir
|
||||
isPreviewTall, eventData, linkData, windowData, pointerSize, dir
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
|
|
@ -517,12 +517,12 @@ QUnit.test( '#createLayout - tall preview, mouse event, link is on the bottom ce
|
|||
width: 587,
|
||||
height: 827
|
||||
},
|
||||
pokeySize = 8;
|
||||
pointerSize = 8;
|
||||
|
||||
const cases = [ { dir: 'ltr' }, { dir: 'rtl' } ];
|
||||
cases.forEach( ( { dir } ) => {
|
||||
const layout = renderer.createLayout(
|
||||
isPreviewTall, eventData, linkData, windowData, pokeySize, dir
|
||||
isPreviewTall, eventData, linkData, windowData, pointerSize, dir
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
|
|
@ -565,12 +565,12 @@ QUnit.test( '#createLayout - empty preview, keyboard event, link is on the cente
|
|||
width: 801,
|
||||
height: 827
|
||||
},
|
||||
pokeySize = 8;
|
||||
pointerSize = 8;
|
||||
|
||||
const cases = [ { dir: 'ltr' }, { dir: 'rtl' } ];
|
||||
cases.forEach( ( { dir } ) => {
|
||||
const layout = renderer.createLayout(
|
||||
isPreviewTall, eventData, linkData, windowData, pokeySize, dir
|
||||
isPreviewTall, eventData, linkData, windowData, pointerSize, dir
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
|
|
@ -603,7 +603,7 @@ QUnit.test( '#getClasses when no thumbnail is available', ( assert ) => {
|
|||
},
|
||||
[
|
||||
'mwe-popups-fade-in-up',
|
||||
'mwe-popups-no-image-pokey',
|
||||
'mwe-popups-no-image-pointer',
|
||||
'mwe-popups-is-not-tall'
|
||||
],
|
||||
'No flip.'
|
||||
|
|
@ -636,7 +636,7 @@ QUnit.test( '#getClasses when no thumbnail is available', ( assert ) => {
|
|||
[
|
||||
'mwe-popups-fade-in-up',
|
||||
'flipped-x',
|
||||
'mwe-popups-no-image-pokey',
|
||||
'mwe-popups-no-image-pointer',
|
||||
'mwe-popups-is-not-tall'
|
||||
],
|
||||
'X flipped.'
|
||||
|
|
@ -680,7 +680,7 @@ QUnit.test( '#getClasses when a non-tall thumbnail is available', ( assert ) =>
|
|||
},
|
||||
[
|
||||
'mwe-popups-fade-in-up',
|
||||
'mwe-popups-image-pokey',
|
||||
'mwe-popups-image-pointer',
|
||||
'mwe-popups-is-not-tall'
|
||||
],
|
||||
'No flip.'
|
||||
|
|
@ -713,7 +713,7 @@ QUnit.test( '#getClasses when a non-tall thumbnail is available', ( assert ) =>
|
|||
[
|
||||
'mwe-popups-fade-in-up',
|
||||
'flipped-x',
|
||||
'mwe-popups-image-pokey',
|
||||
'mwe-popups-image-pointer',
|
||||
'mwe-popups-is-not-tall'
|
||||
],
|
||||
'X flipped.'
|
||||
|
|
@ -758,7 +758,7 @@ QUnit.test( '#getClasses when a tall thumbnail is available', ( assert ) => {
|
|||
},
|
||||
[
|
||||
'mwe-popups-fade-in-up',
|
||||
'mwe-popups-no-image-pokey',
|
||||
'mwe-popups-no-image-pointer',
|
||||
'mwe-popups-is-tall'
|
||||
],
|
||||
'No flip.'
|
||||
|
|
@ -887,7 +887,7 @@ QUnit.test( '#layoutPreview - tall preview, flipped X, has thumbnail', function
|
|||
'Left is correct.'
|
||||
);
|
||||
assert.notOk(
|
||||
preview.el.hasClass( 'mwe-popups-no-image-pokey' ),
|
||||
preview.el.hasClass( 'mwe-popups-no-image-pointer' ),
|
||||
'A class has been removed.'
|
||||
);
|
||||
assert.equal(
|
||||
|
|
@ -932,7 +932,7 @@ QUnit.test( '#layoutPreview - portrait preview, flipped X, has thumbnail, small
|
|||
);
|
||||
assert.equal(
|
||||
preview.el.find( '.mwe-popups-extract' ).css( 'margin-top' ),
|
||||
`${ 199 - 8 }px`, // thumb height - pokey size
|
||||
`${ 199 - 8 }px`, // thumb height - pointer size
|
||||
'Extract margin top has been set when preview height is smaller than the predefined landscape image height.'
|
||||
);
|
||||
assert.equal(
|
||||
|
|
|
|||
Loading…
Reference in a new issue