SpriteMe.hBgImages = null; // a hash of BgImage objects
SpriteMe.suggestedSpriteCntr = 0;
SpriteMe.aSprites = [];
SpriteMe.bToggleAll = true;
SpriteMe.backgroundColor = "none";
SpriteMe.marginX = 10;
SpriteMe.marginY = 10;
SpriteMe.marginWiggle = 20; // how much we're willing to extend the margin (in addition to marginX and marginY) if necessary to accomodate more images
SpriteMe.resizeWiggle = 20; // how much we're willing to let repeating bg images be resized so they can be sprited with other bg images of different sizes
SpriteMe.GOOD = 0;
SpriteMe.REPEATX = 1;
SpriteMe.REPEATY = 2;
SpriteMe.REPEATBOTH = 3;
SpriteMe.NARROWLEFT = 4;
SpriteMe.NARROWRIGHT = 5;
SpriteMe.SHORTTOP = 6;
SpriteMe.SHORTBOTTOM = 7;
SpriteMe.NARROWSHORT = 8;
SpriteMe.NARROWREPEAT = 9;
SpriteMe.SHORTREPEAT = 10;
SpriteMe.ALREADYSPRITE = 11;
SpriteMe.NOELEMSIZE = 12;
SpriteMe.JPG = 13;
SpriteMe.ERROR = -1;
// Crawl through all DOM elements looking for specific properties that use background images.
SpriteMe.getBgImages = function() {
SpriteMe.dprint(9, "getBgImages: enter");
var elems = SpriteMe.doc.getElementsByTagName('*');
var nElems = elems.length;
SpriteMe.hBgImages = {};
var pseudos = ["", ":hover", ":after", ":before"];
var nPseudos = pseudos.length;
for ( var i = 0; i < nElems; i++ ) {
var elem = elems[i];
for ( var pi = 0; pi < nPseudos; pi++ ) {
var pseudo = pseudos[pi];
var imageUrl = SpriteMe.getStyleAndUrl(elem, 'backgroundImage', true, pseudo);
if ( imageUrl && !SpriteMe.skipImage(imageUrl) ) {
if ( 0 == imageUrl.toLowerCase().indexOf("data:") ) {
SpriteMe.dprint(5, "skipping data: URI");
if ( "undefined" === typeof(SpriteMe.bDataUriWarning) ) {
alert("Background images using \"data:\" URIs are not supported by SpriteMe.");
SpriteMe.bDataUriWarning = true;
}
continue;
}
imageUrl = imageUrl.replace("\\", ""); // Firefox 3.5 added a backslash to a URL that contained a comma (",")
if ( ! SpriteMe.hBgImages[imageUrl] ) {
new SpriteMe.BgImage(imageUrl);
}
var bgImage = SpriteMe.hBgImages[imageUrl];
new SpriteMe.ImageElement(elem, bgImage, pseudo); // this adds the element to bgImage
}
}
}
SpriteMe.nBgImagesBefore = SpriteMe.bgImageCntr;
SpriteMe.nSpritesBefore = SpriteMe.spriteCntr;
};
SpriteMe.getData = function(nTry) {
SpriteMe.dprint(9, "getData: enter");
// Need to wait for all of the background images to be fetched.
nTry = ( nTry ? nTry+1 : 1 );
if ( ! SpriteMe.doneFetching() && nTry < 10 ) {
SpriteMe.dprint(5, "getData: calling setTimeout to wait for images to load, nTry = " + nTry);
for ( var e = 0; e < spriteObj.bgImages[0].imgElements.length; e++ ) {
var elemObj = spriteObj.bgImages[0].imgElements[e];
if ( elemObj.oldBgImageInline ) {
if ( "undefined" === typeof(hChanges[sInlineStyleAttributes]) ) {
hChanges[sInlineStyleAttributes] = "<div style='margin-bottom: 8px;'>These elements in the page have their background-image set using the <code>style</code> attribute. You need to find each of these elements and change their <code>style</code>. To help you out, the following information is shown for each element:<ul style='margin-top: 0'><li>tagName (DIV, A, etc.)<li>classname (if there is one)<li> ID (if there is one)<li> <strike>old background-image</strike> (striked out)<li>new background-image and background-position<li>the first few characters of the innerHTML (if there is any)</ul>Merge these changes into the <code>style</code> attribute for these elements in the page:</div><div style='border: 1px solid; color: #555; background: #F0F0F0; padding: 8px; margin-bottom: 16px;'>";
sRestrictedStylesheets = "You'll have to search " +
( 1 === iRestricted ? "this stylesheet" : "these stylesheets" ) + " to find the appropriate rule:<ul>" +
sRestrictedStylesheets + "</ul>";
}
// *** begin MATCH ELEMENTS TO RULES GROUPED BY STYLESHEET
// Iterate through every DOM element that has a bg image.
for ( var i = 0; i < SpriteMe.aSprites.length; i++ ) {
var spriteObj = SpriteMe.aSprites[i];
if ( spriteObj.spriteUrl ) {
for ( var e = 0; e < spriteObj.bgImages[0].imgElements.length; e++ ) {
var elemObj = spriteObj.bgImages[0].imgElements[e];
if ( elemObj.bExported ) {
continue;
}
var bgPos = SpriteMe.getStyleAndUrl(elemObj.elem, "backgroundPosition", false, elemObj.pseudo);
var bgImage = SpriteMe.getStyleAndUrl(elemObj.elem, "backgroundImage", false, elemObj.pseudo);
var aRules = SpriteMe.hBgImageRules[elemObj.oldBgImage];
if ( ! aRules ) {
if ( "undefined" === typeof(hChanges["restricted"]) ) {
hChanges["restricted"] =
"<div style='margin-bottom: 8px;'>The rules for these CSS changes could not be found. " +
( -1 != navigator.userAgent.indexOf("Firefox") ? "This is most likely because Firefox restricts DOM access to cross-domain stylesheets. You could try running <a href='http://spriteme.org/'>SpriteMe</a> using a different browser. " : "" ) +
sRestrictedStylesheets +
"To help you find the rules that need to be updated, the following clues are provided: the tag of the element, the id and class (when available), and the original background-image.</div><div style='border: 1px solid; color: #555; background: #F0F0F0; padding: 8px; margin-bottom: 16px;'>"; // need to close this DIV
"' target='_blank'>" + ruleObj.url + "</a>:</div><div style='border: 1px solid; color: #555; background: #F0F0F0; padding: 8px; margin-bottom: 16px;'>"; // need to close this DIV
}
hChanges[ruleObj.url] += "<em>This is one of multiple rules that use this background image:</em><br>" + ruleObj.getCssHtml(oldBgImage);
elemObj.bExported = true;
ruleObj.bExported = true;
}
}
}
else {
var ruleObj = aRules[0];
if ( ! ruleObj.bExported ) {
// Actually change the active rule. Cool!
// TODO - Do this **INSTEAD OF** changing each element's style so we can verify we found the right rules.
var oldBgImage = ruleObj.rule.style.backgroundImage;
var oldBgPos = ruleObj.rule.style.backgroundPosition;
ruleObj.rule.style.backgroundImage = bgImage;
ruleObj.rule.style.backgroundPosition = bgPos;
if ( "undefined" === typeof(hChanges[ruleObj.url]) ) {
hChanges[ruleObj.url] = "<div style='margin-bottom: 8px;'>Merge these changes into the CSS rules in <a href='" +
"' target='_blank'>" + ruleObj.url + "</a>:</div><div style='border: 1px solid; color: #555; background: #F0F0F0; padding: 8px; margin-bottom: 16px;'>"; // need to close this DIV
"<p>Here are the CSS changes you need to integrate back into your web site.</p><p style='margin-bottom: 4px;'><span style='color: #A00;'>Make sure to download these sprite images to your own server. These URLs are temporary and will eventually be removed!</span> Replace these URLs with the URLs where you host the images.</p><ul style='margin-top: 0;'>" +
alert("You must close Firebug (the Firefox add-on) if you want to use Firebug Lite. Alternatively, right-click on the highlighted DOM element to inspect it in Firebug.");
return;
}
if ( "undefined" === typeof(SpriteMe.bFirebugInspect) ) {
SpriteMe.bFirebugInspect = confirm("Do you want to inspect elements in Firebug Lite?");
}
if ( SpriteMe.bFirebugInspect ) {
if ( "undefined" === typeof(SpriteMe.bFirebugLoaded) ) {
SpriteMe.bFirebugLoaded = true;
SpriteMe.firebugRetryCount = 0;
var firebugscript = SpriteMe.doc.createElement('script');