diff options
-rw-r--r-- | css/read.css | 9 | ||||
-rw-r--r-- | js/read.js | 27 | ||||
-rw-r--r-- | read.html | 35 |
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; @@ -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. " + 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)); + + }); + } } + + @@ -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">×</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()">« 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> |