Saturday, September 22, 2012

[JS] Optimize PIE js

PIE is powerfull css3 features for low-grade IE (Internet Explorer).

I have a problem in using .htc file, so I use js version in my project.
But I need it dynamicly, let's see how I did it.

source code
if(typeof(window.PIE.dynamic)=='undefined'window.PIE.dynamic {
    inlineCSS'*',
    stylesheetstrue,
    trackChangesFor'*',
    bindChangeEventfunction(query{
        $(query).unbind('propertychange').bind('propertychange'function(e{
            if(/borderradius|boxshadow|borderimage|piebackground/gi.test(e.originalEvent.propertyName)){
                PIE.dynamic.refresh(this);
            }
        });
    },
    resolveCSSKeyfunction(style{
        return style['border-radius']
            || style['box-shadow']
            || style['-pie-background']
            || style['border-image'];
    },
    parseStylesheetsfunction(styleSheets{
        //Loop through all stylesheets and apply initial rules
        for (var i=0styleSheets.lengthi++{
            for (var j=0styleSheets[i].rules.lengthj++{
                if(PIE.dynamic.resolveCSSKey(styleSheets[i].rules[j].style)){
                    PIE.dynamic.refresh(styleSheets[i].rules[j].selectorText);
                }
            }
            if(styleSheets[i].imports.length>0){
                PIE.dynamic.parseStylesheets(styleSheets[i].imports);
            }
        };
    },
    refreshfunction(selector{
        $(selector).each(function(){
            PIE.attach(this);
        });
    }
}

$(function(){
    if(!$.browser.msie)return;
    else if(parseFloat($.browser.version)>8)return;
    if(PIE.dynamic.stylesheets)PIE.dynamic.parseStylesheets(document.styleSheets);
    if(PIE.dynamic.inlineCSS){
        $(PIE.dynamic.inlineCSS === true '*' PIE.dynamic.inlineCSS).each(function({
            if(PIE.dynamic.resolveCSSKey(this.style))PIE.dynamic.refresh(this);
        });
    }
    if(PIE.dynamic.trackChangesFor)PIE.dynamic.bindChangeEvent(PIE.dynamic.trackChangesFor);
});


example
try to run this link on ie<9 http://jsfiddle.net/FUCQV/

No comments:

Post a Comment