From edb0c48cd73a0935a06d30f86e8dc65310c051f8 Mon Sep 17 00:00:00 2001 From: eamedina Date: Thu, 7 Mar 2024 12:33:11 -0400 Subject: [PATCH 01/16] Initialize prefersColorScheme --- src/init.js | 6 ++++++ src/link/utils.js | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/src/init.js b/src/init.js index 81bd888..02f236e 100644 --- a/src/init.js +++ b/src/init.js @@ -1,6 +1,12 @@ /* global wikipediapreview_init_options */ +import { getColorScheme } from './link/utils'; + +// TODO: support multiple color scheme checks +// const colorScheme = getColorScheme() || wikipediapreview_init_options.prefersColorScheme + wikipediaPreview.init( { root: document, /* eslint-disable-next-line camelcase */ detectLinks: !! wikipediapreview_init_options.detectLinks, + prefersColorScheme: getColorScheme() } ); diff --git a/src/link/utils.js b/src/link/utils.js index 2e4d703..b6e4f2f 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -11,3 +11,11 @@ export const isTextNearTheEdge = ( anchor ) => { ( scrollWidth - anchorXPosition.right ) / scrollWidth < 0.2 ); }; + +export const getColorScheme = () => { + if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) { + return 'dark'; + } + + return 'detect'; +}; From 86131a1f311127ab7bbf486c348c7e5abd14cbb7 Mon Sep 17 00:00:00 2001 From: eamedina Date: Mon, 11 Mar 2024 12:30:05 -0400 Subject: [PATCH 02/16] Add post meta dark setting --- src/init.js | 5 ++--- src/link/utils.js | 8 ++++++-- src/postmeta/wp-postmeta-detectlinks.js | 12 ++++++++++++ wikipediapreview.php | 15 +++++++++++++++ 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/init.js b/src/init.js index 02f236e..04f6cd8 100644 --- a/src/init.js +++ b/src/init.js @@ -1,12 +1,11 @@ /* global wikipediapreview_init_options */ import { getColorScheme } from './link/utils'; -// TODO: support multiple color scheme checks -// const colorScheme = getColorScheme() || wikipediapreview_init_options.prefersColorScheme +const colorScheme = getColorScheme( !! wikipediapreview_init_options.darkmode ); wikipediaPreview.init( { root: document, /* eslint-disable-next-line camelcase */ detectLinks: !! wikipediapreview_init_options.detectLinks, - prefersColorScheme: getColorScheme() + prefersColorScheme: colorScheme, } ); diff --git a/src/link/utils.js b/src/link/utils.js index b6e4f2f..0d58b1a 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -12,8 +12,12 @@ export const isTextNearTheEdge = ( anchor ) => { ); }; -export const getColorScheme = () => { - if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) { +export const getColorScheme = ( userSetPostMeta ) => { + // TODO: add extra check for document.body.style background color? + if ( + window.matchMedia( '(prefers-color-scheme: dark)' ).matches || + userSetPostMeta + ) { return 'dark'; } diff --git a/src/postmeta/wp-postmeta-detectlinks.js b/src/postmeta/wp-postmeta-detectlinks.js index e449ae5..fc2cf11 100644 --- a/src/postmeta/wp-postmeta-detectlinks.js +++ b/src/postmeta/wp-postmeta-detectlinks.js @@ -27,6 +27,18 @@ const WikipediaPreviewPostMetaDetectLinks = ( { postMeta, setPostMeta } ) => { checked={ postMeta.wikipediapreview_detectlinks } /> + + + setPostMeta( { wikipediapreview_darkmode: value } ) + } + checked={ postMeta.wikipediapreview_darkmode } + /> + ); }; diff --git a/wikipediapreview.php b/wikipediapreview.php index 830b569..874dea3 100644 --- a/wikipediapreview.php +++ b/wikipediapreview.php @@ -64,6 +64,7 @@ function wikipediapreview_enqueue_scripts() { if ( isset( $post->ID ) ) { $options = array( 'detectLinks' => get_post_meta( $post->ID, 'wikipediapreview_detectlinks', true ), + 'darkmode' => get_post_meta( $post->ID, 'wikipediapreview_darkmode', true ), ); wp_localize_script( 'wikipedia-preview-init', 'wikipediapreview_init_options', $options ); } @@ -141,6 +142,19 @@ function register_detectlinks_postmeta() { register_post_meta( $all_post_types, $meta_name, $options ); } +function register_darkmode_postmeta() { + $all_post_types = ''; + $meta_name = 'wikipediapreview_darkmode'; + $options = array( + 'show_in_rest' => true, + 'auth_callback' => true, + 'single' => true, + 'type' => 'boolean', + 'default' => true, // it could default to false when the gutenburg support is released + ); + register_post_meta( $all_post_types, $meta_name, $options ); +} + function make_link( $text, $url ) { return '' . $text . ''; } @@ -165,6 +179,7 @@ function add_meta_links( $links_array, $plugin_file_name, $plugin_data, $status add_action( 'enqueue_block_editor_assets', 'wikipediapreview_guten_enqueue' ); add_action( 'init', 'myguten_set_script_translations' ); add_action( 'init', 'register_detectlinks_postmeta' ); +add_action( 'init', 'register_darkmode_postmeta' ); require __DIR__ . '/banner.php'; require __DIR__ . '/intro.php'; From 09848b0bc7abdfe2b563351edee840d6742f4b2b Mon Sep 17 00:00:00 2001 From: eamedina Date: Mon, 11 Mar 2024 12:38:39 -0400 Subject: [PATCH 03/16] Address linter --- src/init.js | 7 +++---- src/link/utils.js | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/init.js b/src/init.js index 04f6cd8..27fefa3 100644 --- a/src/init.js +++ b/src/init.js @@ -1,11 +1,10 @@ /* global wikipediapreview_init_options */ import { getColorScheme } from './link/utils'; -const colorScheme = getColorScheme( !! wikipediapreview_init_options.darkmode ); - wikipediaPreview.init( { root: document, - /* eslint-disable-next-line camelcase */ + /* eslint-disable camelcase */ detectLinks: !! wikipediapreview_init_options.detectLinks, - prefersColorScheme: colorScheme, + prefersColorScheme: getColorScheme( !! wikipediapreview_init_options.darkmode ), + /* eslint-enable camelcase */ } ); diff --git a/src/link/utils.js b/src/link/utils.js index 0d58b1a..5ff436e 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -15,10 +15,10 @@ export const isTextNearTheEdge = ( anchor ) => { export const getColorScheme = ( userSetPostMeta ) => { // TODO: add extra check for document.body.style background color? if ( - window.matchMedia( '(prefers-color-scheme: dark)' ).matches || - userSetPostMeta + window.matchMedia( '(prefers-color-scheme: dark)' ).matches || + userSetPostMeta ) { - return 'dark'; + return 'dark'; } return 'detect'; From 5906d7b66f4d8df11de5af7290b9bff5b24e04fb Mon Sep 17 00:00:00 2001 From: eamedina Date: Mon, 11 Mar 2024 12:42:41 -0400 Subject: [PATCH 04/16] Fix indent --- src/link/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/link/utils.js b/src/link/utils.js index 5ff436e..52bd7ed 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -17,8 +17,8 @@ export const getColorScheme = ( userSetPostMeta ) => { if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || userSetPostMeta - ) { - return 'dark'; + ) { + return 'dark'; } return 'detect'; From babf95cdeaad837f5fb7321c25f3f2561cd4d216 Mon Sep 17 00:00:00 2001 From: eamedina Date: Mon, 11 Mar 2024 12:51:16 -0400 Subject: [PATCH 05/16] Fix double arrow alignment --- wikipediapreview.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wikipediapreview.php b/wikipediapreview.php index 874dea3..770ce84 100644 --- a/wikipediapreview.php +++ b/wikipediapreview.php @@ -64,7 +64,7 @@ function wikipediapreview_enqueue_scripts() { if ( isset( $post->ID ) ) { $options = array( 'detectLinks' => get_post_meta( $post->ID, 'wikipediapreview_detectlinks', true ), - 'darkmode' => get_post_meta( $post->ID, 'wikipediapreview_darkmode', true ), + 'darkmode' => get_post_meta( $post->ID, 'wikipediapreview_darkmode', true ), ); wp_localize_script( 'wikipedia-preview-init', 'wikipediapreview_init_options', $options ); } From f41f844b24c53b1727810111f8fcd7dc4cb81943 Mon Sep 17 00:00:00 2001 From: eamedina Date: Wed, 13 Mar 2024 20:52:32 -0400 Subject: [PATCH 06/16] Remove post meta dark setting --- src/init.js | 2 +- src/link/utils.js | 5 ++--- src/postmeta/wp-postmeta-detectlinks.js | 12 ------------ wikipediapreview.php | 14 -------------- 4 files changed, 3 insertions(+), 30 deletions(-) diff --git a/src/init.js b/src/init.js index 27fefa3..9aa86fe 100644 --- a/src/init.js +++ b/src/init.js @@ -5,6 +5,6 @@ wikipediaPreview.init( { root: document, /* eslint-disable camelcase */ detectLinks: !! wikipediapreview_init_options.detectLinks, - prefersColorScheme: getColorScheme( !! wikipediapreview_init_options.darkmode ), + prefersColorScheme: getColorScheme(), /* eslint-enable camelcase */ } ); diff --git a/src/link/utils.js b/src/link/utils.js index 52bd7ed..8d6d6ca 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -12,11 +12,10 @@ export const isTextNearTheEdge = ( anchor ) => { ); }; -export const getColorScheme = ( userSetPostMeta ) => { +export const getColorScheme = () => { // TODO: add extra check for document.body.style background color? if ( - window.matchMedia( '(prefers-color-scheme: dark)' ).matches || - userSetPostMeta + window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) { return 'dark'; } diff --git a/src/postmeta/wp-postmeta-detectlinks.js b/src/postmeta/wp-postmeta-detectlinks.js index fc2cf11..e449ae5 100644 --- a/src/postmeta/wp-postmeta-detectlinks.js +++ b/src/postmeta/wp-postmeta-detectlinks.js @@ -27,18 +27,6 @@ const WikipediaPreviewPostMetaDetectLinks = ( { postMeta, setPostMeta } ) => { checked={ postMeta.wikipediapreview_detectlinks } /> - - - setPostMeta( { wikipediapreview_darkmode: value } ) - } - checked={ postMeta.wikipediapreview_darkmode } - /> - ); }; diff --git a/wikipediapreview.php b/wikipediapreview.php index 770ce84..68b1889 100644 --- a/wikipediapreview.php +++ b/wikipediapreview.php @@ -64,7 +64,6 @@ function wikipediapreview_enqueue_scripts() { if ( isset( $post->ID ) ) { $options = array( 'detectLinks' => get_post_meta( $post->ID, 'wikipediapreview_detectlinks', true ), - 'darkmode' => get_post_meta( $post->ID, 'wikipediapreview_darkmode', true ), ); wp_localize_script( 'wikipedia-preview-init', 'wikipediapreview_init_options', $options ); } @@ -142,18 +141,6 @@ function register_detectlinks_postmeta() { register_post_meta( $all_post_types, $meta_name, $options ); } -function register_darkmode_postmeta() { - $all_post_types = ''; - $meta_name = 'wikipediapreview_darkmode'; - $options = array( - 'show_in_rest' => true, - 'auth_callback' => true, - 'single' => true, - 'type' => 'boolean', - 'default' => true, // it could default to false when the gutenburg support is released - ); - register_post_meta( $all_post_types, $meta_name, $options ); -} function make_link( $text, $url ) { return '' . $text . ''; @@ -179,7 +166,6 @@ function add_meta_links( $links_array, $plugin_file_name, $plugin_data, $status add_action( 'enqueue_block_editor_assets', 'wikipediapreview_guten_enqueue' ); add_action( 'init', 'myguten_set_script_translations' ); add_action( 'init', 'register_detectlinks_postmeta' ); -add_action( 'init', 'register_darkmode_postmeta' ); require __DIR__ . '/banner.php'; require __DIR__ . '/intro.php'; From a8e072d9615c9aa9c7249e0be67a447d46cc3279 Mon Sep 17 00:00:00 2001 From: eamedina Date: Wed, 13 Mar 2024 21:15:10 -0400 Subject: [PATCH 07/16] Add mutation observer --- src/init.js | 36 +++++++++++++++++++++++++++--------- src/link/utils.js | 24 ++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/init.js b/src/init.js index 9aa86fe..919ed28 100644 --- a/src/init.js +++ b/src/init.js @@ -1,10 +1,28 @@ /* global wikipediapreview_init_options */ -import { getColorScheme } from './link/utils'; - -wikipediaPreview.init( { - root: document, - /* eslint-disable camelcase */ - detectLinks: !! wikipediapreview_init_options.detectLinks, - prefersColorScheme: getColorScheme(), - /* eslint-enable camelcase */ -} ); +import { getColorScheme, observeDarkModePluginActivation } from './link/utils'; + +wikipediaPreview.unload = () => { + // eslint-disable-next-line no-console + console.log( 'unload' ); + delete window.wikipediaPreview; +}; + +const init = ( colorScheme, reinit = false ) => { + // eslint-disable-next-line no-console + console.log( 'init - colorScheme, reinit', colorScheme, reinit ); + // if ( reinit ) { + // console.log('reinit'); + // wikipediaPreview.unload(); + // } + + wikipediaPreview.init( { + root: document, + /* eslint-disable camelcase */ + detectLinks: !! wikipediapreview_init_options.detectLinks, + prefersColorScheme: colorScheme, + /* eslint-enable camelcase */ + } ); +}; + +init( getColorScheme() ); +observeDarkModePluginActivation( init ); diff --git a/src/link/utils.js b/src/link/utils.js index 8d6d6ca..1d35089 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -22,3 +22,27 @@ export const getColorScheme = () => { return 'detect'; }; + +export const observeDarkModePluginActivation = ( callback ) => { + const htmlTag = document.documentElement; + + // eslint-disable-next-line no-undef + const observer = new MutationObserver( ( mutationsList ) => { + for ( const mutation of mutationsList ) { + if ( mutation.type === 'attributes' && mutation.attributeName === 'class' ) { + if ( htmlTag.classList.contains( 'wp-dark-mode-active' ) ) { + // eslint-disable-next-line no-console + console.log( 'Plugin dark mode enabled' ); + callback( 'dark', true ); + } else { + // eslint-disable-next-line no-console + console.log( 'Plugin dark mode disabled' ); + callback( 'light', true ); + } + } + } + } ); + + // Start observing changes in the body element + observer.observe( htmlTag, { attributes: true } ); +}; From 881c3f025919c17ae0748231f47a3830ef4fc7b4 Mon Sep 17 00:00:00 2001 From: eamedina Date: Mon, 18 Mar 2024 17:31:14 -0400 Subject: [PATCH 08/16] Add colorScheme.js --- src/init.js | 33 +++++------------- src/link/colorScheme.js | 77 +++++++++++++++++++++++++++++++++++++++++ src/link/utils.js | 35 ------------------- 3 files changed, 85 insertions(+), 60 deletions(-) create mode 100644 src/link/colorScheme.js diff --git a/src/init.js b/src/init.js index 919ed28..a48d3ce 100644 --- a/src/init.js +++ b/src/init.js @@ -1,28 +1,11 @@ /* global wikipediapreview_init_options */ -import { getColorScheme, observeDarkModePluginActivation } from './link/utils'; +import { getColorScheme, observeDarkModePluginActivation } from './link/colorScheme'; -wikipediaPreview.unload = () => { - // eslint-disable-next-line no-console - console.log( 'unload' ); - delete window.wikipediaPreview; -}; +wikipediaPreview.init( { + root: document, + /* eslint-disable-next-line camelcase */ + detectLinks: !! wikipediapreview_init_options.detectLinks, + prefersColorScheme: getColorScheme(), +} ); -const init = ( colorScheme, reinit = false ) => { - // eslint-disable-next-line no-console - console.log( 'init - colorScheme, reinit', colorScheme, reinit ); - // if ( reinit ) { - // console.log('reinit'); - // wikipediaPreview.unload(); - // } - - wikipediaPreview.init( { - root: document, - /* eslint-disable camelcase */ - detectLinks: !! wikipediapreview_init_options.detectLinks, - prefersColorScheme: colorScheme, - /* eslint-enable camelcase */ - } ); -}; - -init( getColorScheme() ); -observeDarkModePluginActivation( init ); +observeDarkModePluginActivation(); diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js new file mode 100644 index 0000000..6489fa5 --- /dev/null +++ b/src/link/colorScheme.js @@ -0,0 +1,77 @@ +import wikipediaPreview from 'wikipedia-preview'; + +const isWPDarkModePluginActive = () => { + const htmlTag = document.documentElement; + // TODO also need to check for attribute as well as class + // to correctly read on the first render if already in dark mode + return htmlTag.classList.contains( 'wp-dark-mode-active' ); +} + +export const getColorScheme = () => { + console.log('getColorScheme...'); + if ( + window.matchMedia( '(prefers-color-scheme: dark)' ).matches || + isWPDarkModePluginActive() + ) { + console.log('...dark detected'); + return 'dark'; + } + + return 'detect'; +}; + +const removePreviewPopup = () => { + console.log('removePreviewPopup...'); + const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); + if ( wikipediaPreviewPopup ) { + console.log('...removing popup'); + wikipediaPreviewPopup.remove(); + } +}; + +const reInitWikipediaPreview = ( scheme ) => { + console.log('reInitWikipediaPreview', scheme); + wikipediaPreview.init( { + root: document, + detectLinks: true, // TODO read from wikipediapreview_init_options + prefersColorScheme: scheme, + } ); +} + +// Another idea was updating the class directly to the preview div +// but classlist gets overwritten on render + +// const updateWikipediaPreviewColorScheme = ( scheme ) => { +// console.log('updateWikipediaPreviewColorScheme', scheme); +// const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); +// wikipediaPreviewPopup.children[0].classList.add('wikipediapreview-dark-theme'); + +// } + +export const observeDarkModePluginActivation = () => { + const htmlTag = document.documentElement; + + // eslint-disable-next-line no-undef + const observer = new MutationObserver( ( mutationsList ) => { + for ( const mutation of mutationsList ) { + if ( mutation.type === 'attributes' && mutation.attributeName === 'class' ) { + if ( htmlTag.classList.contains( 'wp-dark-mode-active' ) ) { + // eslint-disable-next-line no-console + console.log( 'Plugin dark mode enabled, try with detectLinks' ); + removePreviewPopup(); + reInitWikipediaPreview( 'dark' ); + // updateWikipediaPreviewColorScheme( 'dark'); + + } else { + // eslint-disable-next-line no-console + console.log( 'Plugin dark mode disabled' ); + removePreviewPopup(); + reInitWikipediaPreview( 'light' ); + } + } + } + } ); + + // Start observing changes in the body element + observer.observe( htmlTag, { attributes: true } ); +}; diff --git a/src/link/utils.js b/src/link/utils.js index 1d35089..2e4d703 100644 --- a/src/link/utils.js +++ b/src/link/utils.js @@ -11,38 +11,3 @@ export const isTextNearTheEdge = ( anchor ) => { ( scrollWidth - anchorXPosition.right ) / scrollWidth < 0.2 ); }; - -export const getColorScheme = () => { - // TODO: add extra check for document.body.style background color? - if ( - window.matchMedia( '(prefers-color-scheme: dark)' ).matches - ) { - return 'dark'; - } - - return 'detect'; -}; - -export const observeDarkModePluginActivation = ( callback ) => { - const htmlTag = document.documentElement; - - // eslint-disable-next-line no-undef - const observer = new MutationObserver( ( mutationsList ) => { - for ( const mutation of mutationsList ) { - if ( mutation.type === 'attributes' && mutation.attributeName === 'class' ) { - if ( htmlTag.classList.contains( 'wp-dark-mode-active' ) ) { - // eslint-disable-next-line no-console - console.log( 'Plugin dark mode enabled' ); - callback( 'dark', true ); - } else { - // eslint-disable-next-line no-console - console.log( 'Plugin dark mode disabled' ); - callback( 'light', true ); - } - } - } - } ); - - // Start observing changes in the body element - observer.observe( htmlTag, { attributes: true } ); -}; From b3d33e935f132c201de1f8786d00a6ea218afa0d Mon Sep 17 00:00:00 2001 From: eamedina Date: Mon, 18 Mar 2024 23:39:24 -0400 Subject: [PATCH 09/16] Blank line --- wikipediapreview.php | 1 - 1 file changed, 1 deletion(-) diff --git a/wikipediapreview.php b/wikipediapreview.php index 68b1889..830b569 100644 --- a/wikipediapreview.php +++ b/wikipediapreview.php @@ -141,7 +141,6 @@ function register_detectlinks_postmeta() { register_post_meta( $all_post_types, $meta_name, $options ); } - function make_link( $text, $url ) { return '' . $text . ''; } From 57f804672d9e3f00bd7376a7cff3512be7828e7e Mon Sep 17 00:00:00 2001 From: eamedina Date: Tue, 19 Mar 2024 09:34:37 -0400 Subject: [PATCH 10/16] Address linter --- src/link/colorScheme.js | 42 ++++++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index 6489fa5..7e0a1e5 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -1,19 +1,21 @@ import wikipediaPreview from 'wikipedia-preview'; const isWPDarkModePluginActive = () => { - const htmlTag = document.documentElement; - // TODO also need to check for attribute as well as class - // to correctly read on the first render if already in dark mode - return htmlTag.classList.contains( 'wp-dark-mode-active' ); -} + const htmlTag = document.documentElement; + // TODO also need to check for attribute as well as class + // to correctly read on the first render if already in dark mode + return htmlTag.classList.contains( 'wp-dark-mode-active' ); +}; export const getColorScheme = () => { - console.log('getColorScheme...'); - if ( + // eslint-disable-next-line no-console + console.log( 'getColorScheme...' ); + if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || isWPDarkModePluginActive() ) { - console.log('...dark detected'); + // eslint-disable-next-line no-console + console.log( '...dark detected' ); return 'dark'; } @@ -21,31 +23,34 @@ export const getColorScheme = () => { }; const removePreviewPopup = () => { - console.log('removePreviewPopup...'); - const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); - if ( wikipediaPreviewPopup ) { - console.log('...removing popup'); - wikipediaPreviewPopup.remove(); - } + // eslint-disable-next-line no-console + console.log( 'removePreviewPopup...' ); + const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); + if ( wikipediaPreviewPopup ) { + // eslint-disable-next-line no-console + console.log( '...removing popup' ); + wikipediaPreviewPopup.remove(); + } }; const reInitWikipediaPreview = ( scheme ) => { - console.log('reInitWikipediaPreview', scheme); + // eslint-disable-next-line no-console + console.log( 'reInitWikipediaPreview', scheme ); wikipediaPreview.init( { root: document, detectLinks: true, // TODO read from wikipediapreview_init_options prefersColorScheme: scheme, } ); -} +}; // Another idea was updating the class directly to the preview div // but classlist gets overwritten on render // const updateWikipediaPreviewColorScheme = ( scheme ) => { +// // eslint-disable-next-line no-console // console.log('updateWikipediaPreviewColorScheme', scheme); // const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); // wikipediaPreviewPopup.children[0].classList.add('wikipediapreview-dark-theme'); - // } export const observeDarkModePluginActivation = () => { @@ -60,8 +65,7 @@ export const observeDarkModePluginActivation = () => { console.log( 'Plugin dark mode enabled, try with detectLinks' ); removePreviewPopup(); reInitWikipediaPreview( 'dark' ); - // updateWikipediaPreviewColorScheme( 'dark'); - + // updateWikipediaPreviewColorScheme( 'dark'); } else { // eslint-disable-next-line no-console console.log( 'Plugin dark mode disabled' ); From 7b315f7b07c233d42c26c8581f0448eb2c0bccc2 Mon Sep 17 00:00:00 2001 From: eamedina Date: Tue, 19 Mar 2024 09:43:20 -0400 Subject: [PATCH 11/16] Address linter --- src/link/colorScheme.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index 7e0a1e5..29ac867 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -9,13 +9,13 @@ const isWPDarkModePluginActive = () => { export const getColorScheme = () => { // eslint-disable-next-line no-console - console.log( 'getColorScheme...' ); + console.log( 'getColorScheme...' ); if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || isWPDarkModePluginActive() ) { // eslint-disable-next-line no-console - console.log( '...dark detected' ); + console.log( '...dark detected' ); return 'dark'; } @@ -24,18 +24,18 @@ export const getColorScheme = () => { const removePreviewPopup = () => { // eslint-disable-next-line no-console - console.log( 'removePreviewPopup...' ); + console.log( 'removePreviewPopup...' ); const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); if ( wikipediaPreviewPopup ) { // eslint-disable-next-line no-console - console.log( '...removing popup' ); + console.log( '...removing popup' ); wikipediaPreviewPopup.remove(); } }; const reInitWikipediaPreview = ( scheme ) => { // eslint-disable-next-line no-console - console.log( 'reInitWikipediaPreview', scheme ); + console.log( 'reInitWikipediaPreview', scheme ); wikipediaPreview.init( { root: document, detectLinks: true, // TODO read from wikipediapreview_init_options From 3ac9a29b11567959e06429e3c56917a5a6373921 Mon Sep 17 00:00:00 2001 From: eamedina Date: Wed, 20 Mar 2024 12:17:01 -0400 Subject: [PATCH 12/16] Simplify and clean up --- src/init.js | 22 +++++++++----- src/link/colorScheme.js | 66 +++++------------------------------------ 2 files changed, 23 insertions(+), 65 deletions(-) diff --git a/src/init.js b/src/init.js index a48d3ce..a41068b 100644 --- a/src/init.js +++ b/src/init.js @@ -1,11 +1,19 @@ /* global wikipediapreview_init_options */ import { getColorScheme, observeDarkModePluginActivation } from './link/colorScheme'; -wikipediaPreview.init( { - root: document, - /* eslint-disable-next-line camelcase */ - detectLinks: !! wikipediapreview_init_options.detectLinks, - prefersColorScheme: getColorScheme(), -} ); +const init = ( scheme ) => { + wikipediaPreview.init( { + root: document, + /* eslint-disable-next-line camelcase */ + detectLinks: !! wikipediapreview_init_options.detectLinks, + prefersColorScheme: scheme, + } ); +}; + +// Initial init on first page load +init( getColorScheme() ); -observeDarkModePluginActivation(); +// Re-init as needed as the color scheme changes +observeDarkModePluginActivation( ( scheme ) => { + init( scheme ); +} ); diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index 29ac867..10949a8 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -1,81 +1,31 @@ -import wikipediaPreview from 'wikipedia-preview'; +const attNameWPDarkModePlugin = 'data-wp-dark-mode-active'; const isWPDarkModePluginActive = () => { const htmlTag = document.documentElement; - // TODO also need to check for attribute as well as class - // to correctly read on the first render if already in dark mode - return htmlTag.classList.contains( 'wp-dark-mode-active' ); + return htmlTag.hasAttribute( attNameWPDarkModePlugin ); }; export const getColorScheme = () => { - // eslint-disable-next-line no-console - console.log( 'getColorScheme...' ); - if ( - window.matchMedia( '(prefers-color-scheme: dark)' ).matches || - isWPDarkModePluginActive() - ) { - // eslint-disable-next-line no-console - console.log( '...dark detected' ); + if ( isWPDarkModePluginActive() ) { return 'dark'; } - return 'detect'; }; -const removePreviewPopup = () => { - // eslint-disable-next-line no-console - console.log( 'removePreviewPopup...' ); - const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); - if ( wikipediaPreviewPopup ) { - // eslint-disable-next-line no-console - console.log( '...removing popup' ); - wikipediaPreviewPopup.remove(); - } -}; - -const reInitWikipediaPreview = ( scheme ) => { - // eslint-disable-next-line no-console - console.log( 'reInitWikipediaPreview', scheme ); - wikipediaPreview.init( { - root: document, - detectLinks: true, // TODO read from wikipediapreview_init_options - prefersColorScheme: scheme, - } ); -}; - -// Another idea was updating the class directly to the preview div -// but classlist gets overwritten on render - -// const updateWikipediaPreviewColorScheme = ( scheme ) => { -// // eslint-disable-next-line no-console -// console.log('updateWikipediaPreviewColorScheme', scheme); -// const wikipediaPreviewPopup = document.querySelector( '.wp-popup' ); -// wikipediaPreviewPopup.children[0].classList.add('wikipediapreview-dark-theme'); -// } - -export const observeDarkModePluginActivation = () => { +export const observeDarkModePluginActivation = ( callback ) => { const htmlTag = document.documentElement; - // eslint-disable-next-line no-undef const observer = new MutationObserver( ( mutationsList ) => { for ( const mutation of mutationsList ) { - if ( mutation.type === 'attributes' && mutation.attributeName === 'class' ) { - if ( htmlTag.classList.contains( 'wp-dark-mode-active' ) ) { - // eslint-disable-next-line no-console - console.log( 'Plugin dark mode enabled, try with detectLinks' ); - removePreviewPopup(); - reInitWikipediaPreview( 'dark' ); - // updateWikipediaPreviewColorScheme( 'dark'); + if ( mutation.type === 'attributes' && mutation.attributeName === attNameWPDarkModePlugin ) { + if ( isWPDarkModePluginActive() ) { + callback( 'dark' ); } else { - // eslint-disable-next-line no-console - console.log( 'Plugin dark mode disabled' ); - removePreviewPopup(); - reInitWikipediaPreview( 'light' ); + callback( 'light' ); } } } } ); - // Start observing changes in the body element observer.observe( htmlTag, { attributes: true } ); }; From 62695a360e34d844abd97ff355385dd77c7f512b Mon Sep 17 00:00:00 2001 From: eamedina Date: Wed, 20 Mar 2024 13:41:26 -0400 Subject: [PATCH 13/16] Further simplify --- src/init.js | 4 +--- src/link/colorScheme.js | 7 +++---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/init.js b/src/init.js index a41068b..3a2025d 100644 --- a/src/init.js +++ b/src/init.js @@ -14,6 +14,4 @@ const init = ( scheme ) => { init( getColorScheme() ); // Re-init as needed as the color scheme changes -observeDarkModePluginActivation( ( scheme ) => { - init( scheme ); -} ); +observeDarkModePluginActivation( init ); diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index 10949a8..297d212 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -1,8 +1,7 @@ const attNameWPDarkModePlugin = 'data-wp-dark-mode-active'; const isWPDarkModePluginActive = () => { - const htmlTag = document.documentElement; - return htmlTag.hasAttribute( attNameWPDarkModePlugin ); + return document.documentElement.hasAttribute( attNameWPDarkModePlugin ); }; export const getColorScheme = () => { @@ -13,7 +12,6 @@ export const getColorScheme = () => { }; export const observeDarkModePluginActivation = ( callback ) => { - const htmlTag = document.documentElement; // eslint-disable-next-line no-undef const observer = new MutationObserver( ( mutationsList ) => { for ( const mutation of mutationsList ) { @@ -23,9 +21,10 @@ export const observeDarkModePluginActivation = ( callback ) => { } else { callback( 'light' ); } + break; } } } ); - observer.observe( htmlTag, { attributes: true } ); + observer.observe( document.documentElement, { attributes: true } ); }; From 3956a16536457ed4bfeef462807f39ef23b06af6 Mon Sep 17 00:00:00 2001 From: eamedina Date: Wed, 20 Mar 2024 13:45:39 -0400 Subject: [PATCH 14/16] Address linter --- src/link/colorScheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index 297d212..97a0f27 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -21,7 +21,7 @@ export const observeDarkModePluginActivation = ( callback ) => { } else { callback( 'light' ); } - break; + break; } } } ); From 5fe9aaab8a06a42fc0dc4c166a85af40cea823fc Mon Sep 17 00:00:00 2001 From: eamedina Date: Fri, 22 Mar 2024 15:35:32 -0400 Subject: [PATCH 15/16] Observe with attributeFilter --- src/link/colorScheme.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index 97a0f27..a76a743 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -13,18 +13,12 @@ export const getColorScheme = () => { export const observeDarkModePluginActivation = ( callback ) => { // eslint-disable-next-line no-undef - const observer = new MutationObserver( ( mutationsList ) => { - for ( const mutation of mutationsList ) { - if ( mutation.type === 'attributes' && mutation.attributeName === attNameWPDarkModePlugin ) { - if ( isWPDarkModePluginActive() ) { - callback( 'dark' ); - } else { - callback( 'light' ); - } - break; - } + const observer = new MutationObserver( () => { + if ( isWPDarkModePluginActive() ) { + callback( 'dark' ); + } else { + callback( 'light' ); } } ); - - observer.observe( document.documentElement, { attributes: true } ); + observer.observe( document.documentElement, { attributeFilter: [ attNameWPDarkModePlugin ] } ); }; From 2a02a989bb5824051d5d5cd79de46cedcd961b71 Mon Sep 17 00:00:00 2001 From: eamedina Date: Tue, 26 Mar 2024 12:14:19 -0400 Subject: [PATCH 16/16] Add attNameWPDarkModePluginInstalled --- src/link/colorScheme.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/link/colorScheme.js b/src/link/colorScheme.js index a76a743..02cbb8d 100644 --- a/src/link/colorScheme.js +++ b/src/link/colorScheme.js @@ -1,12 +1,19 @@ -const attNameWPDarkModePlugin = 'data-wp-dark-mode-active'; +const attNameWPDarkModePluginActive = 'data-wp-dark-mode-active'; +const attNameWPDarkModePluginInstalled = 'data-wp-dark-mode-preset'; const isWPDarkModePluginActive = () => { - return document.documentElement.hasAttribute( attNameWPDarkModePlugin ); + return document.documentElement.hasAttribute( attNameWPDarkModePluginActive ); +}; + +const isWPDarkModePluginInstalled = () => { + return document.documentElement.hasAttribute( attNameWPDarkModePluginInstalled ); }; export const getColorScheme = () => { - if ( isWPDarkModePluginActive() ) { + if ( isWPDarkModePluginInstalled() && isWPDarkModePluginActive() ) { return 'dark'; + } else if ( isWPDarkModePluginInstalled() && ! isWPDarkModePluginActive() ) { + return 'light'; } return 'detect'; }; @@ -20,5 +27,5 @@ export const observeDarkModePluginActivation = ( callback ) => { callback( 'light' ); } } ); - observer.observe( document.documentElement, { attributeFilter: [ attNameWPDarkModePlugin ] } ); + observer.observe( document.documentElement, { attributeFilter: [ attNameWPDarkModePluginActive ] } ); };