From 20f4119f26c8af78b75b48fbcb8294279caa5c28 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 5 Jun 2024 15:49:14 -0400 Subject: [PATCH 01/15] Popup position based on width --- src/index.js | 8 ++------ src/utils.js | 3 +-- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index c0745494..6dd4df5c 100644 --- a/src/index.js +++ b/src/index.js @@ -194,12 +194,8 @@ function init( { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), ( node ) => { - if ( isTouch ) { - node.addEventListener( 'click', showPopup ) - } else { - node.addEventListener( 'mouseenter', showPopup ) - } - + node.addEventListener( 'touch', showPopup ) + node.addEventListener( 'mouseenter', showPopup ) foundSelectorLinks.push( { text: node.textContent, title: node.getAttribute( 'data-wp-title' ) || node.textContent, diff --git a/src/utils.js b/src/utils.js index 5c950906..de0bdd1c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -41,8 +41,7 @@ const getWikipediaAttrFromUrl = ( url ) => { return null } -const isTouch = 'ontouchstart' in window || ( navigator.maxTouchPoints > 0 ) || - ( navigator.msMaxTouchPoints > 0 ) +const isTouch = !!window.matchMedia( '( max-width: 768px )' ).matches const isOnline = () => window.navigator.onLine From ad2867ca956e22eaddedf9059d6f146e56798080 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 5 Jun 2024 16:05:46 -0400 Subject: [PATCH 02/15] Fix tests --- test/setup.js | 8 ++++++++ vite.config.js | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 test/setup.js diff --git a/test/setup.js b/test/setup.js new file mode 100644 index 00000000..4f7d79af --- /dev/null +++ b/test/setup.js @@ -0,0 +1,8 @@ +import { vi } from 'vitest' +/* global window */ +Object.defineProperty( window, 'matchMedia', { + writable: true, + value: vi.fn().mockImplementation( () => ( { + matches: true + } ) ) +} ) diff --git a/vite.config.js b/vite.config.js index fe471de2..529ae5af 100644 --- a/vite.config.js +++ b/vite.config.js @@ -41,6 +41,7 @@ export default defineConfig({ }, test: { globals: true, - environment: 'jsdom' + environment: 'jsdom', + setupFiles: [ './test/setup.js' ], } }) From f4e1208f0029bf2fcf93f08e9812d92f14fcf811 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Tue, 11 Jun 2024 11:25:24 -0400 Subject: [PATCH 03/15] Split isTouch and isMobile --- .gitignore | 1 + src/event.js | 2 +- src/index.js | 12 +++++------- src/preview.js | 14 +++++++------- src/utils.js | 12 ++++++++++-- style/preview.less | 5 +++++ 6 files changed, 29 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 105b065a..d1f115e4 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules/ .DS_Store storybook-static coverage/ +cypress/screenshots diff --git a/src/event.js b/src/event.js index 98aeb9b3..d4757c10 100644 --- a/src/event.js +++ b/src/event.js @@ -203,7 +203,7 @@ export const customEvents = ( popup ) => { if ( isTouch ) { const darkScreen = document.querySelector( '.wp-dark-screen' ) - addEventListener( darkScreen, 'click', popup.hide, true ) + addEventListener( darkScreen, 'touch', popup.hide, true ) applyDragEvent( element ) } else { addEventListener( element, 'mouseleave', onMouseLeave ) diff --git a/src/index.js b/src/index.js index 6dd4df5c..a52140f5 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import { createTouchPopup } from './touchPopup' import { renderPreview, renderLoading, renderError, renderDisambiguation, renderOffline } from './preview' import { getWikipediaAttrFromUrl, buildWikipediaUrl, isTouch, getDir, isOnline, - version, getAnalyticsQueryParam, getElement + version, getAnalyticsQueryParam, getElement, isMobile } from './utils' const invokeCallback = ( events, name, params ) => { @@ -74,7 +74,7 @@ function init( { } ) { popupContainer = getElement( popupContainer ) || document.body const globalLang = lang - const popup = isTouch ? + const popup = isMobile ? createTouchPopup( popupContainer ) : createPopup( popupContainer ) const popupEvents = customEvents( popup ) @@ -85,6 +85,7 @@ function init( { const showPopup = ( e, refresh = false ) => { e.preventDefault() + e.stopPropagation() const popupId = Date.now() const { currentTarget } = refresh ? last : e @@ -214,11 +215,8 @@ function init( { if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) - if ( isTouch ) { - node.addEventListener( 'click', showPopup ) - } else { - node.addEventListener( 'mouseenter', showPopup ) - } + node.addEventListener( 'touch', showPopup ) + node.addEventListener( 'mouseenter', showPopup ) foundDetectLinks.push( { text: node.textContent, diff --git a/src/preview.js b/src/preview.js index a1b25cd9..0473e158 100644 --- a/src/preview.js +++ b/src/preview.js @@ -2,12 +2,12 @@ import { msg } from './i18n' import { buildWikipediaUrl } from './utils' import '../style/preview.less' -const getPreviewHeader = ( lang, isTouch, imageUrl = '' ) => { +const getPreviewHeader = ( lang, imageUrl = '' ) => { return `
${ imageUrl ? `
` : '' }
- ${ isTouch ? '
' : '' } +
`.trim() } @@ -60,7 +60,7 @@ const renderPreview = ( lang, data, isTouch, prefersColorScheme ) => { lang, isTouch, data.dir, - getPreviewHeader( lang, isTouch, imageUrl ), + getPreviewHeader( lang, imageUrl ), bodyContent, prefersColorScheme ) @@ -83,28 +83,28 @@ const renderLoading = ( isTouch, lang, dir, prefersColorScheme ) => {
`.trim() - return render( lang, isTouch, dir, getPreviewHeader( lang, isTouch ), bodyContent, prefersColorScheme ) + return render( lang, isTouch, dir, getPreviewHeader( lang ), bodyContent, prefersColorScheme ) } const renderError = ( isTouch, lang, title, dir, prefersColorScheme ) => { const message = `${ msg( lang, 'preview-error-message' ) }` const cta = getReadOnWikiCta( lang, title, isTouch ) - return render( lang, isTouch, dir, getPreviewHeader( lang, isTouch ), getPreviewBody( 'error', message, cta ), prefersColorScheme ) + return render( lang, isTouch, dir, getPreviewHeader( lang ), getPreviewBody( 'error', message, cta ), prefersColorScheme ) } const renderDisambiguation = ( isTouch, lang, title, dir, prefersColorScheme ) => { const message = `${ msg( lang, 'preview-disambiguation-message', title ) }` const cta = getReadOnWikiCta( lang, title, isTouch ) - return render( lang, isTouch, dir, getPreviewHeader( lang, isTouch ), getPreviewBody( 'disambiguation', message, cta ), prefersColorScheme ) + return render( lang, isTouch, dir, getPreviewHeader( lang ), getPreviewBody( 'disambiguation', message, cta ), prefersColorScheme ) } const renderOffline = ( isTouch, lang, dir, prefersColorScheme ) => { const message = `${ msg( lang, 'preview-offline-message' ) }` const cta = `${ msg( lang, 'preview-offline-cta' ) }` - return render( lang, isTouch, dir, getPreviewHeader( lang, isTouch ), getPreviewBody( 'offline', message, cta ), prefersColorScheme ) + return render( lang, isTouch, dir, getPreviewHeader( lang ), getPreviewBody( 'offline', message, cta ), prefersColorScheme ) } export { renderPreview, renderLoading, renderError, renderDisambiguation, renderOffline } diff --git a/src/utils.js b/src/utils.js index de0bdd1c..ca6c8f6f 100644 --- a/src/utils.js +++ b/src/utils.js @@ -41,7 +41,15 @@ const getWikipediaAttrFromUrl = ( url ) => { return null } -const isTouch = !!window.matchMedia( '( max-width: 768px )' ).matches +/** + * Check if the device is a mobile device + */ +const isMobile = !!window.matchMedia( '( max-width: 768px )' ).matches + +/** + * Check if the device is a touch device + */ +const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 const isOnline = () => window.navigator.onLine @@ -111,5 +119,5 @@ const getElement = ( nodeOrSelector ) => { export { getWikipediaAttrFromUrl, isTouch, isOnline, getDir, buildMwApiUrl, convertUrlToMobile, strip, sanitizeHTML, getDeviceSize, getAnalyticsQueryParam, - buildWikipediaUrl, version, logError, getElement + buildWikipediaUrl, version, logError, getElement, isMobile } diff --git a/style/preview.less b/style/preview.less index fd3bc270..1e4d99f4 100644 --- a/style/preview.less +++ b/style/preview.less @@ -70,6 +70,7 @@ } &-closebtn { + display: none; background-image: url( '../images/close.svg' ); background-repeat: no-repeat; background-position: center; @@ -289,6 +290,10 @@ &.mobile { width: 100%; + + .wikipediapreview-header-closebtn { + display: block; + } } &.mobile.expanded { From 4ed6bc003b2b577ef614ca5b278006881a5c17fd Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 12 Jun 2024 15:57:57 -0400 Subject: [PATCH 04/15] Use isMobile for layout purposes --- src/event.js | 10 +++++----- src/index.js | 20 ++++++++++---------- src/preview.js | 34 +++++++++++++++++----------------- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/event.js b/src/event.js index d4757c10..e31d797a 100644 --- a/src/event.js +++ b/src/event.js @@ -1,4 +1,4 @@ -import { isTouch } from './utils' +import { isMobile } from './utils' import { getGalleryRow } from './gallery' import { requestPageMedia } from './api' @@ -82,7 +82,7 @@ export const customEvents = ( popup ) => { popup.element.component.wikipediapreview.classList.add( 'expanded' ) - if ( !isTouch ) { + if ( !isMobile ) { setPreviewMaxHeight( maxHeight ) } @@ -188,12 +188,12 @@ export const customEvents = ( popup ) => { element.component.content.getBoundingClientRect().height < 248 ) { onExpand( element ) } else { - if ( !isTouch ) { + if ( !isMobile ) { setPreviewMaxHeight( 248 ) } } - if ( isTouch ) { + if ( isMobile ) { addEventListener( element.component.closeBtn, 'click', popup.hide ) } @@ -201,7 +201,7 @@ export const customEvents = ( popup ) => { addEventListener( element.component.readMore, 'click', onExpand ) } - if ( isTouch ) { + if ( isMobile ) { const darkScreen = document.querySelector( '.wp-dark-screen' ) addEventListener( darkScreen, 'touch', popup.hide, true ) applyDragEvent( element ) diff --git a/src/index.js b/src/index.js index a52140f5..76ee2917 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import { createPopup } from './popup' import { createTouchPopup } from './touchPopup' import { renderPreview, renderLoading, renderError, renderDisambiguation, renderOffline } from './preview' import { - getWikipediaAttrFromUrl, buildWikipediaUrl, isTouch, getDir, isOnline, + getWikipediaAttrFromUrl, buildWikipediaUrl, getDir, isOnline, version, getAnalyticsQueryParam, getElement, isMobile } from './utils' @@ -23,7 +23,7 @@ const invokeCallback = ( events, name, params ) => { // getPreviewHtml is meant to be used by the Wordpress plugin only const getPreviewHtml = ( title, lang, callback ) => { requestPagePreview( lang, title, ( data ) => { - callback( renderPreview( lang, data, isTouch ) ) + callback( renderPreview( lang, data, isMobile ) ) } ) } @@ -108,7 +108,7 @@ function init( { popup.loading = true popup.dir = dir popup.show( - renderLoading( isTouch, localLang, dir, currentColorScheme ), + renderLoading( isMobile, localLang, dir, currentColorScheme ), currentTarget, pointerPosition ) @@ -124,17 +124,17 @@ function init( { popup.title = title if ( data.type === 'standard' ) { popup.show( - renderPreview( localLang, data, isTouch, currentColorScheme ), + renderPreview( localLang, data, isMobile, currentColorScheme ), currentTarget, pointerPosition ) invokeCallback( events, 'onShow', [ title, localLang, 'standard' ] ) } else if ( data.type === 'disambiguation' ) { const content = data.extractHtml ? - renderPreview( localLang, data, isTouch, currentColorScheme ) : + renderPreview( localLang, data, isMobile, currentColorScheme ) : // fallback message when no extract is found on disambiguation page renderDisambiguation( - isTouch, + isMobile, localLang, data.title, data.dir, @@ -150,14 +150,14 @@ function init( { } else { if ( isOnline() ) { popup.show( - renderError( isTouch, localLang, title, dir, currentColorScheme ), + renderError( isMobile, localLang, title, dir, currentColorScheme ), currentTarget, pointerPosition ) invokeCallback( events, 'onShow', [ title, localLang, 'error' ] ) } else { popup.show( - renderOffline( isTouch, localLang, dir, currentColorScheme ), + renderOffline( isMobile, localLang, dir, currentColorScheme ), currentTarget, pointerPosition ) @@ -234,13 +234,13 @@ function init( { console.group( 'Wikipedia Preview [debug mode]' ) console.group( `Searching for "${ selector }" inside ${ root }, Total links found: ${ foundSelectorLinks.length }` ) foundSelectorLinks.forEach( ( link, index ) => { - console.log( index + 1, `${ link.text } -> ${ decodeURI( buildWikipediaUrl( link.lang, link.title, isTouch, false ) ) }` ) + console.log( index + 1, `${ link.text } -> ${ decodeURI( buildWikipediaUrl( link.lang, link.title, isMobile, false ) ) }` ) } ) console.groupEnd() if ( detectLinks ) { console.group( `Searching for links to Wikipedia, Total links found: ${ foundDetectLinks.length }` ) foundDetectLinks.forEach( ( link, index ) => { - console.log( index + 1, `${ link.text } -> ${ decodeURI( buildWikipediaUrl( link.lang, link.title, isTouch, false ) ) }` ) + console.log( index + 1, `${ link.text } -> ${ decodeURI( buildWikipediaUrl( link.lang, link.title, isMobile, false ) ) }` ) } ) console.groupEnd() } diff --git a/src/preview.js b/src/preview.js index 0473e158..caaf96e4 100644 --- a/src/preview.js +++ b/src/preview.js @@ -26,23 +26,23 @@ const getPreviewBody = ( type, message, cta ) => { `.trim() } -const getReadOnWikiCta = ( lang, title, isTouch ) => { - return `${ msg( lang, 'read-on-wiki' ) }` +const getReadOnWikiCta = ( lang, title, isMobile ) => { + return `${ msg( lang, 'read-on-wiki' ) }` } const render = ( - lang, isTouch, dir, headerContent, bodyContent, prefersColorScheme + lang, isMobile, dir, headerContent, bodyContent, prefersColorScheme ) => { const colorScheme = prefersColorScheme === 'detect' ? '' : `wikipediapreview-${ prefersColorScheme }-theme` return ` -
+
${ headerContent } ${ bodyContent }
`.trim() } -const renderPreview = ( lang, data, isTouch, prefersColorScheme ) => { +const renderPreview = ( lang, data, isMobile, prefersColorScheme ) => { const imageUrl = data.imgUrl, bodyContent = `
@@ -52,13 +52,13 @@ const renderPreview = ( lang, data, isTouch, prefersColorScheme ) => {
${ msg( lang, 'continue-reading' ) } - ${ msg( lang, 'read-more' ) } + ${ msg( lang, 'read-more' ) }
`.trim() return render( lang, - isTouch, + isMobile, data.dir, getPreviewHeader( lang, imageUrl ), bodyContent, @@ -66,7 +66,7 @@ const renderPreview = ( lang, data, isTouch, prefersColorScheme ) => { ) } -const renderLoading = ( isTouch, lang, dir, prefersColorScheme ) => { +const renderLoading = ( isMobile, lang, dir, prefersColorScheme ) => { const bodyContent = `
@@ -83,28 +83,28 @@ const renderLoading = ( isTouch, lang, dir, prefersColorScheme ) => {
`.trim() - return render( lang, isTouch, dir, getPreviewHeader( lang ), bodyContent, prefersColorScheme ) + return render( lang, isMobile, dir, getPreviewHeader( lang ), bodyContent, prefersColorScheme ) } -const renderError = ( isTouch, lang, title, dir, prefersColorScheme ) => { +const renderError = ( isMobile, lang, title, dir, prefersColorScheme ) => { const message = `${ msg( lang, 'preview-error-message' ) }` - const cta = getReadOnWikiCta( lang, title, isTouch ) + const cta = getReadOnWikiCta( lang, title, isMobile ) - return render( lang, isTouch, dir, getPreviewHeader( lang ), getPreviewBody( 'error', message, cta ), prefersColorScheme ) + return render( lang, isMobile, dir, getPreviewHeader( lang ), getPreviewBody( 'error', message, cta ), prefersColorScheme ) } -const renderDisambiguation = ( isTouch, lang, title, dir, prefersColorScheme ) => { +const renderDisambiguation = ( isMobile, lang, title, dir, prefersColorScheme ) => { const message = `${ msg( lang, 'preview-disambiguation-message', title ) }` - const cta = getReadOnWikiCta( lang, title, isTouch ) + const cta = getReadOnWikiCta( lang, title, isMobile ) - return render( lang, isTouch, dir, getPreviewHeader( lang ), getPreviewBody( 'disambiguation', message, cta ), prefersColorScheme ) + return render( lang, isMobile, dir, getPreviewHeader( lang ), getPreviewBody( 'disambiguation', message, cta ), prefersColorScheme ) } -const renderOffline = ( isTouch, lang, dir, prefersColorScheme ) => { +const renderOffline = ( isMobile, lang, dir, prefersColorScheme ) => { const message = `${ msg( lang, 'preview-offline-message' ) }` const cta = `${ msg( lang, 'preview-offline-cta' ) }` - return render( lang, isTouch, dir, getPreviewHeader( lang ), getPreviewBody( 'offline', message, cta ), prefersColorScheme ) + return render( lang, isMobile, dir, getPreviewHeader( lang ), getPreviewBody( 'offline', message, cta ), prefersColorScheme ) } export { renderPreview, renderLoading, renderError, renderDisambiguation, renderOffline } From c0c7485bb883c319c4fd7276a37d25f01f7f43ce Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 12 Jun 2024 16:15:42 -0400 Subject: [PATCH 05/15] fix merge --- src/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/preview.js b/src/preview.js index c8581a93..5e3fe616 100644 --- a/src/preview.js +++ b/src/preview.js @@ -49,7 +49,7 @@ const renderPreview = ( lang, data, isMobile, prefersColorScheme ) => { ${ data.extractHtml }
- ${ msg( lang, 'read-more' ) } From eedbc6e5184dedc5ce6586bb07b966f0bb095ec1 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Thu, 13 Jun 2024 13:33:37 -0400 Subject: [PATCH 06/15] Only register one event type --- src/event.js | 4 ++-- src/index.js | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/event.js b/src/event.js index e9ef4806..db3711cf 100644 --- a/src/event.js +++ b/src/event.js @@ -92,13 +92,13 @@ export const customEvents = ( popup ) => { appendGalleryRow() } - if ( isMobile ) { + if ( element.component.closeBtn ) { addEventListener( element.component.closeBtn, 'click', popup.hide ) } if ( isMobile ) { const darkScreen = document.querySelector( '.wp-dark-screen' ) - addEventListener( darkScreen, 'touch', popup.hide, true ) + addEventListener( darkScreen, 'click', popup.hide, true ) } else { addEventListener( element, 'mouseleave', onMouseLeave ) addEventListener( element.currentTargetElement, 'mouseleave', onMouseLeave ) diff --git a/src/index.js b/src/index.js index 76ee2917..5f6a8646 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import { createTouchPopup } from './touchPopup' import { renderPreview, renderLoading, renderError, renderDisambiguation, renderOffline } from './preview' import { getWikipediaAttrFromUrl, buildWikipediaUrl, getDir, isOnline, - version, getAnalyticsQueryParam, getElement, isMobile + version, getAnalyticsQueryParam, getElement, isMobile, isTouch } from './utils' const invokeCallback = ( events, name, params ) => { @@ -191,12 +191,12 @@ function init( { popup.subscribe( popupEvents ) + const eventName = isTouch ? 'click' : 'mouseenter' forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), ( node ) => { - node.addEventListener( 'touch', showPopup ) - node.addEventListener( 'mouseenter', showPopup ) + node.addEventListener( eventName, showPopup ) foundSelectorLinks.push( { text: node.textContent, title: node.getAttribute( 'data-wp-title' ) || node.textContent, @@ -215,8 +215,7 @@ function init( { if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) - node.addEventListener( 'touch', showPopup ) - node.addEventListener( 'mouseenter', showPopup ) + node.addEventListener( eventName, showPopup ) foundDetectLinks.push( { text: node.textContent, From 255caa3085b94bedf64abc77fcabb3a4f353203c Mon Sep 17 00:00:00 2001 From: Sbisson Date: Fri, 14 Jun 2024 09:14:56 -0400 Subject: [PATCH 07/15] distinguish tap from click --- src/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 5f6a8646..63cacef3 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import { createTouchPopup } from './touchPopup' import { renderPreview, renderLoading, renderError, renderDisambiguation, renderOffline } from './preview' import { getWikipediaAttrFromUrl, buildWikipediaUrl, getDir, isOnline, - version, getAnalyticsQueryParam, getElement, isMobile, isTouch + version, getAnalyticsQueryParam, getElement, isMobile } from './utils' const invokeCallback = ( events, name, params ) => { @@ -189,14 +189,20 @@ function init( { } ) } + const onClick = ( e ) => { + if ( e.pointerType === 'touch' ) { + showPopup( e ) + } + } + popup.subscribe( popupEvents ) - const eventName = isTouch ? 'click' : 'mouseenter' forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), ( node ) => { - node.addEventListener( eventName, showPopup ) + node.addEventListener( 'mouseenter', showPopup ) + node.addEventListener( 'click', onClick ) foundSelectorLinks.push( { text: node.textContent, title: node.getAttribute( 'data-wp-title' ) || node.textContent, @@ -215,7 +221,8 @@ function init( { if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) - node.addEventListener( eventName, showPopup ) + node.addEventListener( 'mouseenter', showPopup ) + node.addEventListener( 'click', onClick ) foundDetectLinks.push( { text: node.textContent, From eec848c6d7494daa98f774eaeb7d8b4a1f44a776 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Fri, 14 Jun 2024 10:51:02 -0400 Subject: [PATCH 08/15] Use mouseenter on mobile too --- cypress/e2e/mobile-gallery.cy.js | 4 ++-- cypress/e2e/mobile-layout.cy.js | 8 ++++---- cypress/e2e/mobile-swipe.cy.js | 4 ++-- src/event.js | 5 ++++- src/index.js | 21 ++++++++++++++------- 5 files changed, 26 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/mobile-gallery.cy.js b/cypress/e2e/mobile-gallery.cy.js index d03138be..cdb93e36 100644 --- a/cypress/e2e/mobile-gallery.cy.js +++ b/cypress/e2e/mobile-gallery.cy.js @@ -12,7 +12,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Clicking on Image', () => { // Open the Preview - preview.getPreviewSpan().first().click() + preview.getPreviewSpan().first().trigger( 'mouseenter' ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { @@ -34,7 +34,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Swiping', () => { // Open the Preview - preview.getPreviewSpan().first().click() + preview.getPreviewSpan().first().trigger( 'mouseenter' ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { diff --git a/cypress/e2e/mobile-layout.cy.js b/cypress/e2e/mobile-layout.cy.js index d43c3c59..e8813603 100644 --- a/cypress/e2e/mobile-layout.cy.js +++ b/cypress/e2e/mobile-layout.cy.js @@ -11,7 +11,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Standard Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 0 ).click() + preview.getPreviewSpan().eq( 0 ).trigger( 'mouseenter' ) // Checks the preview cy.wait( 1000 ) preview.checkMobilePreview() @@ -24,7 +24,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it.skip( 'Check the Wikipedia Preview in Offline Layout', () => { goOffline() // Opens Mobile Preview - preview.getPreviewSpan().first().click() + preview.getPreviewSpan().first().trigger( 'mouseenter' ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewOffline() @@ -36,7 +36,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Error Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 1 ).click() + preview.getPreviewSpan().eq( 1 ).trigger( 'mouseenter' ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewError() @@ -47,7 +47,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Disambiguation Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 2 ).click() + preview.getPreviewSpan().eq( 2 ).trigger( 'mouseenter' ) // Checks the preview preview.checkMobilePreview() preview.checkPreview() diff --git a/cypress/e2e/mobile-swipe.cy.js b/cypress/e2e/mobile-swipe.cy.js index 1e3a7494..cc13c6bc 100644 --- a/cypress/e2e/mobile-swipe.cy.js +++ b/cypress/e2e/mobile-swipe.cy.js @@ -12,7 +12,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Scrollable of Gallery in Expanded Mode', () => { // Open the Preview - preview.getPreviewSpan().eq( 4 ).click() + preview.getPreviewSpan().eq( 4 ).trigger( 'mouseenter' ) preview.getHeaderImage().its( 'length' ).then( () => { // Get the Images in View preview.getBodyGallery().scrollIntoView().should( 'be.visible' ) @@ -27,7 +27,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Image Caption Scrollable', () => { // Open the Preview - preview.getPreviewSpan().eq( 4 ).click() + preview.getPreviewSpan().eq( 4 ).trigger( 'mouseenter' ) const i = 1 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { diff --git a/src/event.js b/src/event.js index db3711cf..f4b6b24c 100644 --- a/src/event.js +++ b/src/event.js @@ -98,7 +98,10 @@ export const customEvents = ( popup ) => { if ( isMobile ) { const darkScreen = document.querySelector( '.wp-dark-screen' ) - addEventListener( darkScreen, 'click', popup.hide, true ) + addEventListener( darkScreen, 'mouseenter', ( e ) => { + console.log( 'darkScreen', e ) // eslint-disable-line no-console + popup.hide() + }, true ) } else { addEventListener( element, 'mouseleave', onMouseLeave ) addEventListener( element.currentTargetElement, 'mouseleave', onMouseLeave ) diff --git a/src/index.js b/src/index.js index 63cacef3..9ff374be 100644 --- a/src/index.js +++ b/src/index.js @@ -84,6 +84,7 @@ function init( { currentColorScheme = prefersColorScheme const showPopup = ( e, refresh = false ) => { + console.log( 'showPopup', e ) // eslint-disable-line no-console e.preventDefault() e.stopPropagation() @@ -189,20 +190,24 @@ function init( { } ) } - const onClick = ( e ) => { + const onMouseEnter = ( e ) => { + console.log( 'target mouseenter', e ) // eslint-disable-line no-console + showPopup( e ) + } + + const onClick = ( e ) => { // eslint-disable-line no-unused-vars + console.log( 'target click', e ) // eslint-disable-line no-console if ( e.pointerType === 'touch' ) { showPopup( e ) } } - popup.subscribe( popupEvents ) - forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), ( node ) => { - node.addEventListener( 'mouseenter', showPopup ) - node.addEventListener( 'click', onClick ) + node.addEventListener( 'mouseenter', onMouseEnter ) + // node.addEventListener( 'click', onClick, true ) foundSelectorLinks.push( { text: node.textContent, title: node.getAttribute( 'data-wp-title' ) || node.textContent, @@ -221,8 +226,8 @@ function init( { if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) - node.addEventListener( 'mouseenter', showPopup ) - node.addEventListener( 'click', onClick ) + node.addEventListener( 'mouseenter', onMouseEnter ) + // node.addEventListener( 'click', onClick, true ) foundDetectLinks.push( { text: node.textContent, @@ -235,6 +240,8 @@ function init( { } ) } + popup.subscribe( popupEvents ) + if ( debug ) { /* eslint-disable no-console */ console.group( 'Wikipedia Preview [debug mode]' ) From 5290d72423231d02e5ff26f815a92eeada533c6d Mon Sep 17 00:00:00 2001 From: Sbisson Date: Fri, 14 Jun 2024 15:34:45 -0400 Subject: [PATCH 09/15] Cleanup --- src/event.js | 5 +---- src/index.js | 18 ++---------------- 2 files changed, 3 insertions(+), 20 deletions(-) diff --git a/src/event.js b/src/event.js index f4b6b24c..db3711cf 100644 --- a/src/event.js +++ b/src/event.js @@ -98,10 +98,7 @@ export const customEvents = ( popup ) => { if ( isMobile ) { const darkScreen = document.querySelector( '.wp-dark-screen' ) - addEventListener( darkScreen, 'mouseenter', ( e ) => { - console.log( 'darkScreen', e ) // eslint-disable-line no-console - popup.hide() - }, true ) + addEventListener( darkScreen, 'click', popup.hide, true ) } else { addEventListener( element, 'mouseleave', onMouseLeave ) addEventListener( element.currentTargetElement, 'mouseleave', onMouseLeave ) diff --git a/src/index.js b/src/index.js index 9ff374be..093c3bd7 100644 --- a/src/index.js +++ b/src/index.js @@ -190,24 +190,11 @@ function init( { } ) } - const onMouseEnter = ( e ) => { - console.log( 'target mouseenter', e ) // eslint-disable-line no-console - showPopup( e ) - } - - const onClick = ( e ) => { // eslint-disable-line no-unused-vars - console.log( 'target click', e ) // eslint-disable-line no-console - if ( e.pointerType === 'touch' ) { - showPopup( e ) - } - } - forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), ( node ) => { - node.addEventListener( 'mouseenter', onMouseEnter ) - // node.addEventListener( 'click', onClick, true ) + node.addEventListener( 'mouseenter', showPopup ) foundSelectorLinks.push( { text: node.textContent, title: node.getAttribute( 'data-wp-title' ) || node.textContent, @@ -226,8 +213,7 @@ function init( { if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) - node.addEventListener( 'mouseenter', onMouseEnter ) - // node.addEventListener( 'click', onClick, true ) + node.addEventListener( 'mouseenter', showPopup ) foundDetectLinks.push( { text: node.textContent, From db1599364ceffb65a84d58768f414733a25dba30 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Mon, 17 Jun 2024 15:17:37 -0400 Subject: [PATCH 10/15] Tap on links should not navigate --- src/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 093c3bd7..fab833e8 100644 --- a/src/index.js +++ b/src/index.js @@ -84,7 +84,6 @@ function init( { currentColorScheme = prefersColorScheme const showPopup = ( e, refresh = false ) => { - console.log( 'showPopup', e ) // eslint-disable-line no-console e.preventDefault() e.stopPropagation() @@ -215,6 +214,12 @@ function init( { node.setAttribute( 'data-wp-lang', matches.lang ) node.addEventListener( 'mouseenter', showPopup ) + node.addEventListener( 'click', ( e ) => { + if ( e.pointerType === 'touch' ) { + e.preventDefault() + } + } ) + foundDetectLinks.push( { text: node.textContent, title: matches.title, From d6a23d919b0e2a16bc3140354b40a9c29ba103fe Mon Sep 17 00:00:00 2001 From: Sbisson Date: Tue, 18 Jun 2024 12:03:13 -0400 Subject: [PATCH 11/15] Use click and pointerenter instead of mouseenter --- cypress/e2e/active.cy.js | 5 ++++- cypress/e2e/mobile-gallery.cy.js | 4 ++-- cypress/e2e/mobile-layout.cy.js | 8 ++++---- cypress/e2e/mobile-swipe.cy.js | 4 ++-- src/index.js | 29 +++++++++++++++++++++-------- 5 files changed, 33 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/active.cy.js b/cypress/e2e/active.cy.js index 84646162..ac56d2eb 100644 --- a/cypress/e2e/active.cy.js +++ b/cypress/e2e/active.cy.js @@ -10,7 +10,10 @@ describe( 'Check the Hover and Click Event', () => { it( 'Check the Preview by hovering over the Span and then leaving', () => { - preview.getPreviewSpan().first().trigger( 'mouseenter', 'right' ) + preview.getPreviewSpan().first().trigger( 'pointerenter', { + position: 'right', + pointerType: 'mouse' + } ) preview.checkPreview() diff --git a/cypress/e2e/mobile-gallery.cy.js b/cypress/e2e/mobile-gallery.cy.js index cdb93e36..ff5174ea 100644 --- a/cypress/e2e/mobile-gallery.cy.js +++ b/cypress/e2e/mobile-gallery.cy.js @@ -12,7 +12,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Clicking on Image', () => { // Open the Preview - preview.getPreviewSpan().first().trigger( 'mouseenter' ) + preview.getPreviewSpan().first().trigger( 'click', { pointerType: 'touch' } ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { @@ -34,7 +34,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Swiping', () => { // Open the Preview - preview.getPreviewSpan().first().trigger( 'mouseenter' ) + preview.getPreviewSpan().first().trigger( 'click', { pointerType: 'touch' } ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { diff --git a/cypress/e2e/mobile-layout.cy.js b/cypress/e2e/mobile-layout.cy.js index e8813603..e9fa2701 100644 --- a/cypress/e2e/mobile-layout.cy.js +++ b/cypress/e2e/mobile-layout.cy.js @@ -11,7 +11,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Standard Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 0 ).trigger( 'mouseenter' ) + preview.getPreviewSpan().eq( 0 ).trigger( 'click', { pointerType: 'touch' } ) // Checks the preview cy.wait( 1000 ) preview.checkMobilePreview() @@ -24,7 +24,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it.skip( 'Check the Wikipedia Preview in Offline Layout', () => { goOffline() // Opens Mobile Preview - preview.getPreviewSpan().first().trigger( 'mouseenter' ) + preview.getPreviewSpan().first().trigger( 'click', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewOffline() @@ -36,7 +36,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Error Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 1 ).trigger( 'mouseenter' ) + preview.getPreviewSpan().eq( 1 ).trigger( 'click', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewError() @@ -47,7 +47,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Disambiguation Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 2 ).trigger( 'mouseenter' ) + preview.getPreviewSpan().eq( 2 ).trigger( 'click', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreview() diff --git a/cypress/e2e/mobile-swipe.cy.js b/cypress/e2e/mobile-swipe.cy.js index cc13c6bc..1e3a7494 100644 --- a/cypress/e2e/mobile-swipe.cy.js +++ b/cypress/e2e/mobile-swipe.cy.js @@ -12,7 +12,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Scrollable of Gallery in Expanded Mode', () => { // Open the Preview - preview.getPreviewSpan().eq( 4 ).trigger( 'mouseenter' ) + preview.getPreviewSpan().eq( 4 ).click() preview.getHeaderImage().its( 'length' ).then( () => { // Get the Images in View preview.getBodyGallery().scrollIntoView().should( 'be.visible' ) @@ -27,7 +27,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Image Caption Scrollable', () => { // Open the Preview - preview.getPreviewSpan().eq( 4 ).trigger( 'mouseenter' ) + preview.getPreviewSpan().eq( 4 ).click() const i = 1 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { diff --git a/src/index.js b/src/index.js index fab833e8..2c6e0af7 100644 --- a/src/index.js +++ b/src/index.js @@ -189,11 +189,30 @@ function init( { } ) } + const onClick = ( pointerEvent ) => { + if ( pointerEvent.pointerType === 'touch' ) { + // This click event was triggered on a touch screen + showPopup( pointerEvent ) + } + } + + const onPointerEnter = ( pointerEvent ) => { + if ( pointerEvent.pointerType === 'mouse' ) { + // This hover event was triggered by a mouse + showPopup( pointerEvent ) + } + } + + const registerPreviewEvents = ( node ) => { + node.addEventListener( 'click', onClick ) + node.addEventListener( 'pointerenter', onPointerEnter ) + } + forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), ( node ) => { - node.addEventListener( 'mouseenter', showPopup ) + registerPreviewEvents( node ) foundSelectorLinks.push( { text: node.textContent, title: node.getAttribute( 'data-wp-title' ) || node.textContent, @@ -212,13 +231,7 @@ function init( { if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) - node.addEventListener( 'mouseenter', showPopup ) - - node.addEventListener( 'click', ( e ) => { - if ( e.pointerType === 'touch' ) { - e.preventDefault() - } - } ) + registerPreviewEvents( node ) foundDetectLinks.push( { text: node.textContent, From 1f26678daf26ec98d7a2b714dfbd174fd7ef4d0c Mon Sep 17 00:00:00 2001 From: Sbisson Date: Thu, 20 Jun 2024 13:00:45 -0400 Subject: [PATCH 12/15] Use pointerup instead of click --- cypress/e2e/mobile-gallery.cy.js | 4 ++-- cypress/e2e/mobile-layout.cy.js | 8 ++++---- src/event.js | 2 +- src/index.js | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/cypress/e2e/mobile-gallery.cy.js b/cypress/e2e/mobile-gallery.cy.js index ff5174ea..b62a52c8 100644 --- a/cypress/e2e/mobile-gallery.cy.js +++ b/cypress/e2e/mobile-gallery.cy.js @@ -12,7 +12,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Clicking on Image', () => { // Open the Preview - preview.getPreviewSpan().first().trigger( 'click', { pointerType: 'touch' } ) + preview.getPreviewSpan().first().trigger( 'pointerup', { pointerType: 'touch' } ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { @@ -34,7 +34,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Swiping', () => { // Open the Preview - preview.getPreviewSpan().first().trigger( 'click', { pointerType: 'touch' } ) + preview.getPreviewSpan().first().trigger( 'pointerup', { pointerType: 'touch' } ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { diff --git a/cypress/e2e/mobile-layout.cy.js b/cypress/e2e/mobile-layout.cy.js index e9fa2701..8c83dfc9 100644 --- a/cypress/e2e/mobile-layout.cy.js +++ b/cypress/e2e/mobile-layout.cy.js @@ -11,7 +11,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Standard Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 0 ).trigger( 'click', { pointerType: 'touch' } ) + preview.getPreviewSpan().eq( 0 ).trigger( 'pointerup', { pointerType: 'touch' } ) // Checks the preview cy.wait( 1000 ) preview.checkMobilePreview() @@ -24,7 +24,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it.skip( 'Check the Wikipedia Preview in Offline Layout', () => { goOffline() // Opens Mobile Preview - preview.getPreviewSpan().first().trigger( 'click', { pointerType: 'touch' } ) + preview.getPreviewSpan().first().trigger( 'pointerup', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewOffline() @@ -36,7 +36,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Error Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 1 ).trigger( 'click', { pointerType: 'touch' } ) + preview.getPreviewSpan().eq( 1 ).trigger( 'pointerup', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewError() @@ -47,7 +47,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Disambiguation Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 2 ).trigger( 'click', { pointerType: 'touch' } ) + preview.getPreviewSpan().eq( 2 ).trigger( 'pointerup', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreview() diff --git a/src/event.js b/src/event.js index db3711cf..da67d3cd 100644 --- a/src/event.js +++ b/src/event.js @@ -98,7 +98,7 @@ export const customEvents = ( popup ) => { if ( isMobile ) { const darkScreen = document.querySelector( '.wp-dark-screen' ) - addEventListener( darkScreen, 'click', popup.hide, true ) + addEventListener( darkScreen, 'pointerup', popup.hide, true ) } else { addEventListener( element, 'mouseleave', onMouseLeave ) addEventListener( element.currentTargetElement, 'mouseleave', onMouseLeave ) diff --git a/src/index.js b/src/index.js index 2c6e0af7..b969dced 100644 --- a/src/index.js +++ b/src/index.js @@ -189,7 +189,7 @@ function init( { } ) } - const onClick = ( pointerEvent ) => { + const onPointerUp = ( pointerEvent ) => { if ( pointerEvent.pointerType === 'touch' ) { // This click event was triggered on a touch screen showPopup( pointerEvent ) @@ -204,7 +204,7 @@ function init( { } const registerPreviewEvents = ( node ) => { - node.addEventListener( 'click', onClick ) + node.addEventListener( 'pointerup', onPointerUp ) node.addEventListener( 'pointerenter', onPointerEnter ) } From ee172ed2ac86cd38df7d656c8d924ad3950ec920 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Thu, 18 Jul 2024 14:16:47 -0400 Subject: [PATCH 13/15] Actively prevent navigation on preview links --- src/index.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 19c5a669..e6272d40 100644 --- a/src/index.js +++ b/src/index.js @@ -190,25 +190,29 @@ function init( { } ) } - const onPointerUp = ( pointerEvent ) => { - if ( pointerEvent.pointerType === 'touch' ) { - // This click event was triggered on a touch screen - showPopup( pointerEvent ) - } - } - const onPointerEnter = ( pointerEvent ) => { - if ( pointerEvent.pointerType === 'mouse' ) { - // This hover event was triggered by a mouse - showPopup( pointerEvent ) - } + showPopup( pointerEvent ) } const registerPreviewEvents = ( node ) => { - node.addEventListener( 'pointerup', onPointerUp ) node.addEventListener( 'pointerenter', onPointerEnter ) } + const preventTapFromNavigatingLink = ( node ) => { + // The click event still receives a MouseEvent instead of the newer PointerEvent + // in some browsers so we have to grab the pointerType from the preceding pointerdown event. + let currentPointerType = null + node.addEventListener( 'pointerdown', ( e ) => { + currentPointerType = e.pointerType + } ) + node.addEventListener( 'click', ( e ) => { + if ( currentPointerType === 'touch' ) { + e.preventDefault() + e.stopPropagation() + } + } ) + } + forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), @@ -233,6 +237,7 @@ function init( { node.setAttribute( 'data-wp-title', matches.title ) node.setAttribute( 'data-wp-lang', matches.lang ) registerPreviewEvents( node ) + preventTapFromNavigatingLink( node ) foundDetectLinks.push( { text: node.textContent, From cdb93afd1ea3e9bcb37de99b12c8dea2689922d6 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Thu, 18 Jul 2024 14:20:21 -0400 Subject: [PATCH 14/15] CI: use node@21 --- .github/workflows/main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 1edbc0a0..bc31c481 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -14,7 +14,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node: [ 17, 'latest' ] + node: [ 21 ] steps: - uses: actions/checkout@v4 From cdd8259b3cf482c4ec5c466ecf7823901cb4617b Mon Sep 17 00:00:00 2001 From: Sbisson Date: Thu, 18 Jul 2024 14:37:40 -0400 Subject: [PATCH 15/15] Fix cypress tests --- cypress/e2e/mobile-gallery.cy.js | 2 +- cypress/e2e/mobile-layout.cy.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/mobile-gallery.cy.js b/cypress/e2e/mobile-gallery.cy.js index 8e14ce74..b4f2dd79 100644 --- a/cypress/e2e/mobile-gallery.cy.js +++ b/cypress/e2e/mobile-gallery.cy.js @@ -12,7 +12,7 @@ describe( 'Check the Gallery Pages in Mobile View', () => { it( 'Check the Gallery Pages Movement by Swiping', () => { // Open the Preview - preview.getPreviewSpan().first().trigger( 'pointerup', { pointerType: 'touch' } ) + preview.getPreviewSpan().first().trigger( 'pointerenter', { pointerType: 'touch' } ) const i = 0 // Check if the Images exist preview.getBodyGalleryImages().its( 'length' ).then( () => { diff --git a/cypress/e2e/mobile-layout.cy.js b/cypress/e2e/mobile-layout.cy.js index 296510d8..6a2db1b4 100644 --- a/cypress/e2e/mobile-layout.cy.js +++ b/cypress/e2e/mobile-layout.cy.js @@ -11,7 +11,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Standard Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 0 ).trigger( 'pointerup', { pointerType: 'touch' } ) + preview.getPreviewSpan().eq( 0 ).trigger( 'pointerenter', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreview() @@ -23,7 +23,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it.skip( 'Check the Wikipedia Preview in Offline Layout', () => { goOffline() // Opens Mobile Preview - preview.getPreviewSpan().first().trigger( 'pointerup', { pointerType: 'touch' } ) + preview.getPreviewSpan().first().trigger( 'pointerenter', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewOffline() @@ -35,7 +35,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Error Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 1 ).trigger( 'pointerup', { pointerType: 'touch' } ) + preview.getPreviewSpan().eq( 1 ).trigger( 'pointerenter', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreviewError() @@ -46,7 +46,7 @@ describe( 'Check the different Layout in Mobile Wikipedia Preview ', () => { it( 'Check the Wikipedia Preview in Disambiguation Layout', () => { // Opens Mobile Preview - preview.getPreviewSpan().eq( 2 ).trigger( 'pointerup', { pointerType: 'touch' } ) + preview.getPreviewSpan().eq( 2 ).trigger( 'pointerenter', { pointerType: 'touch' } ) // Checks the preview preview.checkMobilePreview() preview.checkPreview()