Make js/options/favs.js actually usable

I pretty much had to rework this completely to get it into a usable state

Reference ctrlcctrlv/infinity#424

1 files changed, 27 insertions, 49 deletions

diff --git a/js/options/fav.js b/js/options/fav.js
index f8d12bf3..17ccb337 100644
--- a/js/options/fav.js
+++ b/js/options/fav.js
@@ -1,94 +1,72 @@
-//Setting global variables
-var favorites = JSON.parse(localStorage.favorites);
-Options.add_tab('fav-tab','star',_("Favorites"));
-
+$(document).ready(function(){
 //Creating functions
 var generateList = function(){
 	var favStor = [];
   	for(var i=1; i<favorites.length+1; i++){
   		favStor.push($("#sortable > div:nth-child("+i+")").html());
   	}
-	return JSON.stringify(favStor);
+	return favStor;
 } //This will generate a list of boards based off of the list on the screen
 function removeBoard(boardNumber){
 	favorites.splice(boardNumber, 1);
 	localStorage.favorites = JSON.stringify(favorites);
 	$("#sortable > div:nth-child("+(boardNumber+1)+")").remove();
 	$("#minusList > div:nth-child("+(favorites.length+1)+")").remove();
+	add_favorites();
 } //This removes a board from favorites, localStorage.favorites and the page
 function addBoard(){
 	$("#sortable").append("<div>"+($("#plusBox").val())+"</div>");
-	$("#minusList").append("<div onclick=\"removeBoard("+favorites.length+")\" style=\"cursor: pointer; margin-left: 5px\">-</div>");
+	$("#minusList").append( $('<div data-board="'+favorites.length+'" style="cursor: pointer; margin-right: 5px">-</div>').on('click', function(e){removeBoard($(this).data('board'));}) );
 	favorites.push($("#plusBox").val());
 	localStorage.favorites = JSON.stringify(favorites);
-	$("#space").remove();
-	$("#plusBox").remove(); //Refreshing the last 3 elements to move the box down
-	$("#plus").remove();
-	$("#submitFavorites").remove();
-	$("<br id=\"space\"></br>").appendTo(Options.get_tab('fav-tab').content);
-	$("<input id=\"plusBox\" type=\"text\">").appendTo(Options.get_tab('fav-tab').content);
-	$("#plusBox").keydown(function( event ) {
- 		if(event.keyCode == 13){
- 			$("#plus").click();
- 		}
-	}); //Adding enter to submit
-	document.getElementById("plusBox").value = ""; //Removing text from textbox
-	$("#plusBox").focus(); //Moving cursor into text box again after refresh
-	$("<div id=\"plus\" onclick=\"addBoard()\">+</div>").css({
-		cursor: "pointer",
-		color: "#0000FF"
-	}).appendTo(Options.get_tab('fav-tab').content); //Adding the plus to the tab
-	$("<input id=\"submitFavorites\" onclick=\"localStorage.favorites=generateList();document.location.reload();\" type=\"button\" value=\""+_("Refresh")+"\">").css({
-		height: 25, bottom: 5,
-		width: "calc(100% - 10px)",
-		left: 5, right: 5
-	}).appendTo(Options.get_tab('fav-tab').content); //Adding button to the tab
+	$("#plusBox").val(""); //Removing text from textbox
+	add_favorites();
 } //This adds the text inside the textbox to favorites, localStorage.favorites and the page
 
-//Making as many functions and variables non-global
-$(document).ready(function(){
+var favorites = JSON.parse(localStorage.favorites);
+Options.add_tab('fav-tab','star',_("Favorites"));
 
 //Pregenerating list of boards 
-var favList = ['<div id="sortable" style="cursor: pointer; float: left;display: inline-block">'];
+var favList = $('<div id="sortable" style="cursor: pointer; display: inline-block">');
 for(var i=0; i<favorites.length; i++){
-    favList += '<div>'+favorites[i]+'</div>';
+    favList.append( $('<div>'+favorites[i]+'</div>') );
 } 
-favList += '</div>';
 
 //Creating list of minus symbols to remove unwanted boards
-var minusList = ['<div id="minusList" style="color: #0000FF;display: inline-block">'];
+var minusList = $('<div id="minusList" style="color: #0000FF; display: inline-block">');
 for(var i=0; i<favorites.length; i++){
-    minusList += '<div onclick="removeBoard('+i+')" style="cursor: pointer; margin-left: 5px">-</div>';
+    minusList.append( $('<div data-board="'+i+'" style="cursor: pointer; margin-right: 5px">-</div>').on('click', function(e){removeBoard($(this).data('board'));}) );
 } 
-minusList += "</div>"; 
 
 //Help message so people understand how sorting boards works
-$("<span>Drag the boards to sort them.</span><br></br>").appendTo(Options.get_tab('fav-tab').content);
+$("<span>"+_("Drag the boards to sort them.")+"</span><br><br>").appendTo(Options.get_tab('fav-tab').content);
 
 //Adding list of boards and minus symbols to remove boards with
-$(favList).appendTo(Options.get_tab('fav-tab').content);  //Adding the list of favorite boards to the tab
 $(minusList).appendTo(Options.get_tab('fav-tab').content); //Adding the list of minus symbols to the tab
+$(favList).appendTo(Options.get_tab('fav-tab').content);  //Adding the list of favorite boards to the tab
 
 //Adding spacing and text box to right boards into
-$("<br id=\"space\"></br>").appendTo(Options.get_tab('fav-tab').content);
-$("<input id=\"plusBox\" type=\"text\">").appendTo(Options.get_tab('fav-tab').content);
-$("#plusBox").keydown(function( event ) {
+var addDiv = $("<div id='favs-add-board'>");
+
+var plusBox = $("<input id=\"plusBox\" type=\"text\">").appendTo(addDiv);
+plusBox.keydown(function( event ) {
 	if(event.keyCode == 13){
 		$("#plus").click();
 	}
 });
 
 //Adding plus symbol to use to add board
-$("<div id=\"plus\" onclick=\"addBoard()\">+</div>").css({
+$("<div id=\"plus\">+</div>").css({
 	cursor: "pointer",
 	color: "#0000FF"
-}).appendTo(Options.get_tab('fav-tab').content); //Adding the plus button
-$("<input id=\"submitFavorites\" onclick=\"localStorage.favorites=generateList();document.location.reload();\" type=\"button\" value=\""+_("Submit")+"\">").css({
-	height: 25, bottom: 5,
-	width: "calc(100% - 10px)",
-	left: 5, right: 5
-}).appendTo(Options.get_tab('fav-tab').content); //Adding submit button to the tab
+}).on('click', function(e){addBoard()}).appendTo(addDiv);
 
-$("#sortable").sortable(); //Making boards with sortable id use the sortable jquery function
+addDiv.appendTo(Options.get_tab('fav-tab').content); //Adding the plus button
 
+favList.sortable(); //Making boards with sortable id use the sortable jquery function
+favList.on('sortstop', function() {
+	favorites = generateList();	
+	localStorage.favorites = JSON.stringify(favorites);
+	add_favorites();
+});
 });