UNPKG

tiny-tags

Version:

A lightweight, performant, and dependency-free content tagging and filtering system

18 lines (12 loc) 1.11 kB
# TinyTags TinyTags is a tiny (<100 SLOC), performant content tagging and filtering library written in plain JavaScript without any dependencies. ## Usage First, import the `tiny-tags` module, then run `Tags_InitTags()` once your DOM is ready. Once that's done, interaction is handled through HTML attributes. For each of your taggable elements that should show/hide, use `data-tag={tags}`. You can use either buttons or checkboxes to manage toggling. To use buttons as toggles, simply add `data-tag-clickable={tag}` to your button, and to use checkboxes, add `data-tag-checkable={tag}` to the checkbox. Each button or checkbox can be used to toggle a single tag, but each taggable element can have an arbitrary number of tags associated, and will toggle if _every_ tag is unset. When a taggable element is toggled off, the `Tags_Hidden` class is set for it. This class will need to be addressed with CSS. Similarly, each button will always have either the `Tags_ToggleActive` or `Tags_ToggleInactive` class, and each checkbox will always have either the `Tags_CheckActive` or `Tags_CheckInactive` class.