Typeface 0.14 and AddThis.com fix

When I was making this blog at one point I choosed to switch from ShareThis.com to AddThis.com (both are bookmarking and sharing services). Unfortunately, I realised that typeface 0.14 has a bug and it seemed like it's incompatible with services like AddThis.com.

Maybe you just want to download my fixed typeface 0.14.

The problem

Just to be precise, in Google Chrome it raised (typeface-0.14.js (line 791)):

Uncaught TypeError: Cannot read property 'length' of null
and in Firefox (again typeface-0.14.js (line 791)):
A parameter or an operation is not supported by the underlying object code: 15.

So the problem probably lies on the line 791:

document.styleSheets[0].insertRule(typefaceSelectors.join(',') + ' { visibility: hidden; }', styleSheet.cssRules.length);

Calling `styleSheet.cssRules.length` (variable `styleSheet` was set on the **line 790** to `document.styleSheets[0]`) rises a security exception `Security error code: 1000` as you can see in the image bellow.


Typeface has its own styles and it tries to add them to the first style definition in the document.styleSheets list (document.styleSheets[0]), but AddThis.com adds its own style http://s7.addthis.com/static/r07/widget50.css at the beginning of the document.styleSheets list. When Typeface tries to add its definitions into it using insertRule it rises error 1000 because s7.addthis.com is different domain than yours and therefore typeface doesn't work with any services that insert custom styles at the beginning of the document.styleSheets list.

I found on the official typeface forum that someone already tried to solve it, but I don't think it's a good solution (simply put everywhere 0 instead of styleSheet.cssRules.length).

Hot fix

I think better way of doing this is to check whether the style sheet where typeface tries to insert its styles is on my domain or not.

var re = new RegExp(document.domain, 'g'); // starting on line 790
for (var index=0; index < document.styleSheets.length; index++) {
    if (document.styleSheets[index].href.match(re)) {
var styleSheet = document.styleSheets[index];

// and then replace zero indexes on lines 797, 798, 812, 821, 830 with `index`

Basically, the only thing this code snippet does is that it skips all style sheets at the beginning that are not on the same domain where we're runnig this javascript.


Typeface 0.14 with fixed Security error code 1000.
blog comments powered by Disqus