diff --git a/resources/dist/index.js b/resources/dist/index.js index 46b7254f0..407d3673e 100644 Binary files a/resources/dist/index.js and b/resources/dist/index.js differ diff --git a/resources/dist/index.js.json b/resources/dist/index.js.json index 09944d2e0..d2a017093 100644 Binary files a/resources/dist/index.js.json and b/resources/dist/index.js.json differ diff --git a/src/ui/pokey-mask.svg b/src/ui/pointer-mask.svg similarity index 100% rename from src/ui/pokey-mask.svg rename to src/ui/pointer-mask.svg diff --git a/src/ui/renderer.js b/src/ui/renderer.js index 2d57114f1..79c342f9c 100644 --- a/src/ui/renderer.js +++ b/src/ui/renderer.js @@ -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 ) { $( '
' ) .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 diff --git a/src/ui/templates/popup.less b/src/ui/templates/popup.less index 5eef3e6e9..0aa512b0c 100644 --- a/src/ui/templates/popup.less +++ b/src/ui/templates/popup.less @@ -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 ); } } } diff --git a/tests/node-qunit/ui/renderer.test.js b/tests/node-qunit/ui/renderer.test.js index 7670ac07c..f6cd01057 100644 --- a/tests/node-qunit/ui/renderer.test.js +++ b/tests/node-qunit/ui/renderer.test.js @@ -70,7 +70,7 @@ QUnit.module( 'ext.popups#renderer', { } } ); -QUnit.test( 'createPokeyMasks', ( assert ) => { +QUnit.test( 'createPointerMasks', ( assert ) => { const $container = $( '
' ), 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(