mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
133 lines
3.6 KiB
HTML
133 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<title>itty.bitty.history</title>
|
||
<meta charset="utf-8"/>
|
||
<link rel="icon" href="favicon.svg" type="image/x-icon" />
|
||
<meta name="viewport" content="width=device-width, viewport-fit=cover">
|
||
<meta name="description" content="itty bitty history">
|
||
<script src="js/util.js"></script>
|
||
<link rel="stylesheet" href="history.css">
|
||
|
||
|
||
<body>
|
||
<input id="search" type="search" placeholder="search"></input>
|
||
<div id="results"></div>
|
||
|
||
</body>
|
||
<script type="module">
|
||
import * as bitty from './bitty.js';
|
||
|
||
navigator.storage.persist().then(function(persistent) {
|
||
console.log("persist", persistent) ;
|
||
})
|
||
|
||
let openRequest = indexedDB.open("history", 3);
|
||
|
||
openRequest.onupgradeneeded = function() {
|
||
// let db = openRequest.result;
|
||
// if (!db.objectStoreNames.contains('history')) { // if there's no "books" store
|
||
// db.createObjectStore('history', {keyPath: 'id'}); // create it
|
||
// }
|
||
};
|
||
|
||
openRequest.onerror = function() {
|
||
console.error("Error", openRequest.error);
|
||
};
|
||
|
||
|
||
function firstValidString(...args) {
|
||
for (let i in args) {
|
||
let s = args[i]
|
||
if (s && s.length) return s;
|
||
}
|
||
}
|
||
|
||
function deleteHistoryItem(key) {
|
||
let db = openRequest.result;
|
||
console.log("db", db, key);
|
||
|
||
let transaction = db.transaction("urls", "readwrite"); // (1)
|
||
let history = transaction.objectStore("urls"); // (2)
|
||
|
||
document.getElementById(key).remove()
|
||
history.delete(key);
|
||
}
|
||
|
||
const renderResults = (e) => {
|
||
let cursor = e.target.result;
|
||
console.log("curs", cursor)
|
||
if (cursor) {
|
||
try {
|
||
let key = cursor.key; // book key (id field)
|
||
let value = cursor.value; // book object
|
||
console.log("key", key, value)
|
||
let url = new URL(value.url);
|
||
let parseInfo = bitty.parseBittyURL(url);
|
||
|
||
let info = bitty.pathToMetadata(parseInfo.path);
|
||
|
||
let title = firstValidString(info.title, parseInfo.hashTitle, value.title, parseInfo.hashData);
|
||
let description = info.d
|
||
console.log("info", info);
|
||
let image = info.i ? atob(info.i.replace(/=/g,'')) : null;
|
||
// let image = path.join("/");
|
||
// let emoji = image.startsWith("http") ? null : decodeURIComponent(image);
|
||
|
||
document.getElementById("results").appendChild(
|
||
m('a', {href:url, id:value.id, target:"_blank", title:title},
|
||
m('div.delete', {onclick: (e) => {e.stopPropagation(); e.preventDefault(); deleteHistoryItem(value.id); return false;}}, "×"),
|
||
m('div.info',
|
||
m('span.title', title),m('br'),
|
||
m('span.desc', value.text || description)
|
||
),
|
||
image ?
|
||
m('div.preview', {style:"background-image:url(" + image + ")"})
|
||
: m('div.emoji', info.f),
|
||
|
||
)
|
||
)
|
||
} catch (e) {console.log(e)}
|
||
cursor.continue();
|
||
}
|
||
};
|
||
|
||
openRequest.onsuccess = function() {
|
||
let db = openRequest.result;
|
||
console.log("db", db);
|
||
|
||
let transaction = db.transaction("urls", "readwrite"); // (1)
|
||
let objectStore = transaction.objectStore("urls"); // (2)
|
||
|
||
|
||
// get all books
|
||
document.getElementById("results").innerHTML = ""
|
||
|
||
objectStore.getAll()
|
||
let request = objectStore.index('created').openCursor();
|
||
|
||
// called for each book found by the cursor
|
||
request.onsuccess = renderResults;
|
||
|
||
|
||
};
|
||
|
||
|
||
document.getElementById("search").oninput = (e) => {
|
||
let query = e.target.value;
|
||
let db = openRequest.result;
|
||
|
||
let transaction = db.transaction("urls", "readwrite"); // (1)
|
||
let objectStore = transaction.objectStore("urls"); // (2)
|
||
|
||
document.getElementById("results").innerHTML = ""
|
||
objectStore.getAll()
|
||
|
||
let request = objectStore.openCursor(IDBKeyRange.only(query));
|
||
request.onerror = (e) => console.log("err", e)
|
||
request.onsuccess = renderResults;
|
||
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|