Clean up code

js/addBookmarks.js

@@ -1,23 +1,40 @@
 $(document).ready(function () {
-	$("#newBookmarkModal").on("shown.bs.modal", function () {
+	$("#newBookmarkModal").on("shown.bs.modal", populateGroupList);
+	$("#addBookmarkForm").submit(addNewBookmark);
+	$("#newBookmarkGroup").on("change", selectGroupChanged);
+});
+
+function populateGroupList() {
 	var combo = $("#newBookmarkGroup");
 	combo.empty();
 	combo.append($("<option>").attr({ "value": "--" })
 		.text("New Group"));
 
-		for (let group of bookmarkList) {
+	var openDBRequest = window.indexedDB.open("bookmarks");
-			if (group != null)
+
-				combo.append($("<option>").attr({ "value": group.groupIndex })
+	openDBRequest.onsuccess = function (openEvt) {
+		var db = openEvt.target.result;
+		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
+
+		groupsStore.getAll().onsuccess = function (getAllEvt) {
+			var groups = getAllEvt.target.result;
+
+			for (let group of groups) {
+				combo.append($("<option>")
+					.attr({ "value": group.groupIndex })
 					.text(group.title));
 			}
 
 			$("#createGroup").prop("required", true);
-	});
+			db.close();
+		}
+	}
 
-	$("#addBookmarkForm").submit(addNewBookmark);
+	openDBRequest.onerror = function (err) {
-
+		console.error(err);
-	$("#newBookmarkGroup").on("change", selectGroupChanged);
+		window.alert("Error building groups list");
-});
+	}
+}
 
 function addNewBookmark(e) {
 	e.preventDefault();
@@ -31,42 +48,35 @@ function addNewBookmark(e) {
 		var newGroupName = $("#newBookMarkGroupNew").val();
 
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (e) {
+		openDBRequest.onsuccess = function (openEvt) {
-			var db = e.target.result;
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-			groupsStore.getAll().onsuccess = function (evt) {
+			groupsStore.count().onsuccess = function (countEvt) {
-				// find the largest index and use that +1
+				var numGroups = countEvt.target.result;
-				var groups = evt.target.result;
-
-				var largest = -1;
-				for (var group of groups) {
-					if (group.groupIndex > largest)
-						largest = group.groupIndex;
-				}
 
 				var newGroup = {
-					groupIndex: largest + 1,
+					groupIndex: numGroups,
 					title: newGroupName,
 					bookmarks: [ { name: bkmkName, address: bkmkAddress } ]
 				};
 
 				groupsStore.add(newGroup);
-				// don't need to add to bookmarkList because loadBookmarks is
-				// being called
 
 				db.close();
 				loadBookmarks();
-				$(".modal").modal("hide");
+				$("#newBookmarkModal").modal("hide");
 			}
 		}
 
-		openDBRequest.onerror = function (e) { console.log(e); }
+		openDBRequest.onerror = function (err) {
+			console.log(err);
+			window.alert("There was an error creating the bookmark");
+		}
 	} else { // add to existing group
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (e) {
+		openDBRequest.onsuccess = function (openEvt) {
-			var db = e.target.result;
+			var db = openEvt.target.result;
-
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
 			var groupReq = groupsStore.get(parseInt(bkmkGroup));
@@ -83,7 +93,10 @@ function addNewBookmark(e) {
 			}
 		}
 
-		openDBRequest.onerror = function (e) { console.log(e); }
+		openDBRequest.onerror = function (err) {
+			console.log(err);
+			window.alert("There was an error creating the bookmark");
+		}
 	}
 }
 

js/editBookmarks.js

@@ -2,7 +2,7 @@ $(document).ready(function () {
 	$("#btnEdit").click(toggleEditing);
 });
 
-function toggleEditing (e) {
+function toggleEditing () {
 	if ($("#btnEdit").hasClass("btn-warning"))
 		disableEditing();
 	else
@@ -15,17 +15,16 @@ function groupMoved(dropEvt) {
 
 	var movedCard = $($(dropEvt.item).children()[0]);
 	var groupName = movedCard.data("group-name");
-	var groupIndex = movedCard.data("group-index");
 
 	if (oldIndex != newIndex) {
 		var openDBRequest = window.indexedDB.open("bookmarks");
 
-		openDBRequest.onsuccess = function (e) {
+		openDBRequest.onsuccess = function (openEvt) {
-			var db = e.target.result;
+			var db = openEvt.target.result;
 
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
-			groupsStore.getAll().onsuccess = function (evt) {
+			groupsStore.getAll().onsuccess = function (getAllEvt) {
-				var groups = evt.target.result;
+				var groups = getAllEvt.target.result;
 
 				if (newIndex > oldIndex) {
 					for (let g of groups) {
@@ -34,11 +33,11 @@ function groupMoved(dropEvt) {
 							groupsStore.put(g);
 
 							// modify the group's card
-							var cardContainer = $("#group-" + (g.groupIndex + 1));
+							var cardContainer = $("#group-" + (g.groupIndex + 1))
-							cardContainer.attr("id", "group" + g.groupIndex);
+								.attr("id", "group" + g.groupIndex);
 
-							var card = $(cardContainer.children()[0]);
+							var card = $(cardContainer.children()[0])
-							card.attr("data-group-index", g.groupIndex);
+								.attr("data-group-index", g.groupIndex);
 						}
 					}
 				} else { // oldIndex > newIndex
@@ -57,23 +56,23 @@ function groupMoved(dropEvt) {
 					}
 				}
 
+				// update the moved group's data
 				var movedGroupData = groups[oldIndex];
-
 				movedGroupData.groupIndex = newIndex;
 				groupsStore.put(movedGroupData);
 
-				// modify the group's card
+				// update the group's card
-				var cardContainer = $("#group-" + oldIndex);
+				$(dropEvt.item).attr("id", "group" + newIndex);
-				cardContainer.attr("id", "group" + newIndex);
+				movedCard.attr("data-group-index", newIndex);
-
-				var card = $(cardContainer.children()[0]);
-				card.attr("data-group-index", newIndex);
 
 				db.close();
 			}
 		}
 
-		openDBRequest.onerror = function (err) { console.log(err); }
+		openDBRequest.onerror = function (err) {
+			console.log(err);
+			window.alert("Error moving group");
+		}
 	}
 }
 
@@ -89,12 +88,13 @@ function bookmarkMoved(dropEvt) {
 		var itemData = {name: item.data("name"), address: item.data("address")};
 
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (dbe) {
+
-			var db = dbe.target.result;
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-			groupsStore.getAll().onsuccess = function (gete) {
+			groupsStore.getAll().onsuccess = function (getAllEvt) {
-				var groups = gete.target.result;
+				var groups = getAllEvt.target.result;
 
 				var oldGroupData = groups[oldGroupIndex];
 				var newGroupData = groups[newGroupIndex];
@@ -108,17 +108,22 @@ function bookmarkMoved(dropEvt) {
 				db.close();
 			}
 		}
-		openDBRequest.onerror = function (err) { console.error(err); }
+
+		openDBRequest.onerror = function (err) {
+			console.error(err);
+			window.alert("Error moving bookmark");
+		}
 	} else if (oldIndex != newIndex) {
 		var groupIndex = $(dropEvt.from).parent().data("group-index");
 
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (dbe) {
+
-			var db = dbe.target.result;
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-			groupsStore.get(groupIndex).onsuccess = function (gete) {
+			groupsStore.get(groupIndex).onsuccess = function (getEvt) {
-				var groupData = gete.target.result;
+				var groupData = getEvt.target.result;
 
 				var item = groupData.bookmarks[oldIndex];
 
@@ -129,7 +134,11 @@ function bookmarkMoved(dropEvt) {
 				db.close();
 			}
 		}
-		openDBRequest.onerror = function (err) { console.error(err); }
+
+		openDBRequest.onerror = function (err) {
+			console.error(err);
+			window.alert("Error moving bookmark");
+		}
 	}
 }
 
@@ -142,8 +151,8 @@ function deleteBookmark(e) {
 
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (e) {
+	openDBRequest.onsuccess = function (openEvt) {
-		var db = e.target.result;
+		var db = openEvt.target.result;
 		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
 		groupsStore.get(groupIndex).onsuccess = function (getEvt) {
@@ -153,28 +162,29 @@ function deleteBookmark(e) {
 
 			groupsStore.put(groupData);
 			bookmarkItem.hide(300, "swing", e => bookmarkItem.remove());
+
+			db.close();
 		}
 	}
 
-	openDBRequest.onerror = function (evt) {
+	openDBRequest.onerror = function (err) {
-		console.log("Error", evt);
+		console.log("Error", err);
 		window.alert("There was an error deleting the bookmark");
 	}
 }
 
-function deleteGroup(e) {
+function deleteGroup() {
 	var group = $(this); // the delete group button
 	var groupIndex = group.parent().parent().data("group-index");
 
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (dbe) {
+	openDBRequest.onsuccess = function (openEvt) {
-		var db = dbe.target.result;
+		var db = openEvt.target.result;
-
 		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-		groupsStore.getAll().onsuccess = function (getEvt) {
+		groupsStore.getAll().onsuccess = function (getAllEvt) {
-			var groups = getEvt.target.result;
+			var groups = getAllEvt.target.result;
 
 			for (let item of groups) {
 				if (item.groupIndex > groupIndex) {
@@ -199,8 +209,8 @@ function deleteGroup(e) {
 		}
 	}
 
-	openDBRequest.onerror = function (e) {
+	openDBRequest.onerror = function (err) {
-		console.error(e);
+		console.error(err);
 		window.alert("There was an error deleting the group");
 	}
 }
@@ -210,8 +220,8 @@ function enableEditing() {
 	$("#btnImport").prop("disabled", true);
 	$("#btnAdd").prop("disabled", true);
 
-	$(".bookmarkGroup").each(function (index) {
+	$(".bookmarkGroup").each(function (index, item) {
-		var item = $(this);
+		var item = $(item);
 		item.sortable({
 			group: { name: "bookmarkLists", pull: true, put: true },
 			draggable: ".bookmark",
@@ -239,8 +249,8 @@ function enableEditing() {
 }
 
 function disableEditing() {
-	$(".bookmarkGroup").each(function (index) {
+	$(".bookmarkGroup").each(function (index, item) {
-		$(this).sortable("destroy");
+		$(item).sortable("destroy");
 	});
 	$("#cardList").sortable("destroy");
 
@@ -265,26 +275,27 @@ function disableEditing() {
 
 function removeFromArray(arr, index) {
 	var newArr = [];
-	for (var i = 0; i < arr.length; i++) {
+	arr.forEach(function (item, i) {
 		if (i != index)
-			newArr.push(arr[i]);
+			newArr.push(item);
-	}
+	});
+
 	return newArr;
 }
 
-function addToArray(arr, item, index) {
+function addToArray(arr, itemToAdd, index) {
 	if (index == arr.length) {
 		arr.push(item);
 		return arr;
 	}
 
 	var newArr = [];
-	for (var i = 0; i < arr.length; i++) {
+	arr.forEach(function (item, i) {
 		if (i == index)
-			newArr.push(item);
+			newArr.push(itemToAdd);
 
-		newArr.push(arr[i]);
+		newArr.push(item);
-	}
+	});
 
 	return newArr;
 }

js/importExport.js

@@ -5,7 +5,7 @@ $(document).ready(function () {
 	$("#copyExport").click(copyExport);
 });
 
-function showImportModal(e) {
+function showImportModal() {
 	$("#copyExportTxt").removeClass("text-success text-danger").addClass("text-muted").text("Copy");
 	$("#exportText").val("");
 	$("#importText").val("");
@@ -14,14 +14,16 @@ function showImportModal(e) {
 function showBookmarkData() {
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (e) {
+	openDBRequest.onsuccess = function (openEvt) {
-		var db = e.target.result;
+		var db = openEvt.target.result;
 
-		db.transaction("Groups").objectStore("Groups").getAll().onsuccess = function (evt) {
+		db.transaction("Groups").objectStore("Groups").getAll().onsuccess = function (getAllEvt) {
-			var res = evt.target.result;
+			var res = getAllEvt.target.result;
 			var data = JSON.stringify(res, null, 4);
 			$("#exportText").val(data);
 		}
+
+		db.close();
 	}
 }
 
@@ -29,7 +31,7 @@ function importBookmarks() {
 	try {
 		var newData = $.parseJSON($("#importText").val());
 	} catch (err) {
-		console.error("Import failed: " + err.message);
+		console.error(err);
 		window.alert("Invalid Format");
 		return;
 	}
@@ -53,7 +55,7 @@ function setList(data) {
 		groupStore.clear();
 
 		// create the object stores
-		for (group of data) {
+		for (let group of data) {
 			groupStore.add(group);
 		}
 
@@ -108,7 +110,7 @@ function validateBookmarks(bookmarks) {
 }
 
 function arrayContains(array, searchFor) {
-	for (item of array) {
+	for (let item of array) {
 		if (item == searchFor)
 			return true;
 	}

js/loadBookmarks.js

@@ -6,41 +6,31 @@ function loadBookmarks() {
 	$("#cardList").empty();
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (dbEvt) {
+	openDBRequest.onsuccess = function (openEvt) {
-		db = dbEvt.target.result;
+		db = openEvt.target.result;
-		dbVersion = db.version;
 
-		db.transaction(["Groups"], "readonly").objectStore("Groups").getAll().onsuccess = function (groupsEvt) {
+		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
+			// use a placholder to prevent problems with sortable
 			var cardList = $("#cardList");
 			for (let groupData of groups) {
-				$("<div>").attr("id", "group-" + groupData.groupIndex)
+				var placeholder = $("<div>").attr("id", "group-" + groupData.groupIndex)
 					.addClass("bookmarkGroupContainer")
 					.appendTo(cardList);
-			}
+				buildCard(groupData.title, groupData.groupIndex, groupData.bookmarks)
-
+					.appendTo(placeholder);
-			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 (openEvt) {
-
+		db = openEvt.target.result;
-	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 });
@@ -63,13 +53,15 @@ function loadBookmarks() {
 		};
 
 		groupStore.add(groupData);
+		db.close();
 
 		$("#aboutModal").modal("show");
 	}
-}
 
-function buildGroup(groupInfo, placeholder) {
+	openDBRequest.onerror = function (err) {
-	buildCard(groupInfo.title, groupInfo.groupIndex, groupInfo.bookmarks).appendTo(placeholder);
+		console.log(err);
+		window.alert("Error loading bookmarks");
+	}
 }
 
 function buildCard(title, groupIndex, itemList) {
@@ -81,26 +73,22 @@ function buildCard(title, groupIndex, itemList) {
 		"data-group-index": groupIndex
 	});
 
-	var cardHead = $("<div>");
+	var cardHead = $("<div>").addClass("card-header").text(title).appendTo(card);
-	cardHead.addClass("card-header");
+	$("<span>") // use wrapper, sortable has issues with <svg> dragHandle
-	cardHead.text(title);
+		.addClass("mr-2 start-hidden dragGroupHandle")
-	var btnDrag = $("<span>").addClass("mr-2 start-hidden dragGroupHandle")
+		.append($("<span>").addClass("fas fa-bars")) // move group icon
-		.append($("<span>").addClass("fas fa-bars"));
+		.prependTo(cardHead);
-	var btnDel = $("<span>")
+	$("<span>") // delete group button
-		.addClass("btnDelGroup far fa-trash-alt float-right mt-1 start-hidden text-danger clickable");
+		.addClass("btnDelGroup far fa-trash-alt float-right mt-1 start-hidden text-danger clickable")
-	btnDel.appendTo(cardHead);
+		.appendTo(cardHead);
-	btnDrag.prependTo(cardHead);
-	card.append(cardHead);
 
-	var cardList = $("<div>");
+	var cardList = $("<div>")
-	cardList.addClass("list-group list-group-flush bookmarkGroup");
+		.addClass("list-group list-group-flush bookmarkGroup")
-	card.append(cardList);
+		.appendTo(card);
 
-	for (var i = 0; i < itemList.length; i++) {
+	itemList.forEach(function (item, i) {
-		var item = itemList[i];
+		var handle = $("<span>") // use wrapper, sortable has issues with <svg> dragHandle
-		// the fa span gets replaced with an svg element, which causes problems
+			.addClass("mr-2 start-hidden dragHandle")
-		// 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>")
@@ -119,7 +107,7 @@ function buildCard(title, groupIndex, itemList) {
 			.prepend(handle)
 			.append(del)
 			.appendTo(cardList);
-	}
+	});
 
 	return card;
 }