eligrey / classlist.js Goto Github PK
View Code? Open in Web Editor NEWCross-browser element.classList
License: The Unlicense
Cross-browser element.classList
License: The Unlicense
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!
element.classList.toggle( 'on', undefined );
This works in modern browsers Chrome, Firefox, Edge.
Can you tag the latest commit please? using semantic versioning maybe? v1.0.0 or something like that..
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.
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
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.
classList.min.js is 6 months older than classList.js
Just to let you know the 2nd CDN link gives a HTTP 404
Good work on the js script though works a treat
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.
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
Code breaks in Safari browsers because Window isn't defined.
Are there any plans to publish this to npm in the future?
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).
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.
... for npm, thanks!
(typeof Element !== "undefined" && !Element.prototype.hasOwnProperty("classList"))
It blows up in IE8, which is a supported browser for this script, afaict.
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?
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
seeing that error in my app: "testElement.classList.toggle is not a function"
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?
How about producing a versioned release to ease adding to CDNs (cdnjs.com, jsdelivr.com)?
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.
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.
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?
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
As you can see in the specification, DOMTokenList.prototype.contains
should return a boolean rather than a number.
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:
npm install only able to get 1.1.20150312 and could not get the latest version.
This repo now has few more maintainers (including myself).
Before making any big changes would like to:
Say Hi
hi
Make a todo list
prepublish
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.
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)
Drupal 8 includes classList.js
. To track dependencies more clearly, it'd be great if you could tag a release.
Thank you!
Can you add the browser compatibility list to the readme?
EX:
IE - 7+
@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:
@tbranyen if โ๏ธ happens, could you add some collaborators to:
Including:
I would very much like to shut-down our fork and work from a single source of truth.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.