Removed placeholder when search input is focused

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.97185c3a.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.97185c3a.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.6c4496e8.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.6c4496e8.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.a72efce9.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a72efce9.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.a018d6bb.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.a018d6bb.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.4ac00218.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.4ac00218.min.js.map",
   "assets/stylesheets/main.css": "assets/stylesheets/main.38780c08.min.css",

material/base.html

@@ -172,8 +172,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.6c4496e8.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.97185c3a.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.a018d6bb.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.a72efce9.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",
@@ -181,6 +181,7 @@
         "search.config.lang",
         "search.config.pipeline",
         "search.config.separator",
+        "search.placeholder",
         "search.result.placeholder",
         "search.result.none",
         "search.result.one",

src/assets/javascripts/components/search/query/_/index.ts

@@ -35,7 +35,10 @@ import {
   SearchTransformFn
 } from "integrations"
 
-import { watchSearchQuery } from "../react"
+import {
+  applySearchQuery,
+  watchSearchQuery
+} from "../react"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -102,6 +105,9 @@ export function mountSearchQuery(
 
       /* Return search query */
       return query$
+        .pipe(
+          applySearchQuery(el)
+        )
     })
   )
 }

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

@@ -22,3 +22,4 @@
 
 export * from "./_"
 export * from "./react"
+export * from "./set"

src/assets/javascripts/components/search/query/react/index.ts

@@ -20,18 +20,33 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, combineLatest, fromEvent, merge } from "rxjs"
+import {
+  MonoTypeOperatorFunction,
+  Observable,
+  animationFrameScheduler,
+  combineLatest,
+  fromEvent,
+  merge,
+  pipe
+} from "rxjs"
 import {
   delay,
   distinctUntilChanged,
+  finalize,
   map,
-  startWith
+  observeOn,
+  startWith,
+  tap
 } from "rxjs/operators"
 
 import { watchElementFocus } from "browser"
 import { SearchTransformFn, defaultTransform } from "integrations"
 
 import { SearchQuery } from "../_"
+import {
+  resetSearchQueryPlaceholder,
+  setSearchQueryPlaceholder
+} from "../set"
 
 /* ----------------------------------------------------------------------------
  * Helper types
@@ -84,3 +99,34 @@ export function watchSearchQuery(
       map(([value, focus]) => ({ value, focus }))
     )
 }
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Apply search query
+ *
+ * @param el - Search query element
+ *
+ * @return Operator function
+ */
+export function applySearchQuery(
+  el: HTMLInputElement
+): MonoTypeOperatorFunction<SearchQuery> {
+  return pipe(
+
+    /* Defer repaint to next animation frame */
+    observeOn(animationFrameScheduler),
+    tap(({ focus }) => {
+      if (focus) {
+        setSearchQueryPlaceholder(el, "")
+      } else {
+        resetSearchQueryPlaceholder(el)
+      }
+    }),
+
+    /* Reset on complete or error */
+    finalize(() => {
+      resetSearchQueryPlaceholder(el)
+    })
+  )
+}

src/assets/javascripts/components/search/query/set/index.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { translate } from "utilities"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Set search query placeholder
+ *
+ * @param el - Search query element
+ * @param value - Placeholder
+ */
+export function setSearchQueryPlaceholder(
+  el: HTMLInputElement, value: string
+): void {
+  el.placeholder = value
+}
+
+/**
+ * Reset search query placeholder
+ *
+ * @param el - Search query element
+ */
+export function resetSearchQueryPlaceholder(
+  el: HTMLInputElement
+): void {
+  el.placeholder = translate("search.placeholder")
+}

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

@@ -35,6 +35,7 @@ type TranslateKey =
   | "search.config.lang"               /* Search language */
   | "search.config.pipeline"           /* Search pipeline */
   | "search.config.separator"          /* Search separator */
+  | "search.placeholder"               /* Search */
   | "search.result.placeholder"        /* Type to start searching */
   | "search.result.none"               /* No matching documents */
   | "search.result.one"                /* 1 matching document */

src/base.html

@@ -343,6 +343,7 @@
         "search.config.lang",
         "search.config.pipeline",
         "search.config.separator",
+        "search.placeholder",
         "search.result.placeholder",
         "search.result.none",
         "search.result.one",