shawnbot / aight Goto Github PK
View Code? Open in Web Editor NEWJavaScript shims and shams for making IE8-9 behave reasonably
License: Other
JavaScript shims and shams for making IE8-9 behave reasonably
License: Other
Grunt, for example, has tasks for concatenating and minifying JavaScript. The UglifyJS dependency isn't stated until you run make
, which will probably confuse contributors. Alternatively, we could just add aight to npm and add uglify-js
to devDependencies
in the package.json.
This code runs ok for d3.v2 but if I try to load d3.v3 I get d3 is undefined in aight.d3. Same error if I d3.html in examples.
BUT - I am running a http://crossbrowsertesting.com emulator. Is it possible this is the problem?
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/shared_static/js/aight.js"></script>
IE8j
<![endif]-->
<script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/shared_static/js/aight.d3.min.js"></script>
Firefox 17.0.1 throws an exception in the textContent
shim because its implementation of Object.getOwnPropertyDescriptor
returns objects without a get()
method. So not only does it fail the initial feature detection (because Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get
is undefined), but it also fails both to get a property descriptor for Element.prototype.innerText
(which works in IE) and throws and exception when trying to define Element.prototype.textContent
.
I've monkey patched production code to wrap this shim in a try/catch block, and we should probably do the same here.
npm install aight
now warns when installing es5-shim:
deprecated [email protected]: Please update to the latest version; it overrides noncompliant native methods even in modern implementations
Aight cli outputs wrong code when transforming inline if statements.
Ex :
if (request.setRequestHeader) for (var name in headers) request.setRequestHeader(name, headers[name]);
is converted to
if (request.setRequestHeader)
var __hasOwnProperty = Object.prototype.hasOwnProperty.bind(headers);
for (var name in headers) if (__hasOwnProperty(name)) { request.setRequestHeader(name, headers[name]); }
There should be braces around the generated code.
But Array.prototype.sort()
does... Curious.
modernizr uses following test to detect svg support:
var ns = {'svg': 'http://www.w3.org/2000/svg'};
// Thanks to Erik Dahlstrom
tests['svg'] = function() {
return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect;
};
While the createElementNS
spec does define some exceptions there isn't an exception defined for "unsupported namespaces":
http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS
I do unterstand why you're raising an exception but I also see why modernizr does not expect an exception. What speaks against just ignoring ns
and creating an element?
There is an issue when using IE8 -
Javascript error "Exceptions thrown and not caught"
aight.js
Line 1311
"sorry, this browser does not support namespaces"
Anyone has any ideas?
Setting CSS background-image
with D3 doesn't work in IE8. We've resorted to using jQuery instead:
d3.selectAll(".foo")
.each(function(d, i) { $(this).css("background-image", d.photo_url); });
Trying to draw word cloud using d3.layout.cloud.js in IE8 and getting SCRIPT438: Object doesn't support property or method 'getContext' and SCRIPT438: Object doesn't support property or method 'cloud' errors.
List of files included with meta tags:
charset="utf-8"
http-equiv="X-UA-Compatible" content="IE=Edge"
src="../aight.js"
src="http://d3js.org/d3.v3.min.js"
src="../aight.d3.js"
src="../d3.layout.cloud.js"
Please let me know if you need more information or working example.
Thanks..
So that you can call preventDefault()
on Event
objects.
I initially included CSSPIE in this project because I wanted seamless support for simple stuff like border-radius
and box-shadow
, but it's kind of a boat anchor right now because it's not included in the built JavaScript files yet. This needs to be tested and either included or ditched if it doesn't work as advertised.
The d3-specific and purely visual test doc is no longer sufficient. We need a real unit tests that run in IE8 (maybe QUnit?).
Hi,
I'm currently trying put aight in place to shim some IE8 compatibility, but am getting the following exception on load:
SCRIPT5007: Unable to get property 'fontSize' of undefined or null reference: aight.js, line 1535 character 3.
I'm at a loss w/ how to debug this.
$.parseHTML behaves incorrectly with aight when the html contains "{{ ... }}" in text.
It fails at buildFragment(...) {
...
// alert(nodes[0].outerHTML); // DIV contains correct info
tmp.textContent = "";
// alert(nodes[0].outerHTML); // DIV becomes empty
...
}
using es5-shim.js does not have this issue.
Here is the code to test:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--[if lt IE 9]>
<script type="text/javascript" src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script type="text/javascript" src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/3rdParty/aight-1.2.1/aight.min.js"></script>
<!-- <script type="text/javascript" src="js/3rdParty/es5-shim/es5-shim.min.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>$.parseHTML</title>
</head>
<body>
<script type="text/javascript">
var result = $.parseHTML('<DIV><SPAN>{{ asdf }}</SPAN></DIV>');
alert(result[0].outerHTML);
</script>
</body>
</html>
While rather successfully using AIGHT to shim D3.js for a project that I'm working on, I am stuck on one problem.
I'm outputting data in a tabular format. In this instance, there are 6 columns of data across. While AIGHT manages to get my code to work in IE 8, it is, for some reason, grabbing the Array.prototype check code (roughly from like 532 and onward) and prints it out, treating it like useful data.
Has anyone come across this issue? It's an odd one. Thank you!
Most HTML5 boilerplates/generators omit the type="text/javascript"
attribute from script tags. But the snippets in the aight readme do use this attribute.
Is there an IE8-specific reason why type
should be specified, or is it personal preference?
Respond.js is a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), which is required for Bootstrap 2.3.0 + support in IE7 and above. Does this library already include it? If not, is there any plans to do so?
This test in computed-style.js:
'getComputedStyle' in Window.prototype
is broken in browsers that implement the current Web IDL specification for Window (e.g. Firefox 32), because per that specification the property lives on the window object directly, not on the prototype.
The right test is:
'getComputedStyle' in window
which should work in both browsers that put the property on the window directly and ones that put it on the prototype.
This issue causes aight to try to use the IE-only .currentStyle
in Firefox 32, which of course doesn't work very well.
The culprit is this line, which assumes that (filter || "").match
returns always an array, which it doesn't if the match fails.
Some included file might trick the surrounding logic with non standard implementations / behavior.
ie8 fixes for real events and custom events and bubbling, whatever you are using here is a partially broken sham, not a polyfill.
All tests in place that are more standard and green in IE8 than Safari, as example.
dom4 brings CustomEevent
, classList
(for real, with all tests as meant by W3C) and others DOM4 things to all browsers including IE8 if used after the previous polyfill.
I wonder why this project decided to not go for standards polyfill and use some library not fully tested against W3C standards โฆ maybe three's room for improvements?
Best Regards
Hi,
CSSStyleDeclaration.prototype.setProperty
is not working on properties with hyphen (margin-left, padding-left ect ...)
It is because the the property name passed to setAttribute
must be camel cased.
I noticed the bug on IE8 (real IE8, not a more recent one in IE8 mode)
Test case:
<!DOCTYPE html>
<html>
<body>
<span id="item"> abc </span>
<script>
var item = document.getElementById("item")
item.style.setAttribute('margin-left', '40px') //Not working
item.style.setAttribute('marginLeft', '40px') // Working \o/
</script>
</body>
</html>
The current tag (1.2.2) doesn't match the version in the file (1.2.1) -- can this be bumped on the next release?
Also, the bower.json file uses the "version" key, which is outdated and ignored by bower anyway, according to the spec, so it should probably just be removed.
See this line of code in D3, the part that breaks IE8 is this.ownerDocument.createElementNS
. We currently have a shim for createElementNS
for document
, but I suppose we need to put it on the underlying element.. DispHTMLDocument
, according to IE8
Found I had to load jquery-ui BEFORE aight or I got the this error: currentStyle is null or not an object
jQuery on it's own can go before or after.
This is OK
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/shared_static/js/aight.js"></script>
<![endif]-->
This is NOT:
<!--[if lt IE 9]>
<script type="text/javascript" src="/shared_static/js/aight.js"></script>
<![endif]-->
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Is this an error?
What do you think of including also a html5shiv, to allow us using html5 element (like <header>
, <nav>
...) with some styles (because IE<9 doesn't allow CSS on unknown html elements.
Regarding css-properties.js, would you take a look at https://github.com/brettz9/jml/blob/master/shims/CSSStyleDeclaration.js and let me know if that content interests you in some manner? I added some more methods to CSSStyleDeclaration such as getPropertyPriority() and adding more type checking and conversions.
Note there are a few dependencies:
DOMException.create()
since the real DOMException does not allow itself to be instantiation through "new DOMException". Although I'm normally not a fan of adding non-standard properties (even if on a namespace), I think this one is unobtrusive enough and more convenient than packing all the code into each file that uses it.Hey,
when I run bower install
i get the following warning:
bower warn Package aight is still using the deprecated "component.json" file
mismatch The version specified in the component.json of package aight mismatches the tag (1.1.1 vs 1.1.0)
mismatch You should report this problem to the package author
I can only assume that it is complaining about the following mismatch:
"version": "1.1.1",
...
"_id": "[email protected]",
Secondly, if you update the file, I think bower.json
should be the correct new name, instead of component.json
, which is deprecated.
This one looks good.
Any particular reason you did not include any of the ES5-sham?
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.