Added note when search is initializing

This commit is contained in:
squidfunk
2020-04-26 18:29:13 +02:00
parent 62fcc9b86e
commit 0145f6d278
15 changed files with 26 additions and 14 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
{ {
"assets/javascripts/bundle.js": "assets/javascripts/bundle.5482c854.min.js", "assets/javascripts/bundle.js": "assets/javascripts/bundle.c51f1a8c.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.5482c854.min.js.map", "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c51f1a8c.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.ff4ef43d.min.js", "assets/javascripts/vendor.js": "assets/javascripts/vendor.ff4ef43d.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.ff4ef43d.min.js.map", "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.ff4ef43d.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.58d22e8e.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.58d22e8e.min.js",

View File

@@ -179,7 +179,7 @@
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/vendor.ff4ef43d.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/vendor.ff4ef43d.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.5482c854.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.c51f1a8c.min.js' | url }}"></script>
{%- set translations = {} -%} {%- set translations = {} -%}
{%- for key in [ {%- for key in [
"clipboard.copy", "clipboard.copy",

View File

@@ -12,6 +12,7 @@
"meta.source": "Quellcode", "meta.source": "Quellcode",
"search.config.lang": "de", "search.config.lang": "de",
"search.placeholder": "Suche", "search.placeholder": "Suche",
"search.result.placeholder": "Suche wird initialisiert",
"search.result.placeholder": "Suchbegriff eingeben", "search.result.placeholder": "Suchbegriff eingeben",
"search.result.none": "Keine Suchergebnisse", "search.result.none": "Keine Suchergebnisse",
"search.result.one": "1 Suchergebnis", "search.result.one": "1 Suchergebnis",

View File

@@ -19,6 +19,7 @@
"search.config.separator": "[\s\-]+", "search.config.separator": "[\s\-]+",
"search.placeholder": "Search", "search.placeholder": "Search",
"search.reset": "Clear", "search.reset": "Clear",
"search.result.initializer": "Initializing search",
"search.result.placeholder": "Type to start searching", "search.result.placeholder": "Type to start searching",
"search.result.none": "No matching documents", "search.result.none": "No matching documents",
"search.result.one": "1 matching document", "search.result.one": "1 matching document",

View File

@@ -19,7 +19,7 @@
<div class="md-search__scrollwrap" data-md-scrollfix> <div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result"> <div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta"> <div class="md-search-result__meta">
{{ lang.t("search.result.placeholder") }} {{ lang.t("search.result.initializer") }}
</div> </div>
<ol class="md-search-result__list"></ol> <ol class="md-search-result__list"></ol>
</div> </div>

View File

@@ -25,7 +25,6 @@ import {
filter, filter,
map, map,
mapTo, mapTo,
pluck,
sample, sample,
startWith, startWith,
switchMap, switchMap,
@@ -109,8 +108,7 @@ export function mountSearch(
.pipe( .pipe(
filter(isSearchQueryMessage), filter(isSearchQueryMessage),
sample(status$), sample(status$),
take(1), take(1)
filter(({ data }) => data.length > 0)
) )
.subscribe(tx$.next.bind(tx$)) .subscribe(tx$.next.bind(tx$))

View File

@@ -26,6 +26,7 @@ import {
distinctUntilChanged, distinctUntilChanged,
filter, filter,
map, map,
mapTo,
pluck, pluck,
startWith, startWith,
switchMap switchMap
@@ -35,6 +36,7 @@ import { WorkerHandler, watchElementOffset } from "browser"
import { import {
SearchMessage, SearchMessage,
SearchResult, SearchResult,
isSearchReadyMessage,
isSearchResultMessage isSearchResultMessage
} from "integrations" } from "integrations"
@@ -71,6 +73,13 @@ export function mountSearchResult(
switchMap(el => { switchMap(el => {
const container = el.parentElement! const container = el.parentElement!
/* Compute if search is ready */
const ready$ = rx$
.pipe(
filter(isSearchReadyMessage),
mapTo(true)
)
/* Compute whether there are more search results to fetch */ /* Compute whether there are more search results to fetch */
const fetch$ = watchElementOffset(container) const fetch$ = watchElementOffset(container)
.pipe( .pipe(
@@ -86,7 +95,7 @@ export function mountSearchResult(
.pipe( .pipe(
filter(isSearchResultMessage), filter(isSearchResultMessage),
pluck("data"), pluck("data"),
applySearchResult(el, { query$, fetch$ }), applySearchResult(el, { query$, ready$, fetch$ }),
startWith([]) startWith([])
) )
}) })

View File

@@ -57,6 +57,7 @@ import {
*/ */
interface ApplyOptions { interface ApplyOptions {
query$: Observable<SearchQuery> /* Search query observable */ query$: Observable<SearchQuery> /* Search query observable */
ready$: Observable<boolean> /* Search ready observable */
fetch$: Observable<boolean> /* Result fetch observable */ fetch$: Observable<boolean> /* Result fetch observable */
} }
@@ -77,14 +78,14 @@ interface ApplyOptions {
* @return Operator function * @return Operator function
*/ */
export function applySearchResult( export function applySearchResult(
el: HTMLElement, { query$, fetch$ }: ApplyOptions el: HTMLElement, { query$, ready$, fetch$ }: ApplyOptions
): MonoTypeOperatorFunction<SearchResult[]> { ): MonoTypeOperatorFunction<SearchResult[]> {
const list = getElementOrThrow(".md-search-result__list", el) const list = getElementOrThrow(".md-search-result__list", el)
const meta = getElementOrThrow(".md-search-result__meta", el) const meta = getElementOrThrow(".md-search-result__meta", el)
return pipe( return pipe(
/* Apply search result metadata */ /* Apply search result metadata */
withLatestFrom(query$), withLatestFrom(query$, ready$),
map(([result, query]) => { map(([result, query]) => {
if (query.value) { if (query.value) {
setSearchResultMeta(meta, result.length) setSearchResultMeta(meta, result.length)

View File

@@ -32,6 +32,7 @@
"meta.source": "Quellcode", "meta.source": "Quellcode",
"search.config.lang": "de", "search.config.lang": "de",
"search.placeholder": "Suche", "search.placeholder": "Suche",
"search.result.placeholder": "Suche wird initialisiert",
"search.result.placeholder": "Suchbegriff eingeben", "search.result.placeholder": "Suchbegriff eingeben",
"search.result.none": "Keine Suchergebnisse", "search.result.none": "Keine Suchergebnisse",
"search.result.one": "1 Suchergebnis", "search.result.one": "1 Suchergebnis",

View File

@@ -39,6 +39,7 @@
"search.config.separator": "[\s\-]+", "search.config.separator": "[\s\-]+",
"search.placeholder": "Search", "search.placeholder": "Search",
"search.reset": "Clear", "search.reset": "Clear",
"search.result.initializer": "Initializing search",
"search.result.placeholder": "Type to start searching", "search.result.placeholder": "Type to start searching",
"search.result.none": "No matching documents", "search.result.none": "No matching documents",
"search.result.one": "1 matching document", "search.result.one": "1 matching document",

View File

@@ -58,7 +58,7 @@
<div class="md-search__scrollwrap" data-md-scrollfix> <div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result"> <div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta"> <div class="md-search-result__meta">
{{ lang.t("search.result.placeholder") }} {{ lang.t("search.result.initializer") }}
</div> </div>
<ol class="md-search-result__list"></ol> <ol class="md-search-result__list"></ol>
</div> </div>