kurtobando / simple-tags

A lightweight JS plugin for tags without JQuery library

Simple Tags

A lightweight JS plugin for tags without JQuery library

Getting Started

Start by adding the data-simple-tags data attribute with your desired values,, for example Article, Blog, Page, Post, Category, Updates then, include .simple-tags for the default style.

<div class="simple-tags" data-simple-tags="Article, Blog, Page, Post, Category, Updates"></div>

NOTE! Ensure these files are included on your project.

<link href="build/simple-tags.min.css" rel="stylesheet" />
<script src="build/simple-tags.min.js"></script>

At this point, let us target the desired element and pass to new Tags(). In our example above, I will add a new id attribute, named simple-tag.

<div id="simple-tag" class="simple-tags" data-simple-tags="Article, Blog, Page, Post, Category, Updates"></div>

<script src="build/simple-tags.min.js"></script>
<script>
    new Tags(document.getElementById("simple-tag"))
</script>

In addition to this, the data-simple-tags will update whenever a new tag or deleted tag has been made.

Demo

Visit simple-tags.kurtobando.com

Script

yarn install
yarn dev
yarn build

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

simple-tags's Issues

Not working with forms.

Thanks for nice script!

The only problem is, it's not working with forms. Could be that implemented?

Thanks!

Last deleted <li> do not get removed from the "data-simple-tags" attribute

Building with node 17.x results in ERR_OSSL_EVP_UNSUPPORTED

Attempting to execute

yarn dev

with node 17.x results in

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at BulkUpdateDecorator.hashFactory (/simple-tags/node_modules/webpack/lib/util/createHash.js:145:18)
    at BulkUpdateDecorator.update (/simple-tags/node_modules/webpack/lib/util/createHash.js:46:50)
    at RawSource.updateHash (/simple-tags/node_modules/webpack/node_modules/webpack-sources/lib/RawSource.js:64:8)
    at NormalModule._initBuildHash (/simple-tags/node_modules/webpack/lib/NormalModule.js:868:17)
    at handleParseResult (/simple-tags/node_modules/webpack/lib/NormalModule.js:934:10)
    at /simple-tags/node_modules/webpack/lib/NormalModule.js:1026:4
    at processResult (/simple-tags/node_modules/webpack/lib/NormalModule.js:743:11)
    at /simple-tags/node_modules/webpack/lib/NormalModule.js:807:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Running with node 16.x works.

Suggestion: document the required node version in README

Typo

In this line, there is a typo of the word undefined.

Incorrect tag when `data-simple-tags` is empty

The problem in this line is when data-simple-tags is empty, then the tag appears as an x - the correct output should be empty. One should check sth like dataAttribute.indexOf(',') !== -1 ? dataAttribute.split(',') : [].

Mihail.