From 3b0f1f609d3e11f3695100f6d66ff724927bb10a Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Mon, 26 Feb 2024 17:53:46 +0000 Subject: [PATCH 1/3] adding disqus demo --- app.js | 3 ++- src/common/index.ejs | 1 + src/scenarios/disqus-comments/index.ejs | 24 ++++++++++++++++++++++++ src/scenarios/disqus-comments/routes.js | 13 +++++++++++++ 4 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/scenarios/disqus-comments/index.ejs create mode 100644 src/scenarios/disqus-comments/routes.js diff --git a/app.js b/app.js index 47f3893..19181e4 100644 --- a/app.js +++ b/app.js @@ -72,7 +72,8 @@ const scenarios = [ 'personalization-localstorage', 'gsi', 'social-media', - 'social-media-comments' + 'social-media-comments', + 'disqus-comments', ]; scenarios.forEach(scenario => { const scenarioRoutes = require(`./src/scenarios/${scenario}/routes`); diff --git a/src/common/index.ejs b/src/common/index.ejs index c12e5d1..188eb3a 100644 --- a/src/common/index.ejs +++ b/src/common/index.ejs @@ -20,6 +20,7 @@ <%= renderCard('Legacy GSI', '🔐', '/gsi') %> <%= renderCard('Facebook Like', '👍', '/social-media') %> <%= renderCard('Facebook Comments', '💬', '/social-media-comments') %> + <%= renderCard('Disqus Comments', '✉️', '/disqus-comments') %> <%= renderCard('CHIPS', '🍪', '/chips') %> <%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %> diff --git a/src/scenarios/disqus-comments/index.ejs b/src/scenarios/disqus-comments/index.ejs new file mode 100644 index 0000000..70b48b6 --- /dev/null +++ b/src/scenarios/disqus-comments/index.ejs @@ -0,0 +1,24 @@ +<%- include(commonPath + '/header.ejs') %> + + <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %> +
+ + + <%- include(commonPath + '/internal-page/footer.ejs') %> +<%- include(commonPath + '/footer.ejs') %> diff --git a/src/scenarios/disqus-comments/routes.js b/src/scenarios/disqus-comments/routes.js new file mode 100644 index 0000000..88edaa9 --- /dev/null +++ b/src/scenarios/disqus-comments/routes.js @@ -0,0 +1,13 @@ +const express = require('express'); +const path = require('path'); +const router = express.Router(); + +router.get('/', (req, res) => { + // Send the default page + const currentDomain = req.get('host'); + res.render(path.join(__dirname,'index'), { + title: 'Disqus Comments' + }); +}); + +module.exports = router; From 9c8b79b21c215d87b0661b602fc92595d91e168c Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 13 Mar 2024 15:08:50 +0530 Subject: [PATCH 2/3] fix: remove callback on load preferences button --- src/demos/storage-access-api/theme-selection.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demos/storage-access-api/theme-selection.ejs b/src/demos/storage-access-api/theme-selection.ejs index e4f024f..c3a9cc0 100644 --- a/src/demos/storage-access-api/theme-selection.ejs +++ b/src/demos/storage-access-api/theme-selection.ejs @@ -2,7 +2,7 @@
<%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
-
From 458a54a1d5f7928aa1a8aad7a4fe67b680f9ddee Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Wed, 13 Mar 2024 15:16:27 +0530 Subject: [PATCH 3/3] fix: clear up error on every interaction, remove promise chaining, and update code flow to iife --- .../storage-access-api/personalization.ejs | 202 ++++++++++-------- 1 file changed, 116 insertions(+), 86 deletions(-) diff --git a/src/demos/storage-access-api/personalization.ejs b/src/demos/storage-access-api/personalization.ejs index 340ddb4..29c6d53 100644 --- a/src/demos/storage-access-api/personalization.ejs +++ b/src/demos/storage-access-api/personalization.ejs @@ -1,96 +1,126 @@ -document.addEventListener('DOMContentLoaded', () => { - const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization'; - const pageContainer = document.getElementById('theme-container'); - const themeSwitcher = document.getElementById('dark-mode-switch'); - const errorMessages = document.getElementById('status-message'); - const loadButton = document.getElementById('load-button'); - const toggleContainer = document.querySelector('.dark-mode-toggle'); - const isIframe = window.self !== window.top; - const containerClass = isIframe ? 'h-screen flex items-center justify-center' : 'flex items-center justify-center'; - let hasStorageAccess = false; - - document.hasStorageAccess().then(result => { - hasStorageAccess = result; - if ( hasStorageAccess ) { - updateUserPreference(); - } - }) - - async function updateUserPreference() { - if ( hasStorageAccess ) { - fetchAndApplyTheme(); - } else { - try { - await document.requestStorageAccess(); - toggleContainer.classList.remove('hidden'); - loadButton.classList.add('hidden'); - fetchAndApplyTheme(); - } catch (error) { - errorMessages.textContent = error?.message; - } - } +(() => { + let baseURL, + pageContainer, + themeSwitcher, + errorMessages, + loadButton, + toggleContainer, + isIframe, + containerClass, + hasStorageAccess; + + async function fetchAndApplyTheme() { + try { + const response = await fetch(`${baseURL}/get-personalization`, { + method: 'GET', + credentials: 'include', + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`; + } + + const data = await response.json(); + pageContainer.className = `${containerClass} ${data.theme}`; + if (data.theme === 'dark') { + themeSwitcher.checked = true; + } + } catch (error) { + errorMessages.textContent = error?.message; + } + } + + async function updateUserPreference() { + errorMessages.textContent = ''; + if (hasStorageAccess) { + fetchAndApplyTheme(); + return; + } + + try { + await document.requestStorageAccess(); + hasStorageAccess = await document.hasStorageAccess(); + + if (!hasStorageAccess) { + errorMessages.textContent = 'User denied storage access'; + return; + } + + toggleContainer.classList.remove('hidden'); + loadButton.classList.add('hidden'); + + fetchAndApplyTheme(); + } catch (error) { + errorMessages.textContent = error?.message; } + } + + async function fetchSetPersonalization() { + try { + const response = await fetch(`${baseURL}/set-personalization`, { + method: 'POST', + credentials: 'include', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + theme: themeSwitcher?.checked ? 'dark' : 'light', + }), + }); + const data = await response.json(); - function fetchAndApplyTheme() { - fetch(`${baseURL}/get-personalization`, { - method: 'GET', - credentials: 'include' - }) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`; - } - return response.json(); - }) - .then(data => { - const theme = data.theme; - pageContainer.className = `${containerClass} ${data.theme}` - if (theme === 'dark') { - themeSwitcher.checked = true; - } - }) - .catch(error => { - errorMessages.textContent = error?.message; - }); + pageContainer.className = `${containerClass} ${data.theme}`; + } catch (error) { + errorMessages.textContent = error?.message; } + } + + async function toggleTheme() { + errorMessages.textContent = ''; - function fetchSetPersonalization() { - fetch( `${baseURL}/set-personalization`, { - method: 'POST', - credentials: 'include', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ theme: themeSwitcher?.checked ? 'dark' : 'light' }) - }) - .then(response => response.json()) - .then(data => { - pageContainer.className = `${containerClass} ${data.theme}`; - }); + if (hasStorageAccess) { + fetchSetPersonalization(); + return; } - async function toggleTheme() { - hasStorageAccess = await document.hasStorageAccess(); - - if( hasStorageAccess ) { - fetchSetPersonalization(); - } else { - try { - await document.requestStorageAccess(); - if ( await document.hasStorageAccess() ) { - fetchSetPersonalization(); - } else { - errorMessages.textContent = 'User denied storage access'; - } - } catch (error) { - errorMessages.textContent = `The request to storage access API was denied because the user never interacted with the top-level site context or the permission wasn't grant by the user`; - } - } + try { + await document.requestStorageAccess(); + hasStorageAccess = await document.hasStorageAccess(); + + if (!hasStorageAccess) { + errorMessages.textContent = 'User denied storage access'; + return; + } + + fetchSetPersonalization(); + } catch (error) { + errorMessages.textContent = error?.message; } - + } + + // Main start point + document.addEventListener('DOMContentLoaded', async () => { + baseURL = + '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization'; + pageContainer = document.getElementById('theme-container'); + themeSwitcher = document.getElementById('dark-mode-switch'); + errorMessages = document.getElementById('status-message'); + loadButton = document.getElementById('load-button'); + toggleContainer = document.querySelector('.dark-mode-toggle'); + isIframe = window.self !== window.top; + containerClass = isIframe + ? 'h-screen flex items-center justify-center' + : 'flex items-center justify-center'; + let hasStorageAccess = await document.hasStorageAccess(); + + if (hasStorageAccess) { + updateUserPreference(); + } + window.toggleTheme = toggleTheme; if (isIframe && !hasStorageAccess) { - toggleContainer.classList.add('hidden'); - loadButton.classList.remove('hidden'); - loadButton.addEventListener('click', updateUserPreference); + toggleContainer.classList.add('hidden'); + loadButton.classList.remove('hidden'); + loadButton.addEventListener('click', updateUserPreference); } -}); + }); +})();