From 8adb699e97888444b79bd2636042f97ca0e767de Mon Sep 17 00:00:00 2001 From: Sbisson Date: Tue, 7 Nov 2023 13:50:12 -0500 Subject: [PATCH 1/7] Support multiple roots --- src/index.js | 104 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 69 insertions(+), 35 deletions(-) diff --git a/src/index.js b/src/index.js index b658ee5c..6e83ab01 100644 --- a/src/index.js +++ b/src/index.js @@ -24,6 +24,36 @@ const getPreviewHtml = ( title, lang, callback ) => { } ) } +const forEachRoot = ( rootConfig, callback ) => { + let roots = [] + // rootConfig can be a selector (String) + if ( + typeof rootConfig === 'string' || + rootConfig instanceof String + ) { + Array.prototype.forEach.call( + document.querySelectorAll( rootConfig ), + node => { roots.push( node ) } + ) + } + + // rootConfig can be a node (Document or Element) + if ( rootConfig instanceof Document || rootConfig instanceof Element ) { + roots.push( rootConfig ) + } + + // rootConfig can be a list of nodes (Element[]) + if ( Array.isArray( rootConfig ) ) { + rootConfig.forEach( r => { + if ( r instanceof Element ) { + roots.push( r ) + } + } ) + } + + roots.forEach( root => callback( root ) ) +} + let currentPopupId function init( { @@ -108,7 +138,7 @@ function init( { pointerPosition ) invokeCallback( events, 'onShow', [ title, localLang, 'offline' ] ) - const again = root.querySelector( '.wikipediapreview-body-action' ) + const again = document.querySelector( '.wikipediapreview-body-action' ) last.lang = localLang last.title = title last.pointerPosition = pointerPosition @@ -137,45 +167,49 @@ function init( { popup.subscribe( popupEvents ) - Array.prototype.forEach.call( - root.querySelectorAll( selector ), - node => { - if ( isTouch ) { - node.addEventListener( 'click', showPopup ) - } else { - node.addEventListener( 'mouseenter', showPopup ) - } - - foundSelectorLinks.push( { - text: node.textContent, - title: node.getAttribute( 'data-wp-title' ) || node.textContent, - lang: node.getAttribute( 'data-wp-lang' ) || globalLang - } ) - } - ) - - if ( detectLinks ) { + forEachRoot( root, localRoot => { Array.prototype.forEach.call( - root.querySelectorAll( 'a' ), + localRoot.querySelectorAll( selector ), node => { - const matches = getWikipediaAttrFromUrl( node.getAttribute( 'href' ) ) - 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 ) - } - - foundDetectLinks.push( { - text: node.textContent, - title: matches.title, - lang: matches.lang - } ) + if ( isTouch ) { + node.addEventListener( 'click', showPopup ) + } else { + node.addEventListener( 'mouseenter', showPopup ) } + + foundSelectorLinks.push( { + text: node.textContent, + title: node.getAttribute( 'data-wp-title' ) || node.textContent, + lang: node.getAttribute( 'data-wp-lang' ) || globalLang + } ) } ) + } ) + + if ( detectLinks ) { + forEachRoot( root, localRoot => { + Array.prototype.forEach.call( + localRoot.querySelectorAll( 'a' ), + node => { + const matches = getWikipediaAttrFromUrl( node.getAttribute( 'href' ) ) + 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 ) + } + + foundDetectLinks.push( { + text: node.textContent, + title: matches.title, + lang: matches.lang + } ) + } + } + ) + } ) } if ( debug ) { From e58a879ebf858befc551d99c29b592543041d42d Mon Sep 17 00:00:00 2001 From: Sbisson Date: Tue, 7 Nov 2023 13:52:13 -0500 Subject: [PATCH 2/7] Update docs --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ac7bec89..f6298394 100644 --- a/README.md +++ b/README.md @@ -69,8 +69,8 @@ The `init` function accepts the following options: Name | Type | Default | Description --- | --- | --- | --- -root | DOM Element | `document` | Where to look for elements that should have the popup -selector | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified +root | string|Element|Element[] | `document` | Where to look for elements that should have the popup +selector. Can be a selector to locate the root, a DOM Element, or an array of Elements | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified lang | string | `'en'` | Default Wikipedia language popupContainer | DOM Element | `document.body` | Where to put the popup in the DOM detectLinks | Boolean | `false` | Allow Wikipedia hyperlinks to have the popup From 4f4746051119452f01bb2590a2b1b79eda9b7335 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 6 Dec 2023 14:13:58 -0500 Subject: [PATCH 3/7] Fix style --- src/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index 660eedb5..a3c07254 100644 --- a/src/index.js +++ b/src/index.js @@ -25,7 +25,7 @@ const getPreviewHtml = ( title, lang, callback ) => { } const forEachRoot = ( rootConfig, callback ) => { - let roots = [] + const roots = [] // rootConfig can be a selector (String) if ( typeof rootConfig === 'string' || @@ -33,7 +33,7 @@ const forEachRoot = ( rootConfig, callback ) => { ) { Array.prototype.forEach.call( document.querySelectorAll( rootConfig ), - node => { roots.push( node ) } + ( node ) => { roots.push( node ) } ) } @@ -44,14 +44,14 @@ const forEachRoot = ( rootConfig, callback ) => { // rootConfig can be a list of nodes (Element[]) if ( Array.isArray( rootConfig ) ) { - rootConfig.forEach( r => { + rootConfig.forEach( ( r ) => { if ( r instanceof Element ) { roots.push( r ) } } ) } - roots.forEach( root => callback( root ) ) + roots.forEach( ( root ) => callback( root ) ) } let currentPopupId @@ -167,10 +167,10 @@ function init( { popup.subscribe( popupEvents ) - forEachRoot( root, localRoot => { + forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( selector ), - node => { + ( node ) => { if ( isTouch ) { node.addEventListener( 'click', showPopup ) } else { @@ -187,10 +187,10 @@ function init( { } ) if ( detectLinks ) { - forEachRoot( root, localRoot => { + forEachRoot( root, ( localRoot ) => { Array.prototype.forEach.call( localRoot.querySelectorAll( 'a' ), - node => { + ( node ) => { const matches = getWikipediaAttrFromUrl( node.getAttribute( 'href' ) ) if ( matches ) { node.setAttribute( 'data-wp-title', matches.title ) From 4c6412541d00d6cc8942e25c40d6159678291e02 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 6 Dec 2023 14:18:21 -0500 Subject: [PATCH 4/7] Update 1 demo page to use new 'multiple roots' feature --- demo/articles/french.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/demo/articles/french.html b/demo/articles/french.html index 82bf47a4..f565e31e 100644 --- a/demo/articles/french.html +++ b/demo/articles/french.html @@ -55,6 +55,8 @@ From 20c9bddb7bda952b46fc076bd59a7d2f2ffba18c Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 6 Dec 2023 15:47:24 -0500 Subject: [PATCH 5/7] Separate possible types with , since | messes up the markdown table --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 83984e7f..7154ef81 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ The `init` function accepts the following options: Name | Type | Default | Description --- | --- | --- | --- -root | string|Element|Element[] | `document` | Where to look for elements that should have the popup +root | string,Element,Element[] | `document` | Where to look for elements that should have the popup selector. Can be a selector to locate the root, a DOM Element, or an array of Elements | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified lang | string | `'en'` | Default Wikipedia language popupContainer | DOM Element | `document.body` | Where to put the popup in the DOM From 25188552d10f768ff4407d6a6d962c20a4e4dd65 Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 6 Dec 2023 15:48:29 -0500 Subject: [PATCH 6/7] Avoid line break in markdown table --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 7154ef81..cff66945 100644 --- a/README.md +++ b/README.md @@ -69,8 +69,7 @@ The `init` function accepts the following options: Name | Type | Default | Description --- | --- | --- | --- -root | string,Element,Element[] | `document` | Where to look for elements that should have the popup -selector. Can be a selector to locate the root, a DOM Element, or an array of Elements | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified +root | string,Element,Element[] | `document` | Where to look for elements that should have the popup selector. Can be a selector to locate the root, a DOM Element, or an array of Elements | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified lang | string | `'en'` | Default Wikipedia language popupContainer | DOM Element | `document.body` | Where to put the popup in the DOM detectLinks | Boolean | `false` | Allow Wikipedia hyperlinks to have the popup From 1d14b80e16b4e27de58179e170f8f96e1caf620d Mon Sep 17 00:00:00 2001 From: Sbisson Date: Wed, 6 Dec 2023 15:51:26 -0500 Subject: [PATCH 7/7] Trying to fix the table --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cff66945..ee5e759a 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,8 @@ The `init` function accepts the following options: Name | Type | Default | Description --- | --- | --- | --- -root | string,Element,Element[] | `document` | Where to look for elements that should have the popup selector. Can be a selector to locate the root, a DOM Element, or an array of Elements | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified +root | string,Element,Element[] | `document` | Where to look for elements that should have the popup selector. Can be a selector to locate the root, a DOM Element, or an array of Elements +selector | string | `'[data-wikipedia-preview]'` | How nodes that should have the popup are identified lang | string | `'en'` | Default Wikipedia language popupContainer | DOM Element | `document.body` | Where to put the popup in the DOM detectLinks | Boolean | `false` | Allow Wikipedia hyperlinks to have the popup