From c1296a3a6b45dfc0fdbb13aff489516b9d15f276 Mon Sep 17 00:00:00 2001
From: Chris Paul <chris@interviewing.io>
Date: Tue, 22 Jan 2019 10:45:16 -0800
Subject: [PATCH] Add favorites toggle

---
 index.css |  4 +++
 index.js  | 91 ++++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/index.css b/index.css
index bda9cd7..9974ff2 100644
--- a/index.css
+++ b/index.css
@@ -103,6 +103,10 @@ section.select-list a:active .name {
 section.select-list .active .name {
 	font-weight: bold;
 }
+section.select-list a.favoritelink {
+	margin-right: 2px;
+	color: red;
+}
 section.select-list a.website {
 	position: absolute;
 	top: 5px;
diff --git a/index.js b/index.js
index 902372d..2538a93 100644
--- a/index.js
+++ b/index.js
@@ -76,6 +76,72 @@ function selectLanguage() {
 	document.cookie = "language=" + lang + ";max-age=172800";
 }
 
+function renderSelectList() {
+	$("#select-font").empty();
+
+	var icon = '<svg class="octicon" viewBox="0 0 12 14" version="1.1" width="12" height="14" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>';
+
+	var favoritesMap = {};
+	try {
+		var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+		favoritesMap = favorites.reduce(function(acc, alias) {
+			acc[alias] = true;
+			return acc;
+		}, {});
+	} catch (err) {
+		console.error('could not render favorites', err);
+	}
+
+	$.getJSON("fonts.json", function(data) {
+		data.sort(function(a, b) {
+			if (favoritesMap[a.alias] && !favoritesMap[b.alias]) return -1;
+			if (!favoritesMap[a.alias] && favoritesMap[b.alias]) return 1;
+			if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
+			if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+			return 0;
+		});
+		$.each(data, function(k, v) {
+			var liga_info = "";
+			var render_info = "";
+
+			if (v.ligatures) {
+				liga_info = ", ligatures";
+			}
+			if (v.rendering === "bitmap") {
+				render_info = ", bitmap";
+			}
+			$("#select-font").append(
+				"<div class='entry'>" +
+				"<a href='#" + v.alias + "' data-value=\"" + v.alias + "\">" +
+					"<a class='favoritelink' onclick=\"toggleFavorite('" + v.alias + "')\"> <span>" +
+					(favoritesMap[v.alias] ? "♥︎" :  "♡") + "</span></a>" +
+					"<span class='name'>" + v.name + "</span>" +
+					"<span class='details'>" + v.author + " (" + v.year + ") — " + v.style + render_info + liga_info + "</span>" +
+				"</a>" +
+				"<a class='website' href='" + v.website + "' rel=external> <span>Info & Download</span>" + icon + "</a></div>"
+			);
+		});
+		selectFont();
+	});
+}
+
+function toggleFavorite(alias) {
+	try {
+		var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+		if (favorites.indexOf(alias) > -1) {
+			favorites = favorites.filter(function(v) {
+				return v !== alias;
+			})
+		} else {
+			favorites.push(alias);
+		}
+		localStorage.setItem('favorites', JSON.stringify(Array.from(new Set(favorites))));
+	} catch (err) {
+		console.error('could not save favorite', err);
+	}
+	renderSelectList();
+}
+
 $(document).ready(function() {
 	var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, "$1");
 	var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, "$1");
@@ -106,30 +172,7 @@ $(document).ready(function() {
 	setSpacing();
 	setAntialiasing();
 	selectLanguage();
-
-	var icon = '<svg class="octicon" viewBox="0 0 12 14" version="1.1" width="12" height="14" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>';
-
-	$.getJSON("fonts.json", function(data) {
-		$.each(data, function(k, v) {
-			var liga_info = "";
-			var render_info = "";
-
-			if (v.ligatures) {
-				liga_info = ", ligatures";
-			}
-			if (v.rendering === "bitmap") {
-				render_info = ", bitmap";
-			}
-			$("#select-font").append(
-				"<div class='entry'><a href='#" + v.alias + "' data-value=\"" + v.alias + "\">" +
-				"<span class='name'>" + v.name + "</span>" +
-				"<span class='details'>" + v.author + " (" + v.year + ") — " + v.style + render_info + liga_info + "</span>" +
-				"</a>" +
-				"<a class='website' href='" + v.website + "' rel=external> <span>Info & Download</span>" + icon + "</a></div>"
-			);
-		});
-		selectFont();
-	});
+	renderSelectList();
 
 	$("#theme-next").click(function() {
 		$("#select-theme :selected").next().prop("selected", true);