skip to content

Welcome to dynamic-tags!

This is a vanilla JS library designed to make it super simple to create a tagging system for any collection of elements. Use it for blog posts, cards, recipes, and anything else your heart desires!

Usage

StylingNew!

dynamic-tags now comes with default styling for a truly drop-in experience! There are a whole host of parameters to change, but simply set the useDefaultStyling tag as true in your hash, and a cssPath key in a hash under styling. Check out the example below for what that might look like.

For more fine-grained control, add other parameters to the styling hash. From here, you can change things like the base color with baseTheme, and how the filter behaves - whether to be sticky, absolutely positioned, and how it behaves across different breakpoints.

Watch out for a detailed breakdown soon!

Basic setup

dynamic-tags is designed to fit directly into your predefined HTML without much fuss. It expects that your DOM has a container for all your cards, and that all your cards have been loaded. It also expects that the tags for each card belongs to that card in the DOM. For example, you might have a list of languages that each have a number of properties.

You can simply drop the library into your website by writing <script src="js/dynamic-tags.js"></script> somewhere after your body element. Then, in your JavaScript, create a DynamicTagController() object, and finally, call the loadTags() method of that object. Here's a brief example of what the result might look like in the language filtering example mentioned above:

Filter by property:

Languages

English

Italic Germanic West Germanic Proto-Indo-European

Spanish

Italic Proto-Indo-European

Hindi

Indo-Iranian Indic Proto-Indo-European

Persian

Indo-Iranian Iranian Proto-Indo-European

Polish

Slavic Balto-Slavic West Slavic Proto-Indo-European

Bulgarian

Slavic Balto-Slavic South Slavic Proto-Indo-European

This example took only a few lines of JavaScript:


      var languages = new DynamicTagController({
        useDefaultStyling: "true",
        styling: {
          cssPath: "dynamic-tags/css/dynamic-tags.css",
          baseTheme: "blue",
          filter: {
            stickyFilter: "desktop",
            top: "130px"
          }
        }
      });
      languages.loadTags();
        

In this case, the structuring of the DOM was more important to the library than any of the JavaScript. If you look at the DOM, you'll notice that each element had a class corresponding to its role: the filter had a filter class, the container had a container class, each card had a card class, and each tag had a tag class. This is the default expectation, but you might need to use different classes for each element (say, for example, to have multiple on the same page).

In this case, you can simply pass in a hash with the parameters you want to change. The available params right now are:

Selectors

container
Determines the class of the container element; defaults to container
filter
Determines the class of the filter element; defaults to filter
card
Determines the class of the card element; defaults to card
tag
Determines the class of the tag element; defaults to tag

Optional configuration

useDataset
Use the data-X attribute instead of the innerHTML of the tag; defaults to false
dataTag
Determines the X in data-X, if using dataset; defaults to tag
filterSelectionMethod
Determines whether the filter is a list of tags or an input element; defaults to list
filterTagType
Determines the type of element to use as a tag in the filter element; defaults to span
activeTagClass
Determines the class to assign to active tags; defaults to active

Input behavior options

filterInputClass
Determines the class to assign to the auto-generated input element if filterSelectionMethod is set to input; defaults to filter-input
filterInputPlaceholder
Determines what placeholder text to use in the auto-generated input element if filterSelectionMethod is set to input; defaults to filter-input
useAutocomplete
Determines whether to show an autocomplete box in the filter input if filterSelectionMethod is set to input; defaults to true
autocompleteClass
Determines the class to assign to the auto-generated autocomplete element if useAutocomplete is set to true and filterSelectionMethod is set to input; defaults to autocomplete
useSearchBox
Determines whether to show a search box under the filter input if filterSelectionMethod is set to input; defaults to true
searchBoxClass
Determines the class to assign to the auto-generated search box element if useSearchBox is set to true and filterSelectionMethod is set to input; defaults to search-box

No Result options

noResultError
Determines whether to display an error when no result is found; defaults to true
noResultType
Determines the type of element to use when showing the no-result error; defaults to h4
noResultText
Determines the text shown in the no-result error; defaults to Sorry, nothing matches your filters.

As an example of what can be done using this system, here is an entirely different use-case, using these parameters:

          
      {
        container: "blog-container",
        card: "blog-post",
        tag: "blog-tag",
        filter: "blog-filter",
        filterSelectionMethod: "input",
        filterInputClass: "blog-filter-input",
        filterInputPlaceholder: "Search for tags here...",
        searchBoxClass: "blog-search-box",
        activeTagClass: "viewing"
      }
    

The food and book blog

Making a super fluffy pancake ... without eggs!

Ever wanted to make fluffy pancakes but dairy-free? This is the recipe for you! Read on to find out how to WOW your family for Sunday brunch.

Top 10 best books to read if you loved Ender's Game

Ender's Game is a sci-fi classic. Unfortunately, it's old as hell. Here are the authors that are taking Orson Scott Card's legacy to the next level!

Book Review: Skyward

Brandon Sanderson is a fantasy genius. In his exploratory foray into sci-fi writing, he shows his true mastery of tension, character development, and worldbuidling. Our book review is spoiler-free!

Pizza, without the cheese?

Ask almost anyone, and the piping hot cheese on a pizza is the best part. We're here to show you that pizza can still be amazing while being dairy-free. Check out this ten-minute recipe that will shake up your weeknight.

Book Review: Aurora Rising

Amie Kaufman is a New York Times bestselling sci-fi author - and with good reason. Aurora Rising is her second collaboration with Jay Kristoff, and as usual, it is a delight to watch these two masters at work. Our book review goes into more depth about the world behind Aurora Rising.

Top 5 fantasy authors to look out for in 2021

Get ready to immerse yourself in the worlds created by these outstanding fantasy authors. These books will be pageturners - without a doubt.

Book Review: Shatter Me

Treading the line between sci-fi, fantasy, and dystopia, Tahereh Mafi proves to be no tightrope walker. This book is an attempt at making something new of an overstuffed genre. Read our book review to see how it went. Spoiler: not well.

Contributing

We're always looking for new contributors to help with our project. You don't even need to know how to code! Take a look at our issues tracker to see if there are any open issues you can help with.

Alternatively, if you think of a feature you'd like to add, open an issue and make a pull request!