Implement deleting bookmarks

js/addBookmarks.js

@@ -6,6 +6,7 @@ $(document).ready(function () {
 			.text("New Group"));
 
 		for (let group of bookmarkList) {
+			if (group != null)
 				combo.append($("<option>").attr({ "value": group.title })
 					.text(group.title));
 		}
@@ -37,6 +38,7 @@ function addNewBookmark(e) {
 		var openDBRequest = window.indexedDB.open("bookmarks", dbVersion + 1);
 		openDBRequest.onupgradeneeded = function (e) {
 			var db = e.target.result;
+			dbVersion++;
 
 			if (db.objectStoreNames.contains(newGroup.title)) {
 				window.alert("The group already exists");
@@ -57,16 +59,25 @@ function addNewBookmark(e) {
 		openDBRequest.onsuccess = function (e) {
 			var db = e.target.result;
 
-			db.transaction(["groupIndexes"], "readwrite")
+			var indexStore = db.transaction(["groupIndexes"], "readwrite")
-				.objectStore("groupIndexes")
+				.objectStore("groupIndexes");
-				.add({ "title": newGroup.title, "groupIndex": bookmarkList.length });
 
-			bookmarkList.push(newGroup);
+			indexStore.getAll().onsuccess = function (evt) {
+				var items = evt.target.result;
+				var largest = 0;
+				for (let item of items) {
+					if (item.groupIndex >= largest)
+						largest = item.groupIndex + 1;
+				}
+
+				indexStore.add({ "title": newGroup.title, "groupIndex": largest });
+				bookmarkList[largest] = newGroup;
 
 				db.close();
 				loadBookmarks();
 				$(".modal").modal("hide");
 			}
+		}
 
 		openDBRequest.onerror = function (e) { console.log(e); }
 	} else { // add to existing group

js/editBookmarks.js

@@ -1,6 +1,85 @@
 $(document).ready(function () {
-	$("#btnEdit").click(function (e) {
+	$("#btnEdit").click(toggleEditing);
-		// TODO: editing bookmarks
-		window.alert("Editing is currently not implemented");
-	});
 });
+
+function toggleEditing (e) {
+	var btnEdit = $("#btnEdit");
+	if (btnEdit.hasClass("btn-warning")) {
+		btnEdit.removeClass("btn-warning");
+		$("#btnImport").prop("disabled", false);
+		$("#btnAdd").prop("disabled", false);
+
+		if ($("#btnAbout").hasClass("btn-light")) {
+			btnEdit.addClass("btn-light");
+		} else {
+			btnEdit.addClass("btn-dark");
+		}
+
+		$(".btnDel").hide(200);
+		$(".btnDelGroup").hide(200);
+		$(".bookmark").off("click", disableLink);
+		$(".btnDel").off("click", deleteBookmark);
+		$(".btnDelGroup").off("click", deleteGroup);
+	} else {
+		btnEdit.removeClass("btn-light btn-dark").addClass("btn-warning");
+		$("#btnImport").prop("disabled", true);
+		$("#btnAdd").prop("disabled", true);
+
+		$(".btnDel").show(200);
+		$(".btnDelGroup").show(200);
+		$(".bookmark").click(disableLink);
+		$(".btnDel").click(deleteBookmark);
+		$(".btnDelGroup").click(deleteGroup);
+	}
+}
+
+function deleteBookmark(e) {
+	var item = $(this);
+	var group = item.data("group");
+	var key =  item.data("key");
+
+	var openDBRequest = window.indexedDB.open("bookmarks");
+
+	openDBRequest.onsuccess = function (e) {
+		var db = e.target.result;
+		var deleteRequest = db.transaction(group, "readwrite").objectStore(group).delete(key);
+		deleteRequest.onsuccess = function (evt) {
+			$("#" + group + "-" + key).remove();
+		}
+	}
+
+	openDBRequest.onerror = function (evt) {
+		console.log("Error", evt);
+	}
+}
+
+function deleteGroup(e) {
+	var group = $(this); // the delete group button
+	var groupName = group.data("group");
+
+	var openDBRequest = window.indexedDB.open("bookmarks", dbVersion + 1);
+
+	openDBRequest.onupgradeneeded = function (e) {
+		var db = e.target.result;
+		dbVersion++;
+
+		var deleteRequest = db.deleteObjectStore(groupName);
+	}
+
+	openDBRequest.onsuccess = function (e) {
+		var db = e.target.result;
+
+		var indexStore = db.transaction("groupIndexes", "readwrite").objectStore("groupIndexes");
+		indexStore.delete(groupName).onsuccess = function (evt) {
+			$("#group-" + groupName.replace(" ", "-")).parent().remove();
+		};
+	}
+
+	openDBRequest.onerror = function (e) {
+		console.error(e);
+	}
+}
+
+function disableLink(e) {
+	e.preventDefault();
+}

js/importExport.js

@@ -7,7 +7,7 @@ $(document).ready(function () {
 			$("#exportText").text("[]");
 	});
 
-	$("#btnImport").click(importBookmarks);
+	$("#btnImportDialog").click(importBookmarks);
 
 	$("#exportText").click(function () {
 		$("#exportText").select();

js/loadBookmarks.js

@@ -16,12 +16,15 @@ function loadBookmarks() {
 			.getAll()
 			.onsuccess = function (indexEvt) {
 				var indexes = indexEvt.target.result;
+				indexes.sort(function (a, b) {
+					return a.groupIndex - b.groupIndex;
+				});
 
 				// use a placholder because getting the group info is async
 				// and groups could finish loading in a different order
 				var cardList = $("#cardList");
 				for (var i = 0; i < indexes.length; i++) {
-					$("<div>").attr("id", "group-" + i).appendTo(cardList);
+					$("<div>").attr("id", "group-" + indexes[i].groupIndex).appendTo(cardList);
 				}
 
 				for (let item of indexes) {
@@ -84,6 +87,12 @@ function buildGroup(groupInfo, placeholder) {
 	var groupRequest = groupStore.getAll();
 	groupRequest.onsuccess = function (e) {
 		var bookmarks = e.target.result;
+		var keyRequest = groupStore.getAllKeys();
+		keyRequest.onsuccess = function (evt) {
+			var keys = evt.target.result;
+			for (var i = 0; i < bookmarks.length; i++) {
+				bookmarks[i].key = keys[i];
+			}
 
 		bookmarkList[groupInfo.groupIndex] = {
 			"title": groupInfo.title,
@@ -93,33 +102,45 @@ function buildGroup(groupInfo, placeholder) {
 		buildCard(groupInfo.title, bookmarks).appendTo(placeholder);
 	}
 }
+}
 
 function buildCard(title, itemList) {
-	var card = $(document.createElement("div"));
+	var card = $("<div>");
 	card.attr({
-		"id": "group-" + title,
+		"id": "group-" + title.replace(" ", "-"),
-		"class": "card bookmarkGroup"
+		"class": "card"
 	});
 
-	var cardHead = $(document.createElement("div"));
+	var cardHead = $("<div>");
-	cardHead.attr({ "class": "card-header" });
+	cardHead.addClass("card-header");
 	cardHead.text(title);
+	var btnDel = $("<span>")
+		.attr("data-group", title)
+		.addClass("btnDelGroup far fa-trash-alt float-right mt-1 start-hidden text-danger clickable");
+	btnDel.appendTo(cardHead);
 	card.append(cardHead);
 
-	var cardList = $(document.createElement("div"));
+	var cardList = $("<div>");
-	cardList.attr({ "class": "list-group list-group-flush" });
+	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];
-		var link = $(document.createElement("a"));
-		link.attr({
-			"class": "list-group-item list-group-item-action",
-			"href": item.address
-		});
-		link.text(item.name);
 
-		cardList.append(link);
+		var del = $("<span>")
+			.attr({"data-group": title, "data-key": item.key})
+			.addClass("btnDel far fa-trash-alt float-right mt-1 start-hidden text-danger");
+		del.css("cursor: pointer;");
+
+		$("<a>")
+			.attr({
+				"id": title + "-" + item.key,
+				"class": "list-group-item list-group-item-action bookmark",
+				"href": item.address,
+			})
+			.text(item.name)
+			.append(del)
+			.appendTo(cardList);
 	}
 
 	return card;

main.css

@@ -24,6 +24,11 @@ body {
 	padding-bottom: 0.4em;
 }
 
+.start-hidden {
+	display: none;
+	height: 16px; /* prvents problems with height jumping with jquery show/hide */
+}
+
 .list-group-item {
 	padding-top: .4rem;
 	padding-bottom: .4rem;
@@ -34,6 +39,10 @@ body {
 	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
+.list-group {
+	min-height: 31px;
+}
+
 .navbar {
 	background: transparent !important;
 }
@@ -59,6 +68,10 @@ pre {
 	background: rgba(255, 255, 255, 0.24);
 }
 
+.clickable {
+	cursor: pointer;
+}
+
 /* set the width of the main container based on element width */
 @media (max-width: 34em) {
 	#wrapper {