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