Molk.ch Project
This script provides filtering of a list of tagged items. When more than one tag is selected, the items with more than one matching tag are highlighted.
Links
- The molk.ch-js project
- This is just one script under the molk.ch-js project.
- CSS-based Example ( js css)
- The most basic usage of the script applies different CSS to the items depending on whether they are not selected, selected, or highlighted. This is super-fast, because very little processing is going on.
- Animation-based Example ( js css)
- The script provides an easy way to display/hide items and tags (e.g. jQuery animations). This example shows how it works.
- Unit Tests
- Once this script is running, it'll be a long time before it gets modified again. Unit tests are a great way to ensure old code is still working (before you change it), they help understand what the point of each bit of code is, and after you change the code, they will help you figure out what you broke.
- Source File
- The nicely formatted, unminified source file. Say No! to the Javascript Trap!
- molk.ch/links
- The script was written to filter the links section of molk.ch. It also provided a fun opportunity to learn about javascript, jquery, and unit testing in a language which is not java.
Usage
The tag-filter is quite restrictive about what the filtered items must look like.
- The tag-filter only considers elements below the "root" tag, as indicated when initializing the filter: $("#my-root").tagFilter().
- All classes of the LIs under the base element are considered tags, except those listed in the "excludedTags"-setting.
- All list types are supported: Unordered Lists ("UL"), Ordered Lists ("OL"), Definition Lists ("DL").
- Lists of any type can be nested inside any other type of list.
- "children" inherit classes from their "parents".
- Elements inside nested lists of a DD element will inherit the tags of the DD element. However, since DT elements are _not_ DOM parents of lists nested inside DD elements, they must explicitly have all required tags.
- LIs will always appear in order of appearance.
Styling
The filter works with CSS classes - classes are added and removed to items and tags as they are selected / unselected, highlighted / unhighlighted, and filter / unfilter. See the CSS example for a simple style which displays/hides items as they are included/excluded from the active filters.
Settings
- excludedTags
- A list of CSS classes which should not be considered tags.
- selected / unselected
- Item transition: Two functions handling item transitions when a tag is selected / deselected.
- highlighted / unhighlighted
- Item transition: Two functions handling highlighting / unhighlighting of an item (when an item is tagged with more than one selected tag, it can be made to stand out more than just selected items).
- filtered / unfiltered
- Tag transition: Two functions handling activation / deactivation of filtering on a tag.
- countSelector
- The CSS selector to be used for counting the #items for each tag (displayed in parenthesis after each tag). E.g. li.item- since parent elements are dynamically tagged with all tags of items they contain, this selector needs to select only actual items, otherwise the count will be too high.
- filters
- Comma-separated list of filters which should be already active when the page loads. Can also be specified in the url, e.g. example-css.html?filters=Green. If initial filters are specified in both the settings and the URL, the URL overrides.
The animation functions should be idempotent, e.g. "selecting" an already selected item should have no effect. By default, these functions do nothing - it is assumed that css takes care of the styling.
How It Works
- A list of tags is added next to the root element in the DOM.
- Clicking on a tag selects / unselects the tag.
- When no tags are selected, all items are selected, and the reset link is hidden.
- When at least one tag is selected, all LIs which are not tagged with at least one of the selected tags is hidden, and the reset link is visible, along with the number of hidden items.
- LIs tagged with more than one of the selected tags are highlighted.
- Only one level of LIs is supported, any other markup is ignored (the LIs delimit each element of interest)
- Any elements which do not have the item class, and do not contain any children with it, are ignored.
- Parents inherit all tags of all their children, and children inherit the tags of all their parents. This has the desirable consequence that parents will always be selected/highlighted along with their children.