NeilBrommer/NewTabPage
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Implement adding bookmarks

Browse source
This commit is contained in:
Neil Brommer 2017-12-11 17:40:07 -08:00
parent e089ce8f21
commit 5d8f1f5a95
2 changed files with 135 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
index.html
View file

@ -28,7 +28,7 @@
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal">About</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
<button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button> <button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal">Add</button>
</form> </form>
</div> </div>
</nav> </nav>
@ -48,30 +48,32 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <form id="addBookmarkForm">
<div class="form-group"> <div class="modal-body">
<label for="newBookmarkName">Name</label> <div class="form-group">
<input id="newBookmarkName" type="text" class="form-control"> <label for="newBookmarkName">Name</label>
<input id="newBookmarkName" type="text" class="form-control" required>
</div>
<div class="form-group">
<label for="newBookmarkURL">Address</label>
<input id="newBookmarkURL" type="url" class="form-control" required>
</div>
<div class="form-group">
<label for="newBookmarkGroup">Group</label>
<select id="newBookmarkGroup" name="Group" class="form-control" onchange="selectGroupChanged(this.value)">
<option value="-">New Group</option>
</select>
</div>
<div id="createGroup" class="form-group newGroup">
<label for="newBookMarkGroupNew">New Group</label>
<input id="newBookMarkGroupNew" type="text" class="form-control">
</div>
</div> </div>
<div class="form-group"> <div class="modal-footer">
<label for="newBookmarkURL">Address</label> <button type="submit" class="btn btn-primary">Add</button>
<input id="newBookmarkURL" type="url" class="form-control"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> </div>
<div class="form-group"> </form>
<label for="newBookmarkGroup">Group</label>
<select id="newBookmarkGroup" name="Group" class="form-control" onchange="selectGroupChanged(this.value)">
<option value="-">New Group</option>
</select>
</div>
<div id="createGroup" class="form-group newGroup">
<label for="newBookMarkGroupNew">New Group</label>
<input id="newBookMarkGroupNew" type="text" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div> </div>
</div> </div>
</div> </div>

132
js/main.js
View file

@ -1,5 +1,6 @@
// use this when making changes so that there is no need to parse the page // use this when making changes so that there is no need to parse the page
var bookmarkList; var bookmarkList;
var dbVersion;
$(document).ready(function () { $(document).ready(function () {
calcBackground(); calcBackground();
@ -15,18 +16,20 @@ $(document).ready(function () {
$("#newBookmarkModal").on("shown.bs.modal", function () { $("#newBookmarkModal").on("shown.bs.modal", function () {
var combo = $("#newBookmarkGroup"); var combo = $("#newBookmarkGroup");
var data = getList(); combo.empty();
for (var i = 0; i < data.length; i++) { combo.append($("<option>").attr({ "value": "--" })
combo.append($("<option>").attr({ "value": i }) .text("New Group"));
.text(data[i].title));
for (let group of bookmarkList) {
combo.append($("<option>").attr({ "value": group.title })
.text(group.title));
} }
$("#createGroup").prop("required", true);
// TODO: complete adding bookmarks
window.alert("Adding bookmarks is still incomplete");
$("#newBookmarkModal").modal("hide");
}); });
$("#addBookmarkForm").submit(addNewBookmark);
$("#btnEdit").click(function (e) { $("#btnEdit").click(function (e) {
// TODO: editing bookmarks // TODO: editing bookmarks
window.alert("Editing is currently not implemented"); window.alert("Editing is currently not implemented");
@ -38,6 +41,83 @@ $(document).ready(function () {
}); });
}); });
function addNewBookmark(e) {
e.preventDefault();
// read in data from the form
var bkmkName = $("#newBookmarkName").val();
var bkmkAddress = $("#newBookmarkURL").val();
var bkmkGroup = $("#newBookmarkGroup").val();
if (bkmkGroup == "--") { // create a new group
var newGroupName = $("#newBookMarkGroupNew").val();
var newGroup = {
"title": newGroupName,
"bookmarks": [ { "name": bkmkName, "address": bkmkAddress } ]
};
var openDBRequest = window.indexedDB.open("bookmarks", dbVersion + 1);
openDBRequest.onupgradeneeded = function (e) {
var db = e.target.result;
if (db.objectStoreNames.contains(newGroup.title)) {
window.alert("The group already exists");
return;
}
var objStore = db.createObjectStore(newGroup.title, { autoIncrement: true });
objStore.createIndex("name", "name", { unique: false });
objStore.createIndex("address", "address", { unique: false });
var bookmarks = newGroup.bookmarks;
for (var i = 0; i < bookmarks.length; i++) {
var bkmk = bookmarks[i];
objStore.add({ "name": bkmk.name, "address": bkmk.address }, i);
}
}
openDBRequest.onsuccess = function (e) {
var db = e.target.result;
db.transaction(["groupIndexes"], "readwrite")
.objectStore("groupIndexes")
.add({ "title": newGroup.title, "groupIndex": bookmarkList.length });
bookmarkList.push(newGroup);
db.close();
loadBookmarks();
$(".modal").modal("hide");
}
openDBRequest.onerror = function (e) { console.log(e); }
} else { // add to existing group
var openDBRequest = window.indexedDB.open("bookmarks");
openDBRequest.onsuccess = function (e) {
var db = e.target.result;
var newItem = { "name": bkmkName, "address": bkmkAddress };
db.transaction([bkmkGroup], "readwrite")
.objectStore(bkmkGroup)
.add(newItem);
for (let group of bookmarkList) {
if (group.title == bkmkGroup) {
group.bookmarks.push(newItem);
break;
}
}
db.close();
loadBookmarks();
$(".modal").modal("hide");
}
openDBRequest.onerror = function (e) { console.log(e); }
}
}
function importBookmarks() { function importBookmarks() {
try { try {
var newData = $.parseJSON($("#importText").val()); var newData = $.parseJSON($("#importText").val());
@ -61,8 +141,8 @@ function loadBookmarks() {
var openDBRequest = window.indexedDB.open("bookmarks"); var openDBRequest = window.indexedDB.open("bookmarks");
openDBRequest.onsuccess = function (dbEvt) { openDBRequest.onsuccess = function (dbEvt) {
console.log("Opened database");
db = dbEvt.target.result; db = dbEvt.target.result;
dbVersion = db.version;
bookmarkList = []; bookmarkList = [];
db.transaction(["groupIndexes"], "readonly") db.transaction(["groupIndexes"], "readonly")
@ -105,7 +185,7 @@ function loadBookmarks() {
var groupStore = initDB(db); var groupStore = initDB(db);
// add example bookmarks // add example bookmarks
var exBookmarks = db.createObjectStore("Examples"); var exBookmarks = db.createObjectStore("Examples", { autoIncrement: true });
exBookmarks.createIndex("name", "name", { unique: false }); exBookmarks.createIndex("name", "name", { unique: false });
exBookmarks.createIndex("address", "address", { unique: false }); exBookmarks.createIndex("address", "address", { unique: false });
groupStore.add({ "title": "Examples", "groupIndex": 0 }); groupStore.add({ "title": "Examples", "groupIndex": 0 });
@ -113,19 +193,19 @@ function loadBookmarks() {
exBookmarks.add({ exBookmarks.add({
"name": "Github", "name": "Github",
"address": "https://github.com/" "address": "https://github.com/"
}, 0); });
exBookmarks.add({ exBookmarks.add({
"name": "This project on Github", "name": "This project on Github",
"address": "https://github.com/NeilBrommer/NewTabPage" "address": "https://github.com/NeilBrommer/NewTabPage"
}, 1); });
exBookmarks.add({ exBookmarks.add({
"name": "Hacker News", "name": "Hacker News",
"address": "https://news.ycombinator.com/" "address": "https://news.ycombinator.com/"
}, 2); });
exBookmarks.add({ exBookmarks.add({
"name": "reddit", "name": "reddit",
"address": "https://www.reddit.com/" "address": "https://www.reddit.com/"
}, 3); });
} }
} }
} }
@ -148,7 +228,10 @@ function buildGroup(groupInfo, placeholder) {
function buildCard(title, itemList) { function buildCard(title, itemList) {
var card = $(document.createElement("div")); var card = $(document.createElement("div"));
card.attr({ "id": "group-" + title, "class": "card bookmarkGroup" }); card.attr({
"id": "group-" + title,
"class": "card bookmarkGroup"
});
var cardHead = $(document.createElement("div")); var cardHead = $(document.createElement("div"));
cardHead.attr({ "class": "card-header" }); cardHead.attr({ "class": "card-header" });
@ -175,10 +258,14 @@ function buildCard(title, itemList) {
} }
function selectGroupChanged(value) { function selectGroupChanged(value) {
if (value == "-") var groupText = $("#createGroup");
$("#createGroup").show(); if (value == "--") {
else groupText.show();
$("#createGroup").hide(); groupText.prop("required", true);
} else {
groupText.hide();
groupText.prop("required", false);
}
} }
function calcBackground() { function calcBackground() {
@ -238,6 +325,7 @@ function setList(data) {
var openDBRequest = window.indexedDB.open("bookmarks", 1); var openDBRequest = window.indexedDB.open("bookmarks", 1);
openDBRequest.onsuccess = function (e) { openDBRequest.onsuccess = function (e) {
dbVersion = db.version;
db.close(); db.close();
loadBookmarks(); loadBookmarks();
} }
@ -252,7 +340,7 @@ function setList(data) {
// create the object stores // create the object stores
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
addGroup(data[i], groupStore, i); addGroup(data[i], groupStore, db, i);
} }
} }
} }
@ -265,8 +353,8 @@ function initDB(db) {
return groupStore; return groupStore;
} }
function addGroup(group, groupStore, index) { function addGroup(group, groupStore, db, index) {
var objStore = db.createObjectStore(group.title); var objStore = db.createObjectStore(group.title, { autoIncrement: true });
objStore.createIndex("name", "name", { unique: false }); objStore.createIndex("name", "name", { unique: false });
objStore.createIndex("address", "address", { unique: false }); objStore.createIndex("address", "address", { unique: false });
groupStore.add({ "title": group.title, "groupIndex": index }); groupStore.add({ "title": group.title, "groupIndex": index });