forum/skins/default/media/iepngfix/iepngfix_tilebg.js

   1 // IE5.5+ PNG Alpha Fix v2.0 Alpha: Background Tiling Support\r
   2 // (c) 2008-2009 Angus Turnbull http://www.twinhelix.com\r
   3 \r
   4 // This is licensed under the GNU LGPL, version 2.1 or later.\r
   5 // For details, see: http://creativecommons.org/licenses/LGPL/2.1/\r
   6 \r
   7 var IEPNGFix = window.IEPNGFix || {};\r
   8 \r
   9 IEPNGFix.tileBG = function(elm, pngSrc, ready) {\r
  10         // Params: A reference to a DOM element, the PNG src file pathname, and a\r
  11         // hidden "ready-to-run" passed when called back after image preloading.\r
  12 \r
  13         var data = this.data[elm.uniqueID],\r
  14                 elmW = Math.max(elm.clientWidth, elm.scrollWidth),\r
  15                 elmH = Math.max(elm.clientHeight, elm.scrollHeight),\r
  16                 bgX = elm.currentStyle.backgroundPositionX,\r
  17                 bgY = elm.currentStyle.backgroundPositionY,\r
  18                 bgR = elm.currentStyle.backgroundRepeat;\r
  19 \r
  20         // Cache of DIVs created per element, and image preloader/data.\r
  21         if (!data.tiles) {\r
  22                 data.tiles = {\r
  23                         elm: elm,\r
  24                         src: '',\r
  25                         cache: [],\r
  26                         img: new Image(),\r
  27                         old: {}\r
  28                 };\r
  29         }\r
  30         var tiles = data.tiles,\r
  31                 pngW = tiles.img.width,\r
  32                 pngH = tiles.img.height;\r
  33 \r
  34         if (pngSrc) {\r
  35                 if (!ready && pngSrc != tiles.src) {\r
  36                         // New image? Preload it with a callback to detect dimensions.\r
  37                         tiles.img.onload = function() {\r
  38                                 this.onload = null;\r
  39                                 IEPNGFix.tileBG(elm, pngSrc, 1);\r
  40                         };\r
  41                         return tiles.img.src = pngSrc;\r
  42                 }\r
  43         } else {\r
  44                 // No image?\r
  45                 if (tiles.src) ready = 1;\r
  46                 pngW = pngH = 0;\r
  47         }\r
  48         tiles.src = pngSrc;\r
  49 \r
  50         if (!ready && elmW == tiles.old.w && elmH == tiles.old.h &&\r
  51                 bgX == tiles.old.x && bgY == tiles.old.y && bgR == tiles.old.r) {\r
  52                 return;\r
  53         }\r
  54 \r
  55         // Convert English and percentage positions to pixels.\r
  56         var pos = {\r
  57                         top: '0%',\r
  58                         left: '0%',\r
  59                         center: '50%',\r
  60                         bottom: '100%',\r
  61                         right: '100%'\r
  62                 },\r
  63                 x,\r
  64                 y,\r
  65                 pc;\r
  66         x = pos[bgX] || bgX;\r
  67         y = pos[bgY] || bgY;\r
  68         if (pc = x.match(/(\d+)%/)) {\r
  69                 x = Math.round((elmW - pngW) * (parseInt(pc[1]) / 100));\r
  70         }\r
  71         if (pc = y.match(/(\d+)%/)) {\r
  72                 y = Math.round((elmH - pngH) * (parseInt(pc[1]) / 100));\r
  73         }\r
  74         x = parseInt(x);\r
  75         y = parseInt(y);\r
  76 \r
  77         // Handle backgroundRepeat.\r
  78         var repeatX = { 'repeat': 1, 'repeat-x': 1 }[bgR],\r
  79                 repeatY = { 'repeat': 1, 'repeat-y': 1 }[bgR];\r
  80         if (repeatX) {\r
  81                 x %= pngW;\r
  82                 if (x > 0) x -= pngW;\r
  83         }\r
  84         if (repeatY) {\r
  85                 y %= pngH;\r
  86                 if (y > 0) y -= pngH;\r
  87         }\r
  88 \r
  89         // Go!\r
  90         this.hook.enabled = 0;\r
  91         if (!({ relative: 1, absolute: 1 }[elm.currentStyle.position])) {\r
  92                 elm.style.position = 'relative';\r
  93         }\r
  94         var count = 0,\r
  95                 xPos,\r
  96                 maxX = repeatX ? elmW : x + 0.1,\r
  97                 yPos,\r
  98                 maxY = repeatY ? elmH : y + 0.1,\r
  99                 d,\r
 100                 s,\r
 101                 isNew;\r
 102         if (pngW && pngH) {\r
 103                 for (xPos = x; xPos < maxX; xPos += pngW) {\r
 104                         for (yPos = y; yPos < maxY; yPos += pngH) {\r
 105                                 isNew = 0;\r
 106                                 if (!tiles.cache[count]) {\r
 107                                         tiles.cache[count] = document.createElement('div');\r
 108                                         isNew = 1;\r
 109                                 }\r
 110                                 var clipR = Math.max(0, xPos + pngW > elmW ? elmW - xPos : pngW),\r
 111                                         clipB = Math.max(0, yPos + pngH > elmH ? elmH - yPos : pngH);\r
 112                                 d = tiles.cache[count];\r
 113                                 s = d.style;\r
 114                                 s.behavior = 'none';\r
 115                                 s.left = (xPos - parseInt(elm.currentStyle.paddingLeft)) + 'px';\r
 116                                 s.top = yPos + 'px';\r
 117                                 s.width = clipR + 'px';\r
 118                                 s.height = clipB + 'px';\r
 119                                 s.clip = 'rect(' +\r
 120                                         (yPos < 0 ? 0 - yPos : 0) + 'px,' +\r
 121                                         clipR + 'px,' +\r
 122                                         clipB + 'px,' +\r
 123                                         (xPos < 0 ? 0 - xPos : 0) + 'px)';\r
 124                                 s.display = 'block';\r
 125                                 if (isNew) {\r
 126                                         s.position = 'absolute';\r
 127                                         s.zIndex = -999;\r
 128                                         if (elm.firstChild) {\r
 129                                                 elm.insertBefore(d, elm.firstChild);\r
 130                                         } else {\r
 131                                                 elm.appendChild(d);\r
 132                                         }\r
 133                                 }\r
 134                                 this.fix(d, pngSrc, 0);\r
 135                                 count++;\r
 136                         }\r
 137                 }\r
 138         }\r
 139         while (count < tiles.cache.length) {\r
 140                 this.fix(tiles.cache[count], '', 0);\r
 141                 tiles.cache[count++].style.display = 'none';\r
 142         }\r
 143 \r
 144         this.hook.enabled = 1;\r
 145 \r
 146         // Cache so updates are infrequent.\r
 147         tiles.old = {\r
 148                 w: elmW,\r
 149                 h: elmH,\r
 150                 x: bgX,\r
 151                 y: bgY,\r
 152                 r: bgR\r
 153         };\r
 154 };\r
 155 \r
 156 \r
 157 IEPNGFix.update = function() {\r
 158         // Update all PNG backgrounds.\r
 159         for (var i in IEPNGFix.data) {\r
 160                 var t = IEPNGFix.data[i].tiles;\r
 161                 if (t && t.elm && t.src) {\r
 162                         IEPNGFix.tileBG(t.elm, t.src);\r
 163                 }\r
 164         }\r
 165 };\r
 166 IEPNGFix.update.timer = 0;\r
 167 \r
 168 if (window.attachEvent && !window.opera) {\r
 169         window.attachEvent('onresize', function() {\r
 170                 clearTimeout(IEPNGFix.update.timer);\r
 171                 IEPNGFix.update.timer = setTimeout(IEPNGFix.update, 100);\r
 172         });\r
 173 }\r