fix: add indicator

src/svelte/components/Picker/Picker.html

@@ -23,15 +23,19 @@
   </div>
   <div class="lep-nav" role="tablist" aria-label={i18n.categoriesLabel}>
     {#each categories as category (category.group)}
-    <button role="tab"
-            class="lep-nav-button lep-emoji"
-            aria-controls="lep-tab-{category.group}"
-            aria-label={i18n.categories[category.name]}
-            aria-selected={currentCategory.group === category.group}
-            title={i18n.categories[category.name]}
-            on:click={() => handleCategoryClick(category)}>
-      {category.emoji}
-    </button>
+      <div class="lep-nav-item">
+        <button role="tab"
+                class="lep-nav-button lep-emoji"
+                aria-controls="lep-tab-{category.group}"
+                aria-label={i18n.categories[category.name]}
+                aria-selected={currentCategory.group === category.group}
+                title={i18n.categories[category.name]}
+                on:click={() => handleCategoryClick(category)}>
+          {category.emoji}
+        </button>
+        <div class="lep-indicator {currentCategory.group === category.group ? '' : 'lep-hidden'}">
+        </div>
+      </div>
     {/each}
   </div>
   <div role="tabpanel"
@@ -40,11 +44,11 @@
        id="lep-tab-{currentCategory.group}">
     <div class="lep-emoji-menu" role="menu">
       {#each currentEmojis as emoji (emoji.unicode)}
-      <button role="menuitem"
-              class="lep-tabpanel-emoji lep-emoji"
-              id="lep-emoji-{emoji.unicode}">
-        {emoji.unicode}
-      </button>
+        <button role="menuitem"
+                class="lep-tabpanel-emoji lep-emoji"
+                id="lep-emoji-{emoji.unicode}">
+          {emoji.unicode}
+        </button>
       {/each}
     </div>
   </div>

src/svelte/components/Picker/Picker.js

@@ -7,8 +7,9 @@ import { DEFAULT_LOCALE, DEFAULT_DATA_SOURCE } from '../../../database/constants
 import { Database } from '../../../database/Database'
 import { MIN_SEARCH_TEXT_LENGTH, DEFAULT_NUM_COLUMNS } from '../../constants'
 import { requestIdleCallback } from '../../utils/requestIdleCallback'
-import { getTextWidth } from '../../utils/getTextWidth'
+import { calculateTextWidth } from '../../utils/calculateTextWidth'
 import { hasZwj } from '../../utils/hasZwj'
+import { thunk } from '../../utils/thunk'
 
 let database
 let numColumns = DEFAULT_NUM_COLUMNS
@@ -19,11 +20,12 @@ let currentCategory = categories[0]
 let rawSearchText = ''
 let searchText = ''
 let rootElement
-let baselineEmojiWidth
 let baselineEmoji
 let darkMode = 'auto'
 let resolvedDarkMode // eslint-disable-line no-unused-vars
 
+const getBaselineEmojiWidth = thunk(() => calculateTextWidth(baselineEmoji))
+
 $: resolvedDarkMode = darkMode === 'auto' ? matchMedia('(prefers-color-scheme: dark)').matches : !!darkMode
 
 $: database = new Database({ dataSource, locale })
@@ -56,17 +58,15 @@ $: {
 }
 
 function checkZwjSupport (zwjEmojisToCheck) {
-  const root = rootElement.getRootNode()
-  const domNodes = zwjEmojisToCheck.map(emoji => root.getElementById(`lep-emoji-${emoji.unicode}`))
-  if (typeof baselineEmojiWidth === 'undefined') {
-    baselineEmojiWidth = getTextWidth(baselineEmoji)
-  }
-  for (let i = 0; i < domNodes.length; i++) {
-    const domNode = domNodes[i]
-    const emoji = zwjEmojisToCheck[i]
-    const emojiWidth = getTextWidth(domNode)
-    const supported = emojiWidth === baselineEmojiWidth
+  const rootNode = rootElement.getRootNode()
+  for (const emoji of zwjEmojisToCheck) {
+    const domNode = rootNode.getElementById(`lep-emoji-${emoji.unicode}`)
+    const emojiWidth = calculateTextWidth(domNode)
+    const supported = emojiWidth === getBaselineEmojiWidth()
     supportedZwjEmojis.set(emoji.unicode, supported)
+    if (!supported) {
+      console.log('Filtered unsupported emoji', emoji.unicode)
+    }
   }
   // force update
   currentEmojis = currentEmojis // eslint-disable-line no-self-assign

src/svelte/components/Picker/Picker.module.js

@@ -5,4 +5,4 @@ export const emojiSupportLevel = determineEmojiSupportLevel()
 // are supported (rendered as one glyph) rather than unsupported (rendered as two or more glyphs)
 export const supportedZwjEmojis = new Map()
 
-console.log('emoji support level', emojiSupportLevel)
+console.log('emoji support level', emojiSupportLevel)

src/svelte/components/Picker/Picker.scss

@@ -37,6 +37,18 @@ button.lep-emoji {
   contain: content;
 }
 
+.lep-nav-item {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.lep-indicator {
+  height: var(--lep-indicator-height);
+  width: 100%;
+  background-color: var(--lep-indicator-color);
+}
+
 button.lep-nav-button.lep-emoji {
   flex: 1;
   padding: 0.5rem 0;

src/svelte/styles/global.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './resets.scss';
 
 .lep-picker {
   &, &::before, &::after, & *, *::before, *::after {
@@ -6,8 +7,8 @@
   }
 
   &:focus, & *:focus {
-    outline: var(--lep-outline-color) solid 2px;
-    outline-offset: -2px; // fix focus ring getting cropped
+    outline: var(--lep-outline-color) solid var(--lep-outline-size);
+    outline-offset: calc(-1 * var(--lep-outline-size)); // fix focus ring getting cropped
   }
 
   contain: content;
@@ -44,25 +45,4 @@
 
 .lep-not-shown {
   display: none;
-}
-
-/* CSS resets */
-
-.lep-picker button {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  box-shadow: none;
-  cursor: pointer;
-}
-
-.lep-picker input {
-  padding: 0;
-  margin: 0;
-  line-height: 1.15;
-}
-
-.lep-picker input[type=search] {
-  -webkit-appearance: none;
 }

src/svelte/styles/resets.scss

@@ -0,0 +1,22 @@
+.lep-picker button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
+  cursor: pointer;
+
+  &::-moz-focus-inner {
+    border: 0; // https://stackoverflow.com/a/199319/680742
+  }
+}
+
+.lep-picker input {
+  padding: 0;
+  margin: 0;
+  line-height: 1.15;
+}
+
+.lep-picker input[type=search] {
+  -webkit-appearance: none;
+}

src/svelte/styles/variables.scss

@@ -1,9 +1,10 @@
 @mixin vars($dark) {
-  $border: #e0e0e0 !default;
-  $bg: #fff !default;
-  $placeholder: #999 !default;
-  $outline: rgb(43, 110, 180) !default; // Chrome default focus color
-  $input-border: #999 !default;
+  $border: #e0e0e0;
+  $bg: #fff;
+  $placeholder: #999;
+  $outline: #999;
+  $input-border: #999;
+  $indicator: #385ac1;
 
   @if $dark {
     $border: #444;
@@ -11,6 +12,7 @@
     $placeholder: #ccc;
     $outline: #fff;
     $input-border: #ccc;
+    $indicator: #253a84;
   }
 
   --lep-border-color: #{$border};
@@ -18,6 +20,9 @@
   --lep-background-color: #{$bg};
   --lep-placeholder-color: #{$placeholder};
   --lep-outline-color: #{$outline};
+  --lep-indicator-color: #{$indicator};
+  --lep-indicator-height: 3px;
+  --lep-outline-size: 2px;
 
   @if $dark {
     --lep-hover-background-color: #{lighten($bg, 15%)};

src/svelte/utils/calculateTextWidth.js

@@ -1,6 +1,6 @@
 // get the width of the text inside of a DOM node, via https://stackoverflow.com/a/59525891/680742
 let range
-export function getTextWidth (node) {
+export function calculateTextWidth (node) {
   range = range || document.createRange()
   range.selectNode(node.firstChild)
   return range.getBoundingClientRect().width

src/svelte/utils/thunk.js

@@ -0,0 +1,12 @@
+// Run a function once, then cache the result and return the cached result thereafter
+export function thunk (func) {
+  let cached
+  let runOnce
+  return () => {
+    if (!runOnce) {
+      cached = func()
+      runOnce = true
+    }
+    return cached
+  }
+}