aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authorAlex Shpak <alex-shpak@users.noreply.github.com>2019-07-17 17:56:12 +0200
committerAlex Shpak <alex-shpak@users.noreply.github.com>2019-08-06 11:33:42 +0200
commit469d9d88cd35c62b7f399e0b0dfdc339bc3f0055 (patch)
tree9869b68ced85a3ecf058657bf6a658f9d7ae28b7 /assets
parentf56f2bf04dd6cd69e95304d5926c1229f2064d3a (diff)
Show progressbar while loading lunr and data
Diffstat (limited to 'assets')
-rw-r--r--assets/_utils.scss9
-rw-r--r--assets/book.scss28
-rw-r--r--assets/search.js21
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;