128 lines
3.4 KiB
JavaScript
128 lines
3.4 KiB
JavaScript
$(document).ready(function () {
|
|
loadBookmarks();
|
|
});
|
|
|
|
function loadBookmarks() {
|
|
$("#cardList").empty();
|
|
var openDBRequest = window.indexedDB.open("bookmarks");
|
|
|
|
openDBRequest.onsuccess = function (dbEvt) {
|
|
db = dbEvt.target.result;
|
|
dbVersion = db.version;
|
|
|
|
db.transaction(["Groups"], "readonly").objectStore("Groups").getAll().onsuccess = function (groupsEvt) {
|
|
var groups = groupsEvt.target.result;
|
|
groups.sort(function (a, b) {
|
|
return a.groupIndex - b.groupIndex;
|
|
});
|
|
|
|
// use a placholder
|
|
var cardList = $("#cardList");
|
|
for (let groupData of groups) {
|
|
$("<div>").attr("id", "group-" + groupData.groupIndex)
|
|
.addClass("bookmarkGroupContainer")
|
|
.appendTo(cardList);
|
|
}
|
|
|
|
bookmarkList = [];
|
|
|
|
for (let groupData of groups) {
|
|
buildGroup(groupData, $("#group-" + groupData.groupIndex));
|
|
bookmarkList.push(groupData);
|
|
}
|
|
|
|
db.close();
|
|
};
|
|
}
|
|
|
|
openDBRequest.onerror = function (e) { console.log(e); }
|
|
|
|
openDBRequest.onupgradeneeded = function (e) {
|
|
// the database doesn't exist
|
|
console.log("Creating database");
|
|
db = e.target.result;
|
|
|
|
var groupStore = db.createObjectStore("Groups", {keyPath: "groupIndex"});
|
|
groupStore.createIndex("groupIndex", "groupIndex", {unique: true});
|
|
groupStore.createIndex("title", "title", {unique: false});
|
|
groupStore.createIndex("bookmarks", "bookmarks", {unique: false});
|
|
|
|
var groupData = {
|
|
groupIndex: 0,
|
|
title: "Examples",
|
|
bookmarks: [
|
|
{
|
|
"name": "Github",
|
|
"address": "https://github.com/"
|
|
},
|
|
{
|
|
"name": "This project on Github",
|
|
"address": "https://github.com/NeilBrommer/NewTabPage"
|
|
}
|
|
]
|
|
};
|
|
|
|
groupStore.add(groupData);
|
|
|
|
$("#aboutModal").modal("show");
|
|
}
|
|
}
|
|
|
|
function buildGroup(groupInfo, placeholder) {
|
|
buildCard(groupInfo.title, groupInfo.groupIndex, groupInfo.bookmarks).appendTo(placeholder);
|
|
}
|
|
|
|
function buildCard(title, groupIndex, itemList) {
|
|
var card = $("<div>");
|
|
card.attr({
|
|
"id": "group-" + groupIndex,
|
|
"class": "card",
|
|
"data-group-name": title,
|
|
"data-group-index": groupIndex
|
|
});
|
|
|
|
var cardHead = $("<div>");
|
|
cardHead.addClass("card-header");
|
|
cardHead.text(title);
|
|
var btnDrag = $("<span>").addClass("mr-2 start-hidden dragGroupHandle")
|
|
.append($("<span>").addClass("fas fa-bars"));
|
|
var btnDel = $("<span>")
|
|
.attr("data-group", groupIndex)
|
|
.addClass("btnDelGroup far fa-trash-alt float-right mt-1 start-hidden text-danger clickable");
|
|
btnDel.appendTo(cardHead);
|
|
btnDrag.prependTo(cardHead);
|
|
card.append(cardHead);
|
|
|
|
var cardList = $("<div>");
|
|
cardList.addClass("list-group list-group-flush bookmarkGroup").attr("data-group", title);
|
|
card.append(cardList);
|
|
|
|
for (var i = 0; i < itemList.length; i++) {
|
|
var item = itemList[i];
|
|
// the fa span gets replaced with an svg element, which causes problems
|
|
// with using it as a drag handle, so wrap it in the drag element
|
|
var handle = $("<span>").addClass("mr-2 start-hidden dragHandle")
|
|
.append($("<span>").addClass("fas fa-bars"));
|
|
|
|
var del = $("<span>")
|
|
.attr({"data-group": title, "data-group-index": groupIndex, "data-key": i})
|
|
.addClass("btnDel far fa-trash-alt float-right mt-1 start-hidden text-danger");
|
|
del.css("cursor: pointer;");
|
|
|
|
$("<a>")
|
|
.attr({
|
|
"id": title + "-" + i,
|
|
"class": "list-group-item list-group-item-action bookmark",
|
|
"href": item.address,
|
|
"data-name": item.name,
|
|
"data-address": item.address
|
|
})
|
|
.text(item.name)
|
|
.prepend(handle)
|
|
.append(del)
|
|
.appendTo(cardList);
|
|
}
|
|
|
|
return card;
|
|
}
|