Added search result metadata

src/assets/javascripts/actions/search/result/index.ts

@@ -20,10 +20,41 @@
  * IN THE SOFTWARE.
  */
 
+import { translate } from "utilities"
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
 
+/**
+ * Set number of search results
+ *
+ * @param el - Search result metadata element
+ * @param value - Number of results
+ */
+export function setSearchResultMeta(
+  el: HTMLElement, value: number
+): void {
+  el.textContent = value > 1
+    ? translate("search.result.other", value.toString())
+    : value === 1
+      ? translate("search.result.one")
+      : translate("search.result.none")
+}
+
+/**
+ * Reset number of search results
+ *
+ * @param el - Search result metadata element
+ */
+export function resetSearchResultMeta(
+  el: HTMLElement
+): void {
+  el.textContent = translate("search.placeholder")
+}
+
+/* ------------------------------------------------------------------------- */
+
 /**
  * Add an element to the search result list
  *

src/assets/javascripts/components/search/result/index.ts

@@ -35,10 +35,15 @@ import {
   mapTo,
   observeOn,
   scan,
-  switchMap
+  switchMap,
+  tap
 } from "rxjs/operators"
 
-import { addToSearchResultList, resetSearchResultList } from "actions"
+import {
+  addToSearchResultList,
+  resetSearchResultList,
+  setSearchResultMeta
+} from "actions"
 import { SearchResult } from "modules"
 import { renderSearchResult } from "templates"
 import { ViewportSize, watchElementOffset } from "utilities"
@@ -81,6 +86,13 @@ export function paintSearchResult(
   /* Paint search results lazily */
   const [meta, list] = Array.from(el.children) as HTMLElement[]
   return pipe(
+
+    /* Paint search result metadata */
+    tap(result => {
+      setSearchResultMeta(meta, result.length)
+    }),
+
+    /* Paint search result list */
     switchMap(result => render$
       .pipe(
 

src/assets/javascripts/extensions/jsx/index.ts

@@ -38,7 +38,7 @@ type Attributes =
 /**
  * Child element
  */
-type Child = Child[] | Element | Text | string | number
+type Child = Child[] | HTMLElement | Text | string | number
 
 /* ----------------------------------------------------------------------------
  * Helper functions
@@ -47,10 +47,10 @@ type Child = Child[] | Element | Text | string | number
 /**
  * Append a child node to an element
  *
- * @param el - Element
+ * @param el - HTML element
  * @param child - Child node
  */
-function appendChild(el: Element, child: Child): void {
+function appendChild(el: HTMLElement, child: Child): void {
 
   /* Handle primitive types (including raw HTML) */
   if (typeof child === "string" || typeof child === "number") {
@@ -78,12 +78,12 @@ function appendChild(el: Element, child: Child): void {
  * @param attributes - HTML attributes
  * @param children - Child elements
  *
- * @return Element
+ * @return HTML element
  */
 export function h(
   tag: string, attributes: Attributes | null,
-  ...children: Array<Element | Text | string | number>
-): Element {
+  ...children: Array<HTMLElement | Text | string | number>
+): HTMLElement {
   const el = document.createElement(tag)
 
   /* Set attributes, if any */
@@ -107,9 +107,9 @@ export function h(
  *
  * @param el - JSX element
  *
- * @return Element
+ * @return HTML element
  */
-export function toElement(el: JSXInternal.Element): Element {
+export function toHTMLElement(el: JSXInternal.Element): HTMLElement {
   return el as any // Hack: if you have a better idea, PR!
 }
 

src/assets/javascripts/utilities/string/index.ts

@@ -20,6 +20,17 @@
  * IN THE SOFTWARE.
  */
 
+import { getElement } from "../agent"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Translations
+ */
+let lang: Record<string, string>
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -27,16 +38,37 @@
 /**
  * Truncate a string after the given number of characters
  *
- * @param string - String to be truncated
+ * @param value - Value to be truncated
  * @param n - Number of characters
  *
- * @return Truncated string
+ * @return Truncated value
  */
-export function truncate(string: string, n: number): string {
+export function truncate(value: string, n: number): string {
   let i = n
-  if (string.length > i) {
-    while (string[i] !== " " && --i > 0); // tslint:disable-line
-    return `${string.substring(0, i)}...`
+  if (value.length > i) {
+    while (value[i] !== " " && --i > 0); // tslint:disable-line
+    return `${value.substring(0, i)}...`
   }
-  return string
+  return value
+}
+
+/**
+ * Translate the given key
+ *
+ * @param key - Key to be translated
+ * @param value - Value to be replaced
+ *
+ * @return Translation
+ */
+export function translate(key: string, value?: string): string {
+  if (typeof lang === "undefined") {
+    const el = getElement("#__lang")!
+    lang = JSON.parse(el.innerText)
+  }
+  if (typeof lang[key] === "undefined") {
+    throw new ReferenceError(`Invalid translation: ${key}`)
+  }
+  return typeof value !== "undefined"
+    ? lang[key].replace("#", value)
+    : lang[key]
 }