emoji-picker-element/src/picker/components/Picker/Picker.js

/* eslint-disable prefer-const,no-labels,no-inner-declarations */
import { onMount, tick } from 'svelte'
import { groups as defaultGroups, customGroup } from '../../groups'
import { MIN_SEARCH_TEXT_LENGTH, NUM_SKIN_TONES } from '../../../shared/constants'
import { requestIdleCallback } from '../../utils/requestIdleCallback'
import { hasZwj } from '../../utils/hasZwj'
import { detectEmojiSupportLevel, supportedZwjEmojis } from '../../utils/emojiSupport'
import { applySkinTone } from '../../utils/applySkinTone'
import { halt } from '../../utils/halt'
import { incrementOrDecrement } from '../../utils/incrementOrDecrement'
import {
  DEFAULT_NUM_COLUMNS,
  MOST_COMMONLY_USED_EMOJI,
  TIMEOUT_BEFORE_LOADING_MESSAGE
} from '../../constants'
import { uniqBy } from '../../../shared/uniqBy'
import { summarizeEmojisForUI } from '../../utils/summarizeEmojisForUI'
import * as widthCalculator from '../../utils/widthCalculator'
import { checkZwjSupport } from '../../utils/checkZwjSupport'
import { requestPostAnimationFrame } from '../../utils/requestPostAnimationFrame'
import { requestAnimationFrame } from '../../utils/requestAnimationFrame'
import { uniq } from '../../../shared/uniq'
import { resetScrollTopIfPossible } from '../../utils/resetScrollTopIfPossible.js'

// public
export let skinToneEmoji
export let i18n
export let database
export let customEmoji
export let customCategorySorting
export let emojiVersion

// private
let initialLoad = true
let currentEmojis = []
let currentEmojisWithCategories = [] // eslint-disable-line no-unused-vars
let rawSearchText = ''
let searchText = ''
let rootElement
let baselineEmoji
let tabpanelElement
let searchMode = false // eslint-disable-line no-unused-vars
let activeSearchItem = -1
let message // eslint-disable-line no-unused-vars
let skinTonePickerExpanded = false
let skinTonePickerExpandedAfterAnimation = false // eslint-disable-line no-unused-vars
let skinToneDropdown
let currentSkinTone = 0
let activeSkinTone = 0
let skinToneButtonText // eslint-disable-line no-unused-vars
let pickerStyle // eslint-disable-line no-unused-vars
let skinToneButtonLabel = '' // eslint-disable-line no-unused-vars
let skinTones = []
let currentFavorites = [] // eslint-disable-line no-unused-vars
let defaultFavoriteEmojis
let numColumns = DEFAULT_NUM_COLUMNS
let isRtl = false // eslint-disable-line no-unused-vars
let scrollbarWidth = 0 // eslint-disable-line no-unused-vars
let currentGroupIndex = 0
let groups = defaultGroups
let currentGroup
let databaseLoaded = false // eslint-disable-line no-unused-vars
let activeSearchItemId // eslint-disable-line no-unused-vars

//
// Utils/helpers
//

const focus = id => {
  rootElement.getRootNode().getElementById(id).focus()
}

// fire a custom event that crosses the shadow boundary
const fireEvent = (name, detail) => {
  rootElement.dispatchEvent(new CustomEvent(name, {
    detail,
    bubbles: true,
    composed: true
  }))
}

// eslint-disable-next-line no-unused-vars
const unicodeWithSkin = (emoji, currentSkinTone) => (
  (currentSkinTone && emoji.skins && emoji.skins[currentSkinTone]) || emoji.unicode
)

// eslint-disable-next-line no-unused-vars
const labelWithSkin = (emoji, currentSkinTone) => (
  uniq([(emoji.name || unicodeWithSkin(emoji, currentSkinTone)), ...(emoji.shortcodes || [])]).join(', ')
)

// Detect a skintone option button
const isSkinToneOption = element => /^skintone-/.test(element.id)

//
// Determine the emoji support level (in requestIdleCallback)
//

onMount(() => {
  if (!emojiVersion) {
    detectEmojiSupportLevel().then(level => {
      // Can't actually test emoji support in Jest/JSDom, emoji never render in color in Cairo
      /* istanbul ignore next */
      if (!level) {
        message = i18n.emojiUnsupportedMessage
      }
    })
  }
})

//
// Set or update the database object
//

$: {
  // show a Loading message if it takes a long time, or show an error if there's a network/IDB error
  async function handleDatabaseLoading () {
    let showingLoadingMessage = false
    const timeoutHandle = setTimeout(() => {
      showingLoadingMessage = true
      message = i18n.loadingMessage
    }, TIMEOUT_BEFORE_LOADING_MESSAGE)
    try {
      await database.ready()
      databaseLoaded = true // eslint-disable-line no-unused-vars
    } catch (err) {
      console.error(err)
      message = i18n.networkErrorMessage
    } finally {
      clearTimeout(timeoutHandle)
      if (showingLoadingMessage) { // Seems safer than checking the i18n string, which may change
        showingLoadingMessage = false
        message = '' // eslint-disable-line no-unused-vars
      }
    }
  }
  if (database) {
    /* no await */ handleDatabaseLoading()
  }
}

//
// Global styles for the entire picker
//

/* eslint-disable no-unused-vars */
$: pickerStyle = `
  --num-groups: ${groups.length}; 
  --indicator-opacity: ${searchMode ? 0 : 1}; 
  --num-skintones: ${NUM_SKIN_TONES};`
/* eslint-enable no-unused-vars */

//
// Set or update the customEmoji
//

$: {
  if (customEmoji && database) {
    console.log('updating custom emoji')
    database.customEmoji = customEmoji
  }
}

$: {
  if (customEmoji && customEmoji.length) {
    groups = [customGroup, ...defaultGroups]
  } else if (groups !== defaultGroups) {
    if (currentGroupIndex) {
      // If the current group is anything other than "custom" (which is first), decrement.
      // This fixes the odd case where you set customEmoji, then pick a category, then unset customEmoji
      currentGroupIndex--
    }
    groups = defaultGroups
  }
}

//
// Set or update the preferred skin tone
//

$: {
  async function updatePreferredSkinTone () {
    if (databaseLoaded) {
      currentSkinTone = await database.getPreferredSkinTone()
    }
  }
  /* no await */ updatePreferredSkinTone()
}

$: skinTones = Array(NUM_SKIN_TONES).fill().map((_, i) => applySkinTone(skinToneEmoji, i))
/* eslint-disable no-unused-vars */
$: skinToneButtonText = skinTones[currentSkinTone]
$: skinToneButtonLabel = i18n.skinToneLabel.replace('{skinTone}', i18n.skinTones[currentSkinTone])
/* eslint-enable no-unused-vars */

//
// Set or update the favorites emojis
//

$: {
  async function updateDefaultFavoriteEmojis () {
    defaultFavoriteEmojis = (await Promise.all(MOST_COMMONLY_USED_EMOJI.map(unicode => (
      database.getEmojiByUnicodeOrName(unicode)
    )))).filter(Boolean) // filter because in Jest tests we don't have all the emoji in the DB
  }
  if (databaseLoaded) {
    /* no await */ updateDefaultFavoriteEmojis()
  }
}

$: {
  async function updateFavorites () {
    console.log('updateFavorites')
    const dbFavorites = await database.getTopFavoriteEmoji(numColumns)
    const favorites = await summarizeEmojis(uniqBy([
      ...dbFavorites,
      ...defaultFavoriteEmojis
    ], _ => (_.unicode || _.name)).slice(0, numColumns))
    currentFavorites = favorites
  }

  if (databaseLoaded && defaultFavoriteEmojis) {
    /* no await */ updateFavorites()
  }
}

//
// Calculate the width of the emoji grid. This serves two purposes:
// 1) Re-calculate the --num-columns var because it may have changed
// 2) Re-calculate the scrollbar width because it may have changed
//   (i.e. because the number of items changed)
// 3) Re-calculate whether we're in RTL mode or not.
//
// The benefit of doing this in one place is to align with rAF/ResizeObserver
// and do all the calculations in one go. RTL vs LTR is not strictly width-related,
// but since we're already reading the style here, and since it's already aligned with
// the rAF loop, this is the most appropriate place to do it perf-wise.
//

// eslint-disable-next-line no-unused-vars
function calculateEmojiGridStyle (node) {
  return widthCalculator.calculateWidth(node, width => {
    /* istanbul ignore next */
    if (process.env.NODE_ENV !== 'test') { // jsdom throws errors for this kind of fancy stuff
      // read all the style/layout calculations we need to make
      const style = getComputedStyle(rootElement)
      const newNumColumns = parseInt(style.getPropertyValue('--num-columns'), 10)
      const newIsRtl = style.getPropertyValue('direction') === 'rtl'
      const parentWidth = node.parentElement.getBoundingClientRect().width
      const newScrollbarWidth = parentWidth - width

      // write to Svelte variables
      numColumns = newNumColumns
      scrollbarWidth = newScrollbarWidth // eslint-disable-line no-unused-vars
      isRtl = newIsRtl // eslint-disable-line no-unused-vars
    }
  })
}

//
// Update the current group based on the currentGroupIndex
//

$: currentGroup = groups[currentGroupIndex]

//
// Set or update the currentEmojis. Check for invalid ZWJ renderings
// (i.e. double emoji).
//

$: {
  async function updateEmojis () {
    console.log('updateEmojis')
    if (!databaseLoaded) {
      currentEmojis = []
      searchMode = false
    } else if (searchText.length >= MIN_SEARCH_TEXT_LENGTH) {
      const currentSearchText = searchText
      const newEmojis = await getEmojisBySearchQuery(currentSearchText)
      if (currentSearchText === searchText) { // if the situation changes asynchronously, do not update
        currentEmojis = newEmojis
        searchMode = true
      }
    } else if (currentGroup) {
      const currentGroupId = currentGroup.id
      const newEmojis = await getEmojisByGroup(currentGroupId)
      if (currentGroupId === currentGroup.id) { // if the situation changes asynchronously, do not update
        currentEmojis = newEmojis
        searchMode = false
      }
    }
  }
  /* no await */ updateEmojis()
}

// Some emojis have their ligatures rendered as two or more consecutive emojis
// We want to treat these the same as unsupported emojis, so we compare their
// widths against the baseline widths and remove them as necessary
$: {
  const zwjEmojisToCheck = currentEmojis
    .filter(emoji => emoji.unicode) // filter custom emoji
    .filter(emoji => hasZwj(emoji) && !supportedZwjEmojis.has(emoji.unicode))
  if (!emojiVersion && zwjEmojisToCheck.length) {
    // render now, check their length later
    requestAnimationFrame(() => checkZwjSupportAndUpdate(zwjEmojisToCheck))
  } else {
    currentEmojis = emojiVersion ? currentEmojis : currentEmojis.filter(isZwjSupported)
    // Reset scroll top to 0 when emojis change
    requestAnimationFrame(() => resetScrollTopIfPossible(tabpanelElement))
  }
}

function checkZwjSupportAndUpdate (zwjEmojisToCheck) {
  const rootNode = rootElement.getRootNode()
  const emojiToDomNode = emoji => rootNode.getElementById(`emo-${emoji.id}`)
  checkZwjSupport(zwjEmojisToCheck, baselineEmoji, emojiToDomNode)
  // force update
  currentEmojis = currentEmojis // eslint-disable-line no-self-assign
}

function isZwjSupported (emoji) {
  return !emoji.unicode || !hasZwj(emoji) || supportedZwjEmojis.get(emoji.unicode)
}

async function filterEmojisByVersion (emojis) {
  const emojiSupportLevel = emojiVersion || await detectEmojiSupportLevel()
  // !version corresponds to custom emoji
  return emojis.filter(({ version }) => !version || version <= emojiSupportLevel)
}

async function summarizeEmojis (emojis) {
  return summarizeEmojisForUI(emojis, emojiVersion || await detectEmojiSupportLevel())
}

async function getEmojisByGroup (group) {
  console.log('getEmojiByGroup', group)
  // -1 is custom emoji
  const emoji = group === -1 ? customEmoji : await database.getEmojiByGroup(group)
  return summarizeEmojis(await filterEmojisByVersion(emoji))
}

async function getEmojisBySearchQuery (query) {
  return summarizeEmojis(await filterEmojisByVersion(await database.getEmojiBySearchQuery(query)))
}

$: {
  // consider initialLoad to be complete when the first tabpanel and favorites are rendered
  /* istanbul ignore next */
  if (process.env.NODE_ENV !== 'production' || process.env.PERF) {
    if (currentEmojis.length && currentFavorites.length && initialLoad) {
      initialLoad = false
      requestPostAnimationFrame(() => performance.measure('initialLoad', 'initialLoad'))
    }
  }
}

//
// Derive currentEmojisWithCategories from currentEmojis. This is always done even if there
// are no categories, because it's just easier to code the HTML this way.
//

$: {
  function calculateCurrentEmojisWithCategories () {
    if (searchMode) {
      return [
        {
          category: '',
          emojis: currentEmojis
        }
      ]
    }
    const categoriesToEmoji = new Map()
    for (const emoji of currentEmojis) {
      const category = emoji.category || ''
      let emojis = categoriesToEmoji.get(category)
      if (!emojis) {
        emojis = []
        categoriesToEmoji.set(category, emojis)
      }
      emojis.push(emoji)
    }
    return [...categoriesToEmoji.entries()]
      .map(([category, emojis]) => ({ category, emojis }))
      .sort((a, b) => customCategorySorting(a.category, b.category))
  }

  // eslint-disable-next-line no-unused-vars
  currentEmojisWithCategories = calculateCurrentEmojisWithCategories()
}

//
// Handle active search item (i.e. pressing up or down while searching)
//

/* eslint-disable no-unused-vars */
$: activeSearchItemId = activeSearchItem !== -1 && currentEmojis[activeSearchItem].id
/* eslint-enable no-unused-vars */

//
// Handle user input on the search input
//

$: {
  requestIdleCallback(() => {
    searchText = (rawSearchText || '').trim() // defer to avoid input delays, plus we can trim here
    activeSearchItem = -1
  })
}

// eslint-disable-next-line no-unused-vars
function onSearchKeydown (event) {
  if (!searchMode || !currentEmojis.length) {
    return
  }

  const goToNextOrPrevious = (previous) => {
    halt(event)
    activeSearchItem = incrementOrDecrement(previous, activeSearchItem, currentEmojis)
  }

  switch (event.key) {
    case 'ArrowDown':
      return goToNextOrPrevious(false)
    case 'ArrowUp':
      return goToNextOrPrevious(true)
    case 'Enter':
      if (activeSearchItem !== -1) {
        halt(event)
        return clickEmoji(currentEmojis[activeSearchItem].id)
      } else if (currentEmojis.length) {
        activeSearchItem = 0
      }
  }
}

//
// Handle user input on nav
//

// eslint-disable-next-line no-unused-vars
function onNavClick (group) {
  rawSearchText = ''
  searchText = ''
  activeSearchItem = -1
  currentGroupIndex = groups.findIndex(_ => _.id === group.id)
}

// eslint-disable-next-line no-unused-vars
function onNavKeydown (event) {
  const { target, key } = event

  const doFocus = el => {
    if (el) {
      halt(event)
      el.focus()
    }
  }

  switch (key) {
    case 'ArrowLeft':
      return doFocus(target.previousSibling)
    case 'ArrowRight':
      return doFocus(target.nextSibling)
    case 'Home':
      return doFocus(target.parentElement.firstChild)
    case 'End':
      return doFocus(target.parentElement.lastChild)
  }
}

//
// Handle user input on an emoji
//

async function clickEmoji (unicodeOrName) {
  const emoji = await database.getEmojiByUnicodeOrName(unicodeOrName)
  const emojiSummary = [...currentEmojis, ...currentFavorites]
    .find(_ => (_.id === unicodeOrName))
  const skinTonedUnicode = emojiSummary.unicode && unicodeWithSkin(emojiSummary, currentSkinTone)
  await database.incrementFavoriteEmojiCount(unicodeOrName)
  fireEvent('emoji-click', {
    emoji,
    skinTone: currentSkinTone,
    ...(skinTonedUnicode && { unicode: skinTonedUnicode }),
    ...(emojiSummary.name && { name: emojiSummary.name })
  })
}

// eslint-disable-next-line no-unused-vars
async function onEmojiClick (event) {
  const { target } = event
  if (!target.classList.contains('emoji')) {
    return
  }
  halt(event)
  const id = target.id.substring(4) // replace 'emo-' or 'fav-' prefix

  /* no await */ clickEmoji(id)
}

//
// Handle user input on the skintone picker
//

// eslint-disable-next-line no-unused-vars
async function onSkinToneOptionsClick (event) {
  const { target } = event
  if (!isSkinToneOption(target)) {
    return
  }
  halt(event)
  const skinTone = parseInt(target.id.slice(9), 10) // remove 'skintone-' prefix
  currentSkinTone = skinTone
  skinTonePickerExpanded = false
  focus('skintone-button')
  fireEvent('skin-tone-change', { skinTone })
  /* no await */ database.setPreferredSkinTone(skinTone)
}

// eslint-disable-next-line no-unused-vars
async function onClickSkinToneButton (event) {
  skinTonePickerExpanded = !skinTonePickerExpanded
  activeSkinTone = currentSkinTone
  if (skinTonePickerExpanded) {
    halt(event)
    requestAnimationFrame(() => focus(`skintone-${activeSkinTone}`))
  }
}

// To make the animation nicer, change the z-index of the skintone picker button
// *after* the animation has played. This makes it appear that the picker box
// is expanding "below" the button
$: {
  if (skinTonePickerExpanded) {
    skinToneDropdown.addEventListener('transitionend', () => {
      skinTonePickerExpandedAfterAnimation = true // eslint-disable-line no-unused-vars
    }, { once: true })
  } else {
    skinTonePickerExpandedAfterAnimation = false // eslint-disable-line no-unused-vars
  }
}

// eslint-disable-next-line no-unused-vars
function onSkinToneOptionsKeydown (event) {
  if (!skinTonePickerExpanded) {
    return
  }

  const changeActiveSkinTone = async nextSkinTone => {
    halt(event)
    activeSkinTone = nextSkinTone
    await tick()
    focus(`skintone-${activeSkinTone}`)
  }

  switch (event.key) {
    case 'ArrowUp':
      return changeActiveSkinTone(incrementOrDecrement(true, activeSkinTone, skinTones))
    case 'ArrowDown':
      return changeActiveSkinTone(incrementOrDecrement(false, activeSkinTone, skinTones))
    case 'Home':
      return changeActiveSkinTone(0)
    case 'End':
      return changeActiveSkinTone(skinTones.length - 1)
    case 'Enter':
      // enter on keydown, space on keyup. this is just how browsers work for buttons
      // https://lists.w3.org/Archives/Public/w3c-wai-ig/2019JanMar/0086.html
      return onSkinToneOptionsClick(event)
    case 'Escape':
      halt(event)
      skinTonePickerExpanded = false
      return focus('skintone-button')
  }
}

// eslint-disable-next-line no-unused-vars
function onSkinToneOptionsKeyup (event) {
  if (!skinTonePickerExpanded) {
    return
  }
  switch (event.key) {
    case ' ':
      // enter on keydown, space on keyup. this is just how browsers work for buttons
      // https://lists.w3.org/Archives/Public/w3c-wai-ig/2019JanMar/0086.html
      return onSkinToneOptionsClick(event)
  }
}

// eslint-disable-next-line no-unused-vars
async function onSkinToneOptionsFocusOut (event) {
  // On blur outside of the skintone options, collapse the skintone picker.
  // Except if focus is just moving to another skintone option, e.g. pressing up/down to change focus
  const { relatedTarget } = event
  if (!relatedTarget || !isSkinToneOption(relatedTarget)) {
    skinTonePickerExpanded = false
  }
}