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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent