Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Make callbacks consistent for storage access api #60

Merged
merged 2 commits into from Mar 13, 2024
Merged

Fix: Make callbacks consistent for storage access api #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c8b79b
fix: remove callback on load preferences button
mayan-000 Mar 13, 2024
458a54a
fix: clear up error on every interaction, remove promise chaining, an…
mayan-000 Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
202 changes: 116 additions & 86 deletions src/demos/storage-access-api/personalization.ejs
View file
Open in desktop
@@ -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
View file
Open in desktop
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