NewTabPage/js/editBookmarks.js

$(document).ready(function () {
	$("#btnEdit").click(toggleEditing);
});

function toggleEditing (e) {
	var btnEdit = $("#btnEdit");
	if (btnEdit.hasClass("btn-warning")) {
		$(".bookmarkGroup").each(function (index) {
			$(this).sortable("destroy");
		});
		$("#cardList").sortable("destroy");

		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);
		$(".dragHandle").hide(200);
		$(".dragGroupHandle").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);

		$(".bookmarkGroup").each(function (index) {
			var item = $(this);
			item.sortable({
				group: { name: "bookmarkLists", pull: true, put: true },
				draggable: ".bookmark",
				handle: ".dragHandle",
				animation: 100,
				onEnd: bookmarkMoved
			});
		});

		$("#cardList").sortable({
			group: { name: "bookmarksGroups" },
			draggable: ".bookmarkGroupContainer",
			handle: ".dragGroupHandle",
			animation: 100,
			onEnd: groupMoved
		});

		$(".btnDel").show(200);
		$(".btnDelGroup").show(200);
		$(".dragHandle").show(200);
		$(".dragGroupHandle").show(200);
		$(".bookmark").click(disableLink);
		$(".btnDel").click(deleteBookmark);
		$(".btnDelGroup").click(deleteGroup);
	}
}

function groupMoved(dropEvt) {
	var newIndex = dropEvt.newIndex;
	var oldIndex = dropEvt.oldIndex;

	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) {
			var db = e.target.result;

			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
			groupsStore.getAll().onsuccess = function (evt) {
				var groups = evt.target.result;

				if (newIndex > oldIndex) {
					for (let g of groups) {
						if (g.groupIndex > oldIndex && g.groupIndex <= newIndex) {
							g.groupIndex--;
							groupsStore.put(g);
						}
					}
				} else { // oldIndex > newIndex
					for (let g of groups) {
						if (g.groupIndex < oldIndex && g.groupIndex >= newIndex) {
							g.groupIndex++;
							groupsStore.put(g);
						}
					}
				}

				groups[oldIndex].groupIndex = newIndex;
				groupsStore.put(groups[oldIndex]);

				db.close();
			}
		}

		openDBRequest.onerror = function (err) { console.log(err); }
	}
}

function bookmarkMoved(dropEvt) {
	var oldIndex = dropEvt.oldIndex;
	var newIndex = dropEvt.newIndex;

	if (dropEvt.from != dropEvt.to) {
		var oldGroupIndex = $(dropEvt.from).data("group-index");
		var newGroupIndex = $(dropEvt.to).data("group-index");

		var item = $(dropEvt.item);
		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;
			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");

			groupsStore.getAll().onsuccess = function (gete) {
				var groups = gete.target.result;

				var oldGroupData = groups[oldGroupIndex];
				var newGroupData = groups[newGroupIndex];

				oldGroupData.bookmarks = removeFromArray(oldGroupData.bookmarks, oldIndex);
				groupsStore.put(oldGroupData);

				newGroupData.bookmarks = addToArray(newGroupData.bookmarks, itemData, newIndex);
				groupsStore.put(newGroupData);

				db.close();
			}
		}
		openDBRequest.onerror = function (err) { console.error(err); }
	} else if (oldIndex != newIndex) {
		var groupIndex = $(dropEvt.from).data("group-index");

		var openDBRequest = window.indexedDB.open("bookmarks");
		openDBRequest.onsuccess = function (dbe) {
			var db = dbe.target.result;
			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");

			groupsStore.get(groupIndex).onsuccess = function (gete) {
				var groupData = gete.target.result;

				var item = groupData.bookmarks[oldIndex];

				groupData.bookmarks = removeFromArray(groupData.bookmarks, oldIndex);
				groupData.bookmarks = addToArray(groupData.bookmarks, item, newIndex);

				groupsStore.put(groupData);
				db.close();
			}
		}
		openDBRequest.onerror = function (err) { console.error(err); }
	}
}

function deleteBookmark(e) {
	var item = $(this);
	var group = item.data("group");
	var key = item.data("key");
	var groupIndex = item.data("group-index");

	var bookmarkItem = $("#" + group + "-" + key);

	var openDBRequest = window.indexedDB.open("bookmarks");

	openDBRequest.onsuccess = function (e) {
		var db = e.target.result;
		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");

		groupsStore.get(groupIndex).onsuccess = function (getEvt) {
			var groupData = getEvt.target.result;

			// remove the bookmark from the group object
			var bookmarkData = {name: bookmarkItem.data("name"), address: bookmarkItem.data("address")};
			groupData.bookmarks = groupData.bookmarks.filter(function (item) {
				if (item.name != bookmarkData.name && item.address != bookmarkData.address)
					return true;
				return false;
			});

			groupsStore.put(groupData);
			bookmarkItem.remove();
		}
	}

	openDBRequest.onerror = function (evt) {
		console.log("Error", evt);
		window.alert("There was an error deleting the bookmark");
	}
}

function deleteGroup(e) {
	var group = $(this); // the delete group button
	var groupIndex = group.data("group");

	var openDBRequest = window.indexedDB.open("bookmarks");

	openDBRequest.onsuccess = function (dbe) {
		var db = dbe.target.result;

		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");

		groupsStore.getAll().onsuccess = function (getEvt) {
			var groups = getEvt.target.result;

			var lastIndex = -1;
			for (let item of groups) {
				if (item.groupIndex > groupIndex) {
					lastIndex = item.groupIndex;
					item.groupIndex--;
					groupsStore.put(item);
				}
			}

			groupsStore.delete(lastIndex);
			loadBookmarks();
		}
	}

	openDBRequest.onerror = function (e) {
		console.error(e);
		window.alert("There was an error deleting the group");
	}
}

function removeFromArray(arr, index) {
	var newArr = [];
	for (var i = 0; i < arr.length; i++) {
		if (i != index)
			newArr.push(arr[i]);
	}
	return newArr;
}

function addToArray(arr, item, index) {
	if (index == arr.length) {
		arr.push(item);
		return arr;
	}

	var newArr = [];
	for (var i = 0; i < arr.length; i++) {
		if (i == index)
			newArr.push(item);

		newArr.push(arr[i]);
	}

	return newArr;
}

function disableLink(e) {
	e.preventDefault();
}