From bcb1e610bdbcb32c60796f1e6827d12eee33d61b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Thu, 7 Sep 2023 11:43:00 +0200 Subject: [PATCH 1/7] doc: toggle all flavor selectors sticky on click Fixes: https://github.com/nodejs/node/issues/49508 --- doc/api_assets/api.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index c1151ae493e8da..9aa81d7b78ba0e 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -136,6 +136,30 @@ updateHashes(); } + function setupFlavorSelectors() { + const kFlavorPreference = 'customFlavor'; + const vCommonJS = 'cjs'; + const flavorSetting = sessionStorage.getItem(kFlavorPreference); + const flavorSelectors = document.querySelectorAll('.js-flavor-selector'); + + flavorSelectors.forEach((selector) => { + selector.checked = flavorSetting !== vCommonJS; + selector.addEventListener('click', (e) => { + const checked = e.target.checked; + + if (checked) { + sessionStorage.removeItem(kFlavorPreference); + } else { + sessionStorage.setItem(kFlavorPreference, vCommonJS); + } + + flavorSelectors.forEach((el) => { + el.checked = checked; + }); + }); + }); + } + function setupCopyButton() { const buttons = document.querySelectorAll('.copy-button'); buttons.forEach((button) => { @@ -182,6 +206,8 @@ // Make link to other versions of the doc open to the same hash target (if it exists). setupAltDocsLink(); + setupFlavorSelectors(); + setupCopyButton(); } From 61d60081fc8b440b38542534c61f6c582c5a7ac8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Thu, 7 Sep 2023 15:37:06 +0200 Subject: [PATCH 2/7] Update doc/api_assets/api.js Co-authored-by: Antoine du Hamel --- doc/api_assets/api.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index 9aa81d7b78ba0e..f2a383e032b4e9 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -144,14 +144,10 @@ flavorSelectors.forEach((selector) => { selector.checked = flavorSetting !== vCommonJS; - selector.addEventListener('click', (e) => { + selector.addEventListener('change', (e) => { const checked = e.target.checked; - if (checked) { - sessionStorage.removeItem(kFlavorPreference); - } else { - sessionStorage.setItem(kFlavorPreference, vCommonJS); - } + sessionStorage.setItem(kFlavorPreference, checked); flavorSelectors.forEach((el) => { el.checked = checked; From 3e91b7c92b549dfdd0d516300895700c0e3337c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Thu, 7 Sep 2023 16:22:23 +0200 Subject: [PATCH 3/7] fix initial setup of stored state --- doc/api_assets/api.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index f2a383e032b4e9..b03713cef4a894 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -138,12 +138,11 @@ function setupFlavorSelectors() { const kFlavorPreference = 'customFlavor'; - const vCommonJS = 'cjs'; const flavorSetting = sessionStorage.getItem(kFlavorPreference); const flavorSelectors = document.querySelectorAll('.js-flavor-selector'); flavorSelectors.forEach((selector) => { - selector.checked = flavorSetting !== vCommonJS; + selector.checked = flavorSetting === 'true' selector.addEventListener('change', (e) => { const checked = e.target.checked; From 7922161ac9610aac07b6c9540ab34f11c8f7f8b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Thu, 7 Sep 2023 18:03:23 +0200 Subject: [PATCH 4/7] use localStorage instead of sessionStorage --- doc/api_assets/api.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index b03713cef4a894..b347a574d55b75 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -138,7 +138,7 @@ function setupFlavorSelectors() { const kFlavorPreference = 'customFlavor'; - const flavorSetting = sessionStorage.getItem(kFlavorPreference); + const flavorSetting = localStorage.getItem(kFlavorPreference); const flavorSelectors = document.querySelectorAll('.js-flavor-selector'); flavorSelectors.forEach((selector) => { @@ -146,7 +146,7 @@ selector.addEventListener('change', (e) => { const checked = e.target.checked; - sessionStorage.setItem(kFlavorPreference, checked); + localStorage.setItem(kFlavorPreference, checked); flavorSelectors.forEach((el) => { el.checked = checked; From 6ac5fc28994609c4117c574a339077884e7db08f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Thu, 7 Sep 2023 18:05:03 +0200 Subject: [PATCH 5/7] optimize check in loop --- doc/api_assets/api.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index b347a574d55b75..28ae2e5928cdb4 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -138,11 +138,11 @@ function setupFlavorSelectors() { const kFlavorPreference = 'customFlavor'; - const flavorSetting = localStorage.getItem(kFlavorPreference); + const flavorSetting = localStorage.getItem(kFlavorPreference) === 'true'; const flavorSelectors = document.querySelectorAll('.js-flavor-selector'); flavorSelectors.forEach((selector) => { - selector.checked = flavorSetting === 'true' + selector.checked = flavorSetting; selector.addEventListener('change', (e) => { const checked = e.target.checked; From 95e6ae66a06687486d71d0fa25cacd304431a42e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Thu, 7 Sep 2023 20:15:00 +0200 Subject: [PATCH 6/7] remove empty local storage --- doc/api_assets/api.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index 28ae2e5928cdb4..c41b566f0146bf 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -146,7 +146,11 @@ selector.addEventListener('change', (e) => { const checked = e.target.checked; - localStorage.setItem(kFlavorPreference, checked); + if (checked) { + localStorage.setItem(kFlavorPreference, true); + } else { + localStorage.removeItem(kFlavorPreference); + } flavorSelectors.forEach((el) => { el.checked = checked; From ad92cfc221bb8b0e105735a4b27337524067c33a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vidar=20Eld=C3=B8y?= Date: Fri, 8 Sep 2023 21:30:53 +0200 Subject: [PATCH 7/7] rename select to toggle --- doc/api_assets/api.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index 4187a3d5f2aeb8..c7568206e29f19 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -136,14 +136,14 @@ updateHashes(); } - function setupFlavorSelectors() { + function setupFlavorToggles() { const kFlavorPreference = 'customFlavor'; const flavorSetting = localStorage.getItem(kFlavorPreference) === 'true'; - const flavorSelectors = document.querySelectorAll('.js-flavor-selector'); + const flavorToggles = document.querySelectorAll('.js-flavor-toggle'); - flavorSelectors.forEach((selector) => { - selector.checked = flavorSetting; - selector.addEventListener('change', (e) => { + flavorToggles.forEach((toggleElement) => { + toggleElement.checked = flavorSetting; + toggleElement.addEventListener('change', (e) => { const checked = e.target.checked; if (checked) { @@ -152,7 +152,7 @@ localStorage.removeItem(kFlavorPreference); } - flavorSelectors.forEach((el) => { + flavorToggles.forEach((el) => { el.checked = checked; }); }); @@ -205,7 +205,7 @@ // Make link to other versions of the doc open to the same hash target (if it exists). setupAltDocsLink(); - setupFlavorSelectors(); + setupFlavorToggles(); setupCopyButton(); }