2022-05-17 15:37:07 +00:00
|
|
|
|
<!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>
|
2022-06-28 14:46:37 +00:00
|
|
|
|
<link rel="stylesheet" href="history.css">
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
|
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
<body>
|
|
|
|
|
|
<input id="search" type="search" placeholder="search"></input>
|
|
|
|
|
|
<div id="results"></div>
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
import * as bitty from './bitty.js';
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
|
|
|
|
|
navigator.storage.persist().then(function(persistent) {
|
|
|
|
|
|
console.log("persist", persistent) ;
|
|
|
|
|
|
})
|
|
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
let openRequest = indexedDB.open("history", 3);
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
function firstValidString(...args) {
|
|
|
|
|
|
for (let i in args) {
|
|
|
|
|
|
let s = args[i]
|
|
|
|
|
|
if (s && s.length) return s;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
|
|
|
|
|
function deleteHistoryItem(key) {
|
|
|
|
|
|
let db = openRequest.result;
|
2022-06-28 14:46:37 +00:00
|
|
|
|
console.log("db", db, key);
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
let transaction = db.transaction("urls", "readwrite"); // (1)
|
|
|
|
|
|
let history = transaction.objectStore("urls"); // (2)
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
|
|
|
|
|
document.getElementById(key).remove()
|
|
|
|
|
|
history.delete(key);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
const renderResults = (e) => {
|
|
|
|
|
|
let cursor = e.target.result;
|
|
|
|
|
|
console.log("curs", cursor)
|
2022-05-17 15:37:07 +00:00
|
|
|
|
if (cursor) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
let key = cursor.key; // book key (id field)
|
|
|
|
|
|
let value = cursor.value; // book object
|
2022-06-28 14:46:37 +00:00
|
|
|
|
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),
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
)
|
2022-05-17 15:37:07 +00:00
|
|
|
|
} catch (e) {console.log(e)}
|
|
|
|
|
|
cursor.continue();
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
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;
|
|
|
|
|
|
|
2022-05-17 15:37:07 +00:00
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-06-28 14:46:37 +00:00
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-05-17 15:37:07 +00:00
|
|
|
|
</script>
|
|
|
|
|
|
|
