PNG behaviour for IE6. Activates on IMG tags only (i.e. not backgrounds)

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@7602 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

source/java/org/alfresco/web/ui/repo/tag/PageTag.java

@@ -48,6 +48,8 @@ public class PageTag extends TagSupport
    private final static String SCRIPTS_END   = "\"></script>\n";
    private final static String STYLES_START  = "<link rel=\"stylesheet\" href=\"";
    private final static String STYLES_MAIN   = "\" type=\"text/css\">\n";
+   private final static String IE6COND_START = "<!--[if IE 6]>\n";
+   private final static String IE6COND_END   = "<![endif]-->\n";
 
    private final static String[] SCRIPTS = 
    {
@@ -77,6 +79,11 @@ public class PageTag extends TagSupport
       "/css/picker.css"
    };
 
+   private final static String[] IE6COND_CSS = 
+   {
+      "/css/ie6.css"
+   };
+
 /**
  * Please ensure you understand the terms of the license before changing the contents of this file.
  */
@@ -235,6 +242,17 @@ public class PageTag extends TagSupport
             out.write(STYLES_MAIN);
          }
          
+         // IE6COND_CSS style includes
+         out.write(IE6COND_START);
+         for (final String ie6cond_css : PageTag.IE6COND_CSS)
+         {
+            out.write(STYLES_START);
+            out.write(reqPath);
+            out.write(ie6cond_css);
+            out.write(STYLES_MAIN);
+         }
+         out.write(IE6COND_END);
+         
          // JavaScript includes
          for (final String s : PageTag.SCRIPTS)
          {

source/web/css/ie6.css

@@ -0,0 +1,8 @@
+/* IE6 Fixes */
+
+/*
+ *** .png fix
+ */
+img {
+   behavior: url(/alfresco/scripts/iepngfix.htc)
+}

source/web/scripts/iepngfix.htc

@@ -0,0 +1,103 @@
+<public:component" lightweight="true">
+<public:attach event="onpropertychange" onevent="iePNGFix(0)" />
+
+<script type="text/javascript">
+
+// IE5.5+ PNG Alpha Fix v1.0RC5
+// (c) 2004-2007 Angus Turnbull http://www.twinhelix.com
+
+// This is licensed under the GNU LGPL, version 2.1 or later.
+// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
+
+
+// This must be a path to a blank image, relative to the HTML document(s).
+// In production use I suggest '/images/blank.gif' or similar. That's all!
+if (typeof blankImg == 'undefined') var blankImg = getContextPath() + '/images/parts/blank.gif';
+
+function getContextPath()
+{
+   var path = window.location.pathname;
+   var idx = path.indexOf("/", 1);
+   var contextPath = "";
+   if (idx != -1)
+   {
+      contextPath = path.substring(0, idx);
+   }
+   else
+   {
+      contextPath = "";
+   }
+
+   return contextPath;
+}
+
+
+function filt(s)
+{
+ if (s && currentStyle.width == 'auto' && currentStyle.height == 'auto')
+  style.width = offsetWidth + 'px';
+
+ var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
+ var sM = (currentStyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale';
+ s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');
+ if (filters[f])
+ {
+  filters[f].enabled = s ? true : false;
+  if (s) with (filters[f]) { src = s }
+ }
+ else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="' + sM + '")';
+}
+
+function iePNGFix(init)
+{
+ if (!/MSIE (5\.5|6)/.test(navigator.userAgent)) return;
+ var evt = init ? { propertyName: 'src,background' } : event;
+ var isSrc = /src/.test(evt.propertyName);
+ var isBg = /background/.test(evt.propertyName);
+ var isClass = !init &&
+  ((this.className != this._png_class) && (this.className || this._png_class));
+ if (!(isSrc || isBg || isClass)) return;
+ this._png_class = this.className;
+ var blank = blankImg.match(/([^\/]+)$/)[1];
+
+ // Required for Whatever:hover support - erase any set BG if className changes.
+ if (isClass && ((style.backgroundImage.indexOf('url(') == -1) ||
+     (style.backgroundImage.indexOf(blank) > -1)))
+ {
+  style.backgroundImage = '';
+  return;
+ }
+
+ var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
+
+ if (isSrc && this.src && /IMG|INPUT/.test(nodeName))
+ {
+  if ((/\.png([^\.]+|$)/i).test(src))
+  {
+   filt(src);
+   src = blankImg;
+  }
+  else if (src.indexOf(blank) == -1) filt();
+ }
+ else if (bgSrc.indexOf(blankImg) == -1)
+ {
+  var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+$/i);
+
+  if (bgPNG)
+  {
+   style.backgroundImage = 'url("' + blankImg + '")';
+   filt(bgPNG[1]);
+   // IE link fix -- maybe add IFRAMEs etc here.
+   var links = all.tags('a'), i = links.length;
+   if (i && (/relative|absolute/i).test(currentStyle.position))
+    alert('IEPNGFix: Links won\'t work within positioned elements');
+   while (i--) links[i].style.position = 'relative';
+  }
+  else filt();
+ }
+}
+
+iePNGFix(1);
+
+</script>
+</public:component>