@eligrey I would be really awesome if you could publish this on bower and npm. If I'm missing it already being published, a note in the readme might be welcome.

Thanks for the awesome polyfill 👍

When I run code from command line, i.E. for unit tests through tape, this error gets thrown. Please add an additional check to ensure that self is defined. Thx

Hello -

I asked Doug Beck if you could add a permissive license, such as an MIT license to his classlist library. He pointed me in your direction. Would you be willing to add a permissive license, such as an MIT license to this repo? My company will not let me use the repo with the unlicense.

Thanks,

Stevi

I tested the polyfill in IE10 and IE11 (Win7 on a virtual machine) and the functions still have partial support of classList. Multiple parameters in the add() and remove() functions still don't work.

    if (!("classList" in document.createElement("_"))
        || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) {

The last condition !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g")) evaluates to true, so the part for no classlist support will be executed.
The part for partial classlist supported browsers won't be executed in IE10/11.

I could "fix" the issue by changing || to && in line18/19:

    if (!("classList" in document.createElement("_"))
        && document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) {

It seems to work for IE10/11, but don't know if is could be an issue for other browsers.

I've just tried your polyfill in the above version and it doesn't work. It fails here: https://github.com/eligrey/classList.js/blob/master/classList.js#L174

Turns out the exception thrown isn't what you were expecting. The exception has no number property. It is a TypeError stating that "getters & setters can not be defined on this javascript engine".

Removing the condition if (ex.number === -0x7FF5EC54) { ... fixes the problem.

I was trying out classList.js in IE11, in IE9 emulation mode. However I'm getting the following:

SCRIPT5009: 'DOMTokenList' is undefined
classList.js (232,3)

seeing that error in my app: "testElement.classList.toggle is not a function"

at https://videomail.io/

when using the useragent
Mozilla/5.0 (X11; Linux i686 on x86_64; rv:13.0) Gecko/20120615 Firefox/13.0.1 SeaMonkey/2.10.1

exact location is https://videomail.io/js/main-939eb92ac9.js:41316

i know it is a very old, exotic browser. but since you are shimming it, i guess worth to report?

I'm build a angular project that I can't get classList from svg use tag in IE11, for example:

<svg class="a b c>
   <use class="d e f" [attr.xlink:href]="iconPath"/>
</svg>

I call classList of use tag in IE11, it just returned undefined. But if call classList of svg tag, it's working fine.

Note: iconPath is a component variable.

(typeof Element !== "undefined" && !Element.prototype.hasOwnProperty("classList"))

It blows up in IE8, which is a supported browser for this script, afaict.

Line 50 throws a DOMException is undefined error in IE8:

this.code = DOMException[type];

Has nobody ever encountered this error before!? It seems that DOMException is indeed not supported at all on IE8:

• http://www.webbrowsercompatibility.com/dom/desktop/ https://msdn.microsoft.com/en-us/library/ff974354
• https://msdn.microsoft.com/en-us/library/ff974354

Code breaks in Safari browsers because Window isn't defined.

Can you add the browser compatibility list to the readme?

EX:

Browser Compatibility

IE - 7+

As you can see in the specification, DOMTokenList.prototype.contains should return a boolean rather than a number.

http://github.com/component/component

Just to let you know the 2nd CDN link gives a HTTP 404

Good work on the js script though works a treat

Hi,

I had a problem with Safari on iOS 6.1.3.

The if check

if (!("classList" in document.createElement("_")) || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g")))

resolves correctly in true and the script comes later to

try { objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);

This is a problem in old Safari Versions, because it is not working on DOM Objects. So there is no error but toggle or add will not work with the additional parameters.

I found a working solution for myself by adding

if ("document" in self) {
var setPropOnDOM = true;

// Detect if we can define properties on DOM Objects
try {
    Object.defineProperty(document.createElement("_"), "classList", {
        "get": function() {}
    });
} catch (e) { //Old Safari versions will break at this point
    setPropOnDOM = false;
}

// Full polyfill for browsers with no classList support
// Including IE < Edge missing SVGElement.classList
if (setPropOnDOM && (!("classList" in document.createElement("_")) || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g")))) {

Old Safaris will resolve in the catch block and then go on with partial support which is then working like expected. I will finish it next week and come back with a clean and fully response when my unit tests are green in all browsers (including old IE, Safari and so on).

This repo now has few more maintainers (including myself).

Before making any big changes would like to:

Say Hi

hi

Make a todo list

1. Rewrite tests and use real browsers to run them: #69
2. Fix #48
3. Publish a new version
4. Close my fork yola#9
5. Cleanup whitespace
6. Minify via npm prepublish
7. Start addressing open issues

Flesh out any preferences, paint a bikeshed

When writing JS I generally stick to airbnb-ish style.

For testing, prefer Mocha+chai (with karma running the tests) instead of QUnit.

Prefer plain old shell or JS scripts instead task managers.

npm install only able to get 1.1.20150312 and could not get the latest version.

The latest test fails

http://jsbin.com/sitamaguso

Chrome, FF, Opera

This line throws the following exception when running on a page in IE8 compatibility mode (basically IE7):

, elemCtrProto = (view.HTMLElement || view.Element)[protoProp]

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Mon, 30 Jan 2012 21:46:40 UTC

Message: 'Element' is null or not an object
Line: 23
Char: 4
Code: 0

@eligrey what are your plans for this project?

There has been some grumbling about the lack of attention.

We have forked and published this repo but package management is a mess.

Would you be amendable to transferring this project to an organization, https://github.com/yola, and letting an engineering team manage it?

If nothing else, add a few collaborators, including:

• @beck
• @stefanor (fellow coworker)
• @stevenvachon
• @tbranyen (if willing?)

@tbranyen if ☝️ happens, could you add some collaborators to:

• https://www.npmjs.com/package/classlist.js

Including:

• https://www.npmjs.com/~yola
• https://www.npmjs.com/~beck

I would very much like to shut-down our fork and work from a single source of truth.

classList.min.js is 6 months older than classList.js

Hello, I am a little confused when using the add function in classList.js. If I pass no argument to add, just like:
element.classList.add(), the element class will add "undefined" to the end.

This is because the source code using token = tokens[i] + ""; to generate className "undefined" , but in HTML5 classList property, element.classList.add() will not affect the class name.

Of course this is an easy bug to fix, I am wondering if it is some kind of features so you leave it the way? Or it is just a bug :)

Sorry for my poor English and looking forward to your reply.

When I am trying to bundle an app of mine with rollup, I get this error

$ rollup -c etc/rollup/dev.js -w 
bundling...
⚠️   'default' is not exported by 'node_modules/classlist.js/classList.js'
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
commonjs-proxy:/home/michael-heuberger/code/videomail-client/node_modules/classlist.js/classList.js (1:155)
1: import * as classList from "/home/michael-heuberger/code/videomail-client/node_modules/classlist.js/classList.js"; export default ( classList && classList['default'] ) || classList;

looks like there is no default export for your library?

Sorry for any inconvenience this may have caused. Because of #33, could you tag a release again?

@see #22, #32.

Thanks

I was seeing that classList wasn't actually working on IE8.

After debugging for a bit I found that if es5-shim is loaded before classList, then the polyfill behavior is busted on IE8.

The problem is on this line, because the exception you get from es5-shim doesn't have a number property.

I think that since the try...catch is there just to prevent that single case, I would make it a bit less restrictive by removing the check for ex.number.

What do you think?

classListProto.contains = function (token) {
	return !~checkTokenAndGetIndex(this, token + "");
};

~x operator are equal -(x+1)
for x=-1

!~(-1)
!-(-1+1)
!-0
!0
true

so, if checkTokenAndGetIndex() did not found token in array (return -1), then contains() method will return true

What browsers are supported by this polyfill? eg, is IE < 8 supported? It'd be good to document this in the README, along with any known issues.

element.classList.toggle( 'on', undefined );

This works in modern browsers Chrome, Firefox, Edge.

Are there any plans to publish this to npm in the future?

Hey, maintainer(s) of eligrey/classList.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library eligrey/classList.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "eligrey/classList.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Can you tag the latest commit please? using semantic versioning maybe? v1.0.0 or something like that..

... for npm, thanks!

How about producing a versioned release to ease adding to CDNs (cdnjs.com, jsdelivr.com)?

I defer all of my JavaScript until after DOMContentLoaded. The classList.js polyfill is not accessible unless it is loaded at or before document.readyState === "loading". How can this be overcome?

Near the top of the code you check for:
!("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))

IE11 and 10 will fail that test and therefore should run the code for the polyfill. But, IE11 and 10 do provide native support but lacks SVG support and lacks multiple classname arguments for add() and remove(). (Reference: http://caniuse.com/#search=classlist)

The code within the else of that same if statement contains a polyfill to add multiple argument support to add() and remove(). There is a comment in that block of code that says "Polyfill for IE 10/11 and Firefox <26." But IE11 does not get to that point.

Are you still maintaining this library? If you are no longer maintaining, please let me know if there is a reason you stopped other than limited time to so do. If you believe addressing this potential bug is needed but you don't have time, let me know and I'd be happy to dig in deeper.

BTW, I took a quick look at the unit tests and it appears we may be should add testing of multiple arguments for add() and remove() as well.

Drupal 8 includes classList.js. To track dependencies more clearly, it'd be great if you could tag a release.

Thank you!