From d7871bb9c4565d9e7678c90fe9dd0659680e596a Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Thu, 26 Apr 2018 08:25:55 -0500 Subject: [PATCH] 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 --- resources/dist/index.js | Bin 36825 -> 36833 bytes resources/dist/index.js.json | Bin 179846 -> 179911 bytes src/ui/{pokey-mask.svg => pointer-mask.svg} | 0 src/ui/renderer.js | 54 ++++++++++---------- src/ui/templates/popup.less | 38 +++++++------- tests/node-qunit/ui/renderer.test.js | 30 +++++------ 6 files changed, 61 insertions(+), 61 deletions(-) rename src/ui/{pokey-mask.svg => pointer-mask.svg} (100%) diff --git a/resources/dist/index.js b/resources/dist/index.js index 46b7254f0621578c7a0984bc038c81cb8e1c3684..407d3673e6620b629a94529dc7804e38ea832a29 100644 GIT binary patch delta 52 tcmcaPpXuRzrVV@TSu^uWQj0bpuxAs7Fejf3a)k;C1}j-XnP$CX%j{$vrQ(;hp~L~$Bad6I>|b& zjuuWqI>C;P!Ol9~j$t7>o{o-YPR>9oJk8P}0HjFt_V=F}@N(C>GytIG=G96I9^dLdGRfb*+mS&vGI8 zD!3pqIaQ%3wK%n?EHya&wfTfs1n`-jFtZY+hW}n delta 499 zcmX^9m#ghB*9KcI=IqqU%}!i*1wf3+D$+V&flz4^MlhpKCd-Ghc=OMUMQl2eIwRVnIP_Vo|X|Nxni- zszP#Ui9&v9Nlc!C)^v+@#!QfRrY~z}Y-dvl09i2Iq=V5KELhUPco596>SQzmGYUHy zBfyMvos5+r#&(}B##bU>mi2tbgG^va#zl-v*nyJ4nN_LN`4=&YZ$G+-aT7R1r`N1y zlmjc8zn1YNSYPfs#MX)%$' ) .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(