ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: preserve history

Browse source
This commit is contained in:
Ayo 2023-06-14 22:37:00 +02:00
parent d2f698571e
commit 3d914309f3
3 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/AddressBar.astro
View file

@ -9,7 +9,7 @@ const placeholder = 'Type the URL of an article here';
<div class="address-bar">
<form>
<button aria-label="Home" title="Home" class="left-button" type="button" id="app-home" name="app-home" onclick="window.location.href = '/';" hidden>
<button aria-label="Home" title="Home" class="left-button" type="button" id="app-home" name="app-home" onclick="history.back();" hidden>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z"/></svg>
</button>
<input type="text" id="app-url" name="url" value={url} placeholder={placeholder} />

26
src/components/Library.astro
View file

@ -15,13 +15,12 @@ const {postDivSelector, skipSave = false} = Astro.props;
<input type="checkbox" id="skipSave" name="skipSave" checked={skipSave} hidden />
<script>
import { getPostCard } from '../utils/library'
import { getPostCard, renderPost } from '../utils/library'
const cache = await caches.open('cozy-reader');
const url = new URL(window.location.href);
const response = await cache.match(url)
const postDivSelector = document.getElementById('postDivSelector') as HTMLInputElement;
const skipSave = document.getElementById('skipSave') as HTMLInputElement;
const postDiv = document.querySelector(postDivSelector?.value);
if (!response) {
if (!skipSave?.checked) {
@ -66,14 +65,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
link.onclick = async (e) => {
e.preventDefault();
scroll(0,0);
const html = document.createElement('html');
html.innerHTML = responseText;
const newPost = html.querySelector('body')?.querySelector('#post');
if (postDiv && newPost?.innerHTML) {
postDiv.innerHTML = newPost.innerHTML
const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
homeBtn.removeAttribute('disabled');
}
renderPost(responseText, url, postDivSelector?.value)
}
const item = document.createElement('li');
item.appendChild(link);
@ -82,6 +74,20 @@ const {postDivSelector, skipSave = false} = Astro.props;
});
});
window.onpopstate = async (data) => {
let url = data.state?.url;
if (!url) {
url = window.location.href;
}
const fullResponse = await cache.match(url)
fullResponse?.text().then(data => {
const responseText = data;
renderPost(responseText, url, postDivSelector?.value, true);
});
}
}
</script>

21
src/utils/library.ts
View file

@ -64,3 +64,24 @@ export function getPostCard(html: HTMLHtmlElement) {
`;
return postCard;
}
export function renderPost(responseText, url, postDivSelector: string, preventPushState = false) {
const postDiv = document.querySelector(postDivSelector);
const html = document.createElement('html');
html.innerHTML = responseText;
const newPost = html.querySelector('body')?.querySelector('#post');
if (postDiv && newPost?.innerHTML) {
postDiv.innerHTML = newPost.innerHTML
const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
homeBtn.removeAttribute('disabled');
const appUrl = document.getElementById('app-url') as HTMLInputElement;
const cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
if(cozyUrl !== '/') {
appUrl.value = cozyUrl || '';
}
if(!preventPushState) {
window.history.pushState({url}, '', url);
}
const submitBtn = document.getElementById('submit') as HTMLButtonElement;
submitBtn.removeAttribute('disabled');
}
}