Link Search Menu Expand Document

Assigning categories

Table of contents

  1. Example of assignning categories
  2. How it works

Example of assignning categories

Here we have several names of animal species, which are rendered in different ways.

/** Assign categories */
const baseStylizer = closet.Stylizer.make({
  separator: '・',
  processor: (v) => `《${v}》`,
})

const colorMapper = (v, _i, cat) => {
  if (v === '') {
    return []
  }

  const theColor = cat === 0
    ? 'yellow'
    : cat === 1
    ? 'darkseagreen'
    : 'indianred'

    return `<span style="color: ${theColor};${cat === 0
      ? '-webkit-text-stroke: 0.8px black; text-stroke: 0.8px black;'
      : ''}">${v}</span>`
}

const theBackStylizer = baseStylizer.toStylizer({
  mapper: colorMapper,
})

const theFrontStylizer = baseStylizer.toStylizer({
  mapper: (v) => v === '' ? [] : `<span style="color: lightgrey">${v}</span>`,
})

const theContexter = (tag) => {
  const flattedValues = tag.values.flatMap((vs, i) => vs.map(v => [v, i]))
  return flattedValues.map((v, i) => colorMapper(v[0], i, v[1]))
}

const assignCategorySettings = {
  backStylizer: theBackStylizer,
  frontStylizer: theFrontStylizer,

  inactiveStylizer: baseStylizer,
  contexter: theContexter,
}

filterManager.install(
  closet.recipes.multipleChoice.show({
    tagname: 'mc',
    ...assignCategorySettings,
  }),

  closet.recipes.multipleChoice.hide({
    tagname: 'mch',
    ...assignCategorySettings,
  }),

  closet.recipes.multipleChoice.reveal({
    tagname: 'mcr',
    ...assignCategorySettings,
  }),
)

Legend: bees (yellow with black); crocodiles (cyan); cats (red).
[[mc1::Anthophila::::Panthera]]
[[mch2::Colletidae::Mecistops::Catopuma]]
[[mcr3::Megachiidae::Osteolaemus::Prionailurus]]

How it works

In its essence, the multiple choice filter actually assigns categories. These categories are stylized using a Stylizer.

[[tagname::value1||value2::value3::value4||value5]]

If <tagname> was a tag implementing the multipleChoice filter, value1 and value2 would belong to category 1, value3 to category 2, and value4 and value5 belongs to category 3. In multiple choice questions, the first category happens to be correct answer, and the second category wrong answer.