term-helper's Introduction

Term Helper

Show <abbr>'s title and further detail when hovering or tapped.

Usage

> npm run build

<p>
    Simply wrap terms with the abbreviation tag in <abbr>HTML</abbr>.
</p>

import { TermHelper } from "./dist/index.mjs"


const helper = new TermHelper({
    HTML: {
        title: 'HyperText Markup Language',
        description: "<dfn>HTML</dfn> (HyperText Markup Language) is a descriptive language that specifies webpage structure. (See more on <a href='https://developer.mozilla.org/en-US/docs/Glossary/HTML'>MDN Web Docs</a>)"
    }
    // …
})
helper.on(document.body)

See example.html (and src/example.scss) for full example.

The example.scss is only an example — not intended for real usage. At least, it will break if you change the call-out's CSS class.

This project is agnostic for CSS. You can change tags' names and CSS classes freely. Here are the default.

const helper = new TermHelper(glossary, {
  callout: {
    className: 'term-callout',
    tagName: {
      outer: 'aside',
      inner: 'article',
      title: 'h4',
      description: 'div'
    }
  },
  term: {
    markedClassName: 'active',
    selector: 'abbr'
  }
})

Call-out's structure:

outer.className (aside.term-callout)
└─ inner (article)
   ├─ title (h4)
   └─ description (div)

The titles and descriptions in the glossary are used as inner HTML. You can provide a tex preprocessor for them.

const helper = new TermHelper(glossary, {
  callout: {
    preprocessor: {
      title: (original: string) => `🔎 ${original}`,
      description (original: string) {
        return original.split('\n').map(p => `<p>${p}</p>`).join('')
      }
    }
  }
})