add chapter search

3 files changed, 64 insertions, 7 deletions

diff --git a/css/read.css b/css/read.css
index e6efd3e..66806ef 100644
--- a/css/read.css
+++ b/css/read.css
@@ -83,16 +83,11 @@
 		right : 32px;
 	}
 	.toolbar {
-		width : 96px;
+		width : 128px;
 	}
 }
 
-ul.toc_list {
-	height : 250px;
-	overflow : auto;
-}
-
-.dict_result {
+.toc_list, .search_results, .dict_result {
 	max-height : 300px;
 	height : auto;
 	overflow : auto;
diff --git a/js/read.js b/js/read.js
index 41ef391..38b5d97 100644
--- a/js/read.js
+++ b/js/read.js
@@ -169,5 +169,32 @@ function apply_night_mode() {
 			$("body").css("background", "white");
 		}
 	});
+}
+
+function search() {
+	var query = $(".search_input").val();
+	var list = $(".search_results");
+
+	list.html("");
+
+	if (query) {
+		var results = window.book.currentChapter.find(query);
+
+		$.each(results, function (i, row) {
+			var a = $("<a>")
+				.attr('href', '#')
+				.html(row.excerpt +
+					" <b>(Loc.&nbsp;" + window.book.pagination.pageFromCfi(row.cfi) + ")</b>")
+				.attr('data-cfi', row.cfi)
+				.attr('data-id', row.id)
+				.click(function() {
+						window.book.gotoCfi(a.attr('data-cfi'));
+				});
 
+			list.append($("<li>").append(a));
+
+		});
+	}
 }
+
+
diff --git a/read.html b/read.html
index fc874c4..60fb5a8 100644
--- a/read.html
+++ b/read.html
@@ -126,6 +126,36 @@
   </div>
 </div>
 
+<div class="modal fade" id="search-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Search</h4>
+      </div>
+      <div class="modal-body">
+
+			<form class="form-horizontal" onsubmit="return false;">			
+				<div class="form-group">
+					<label class="col-sm-4 control-label">Search (active chapter)</label>
+					<div class="col-sm-8">
+						<input type="search" class="form-control search_input">
+					</div>
+  				</div>
+
+				<ol class="search_results"> </ol>
+
+			</form>
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" onclick="search()">Search</button>		  	
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>		  	
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="header">
 	<span>
 		<a href="#" onclick="save_and_close()">&laquo;&nbsp;Exit</a>
@@ -147,6 +177,11 @@
 			<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
 		</button>
 
+		<button class="btn btn-default btn-xs"
+			data-toggle="modal" data-target="#search-modal">
+			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+		</button>
+
 		<!-- <button class="btn btn-default btn-xs hidden-xs" onclick="zoom(2)">
 			<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
 		</button>