Skip to content

Commit

Permalink
Merge pull request #60 from rtCamp/fix/storage-access-api
Browse files Browse the repository at this point in the history
Fix: Make callbacks consistent for storage access api
  • Loading branch information
fellyph authored Mar 13, 2024
2 parents 675b489 + 458a54a commit 15dec24
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 87 deletions.
202 changes: 116 additions & 86 deletions src/demos/storage-access-api/personalization.ejs
Original file line number Diff line number Diff line change
@@ -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);
}
});
});
})();
2 changes: 1 addition & 1 deletion src/demos/storage-access-api/theme-selection.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit 15dec24

Please sign in to comment.