npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sss-elemental

v1.3.1

Published

Pack of helpers to manipulate elements class names

Downloads

11

Readme

About

Elemental is most lightweight and Fault tolerant pure javascript DOM class-control helper with 100% functional test coverage.

If you are tired of connecting Jquery just to switch classes of elements, then this library is for you.

Installation

  1. Download Elemental

  2. Connect Elemental before your scripts.

<script src="/assets/js/lib/Elemental.js"></script>
  1. See how to use the Elemental.
Package managers 😎

If you are using package managers such as npm or yarn, import this lib as usual.

# Yarn
yarn add sss-elemental

# NPM
npm i sss-elemental --save

Do import Elemental from 'sss-elemental';

Usage

addClass

Adds string to element's class name

const item = document.querySelector('body');
Elemental.addClass(item, 'customClass');

removeClass

Removes string from element's class name

const item = document.querySelector('body');
Elemental.removeClass(item, 'customClass');

toggleClass

Adds or removes class depending on its presence.

const item = document.querySelector('body');
Elemental.toggleClass(item, 'customClass');

hasClass

Check if element has certain class name

const body = document.querySelector('body');
const isActive = Elemental.hasClass(body, 'body_active');
console.log(isActive); // true

injectCss

Inject CSS in element.style directly

Don't forget about camelCase syntax when styling from javascript

const body = document.querySelector('body');
const styles = {
    display: 'none',
    overflowY: 'hidden',
    boxSizing: 'border-box',
}

Elemental.injectCss(body, styles);

eject

Eject all Elemental methods in to Element.prototype allowing you to update class-control syntax.

// Do eject 
Elemental.eject();

// Be fancy
const body = document.querySelector('body');
body.addClass('body_custom');
body.removeClass('body_custom');
body.hasClass('body_custom');
body.toggleClass('body_custom');

This technique called Monkey patching and in large projects it is considered as not a best practice. But either way it is an optional feature. Elemental does nothing behind the scene without your command, and use it or not it's up to you to decide.

License

This project is available under the MIT license.