diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/_utils.scss | 9 | ||||
| -rw-r--r-- | assets/book.scss | 28 | ||||
| -rw-r--r-- | assets/search.js | 21 |
3 files changed, 45 insertions, 13 deletions
diff --git a/assets/_utils.scss b/assets/_utils.scss index 31bfaed..6ae0d7d 100644 --- a/assets/_utils.scss +++ b/assets/_utils.scss @@ -46,6 +46,15 @@ display: none; } +@mixin spin($duration) { + animation: spin $duration ease infinite; + @keyframes spin { + 100% { + transform: rotate(360deg); + } + } +} + @mixin fixed { position: fixed; top: 0; diff --git a/assets/book.scss b/assets/book.scss index 3ef2294..5a468f0 100644 --- a/assets/book.scss +++ b/assets/book.scss @@ -138,12 +138,15 @@ ul.pagination { } .book-search { - #book-search-input { + position: relative; + margin: $padding-16 0; + + input { border: 0; border-bottom: $padding-1 solid $body-font-color; outline: none; - padding: $padding-4 $padding-4 $padding-4 $padding-16 + $padding-4; + padding: $padding-4 $padding-16 + $padding-4; width: 100%; background: url("svg/search.svg") left center no-repeat; @@ -153,9 +156,28 @@ ul.pagination { &:focus { opacity: 1; } + + &:required + .book-search-spinner { + display: block; + } + } + + .book-search-spinner { + position: absolute; + right: 0; + top: $padding-4; + + width: $padding-16; + height: $padding-16; + + border: $padding-1 solid transparent; + border-top-color: $body-font-color; + border-radius: 50%; + + @include spin(1s) } - #book-search-results li:last-child { + li:last-child { margin-bottom: $padding-16 * 2; } } diff --git a/assets/search.js b/assets/search.js index eb38c1d..3cc9702 100644 --- a/assets/search.js +++ b/assets/search.js @@ -3,19 +3,20 @@ (function() { const input = document.querySelector("#book-search-input"); const results = document.querySelector("#book-search-results"); - const dummy = document.querySelector("#book-search-dummy"); input.addEventListener("focus", init); input.addEventListener("keyup", search); function init() { - loadScript("{{ "lunr.min.js" | relURL }}") + input.removeEventListener("focus", init); //init once + input.required = true; + + loadScript("{{ "lunr.min.js" | relURL }}"); loadScript("{{ $searchData.RelPermalink }}", function() { input.readOnly = false; + input.required = false; search(); }); - - input.removeEventListener("focus", init); } function search() { @@ -23,18 +24,18 @@ results.removeChild(results.firstChild); } - if (!input.value || !window.bookSearch) { - return + if (!input.value) { + return; } const terms = lunr.tokenizer(input.value); const searchHits = window.bookSearch.idx.query(function(query) { query.term(terms, { - boost: 100, + boost: 100 }); query.term(terms, { boost: 10, - wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING, + wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING }); query.term(terms, { editDistance: 2 @@ -43,8 +44,8 @@ searchHits.slice(0, 10).forEach(function(hit) { const page = window.bookSearch.pages[hit.ref]; - const li = dummy.querySelector("li").cloneNode(true), - a = li.querySelector("a"); + const li = document.createElement("li"), + a = li.appendChild(document.createElement("a")); a.href = page.href; a.textContent = page.title; |