AttributeList.js
Manipulate HTML attributes with a classList like API.
Write about how cumberstone is to manually
Element.getAttribute('attrname'), modify it as string, keep a copy to check if the value that your adding already exists, taking care of spaces and other characters and finally Element.setAttribute('attrnam', 'modifiedCopy') takes more effort than it should.
Also I'm a fan of <body data-js-scope="menu-is-open"> kind of stuff and prefer to leave classes to styling.
- Clone
npm installnpm start
As a wrapper (loadash, jqueryLike)
<div class="my-element" data-caliban-lives="oops hipster-- monster" />import {$attributeList} from 'attributelist';
// make it globally available under your favourite alias.
window.$al = $attributeList;
/*
* @function $al(el)
* @param {HTMLElement|String} el
* @returns an object with each attribute than can be accessed as .dataset
*/
$al('.myElement')
// returns {calibanLives: attributeListInstance}
/*
* Add
*/
$al('.myElement').calibanLives.add('shakespeare')
// <div class="my-element" data-caliban-lives="oops hipster-- monster shakepsear" />
/*
* Remove
*/
$al('.myElement').calibanLives.remove('oops')
// <div class="my-element" data-caliban-lives="hipster-- monster shakespear" />
/*
* Toggle
*/
$al('.myElement').calibanLives.toggle('monster')
// <div class="my-element" data-caliban-lives="hipster-- shakespear" />You can also extend native Element prototype, if you're felling #savage
<div class="my-element" data-caliban-lives="attributelist is not" />import {$dangerouslyExtendElementPrototypeWithAttributeList} from 'attributelist';
// you know is dangerous with name like this
dangerouslyExtendElementPrototypeWithAttributeList();
var x = document.querySelector('.my-element');
x.attributeList.calibanLives.add("awesome")
x.attributeList.calibanLives.remove("not")
x.attributeList.calibanLives.toggle("😎")
// <div class="my-element" data-caliban-lives="attribute is awesome 😎" />A demo is running on port 8080, open your console and an $al() wrapper function is available globally to test
Parcel.js — Unless you've been living under a rock, you probably have heard about the coolest thing that happen to javaScript bundling.
Lea Verou For defying conventions and give me insparation to give a first try on the dangerous path of extending native prototypes. I still don't understand this programming nerdery as i'm not the smartest type of human beeing, but maybe someone in the wild will help me one day.