Merge pull request #62 from rtCamp/fix/storage-access-api

Fix/storage access api and add disqus demo
rtCamp · Mar 17, 2024 · 5ae1ac3 · 5ae1ac3
2 parents 0f6f9b0 + 458a54a
commit 5ae1ac3
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 88 deletions.
diff --git 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
@@ -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') %>
     </div>

diff --git 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);
     }
-});
+  });
+})();
diff --git a/src/demos/storage-access-api/theme-selection.ejs b/src/demos/storage-access-api/theme-selection.ejs
@@ -2,7 +2,7 @@
     <div id="theme-container" class="flex items-center justify-center">
     <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
         <div class="text-red-500 p-4 text-sm" id="status-message"></div>
-        <button id="load-button" class="hidden px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300" onclick="toggleTheme()">
+        <button id="load-button" class="hidden px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
             Load user preferences
         </button>
         <div class="dark-mode-toggle">

diff --git a/src/scenarios/disqus-comments/index.ejs b/src/scenarios/disqus-comments/index.ejs
@@ -0,0 +1,24 @@
+<%- include(commonPath + '/header.ejs') %>
+
+    <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
+        <div id="disqus_thread"></div>
+        <script>
+            /**
+            *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+            *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
+            /*
+            var disqus_config = function () {
+            this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+            this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+            };
+            */
+            (function() { // DON'T EDIT BELOW THIS LINE
+            var d = document, s = d.createElement('script');
+            s.src = 'https://psat-demo.disqus.com/embed.js';
+            s.setAttribute('data-timestamp', +new Date());
+            (d.head || d.body).appendChild(s);
+            })();
+        </script>
+        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+    <%- 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
@@ -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;