JAVASCRIPT   47

pngfix js

Guest on 13th July 2022 08:10:32 AM

  1. /**
  2.  * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
  3.  * Author: Drew Diller
  4.  * Email: drew.diller@gmail.com
  5.  * URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
  6.  * Version: 0.0.8a
  7.  * Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
  8.  *
  9.  * Example usage:
  10.  * DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
  11.  * DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
  12.  **/
  13. var DD_belatedPNG = {
  14.     ns: "DD_belatedPNG",
  15.     imgSize: {},
  16.     delay: 10,
  17.     nodesFixed: 0,
  18.     createVmlNameSpace: function() {
  19.         if (document.namespaces && !document.namespaces[this.ns]) {
  20.             document.namespaces.add(this.ns, "urn:schemas-microsoft-com:vml")
  21.         }
  22.     },
  23.     createVmlStyleSheet: function() {
  24.         var b, a;
  25.         b = document.createElement("style");
  26.         b.setAttribute("media", "screen");
  27.         document.documentElement.firstChild.insertBefore(b, document.documentElement.firstChild.firstChild);
  28.         if (b.styleSheet) {
  29.             b = b.styleSheet;
  30.             b.addRule(this.ns + "\\:*", "{behavior:url(#default#VML)}");
  31.             b.addRule(this.ns + "\\:shape", "position:absolute;");
  32.             b.addRule("img." + this.ns + "_sizeFinder", "behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");
  33.             this.screenStyleSheet = b;
  34.             a = document.createElement("style");
  35.             a.setAttribute("media", "print");
  36.             document.documentElement.firstChild.insertBefore(a, document.documentElement.firstChild.firstChild);
  37.             a = a.styleSheet;
  38.             a.addRule(this.ns + "\\:*", "{display: none !important;}");
  39.             a.addRule("img." + this.ns + "_sizeFinder", "{display: none !important;}")
  40.         }
  41.     },
  42.     readPropertyChange: function() {
  43.         var b, c, a;
  44.         b = event.srcElement;
  45.         if (!b.vmlInitiated) {
  46.             return
  47.         }
  48.         if (event.propertyName.search("background") != -1 || event.propertyName.search("border") != -1) {
  49.             DD_belatedPNG.applyVML(b)
  50.         }
  51.         if (event.propertyName == "style.display") {
  52.             c = (b.currentStyle.display == "none") ? "none" : "block";
  53.             for (a in b.vml) {
  54.                 if (b.vml.hasOwnProperty(a)) {
  55.                     b.vml[a].shape.style.display = c
  56.                 }
  57.             }
  58.         }
  59.         if (event.propertyName.search("filter") != -1) {
  60.             DD_belatedPNG.vmlOpacity(b)
  61.         }
  62.     },
  63.     vmlOpacity: function(b) {
  64.         if (b.currentStyle.filter.search("lpha") != -1) {
  65.             var a = b.currentStyle.filter;
  66.             a = parseInt(a.substring(a.lastIndexOf("=") + 1, a.lastIndexOf(")")), 10) / 100;
  67.             b.vml.color.shape.style.filter = b.currentStyle.filter;
  68.             b.vml.image.fill.opacity = a
  69.         }
  70.     },
  71.     handlePseudoHover: function(a) {
  72.         setTimeout(function() {
  73.             DD_belatedPNG.applyVML(a)
  74.         }, 1)
  75.     },
  76.     fix: function(a) {
  77.         if (this.screenStyleSheet) {
  78.             var c, b;
  79.             c = a.split(",");
  80.             for (b = 0; b < c.length; b++) {
  81.                 this.screenStyleSheet.addRule(c[b], "behavior:expression(DD_belatedPNG.fixPng(this))")
  82.             }
  83.         }
  84.     },
  85.     applyVML: function(a) {
  86.         a.runtimeStyle.cssText = "";
  87.         this.vmlFill(a);
  88.         this.vmlOffsets(a);
  89.         this.vmlOpacity(a);
  90.         if (a.isImg) {
  91.             this.copyImageBorders(a)
  92.         }
  93.     },
  94.     attachHandlers: function(i) {
  95.         var d, c, g, e, b, f;
  96.         d = this;
  97.         c = {
  98.             resize: "vmlOffsets",
  99.             move: "vmlOffsets"
  100.         };
  101.         if (i.nodeName == "A") {
  102.             e = {
  103.                 mouseleave: "handlePseudoHover",
  104.                 mouseenter: "handlePseudoHover",
  105.                 focus: "handlePseudoHover",
  106.                 blur: "handlePseudoHover"
  107.             };
  108.             for (b in e) {
  109.                 if (e.hasOwnProperty(b)) {
  110.                     c[b] = e[b]
  111.                 }
  112.             }
  113.         }
  114.         for (f in c) {
  115.             if (c.hasOwnProperty(f)) {
  116.                 g = function() {
  117.                     d[c[f]](i)
  118.                 };
  119.                 i.attachEvent("on" + f, g)
  120.             }
  121.         }
  122.         i.attachEvent("onpropertychange", this.readPropertyChange)
  123.     },
  124.     giveLayout: function(a) {
  125.         a.style.zoom = 1;
  126.         if (a.currentStyle.position == "static") {
  127.             a.style.position = "relative"
  128.         }
  129.     },
  130.     copyImageBorders: function(b) {
  131.         var c, a;
  132.         c = {
  133.             borderStyle: true,
  134.             borderWidth: true,
  135.             borderColor: true
  136.         };
  137.         for (a in c) {
  138.             if (c.hasOwnProperty(a)) {
  139.                 b.vml.color.shape.style[a] = b.currentStyle[a]
  140.             }
  141.         }
  142.     },
  143.     vmlFill: function(e) {
  144.         if (!e.currentStyle) {
  145.             return
  146.         } else {
  147.             var d, f, g, b, a, c;
  148.             d = e.currentStyle
  149.         }
  150.         for (b in e.vml) {
  151.             if (e.vml.hasOwnProperty(b)) {
  152.                 e.vml[b].shape.style.zIndex = d.zIndex
  153.             }
  154.         }
  155.         e.runtimeStyle.backgroundColor = "";
  156.         e.runtimeStyle.backgroundImage = "";
  157.         f = true;
  158.         if (d.backgroundImage != "none" || e.isImg) {
  159.             if (!e.isImg) {
  160.                 e.vmlBg = d.backgroundImage;
  161.                 e.vmlBg = e.vmlBg.substr(5, e.vmlBg.lastIndexOf('")') - 5)
  162.             } else {
  163.                 e.vmlBg = e.src
  164.             }
  165.             g = this;
  166.             if (!g.imgSize[e.vmlBg]) {
  167.                 a = document.createElement("img");
  168.                 g.imgSize[e.vmlBg] = a;
  169.                 a.className = g.ns + "_sizeFinder";
  170.                 a.runtimeStyle.cssText = "behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";
  171.                 c = function() {
  172.                     this.width = this.offsetWidth;
  173.                     this.height = this.offsetHeight;
  174.                     g.vmlOffsets(e)
  175.                 };
  176.                 a.attachEvent("onload", c);
  177.                 a.src = e.vmlBg;
  178.                 a.removeAttribute("width");
  179.                 a.removeAttribute("height");
  180.                 document.body.insertBefore(a, document.body.firstChild)
  181.             }
  182.             e.vml.image.fill.src = e.vmlBg;
  183.             f = false
  184.         }
  185.         e.vml.image.fill.on = !f;
  186.         e.vml.image.fill.color = "none";
  187.         e.vml.color.shape.style.backgroundColor = d.backgroundColor;
  188.         e.runtimeStyle.backgroundImage = "none";
  189.         e.runtimeStyle.backgroundColor = "transparent"
  190.     },
  191.     vmlOffsets: function(d) {
  192.         var h, n, a, e, g, m, f, l, j, i, k;
  193.         h = d.currentStyle;
  194.         n = {
  195.             W: d.clientWidth + 1,
  196.             H: d.clientHeight + 1,
  197.             w: this.imgSize[d.vmlBg].width,
  198.             h: this.imgSize[d.vmlBg].height,
  199.             L: d.offsetLeft,
  200.             T: d.offsetTop,
  201.             bLW: d.clientLeft,
  202.             bTW: d.clientTop
  203.         };
  204.         a = (n.L + n.bLW == 1) ? 1 : 0;
  205.         e = function(b, p, q, c, s, u) {
  206.             b.coordsize = c + "," + s;
  207.             b.coordorigin = u + "," + u;
  208.             b.path = "m0,0l" + c + ",0l" + c + "," + s + "l0," + s + " xe";
  209.             b.style.width = c + "px";
  210.             b.style.height = s + "px";
  211.             b.style.left = p + "px";
  212.             b.style.top = q + "px"
  213.         };
  214.         e(d.vml.color.shape, (n.L + (d.isImg ? 0 : n.bLW)), (n.T + (d.isImg ? 0 : n.bTW)), (n.W - 1), (n.H - 1), 0);
  215.         e(d.vml.image.shape, (n.L + n.bLW), (n.T + n.bTW), (n.W), (n.H), 1);
  216.         g = {
  217.             X: 0,
  218.             Y: 0
  219.         };
  220.         if (d.isImg) {
  221.             g.X = parseInt(h.paddingLeft, 10) + 1;
  222.             g.Y = parseInt(h.paddingTop, 10) + 1
  223.         } else {
  224.             for (j in g) {
  225.                 if (g.hasOwnProperty(j)) {
  226.                     this.figurePercentage(g, n, j, h["backgroundPosition" + j])
  227.                 }
  228.             }
  229.         }
  230.         d.vml.image.fill.position = (g.X / n.W) + "," + (g.Y / n.H);
  231.         m = h.backgroundRepeat;
  232.         f = {
  233.             T: 1,
  234.             R: n.W + a,
  235.             B: n.H,
  236.             L: 1 + a
  237.         };
  238.         l = {
  239.             X: {
  240.                 b1: "L",
  241.                 b2: "R",
  242.                 d: "W"
  243.             },
  244.             Y: {
  245.                 b1: "T",
  246.                 b2: "B",
  247.                 d: "H"
  248.             }
  249.         };
  250.         if (m != "repeat" || d.isImg) {
  251.             i = {
  252.                 T: (g.Y),
  253.                 R: (g.X + n.w),
  254.                 B: (g.Y + n.h),
  255.                 L: (g.X)
  256.             };
  257.             if (m.search("repeat-") != -1) {
  258.                 k = m.split("repeat-")[1].toUpperCase();
  259.                 i[l[k].b1] = 1;
  260.                 i[l[k].b2] = n[l[k].d]
  261.             }
  262.             if (i.B > n.H) {
  263.                 i.B = n.H
  264.             }
  265.             d.vml.image.shape.style.clip = "rect(" + i.T + "px " + (i.R + a) + "px " + i.B + "px " + (i.L + a) + "px)"
  266.         } else {
  267.             d.vml.image.shape.style.clip = "rect(" + f.T + "px " + f.R + "px " + f.B + "px " + f.L + "px)"
  268.         }
  269.     },
  270.     figurePercentage: function(d, c, f, a) {
  271.         var b, e;
  272.         e = true;
  273.         b = (f == "X");
  274.         switch (a) {
  275.             case "left":
  276.             case "top":
  277.                 d[f] = 0;
  278.                 break;
  279.             case "center":
  280.                 d[f] = 0.5;
  281.                 break;
  282.             case "right":
  283.             case "bottom":
  284.                 d[f] = 1;
  285.                 break;
  286.             default:
  287.                 if (a.search("%") != -1) {
  288.                     d[f] = parseInt(a, 10) / 100
  289.                 } else {
  290.                     e = false
  291.                 }
  292.         }
  293.         d[f] = Math.ceil(e ? ((c[b ? "W" : "H"] * d[f]) - (c[b ? "w" : "h"] * d[f])) : parseInt(a, 10));
  294.         if (d[f] % 2 === 0) {
  295.             d[f]++
  296.         }
  297.         return d[f]
  298.     },
  299.     fixPng: function(c) {
  300.         c.style.behavior = "none";
  301.         var g, b, f, a, d;
  302.         if (c.nodeName == "BODY" || c.nodeName == "TD" || c.nodeName == "TR") {
  303.             return
  304.         }
  305.         c.isImg = false;
  306.         if (c.nodeName == "IMG") {
  307.             if (c.src.toLowerCase().search(/\.png$/) != -1) {
  308.                 c.isImg = true;
  309.                 c.style.visibility = "hidden"
  310.             } else {
  311.                 return
  312.             }
  313.         } else {
  314.             if (c.currentStyle.backgroundImage.toLowerCase().search(".png") == -1) {
  315.                 return
  316.             }
  317.         }
  318.         g = DD_belatedPNG;
  319.         c.vml = {
  320.             color: {},
  321.             image: {}
  322.         };
  323.         b = {
  324.             shape: {},
  325.             fill: {}
  326.         };
  327.         for (a in c.vml) {
  328.             if (c.vml.hasOwnProperty(a)) {
  329.                 for (d in b) {
  330.                     if (b.hasOwnProperty(d)) {
  331.                         f = g.ns + ":" + d;
  332.                         c.vml[a][d] = document.createElement(f)
  333.                     }
  334.                 }
  335.                 c.vml[a].shape.stroked = false;
  336.                 c.vml[a].shape.appendChild(c.vml[a].fill);
  337.                 c.parentNode.insertBefore(c.vml[a].shape, c)
  338.             }
  339.         }
  340.         c.vml.image.shape.fillcolor = "none";
  341.         c.vml.image.fill.type = "tile";
  342.         c.vml.color.fill.on = false;
  343.         g.attachHandlers(c);
  344.         g.giveLayout(c);
  345.         g.giveLayout(c.offsetParent);
  346.         c.vmlInitiated = true;
  347.         g.applyVML(c)
  348.     }
  349. };
  350. try {
  351.     document.execCommand("BackgroundImageCache", false, true)
  352. } catch (r) {}
  353. DD_belatedPNG.createVmlNameSpace();
  354. DD_belatedPNG.createVmlStyleSheet();

Raw Paste

Login or Register to edit or fork this paste. It's free.