From c31c5e70588a4cdb1af4b54a7dc82f4e5876782c Mon Sep 17 00:00:00 2001
From: Neil Brommer <neil@neilbrommer.com>
Date: Tue, 12 Dec 2017 16:41:59 -0800
Subject: [PATCH] Split javascript into several more managable pieces

---
 index.html          |   7 +-
 js/addBookmarks.js  | 107 ++++++++++++++
 js/editBookmarks.js |   6 +
 js/importExport.js  |  98 +++++++++++++
 js/loadBookmarks.js | 139 ++++++++++++++++++
 js/main.js          | 347 --------------------------------------------
 6 files changed, 356 insertions(+), 348 deletions(-)
 create mode 100644 js/addBookmarks.js
 create mode 100644 js/editBookmarks.js
 create mode 100644 js/importExport.js
 create mode 100644 js/loadBookmarks.js

diff --git a/index.html b/index.html
index 5272497..3bb1053 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
 						<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>
+								<option value="--">New Group</option>
 							</select>
 						</div>
 						<div id="createGroup" class="form-group newGroup">
@@ -183,7 +183,12 @@
 	<script src="lib/jquery-3.2.1.min.js"></script>
 	<script src="lib/popper.js"></script>
 	<script src="lib/bootstrap/js/bootstrap.min.js"></script>
+
 	<script src="js/main.js"></script>
+	<script src="js/loadBookmarks.js"></script>
+	<script src="js/addBookmarks.js"></script>
+	<script src="js/editBookmarks.js"></script>
+	<script src="js/importExport.js"></script>
 </body>
 
 </html>
diff --git a/js/addBookmarks.js b/js/addBookmarks.js
new file mode 100644
index 0000000..dbfde86
--- /dev/null
+++ b/js/addBookmarks.js
@@ -0,0 +1,107 @@
+$(document).ready(function () {
+	$("#newBookmarkModal").on("shown.bs.modal", function () {
+		var combo = $("#newBookmarkGroup");
+		combo.empty();
+		combo.append($("<option>").attr({ "value": "--" })
+			.text("New Group"));
+
+		for (let group of bookmarkList) {
+			combo.append($("<option>").attr({ "value": group.title })
+				.text(group.title));
+		}
+
+		$("#createGroup").prop("required", true);
+	});
+
+	$("#addBookmarkForm").submit(addNewBookmark);
+
+	$("#newBookmarkGroup").on("change", selectGroupChanged);
+});
+
+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 selectGroupChanged(value) {
+	var groupText = $("#createGroup");
+	if (value == "--") {
+		groupText.show();
+		groupText.prop("required", true);
+	} else {
+		groupText.hide();
+		groupText.prop("required", false);
+	}
+}
diff --git a/js/editBookmarks.js b/js/editBookmarks.js
new file mode 100644
index 0000000..df0d733
--- /dev/null
+++ b/js/editBookmarks.js
@@ -0,0 +1,6 @@
+$(document).ready(function () {
+	$("#btnEdit").click(function (e) {
+		// TODO: editing bookmarks
+		window.alert("Editing is currently not implemented");
+	});
+});
diff --git a/js/importExport.js b/js/importExport.js
new file mode 100644
index 0000000..a49c427
--- /dev/null
+++ b/js/importExport.js
@@ -0,0 +1,98 @@
+$(document).ready(function () {
+	$("#importExportModal").on("shown.bs.modal", function () {
+		var data = JSON.stringify(bookmarkList, null, 4);
+		if (data != null)
+			$("#exportText").text(data);
+		else
+			$("#exportText").text("[]");
+	});
+
+	$("#btnImport").click(importBookmarks);
+
+	$("#exportText").click(function () {
+		$("#exportText").select();
+	});
+});
+
+function importBookmarks() {
+	try {
+		var newData = $.parseJSON($("#importText").val());
+	} catch (err) {
+		console.error("Import failed: " + err.message);
+		window.alert("Invalid Format");
+		return;
+	}
+
+	if (verifyBookmarks(newData)) {
+		setList(newData);
+
+		$("#importExportModal").modal("hide");
+	} else {
+		window.alert("Invalid Format");
+	}
+}
+
+function setList(data) {
+	// empty the DB and fill it with the new data
+	bookmarkList = data;
+
+	try {
+		indexedDB.deleteDatabase("bookmarks");
+	} catch (err) {
+		// it's OK if the DB doesn't exist
+		if (err.name != "NotFoundError") {
+			console.error(err);
+			return;
+		}
+	}
+	var openDBRequest = window.indexedDB.open("bookmarks", 1);
+
+	openDBRequest.onsuccess = function (e) {
+		dbVersion = db.version;
+		db.close();
+		loadBookmarks();
+	}
+
+	openDBRequest.onerror = function (err) { console.error(err); }
+
+	openDBRequest.onupgradeneeded = function (e) {
+		db = e.target.result;
+
+		var groupStore = initDB(db);
+
+		// create the object stores
+		for (var i = 0; i < data.length; i++) {
+			addGroup(data[i], groupStore, db, i);
+		}
+	}
+}
+
+function verifyBookmarks(bookmarks) {
+	if (!Array.isArray(bookmarks))
+		return false;
+
+	for (var i = 0; i < bookmarks.length; i++) {
+		var item = bookmarks[i];
+
+		if (item == null || typeof item != "object")
+			return false;
+
+		if (item.title == null || typeof item.title != "string")
+			return false;
+
+		for (var j = 0; j < item.bookmarks.length; j++) {
+			var bkmk = item.bookmarks[j];
+
+			if (bkmk == null || typeof bkmk != "object")
+				return false;
+
+			if (bkmk.name == null || typeof bkmk.name != "string")
+				return false;
+
+			if (bkmk.address == null || typeof bkmk.address != "string")
+				return false;
+		}
+	}
+
+	return true;
+}
diff --git a/js/loadBookmarks.js b/js/loadBookmarks.js
new file mode 100644
index 0000000..46b2b76
--- /dev/null
+++ b/js/loadBookmarks.js
@@ -0,0 +1,139 @@
+$(document).ready(function () {
+	loadBookmarks();
+});
+
+function loadBookmarks() {
+	$("#cardList").empty();
+	var openDBRequest = window.indexedDB.open("bookmarks");
+
+	openDBRequest.onsuccess = function (dbEvt) {
+		db = dbEvt.target.result;
+		dbVersion = db.version;
+		bookmarkList = [];
+
+		db.transaction(["groupIndexes"], "readonly")
+			.objectStore("groupIndexes")
+			.getAll()
+			.onsuccess = function (indexEvt) {
+				var indexes = indexEvt.target.result;
+
+				// use a placholder because getting the group info is async
+				// and groups could finish loading in a different order
+				var cardList = $("#cardList");
+				for (var i = 0; i < indexes.length; i++) {
+					$("<div>").attr("id", "group-" + i).appendTo(cardList);
+				}
+
+				for (let item of indexes) {
+					buildGroup(item, $("#group-" + item.groupIndex));
+				}
+
+				db.close();
+			}
+		;
+	}
+
+	openDBRequest.onerror = function (e) { console.log(e); }
+
+	openDBRequest.onupgradeneeded = function (e) {
+		// the database doesn't exist
+		console.log("Creating database");
+		db = e.target.result;
+
+		var data = window.localStorage.getItem("bookmarks");
+		if (data != null) {
+			console.log("Importing data from old version");
+			data = JSON.parse(data);
+			db.close();
+			setList(data);
+			window.localStorage.removeItem("bookmarks");
+		} else {
+			var groupStore = initDB(db);
+
+			// add example bookmarks
+			var exBookmarks = db.createObjectStore("Examples", { autoIncrement: true });
+			exBookmarks.createIndex("name", "name", { unique: false });
+			exBookmarks.createIndex("address", "address", { unique: false });
+			groupStore.add({ "title": "Examples", "groupIndex": 0 });
+
+			exBookmarks.add({
+				"name": "Github",
+				"address": "https://github.com/"
+			});
+			exBookmarks.add({
+				"name": "This project on Github",
+				"address": "https://github.com/NeilBrommer/NewTabPage"
+			});
+			exBookmarks.add({
+				"name": "Hacker News",
+				"address": "https://news.ycombinator.com/"
+			});
+			exBookmarks.add({
+				"name": "reddit",
+				"address": "https://www.reddit.com/"
+			});
+
+			$("#aboutModal").modal("show");
+		}
+	}
+}
+
+function buildGroup(groupInfo, placeholder) {
+	var groupTransaction = db.transaction([groupInfo.title], "readonly");
+	var groupStore = groupTransaction.objectStore(groupInfo.title);
+	var groupRequest = groupStore.getAll();
+	groupRequest.onsuccess = function (e) {
+		var bookmarks = e.target.result;
+
+		bookmarkList[groupInfo.groupIndex] = {
+			"title": groupInfo.title,
+			"bookmarks": bookmarks
+		};
+
+		buildCard(groupInfo.title, bookmarks).appendTo(placeholder);
+	}
+}
+
+function buildCard(title, itemList) {
+	var card = $(document.createElement("div"));
+	card.attr({
+		"id": "group-" + title,
+		"class": "card bookmarkGroup"
+	});
+
+	var cardHead = $(document.createElement("div"));
+	cardHead.attr({ "class": "card-header" });
+	cardHead.text(title);
+	card.append(cardHead);
+
+	var cardList = $(document.createElement("div"));
+	cardList.attr({ "class": "list-group list-group-flush" });
+	card.append(cardList);
+
+	for (var i = 0; i < itemList.length; i++) {
+		var item = itemList[i];
+		var link = $(document.createElement("a"));
+		link.attr({
+			"class": "list-group-item list-group-item-action",
+			"href": item.address
+		});
+		link.text(item.name);
+
+		cardList.append(link);
+	}
+
+	return card;
+}
+
+function addGroup(group, groupStore, db, index) {
+	var objStore = db.createObjectStore(group.title, { autoIncrement: true });
+	objStore.createIndex("name", "name", { unique: false });
+	objStore.createIndex("address", "address", { unique: false });
+	groupStore.add({ "title": group.title, "groupIndex": index });
+
+	var bookmarks = group.bookmarks;
+	for (var i = 0; i < bookmarks.length; i++) {
+		var bkmk = bookmarks[i];
+		objStore.add({ "name": bkmk.name, "address": bkmk.address }, i);
+	}
+}
diff --git a/js/main.js b/js/main.js
index 391c034..f608d80 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,272 +4,8 @@ var dbVersion;
 
 $(document).ready(function () {
 	calcBackground();
-	loadBookmarks();
-
-	$("#importExportModal").on("shown.bs.modal", function () {
-		var data = getListString();
-		if (data != null)
-			$("#exportText").text(data);
-		else
-			$("#exportText").text("[]");
-	});
-
-	$("#newBookmarkModal").on("shown.bs.modal", function () {
-		var combo = $("#newBookmarkGroup");
-		combo.empty();
-		combo.append($("<option>").attr({ "value": "--" })
-			.text("New Group"));
-
-		for (let group of bookmarkList) {
-			combo.append($("<option>").attr({ "value": group.title })
-				.text(group.title));
-		}
-
-		$("#createGroup").prop("required", true);
-	});
-
-	$("#addBookmarkForm").submit(addNewBookmark);
-
-	$("#btnEdit").click(function (e) {
-		// TODO: editing bookmarks
-		window.alert("Editing is currently not implemented");
-	});
-
-	$("#btnImport").click(importBookmarks);
-	$("#exportText").click(function () {
-		$("#exportText").select();
-	});
 });
 
-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() {
-	try {
-		var newData = $.parseJSON($("#importText").val());
-	} catch (err) {
-		console.error("Import failed: " + err.message);
-		window.alert("Invalid Format");
-		return;
-	}
-
-	if (verifyBookmarks(newData)) {
-		setList(newData);
-
-		$("#importExportModal").modal("hide");
-	} else {
-		window.alert("Invalid Format");
-	}
-}
-
-function loadBookmarks() {
-	$("#cardList").empty();
-	var openDBRequest = window.indexedDB.open("bookmarks");
-
-	openDBRequest.onsuccess = function (dbEvt) {
-		db = dbEvt.target.result;
-		dbVersion = db.version;
-		bookmarkList = [];
-
-		db.transaction(["groupIndexes"], "readonly")
-			.objectStore("groupIndexes")
-			.getAll()
-			.onsuccess = function (indexEvt) {
-				var indexes = indexEvt.target.result;
-
-				// use a placholder because getting the group info is async
-				// and groups could finish loading in a different order
-				var cardList = $("#cardList");
-				for (var i = 0; i < indexes.length; i++) {
-					$("<div>").attr("id", "group-" + i).appendTo(cardList);
-				}
-
-				for (let item of indexes) {
-					buildGroup(item, $("#group-" + item.groupIndex));
-				}
-
-				db.close();
-			}
-		;
-	}
-
-	openDBRequest.onerror = function (e) { console.log(e); }
-
-	openDBRequest.onupgradeneeded = function (e) {
-		// the database doesn't exist
-		console.log("Creating database");
-		db = e.target.result;
-
-		var data = window.localStorage.getItem("bookmarks");
-		if (data != null) {
-			console.log("Importing data from old version");
-			data = JSON.parse(data);
-			db.close();
-			setList(data);
-			window.localStorage.removeItem("bookmarks");
-		} else {
-			var groupStore = initDB(db);
-
-			// add example bookmarks
-			var exBookmarks = db.createObjectStore("Examples", { autoIncrement: true });
-			exBookmarks.createIndex("name", "name", { unique: false });
-			exBookmarks.createIndex("address", "address", { unique: false });
-			groupStore.add({ "title": "Examples", "groupIndex": 0 });
-
-			exBookmarks.add({
-				"name": "Github",
-				"address": "https://github.com/"
-			});
-			exBookmarks.add({
-				"name": "This project on Github",
-				"address": "https://github.com/NeilBrommer/NewTabPage"
-			});
-			exBookmarks.add({
-				"name": "Hacker News",
-				"address": "https://news.ycombinator.com/"
-			});
-			exBookmarks.add({
-				"name": "reddit",
-				"address": "https://www.reddit.com/"
-			});
-
-			$("#aboutModal").modal("show");
-		}
-	}
-}
-
-function buildGroup(groupInfo, placeholder) {
-	var groupTransaction = db.transaction([groupInfo.title], "readonly");
-	var groupStore = groupTransaction.objectStore(groupInfo.title);
-	var groupRequest = groupStore.getAll();
-	groupRequest.onsuccess = function (e) {
-		var bookmarks = e.target.result;
-
-		bookmarkList[groupInfo.groupIndex] = {
-			"title": groupInfo.title,
-			"bookmarks": bookmarks
-		};
-
-		buildCard(groupInfo.title, bookmarks).appendTo(placeholder);
-	}
-}
-
-function buildCard(title, itemList) {
-	var card = $(document.createElement("div"));
-	card.attr({
-		"id": "group-" + title,
-		"class": "card bookmarkGroup"
-	});
-
-	var cardHead = $(document.createElement("div"));
-	cardHead.attr({ "class": "card-header" });
-	cardHead.text(title);
-	card.append(cardHead);
-
-	var cardList = $(document.createElement("div"));
-	cardList.attr({ "class": "list-group list-group-flush" });
-	card.append(cardList);
-
-	for (var i = 0; i < itemList.length; i++) {
-		var item = itemList[i];
-		var link = $(document.createElement("a"));
-		link.attr({
-			"class": "list-group-item list-group-item-action",
-			"href": item.address
-		});
-		link.text(item.name);
-
-		cardList.append(link);
-	}
-
-	return card;
-}
-
-function selectGroupChanged(value) {
-	var groupText = $("#createGroup");
-	if (value == "--") {
-		groupText.show();
-		groupText.prop("required", true);
-	} else {
-		groupText.hide();
-		groupText.prop("required", false);
-	}
-}
-
 function calcBackground() {
 	var now = new Date();
 	var hours = now.getHours();
@@ -307,46 +43,6 @@ function setBackground(num, dark) {
 	}
 }
 
-function getListString() {
-	return JSON.stringify(bookmarkList, null, 4);
-}
-
-function setList(data) {
-	// empty the DB and fill it with the new data
-	bookmarkList = data;
-
-	try {
-		indexedDB.deleteDatabase("bookmarks");
-	} catch (err) {
-		// it's OK if the DB doesn't exist
-		if (err.name != "NotFoundError") {
-			console.error(err);
-			return;
-		}
-	}
-	var openDBRequest = window.indexedDB.open("bookmarks", 1);
-
-	openDBRequest.onsuccess = function (e) {
-		dbVersion = db.version;
-		db.close();
-		loadBookmarks();
-	}
-
-	openDBRequest.onerror = function (err) { console.error(err); }
-
-	openDBRequest.onupgradeneeded = function (e) {
-		console.log("filling db");
-		db = e.target.result;
-
-		var groupStore = initDB(db);
-
-		// create the object stores
-		for (var i = 0; i < data.length; i++) {
-			addGroup(data[i], groupStore, db, i);
-		}
-	}
-}
-
 function initDB(db) {
 	// use a table to keep track of the order of groups
 	var groupStore = db.createObjectStore("groupIndexes", { keyPath: "title" });
@@ -354,46 +50,3 @@ function initDB(db) {
 	groupStore.createIndex("groupIndex", "groupIndex", { unique: true });
 	return groupStore;
 }
-
-function addGroup(group, groupStore, db, index) {
-	var objStore = db.createObjectStore(group.title, { autoIncrement: true });
-	objStore.createIndex("name", "name", { unique: false });
-	objStore.createIndex("address", "address", { unique: false });
-	groupStore.add({ "title": group.title, "groupIndex": index });
-
-	var bookmarks = group.bookmarks;
-	for (var i = 0; i < bookmarks.length; i++) {
-		var bkmk = bookmarks[i];
-		objStore.add({ "name": bkmk.name, "address": bkmk.address }, i);
-	}
-}
-
-function verifyBookmarks(bookmarks) {
-	if (!Array.isArray(bookmarks))
-		return false;
-
-	for (var i = 0; i < bookmarks.length; i++) {
-		var item = bookmarks[i];
-
-		if (item == null || typeof item != "object")
-			return false;
-
-		if (item.title == null || typeof item.title != "string")
-			return false;
-
-		for (var j = 0; j < item.bookmarks.length; j++) {
-			var bkmk = item.bookmarks[j];
-
-			if (bkmk == null || typeof bkmk != "object")
-				return false;
-
-			if (bkmk.name == null || typeof bkmk.name != "string")
-				return false;
-
-			if (bkmk.address == null || typeof bkmk.address != "string")
-				return false;
-		}
-	}
-
-	return true;
-}