From 9047d0e3746820988f6a23ac1ca1f001f4c70c3e Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Fri, 3 Mar 2017 13:32:59 +0300
Subject: settings: use dropdowns for font size/line height

---
 js/read.js | 16 +++++++---------
 read.html  | 62 +++++++++++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/js/read.js b/js/read.js
index 333c9b5..8b9d270 100644
--- a/js/read.js
+++ b/js/read.js
@@ -69,13 +69,12 @@ function init_taps() {
 	}
 }
 
-function lmargin(incr) {
-	var cur = parseInt(window.book.settings.styles.lineHeight.replace("%", ""));
-	var size = cur + incr;
+function apply_line_height(elem) {
+	var height = elem[elem.selectedIndex].value;
 
-	localforage.setItem("epube.lineHeight", size);
+	localforage.setItem("epube.lineHeight", height);
 
-	window.book.setStyle("lineHeight", size + "%");
+	window.book.setStyle("lineHeight", height + "%");
 
 }
 
@@ -87,12 +86,11 @@ function apply_font(elem) {
 	window.book.setStyle("fontFamily", font);
 
 }
-function zoom(incr) {
-	var cur = parseInt(window.book.settings.styles.fontSize.replace("px", ""));
-	var size = cur + incr;
 
-	localforage.setItem("epube.fontSize", size);
+function apply_font_size(elem) {
+	var size = elem[elem.selectedIndex].value;
 
+	localforage.setItem("epube.fontSize", size);
 	window.book.setStyle("fontSize", size + "px");
 
 }
diff --git a/read.html b/read.html
index 749e26a..4f6be0d 100644
--- a/read.html
+++ b/read.html
@@ -44,20 +44,14 @@
 				<div class="form-group">
 					<label class="col-sm-3 control-label">Text size</label>
 					<div class="col-sm-9">
-						<div class="btn-group" role="group" aria-label="...">
-						  <button type="button" onclick="zoom(2)" class="btn btn-default">+</button>
-						  <button type="button" onclick="zoom(-2)" class="btn btn-default">-</button>
-						</div>
+						<select class="font_size form-control" onchange="apply_font_size(this)"></select>
 					</div>
   				</div>
 
 				<div class="form-group">
-					<label class="col-sm-3 control-label">Line margins</label>
+					<label class="col-sm-3 control-label">Line height</label>
 					<div class="col-sm-9">
-						<div class="btn-group" role="group" aria-label="...">
-						  <button type="button" onclick="lmargin(20)" class="btn btn-default">+</button>
-						  <button type="button" onclick="lmargin(-20)" class="btn btn-default">-</button>
-						</div>
+						<select class="line_height form-control" onchange="apply_line_height(this)"></select>
 					</div>
   				</div>
 
@@ -213,6 +207,10 @@
 	var _pagination_stored = 0;
 	var _last_position_sync = 0;
 
+	const DEFAULT_FONT_SIZE = 16;
+	const DEFAULT_FONT_FAMILY = "Georgia";
+	const DEFAULT_LINE_HEIGHT = 140;
+
 	function cacheId(suffix) {
 		return "epube-book." + $.urlParam("b") + (suffix ? "." + suffix : "");
 	}
@@ -331,9 +329,9 @@
 			localforage.getItem("epube.fontFamily"),
 			localforage.getItem("epube.lineHeight")
 		]).then(function(res) {
-			var fontSize = res[0] ? res[0] + "px" : "16px";
-			var fontFamily = res[1] ? res[1] : "Georgia";
-			var lineHeight = res[2] ? res[2] + "%" : "140%";
+			var fontSize = res[0] ? res[0] + "px" : DEFAULT_FONT_SIZE + "px";
+			var fontFamily = res[1] ? res[1] : DEFAULT_FONT_FAMILY;
+			var lineHeight = res[2] ? res[2] + "%" : DEFAULT_LINE_HEIGHT + "%";
 
 			book.setStyle("fontSize", fontSize);
 			book.setStyle("fontFamily", fontFamily);
@@ -350,14 +348,48 @@
 		var rendered = book.renderTo("reader");
 
 		$('#settings-modal').on('shown.bs.modal', function() {
-			var font = book.settings.styles.fontFamily;
-
-			$("select.font_family").val(font);
 
 			$.post("backend.php", { op: "getlastread", id: $.urlParam("id") }, function(data) {
 				$(".lastread_input").val(data.page);
 			});
 
+			localforage.getItem("epube.fontFamily").then(function(font) {
+				if (!font) font = DEFAULT_FONT_FAMILY;
+
+				$(".font_family").val(font);
+			});
+
+			localforage.getItem("epube.fontSize").then(function(size) {
+
+				if (!size) size = DEFAULT_FONT_SIZE;
+
+				var zoom = $(".font_size").html("");
+
+				for (var i = 10; i <= 32; i++) {
+					var opt = $("<option>").val(i).html(i + " px");
+
+					if (i == size) opt.attr("selected", "1");
+
+					zoom.append(opt);
+				}
+
+			});
+
+			localforage.getItem("epube.lineHeight").then(function(height) {
+
+				if (!height) height = DEFAULT_LINE_HEIGHT;
+
+				var zoom = $(".line_height").html("");
+
+				for (var i = 100; i <= 220; i += 10) {
+					var opt = $("<option>").val(i).html(i + "%");
+
+					if (i == height) opt.attr("selected", "1");
+
+					zoom.append(opt);
+				}
+
+			});
 		})
 
 		$('#dict-modal').on('shown.bs.modal', function() {
-- 
cgit v1.2.3