Implement moving bookmarks
This commit is contained in:
parent
036d680ba3
commit
7b3fe50f2e
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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++) {
|
||||
|
|
Loading…
Reference in a new issue