Implement moving bookmarks

js/editBookmarks.js

@@ -5,7 +5,11 @@ $(document).ready(function () {
 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);
@@ -18,6 +22,7 @@ function toggleEditing (e) {
 
 		$(".btnDel").hide(200);
 		$(".btnDelGroup").hide(200);
+		$(".dragHandle").hide(200);
 		$(".dragGroupHandle").hide(200);
 		$(".bookmark").off("click", disableLink);
 		$(".btnDel").off("click", deleteBookmark);
@@ -27,6 +32,17 @@ function toggleEditing (e) {
 		$("#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",
@@ -37,6 +53,7 @@ function toggleEditing (e) {
 
 		$(".btnDel").show(200);
 		$(".btnDelGroup").show(200);
+		$(".dragHandle").show(200);
 		$(".dragGroupHandle").show(200);
 		$(".bookmark").click(disableLink);
 		$(".btnDel").click(deleteBookmark);
@@ -89,6 +106,62 @@ function groupMoved(dropEvt) {
 	}
 }
 
+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");
@@ -114,7 +187,6 @@ function deleteBookmark(e) {
 				return false;
 			});
 
-			// no need to provide key since keyPath is set
 			groupsStore.put(groupData);
 			bookmarkItem.remove();
 		}
@@ -160,6 +232,32 @@ function deleteGroup(e) {
 	}
 }
 
+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();
 }

js/loadBookmarks.js

@@ -75,7 +75,7 @@ function buildGroup(groupInfo, placeholder) {
 function buildCard(title, groupIndex, itemList) {
 	var card = $("<div>");
 	card.attr({
-		"id": "group-" + groupIndex,
+		"id": "group-" + title,
 		"class": "card",
 		"data-group-name": title,
 		"data-group-index": groupIndex
@@ -94,7 +94,8 @@ function buildCard(title, groupIndex, itemList) {
 	card.append(cardHead);
 
 	var cardList = $("<div>");
-	cardList.addClass("list-group list-group-flush bookmarkGroup").attr("data-group", title);
+	cardList.addClass("list-group list-group-flush bookmarkGroup")
+		.attr({"data-group": title, "data-group-index": groupIndex});
 	card.append(cardList);
 
 	for (var i = 0; i < itemList.length; i++) {