Added type selection to icon and emoji search

docs/reference/icons-emojis.md

@@ -21,6 +21,14 @@ can be added] and used in `mkdocs.yml`, documents and templates.
     data-mdx-component="iconsearch-query"
   />
   <div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result">
+    <select
+      class="mdx-iconsearch-result__select"
+      data-mdx-component="iconsearch-select"
+    >
+      <option value="all" selected>All</option>
+      <option value="icons">Icons</option>
+      <option value="emojis">Emojis</option>
+    </select>
     <div class="mdx-iconsearch-result__meta"></div>
     <ol class="mdx-iconsearch-result__list"></ol>
   </div>

material/overrides/assets/stylesheets/custom.efcf58ca.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/overrides/assets/stylesheets/custom/_typeset.scss","../../../../src/overrides/assets/stylesheets/custom.scss","src/templates/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/custom/layout/_banner.scss","src/overrides/assets/stylesheets/custom/layout/_hero.scss","src/overrides/assets/stylesheets/custom/layout/_iconsearch.scss","src/overrides/assets/stylesheets/custom/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"custom.css"}
+{"version":3,"sources":["src/overrides/assets/stylesheets/custom/_typeset.scss","../../../../src/overrides/assets/stylesheets/custom.scss","src/templates/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/custom/layout/_banner.scss","src/overrides/assets/stylesheets/custom/layout/_hero.scss","src/overrides/assets/stylesheets/custom/layout/_iconsearch.scss","src/overrides/assets/stylesheets/custom/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"custom.css"}

material/overrides/main.html

@@ -3,7 +3,7 @@
 -#}
 {% extends "base.html" %}
 {% block extrahead %}
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/custom.00c04c01.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/custom.efcf58ca.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   For updates follow <strong>@squidfunk</strong> on
@@ -23,5 +23,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'assets/javascripts/custom.e2e97759.min.js' | url }}"></script>
+  <script src="{{ 'assets/javascripts/custom.63a6dff3.min.js' | url }}"></script>
 {% endblock %}

src/overrides/assets/javascripts/components/_/index.ts

@@ -33,6 +33,7 @@ export type ComponentType =
   | "iconsearch"                       /* Icon search */
   | "iconsearch-query"                 /* Icon search input */
   | "iconsearch-result"                /* Icon search results */
+  | "iconsearch-select"                /* Icon search select */
   | "sponsorship"                      /* Sponsorship */
   | "sponsorship-count"                /* Sponsorship count */
   | "sponsorship-total"                /* Sponsorship total */
@@ -62,6 +63,7 @@ interface ComponentTypeMap {
   "iconsearch": HTMLElement            /* Icon search */
   "iconsearch-query": HTMLInputElement /* Icon search input */
   "iconsearch-result": HTMLElement     /* Icon search results */
+  "iconsearch-select": HTMLSelectElement
   "sponsorship": HTMLElement           /* Sponsorship */
   "sponsorship-count": HTMLElement     /* Sponsorship count */
   "sponsorship-total": HTMLElement     /* Sponsorship total */

src/overrides/assets/javascripts/components/iconsearch/_/index.ts

@@ -20,12 +20,16 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, merge } from "rxjs"
+import { BehaviorSubject, Observable, fromEvent, map, merge } from "rxjs"
 
 import { configuration } from "~/_"
 import { requestJSON } from "~/browser"
 
-import { Component, getComponentElement } from "../../_"
+import {
+  Component,
+  getComponentElement,
+  getComponentElements
+} from "../../_"
 import {
   IconSearchQuery,
   mountIconSearchQuery
@@ -64,6 +68,14 @@ export type IconSearch =
   | IconSearchQuery
   | IconSearchResult
 
+/**
+ * Icon search mode
+ */
+export type IconSearchMode =
+  | "all"
+  | "icons"
+  | "emojis"
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -87,8 +99,18 @@ export function mountIconSearch(
   const query  = getComponentElement("iconsearch-query", el)
   const result = getComponentElement("iconsearch-result", el)
 
+  /* Retrieve select component */
+  const mode$ = new BehaviorSubject<IconSearchMode>("all")
+  const selects = getComponentElements("iconsearch-select", el)
+  for (const select of selects) {
+    fromEvent(select, "change").pipe(
+      map(ev => (ev.target as HTMLSelectElement).value as IconSearchMode)
+    )
+      .subscribe(mode$)
+  }
+
   /* Create and return component */
   const query$  = mountIconSearchQuery(query)
-  const result$ = mountIconSearchResult(result, { index$, query$ })
+  const result$ = mountIconSearchResult(result, { index$, query$, mode$ })
   return merge(query$, result$)
 }

src/overrides/assets/javascripts/components/iconsearch/result/index.ts

@@ -26,6 +26,7 @@ import {
   Subject,
   bufferCount,
   combineLatest,
+  combineLatestWith,
   distinctUntilKeyChanged,
   filter,
   finalize,
@@ -47,7 +48,7 @@ import { round } from "~/utilities"
 import { Icon, renderIconSearchResult } from "_/templates"
 
 import { Component } from "../../_"
-import { IconSearchIndex } from "../_"
+import { IconSearchIndex, IconSearchMode } from "../_"
 import { IconSearchQuery } from "../query"
 
 /* ----------------------------------------------------------------------------
@@ -71,6 +72,7 @@ export interface IconSearchResult {
 interface WatchOptions {
   index$: Observable<IconSearchIndex>  /* Search index observable */
   query$: Observable<IconSearchQuery>  /* Search query observable */
+  mode$: Observable<IconSearchMode>    /* Search mode observable */
 }
 
 /**
@@ -79,6 +81,7 @@ interface WatchOptions {
 interface MountOptions {
   index$: Observable<IconSearchIndex>  /* Search index observable */
   query$: Observable<IconSearchQuery>  /* Search query observable */
+  mode$: Observable<IconSearchMode>    /* Search mode observable */
 }
 
 /* ----------------------------------------------------------------------------
@@ -94,7 +97,7 @@ interface MountOptions {
  * @returns Icon search result observable
  */
 export function watchIconSearchResult(
-  el: HTMLElement, { index$, query$ }: WatchOptions
+  el: HTMLElement, { index$, query$, mode$ }: WatchOptions
 ): Observable<IconSearchResult> {
   switch (el.getAttribute("data-mdx-mode")) {
 
@@ -131,9 +134,14 @@ export function watchIconSearchResult(
         query$.pipe(distinctUntilKeyChanged("value")),
         index$
           .pipe(
-            map(({ icons, emojis }) => [
+            combineLatestWith(mode$),
-              ...Object.keys(icons.data),
+            map(([{ icons, emojis }, mode]) => [
-              ...Object.keys(emojis.data)
+              ...["all", "icons"].includes(mode)
+                ? Object.keys(icons.data)
+                : [],
+              ...["all", "emojis"].includes(mode)
+                ? Object.keys(emojis.data)
+                : []
             ])
           )
       ])
@@ -169,7 +177,7 @@ export function watchIconSearchResult(
  * @returns Icon search result component observable
  */
 export function mountIconSearchResult(
-  el: HTMLElement, { index$, query$ }: MountOptions
+  el: HTMLElement, { index$, query$, mode$ }: MountOptions
 ): Observable<Component<IconSearchResult, HTMLElement>> {
   const push$ = new Subject<IconSearchResult>()
   const boundary$ = watchElementBoundary(el)
@@ -178,7 +186,7 @@ export function mountIconSearchResult(
     )
 
   /* Update search result metadata */
-  const meta = getElement(":scope > :first-child", el)
+  const meta = getElement(".mdx-iconsearch-result__meta", el)
   push$
     .pipe(
       withLatestFrom(query$)
@@ -228,7 +236,7 @@ export function mountIconSearchResult(
       ))
 
   /* Create and return component */
-  return watchIconSearchResult(el, { query$, index$ })
+  return watchIconSearchResult(el, { query$, index$, mode$ })
     .pipe(
       tap(state => push$.next(state)),
       finalize(() => push$.complete()),

src/overrides/assets/stylesheets/custom/layout/_iconsearch.scss

@@ -90,6 +90,38 @@
       right: px2rem(12px);
       font-size: px2rem(12.8px);
       color: var(--md-default-fg-color--lighter);
+
+      // [mobile portrait -]: Hide meta
+      @include break-to-device(mobile portrait) {
+        display: none;
+      }
+    }
+
+    // Icon search result select
+    &__select {
+      position: absolute;
+      top: px2rem(8px);
+      right: px2rem(12px);
+      padding-block: 0.15em;
+      font-size: px2rem(12.8px);
+      color: var(--md-default-fg-color--light);
+      background-color: var(--md-default-fg-color--lightest);
+      border: none;
+      border-radius: px2rem(2px);
+      transition: color 125ms, background-color 125ms;
+
+      // Focused or hovered
+      &:focus,
+      &:hover {
+        color: var(--md-accent-bg-color);
+        background-color: var(--md-accent-fg-color);
+        outline: none;
+      }
+
+      // Adjust spacing
+      + .mdx-iconsearch-result__meta {
+        right: px2rem(82px);
+      }
     }
 
     // Icon search result list