[Fix provided] TypeError: Illegal constructor at triggerEvent() in Chrome 14 and IE9

[matafokka]

Hello. This error occurs at file jscolor.js at line 407:

if (typeof Event === 'function') {
	ev = new Event(eventName, { // Error is here
		bubbles: bubbles,
		cancelable: cancelable
	});
}

It happens because typeof Event === 'function' returns true in old browsers, but they don't actually support Event constructor.

Please, consider using following solution which works in both old and new browsers (even in IE):

triggerEvent: function (el, eventName, bubbles, cancelable) {
	var event = document.createEvent("Event");
	event.initEvent(eventName, bubbles, cancelable);
	el.dispatchEvent(event);
}

[EastDesire]

Thanks @matafokka. Before I look into this, can you please specify which browser and version yields the error?

document.createEvent is apparently an old-fashioned way of creating events, that's why I rather use new Event approach, which is recommended.

I might add document.createEvent as a fallback, if it turns out that the error occurs in a browser that still ought to be supported.

[matafokka]

Can you please specify which browser and version yields the error?

Chrome 14 and IE9. I haven't tested it with old Firefox versions yet.

I might add document.createEvent as a fallback

Yes, I think, this will be the best option since document.createEvent() is deprecated and might be removed later. I'll do the same in my project, thanks for making me check the docs and see the notice :)

And thank you for looking into my issue!

[EastDesire]

Thanks for additional info.

Neither Chrome 14 nor IE 9 is meant to be supported, they are almost 10 years old now. The oldest IE version supported is IE 10.

So I don't see any point adding fallback for document.createEvent. There would be other problems in these browsers anyway.

[matafokka]

Neither Chrome 14 nor IE 9 is meant to be supported

Well, that's unfortunate because I wanted to use your library as a polyfill.

Though, there is a point in adding a fallback, Chrome 14 works almost perfectly with it (except that it doesn't show the color in input itself):

I haven't figured out issues with IE though, but I'm going to investigate further. Problem may be related to my code because IE says that the error occurs in HTML file :D Well, IE can behave like that sometimes.

[EastDesire]

I think the inability to render color preview in text input was indeed one of the main reasons I removed the support for IE 9 too.

I don't plan to maintain partial support for older browsers and having the color preview in text input is essential )-:

What you can do is try jscolor-2.1.1 or older, these versions still have polyfills for older browsers like IE9. They don't support alpha channel though and have slightly different API, but they might make a satisfactory polyfill.

[matafokka]

Thank you, gonna install it right now. Please, consider documenting it because your library is ideal for polyfilling, and some might still want to support IE9-.

---

By the way, if someone wants to fork and add support for IE9, I figured out what's wrong, debug mode correctly shows errors. After applying the fallback it doesn't want to set CSS property at line 548. But, as you said, there're probably more things to do to run it in IE. So I totally support your decision to drop support for such an evil creation straight out of the darkest depths of hell made by satan himself.

[EastDesire]

Thanks @matafokka. Tried to pull documentation for 2.1.1, but found out that docs didn't even exist at that point.

PS: IE9 doesn't support base64 encoded images (*), and jscolor uses them to render a canvas-generated chessboard image that denotes transparency in color preview. That's why I decided to drop support for IE9 in jscolor-2.2 and above.

EDIT: * The above is not factually true, but I think there was some kind of deal-breaker in rendering color preview this way in IE9.

[matafokka]

Tried to pull documentation for 2.1.1, but found out that docs didn't even exist at that point.

No problem, API is relatively simple, so I think I'll figure it out.

IE9 doesn't support base64 encoded images, and jscolor uses them to render a canvas-generated chessboard image

Oh, in this case, you can draw chessboard using fillRect() which in theory should even improve performance.

If you're using canvas, there shouldn't be any pitfalls (or I just haven't found them yet). If there are, you can add support for alpha channel by creating a dedicated input for it.

Anyway, thank you for support, I'm just gonna use the older version. Fortunately, I don't need alpha channel, so lack of it won't affect my project.