RetinaImage updates.

web/scripts/retina.js

@@ -2,15 +2,13 @@
 {
     var expires = new Date();
     expires.setDate(expires.getDate() + 21);
-    document.cookie = "pixelRatio=" + scale + "; expires=" + expires;
+    document.cookie = "pixelRatio=" + scale + ";path=/;expires=" + expires;
 }
 setPixelRatioCookie(getPixelRatio());
 
 function getPixelRatio()
 {
-    if (window.rjsPrinting === true)
-        return 4.0;
-    else if (window.devicePixelRatio != undefined)
+    if (window.devicePixelRatio != undefined)
         return window.devicePixelRatio;
     else if (window.screen.deviceXDPI != undefined)
         return window.screen.deviceXDPI / 96.0;
@@ -45,6 +43,25 @@ function checkRetina(element, scale)
 {
     try
     {
+        var data_design_width = element.getAttribute("data-design-width");
+        var data_design_height = element.getAttribute("data-design-height");
+
+        if (data_design_width !== null &&
+            data_design_height !== null)
+        {
+            var scaleX = $(element).width() / parseFloat(data_design_width);
+            var scaleY = $(element).height() / parseFloat(data_design_height);
+            scale *= Math.max(scaleX, scaleY);
+        }
+        else if (data_design_width !== null)
+        {
+            scale *= $(element).width() / parseFloat(data_design_width);
+        }
+        else if (data_design_height !== null)
+        {
+            scale *= $(element).height() / parseFloat(data_design_height);
+        }
+
         var sizes = new Array();
         var x = 0;
         for (x in element.attributes)
@@ -67,22 +84,20 @@ function checkRetina(element, scale)
             best = f;
         }
 
+        if ($(element).hasClass("keephr") && element.retinaActiveScale && element.retinaActiveScale >= best) return;
+
         element.src = element.getAttribute("data-hires-" + best.toString());
+        element.retinaActiveScale = best;
     }
     catch (err)
     {
     }
 }
 
-var retinaLastCheckedScale;
-
 function checkAllRetina()
 {
     var scale = getPixelRatio();
-    if (retinaLastCheckedScale == scale) return;
-    retinaLastCheckedScale = scale;
-
-    $("img.retina").each(function ()
+    $(".retina").each(function ()
     {
         checkRetina(this, scale);
     });
@@ -92,7 +107,7 @@ function checkAllRetina()
 function checkRetinaIn(element)
 {
     var scale = getPixelRatio();
-    $("img.retina", element).each(function ()
+    $(".retina", element).each(function ()
     {
         checkRetina(this, scale);
     });

web/src/RetinaImage.cs

@@ -68,7 +68,6 @@ namespace PkmnFoundations.Web
             base.LoadViewState(viewstate.RetinaImageBaseViewState);
             FormatString = viewstate.FormatString;
             AlternateSizes = viewstate.AlternateSizes;
-            this.ImageUrl = viewstate.ImageUrl;
         }
 
         protected override object SaveViewState()
@@ -77,16 +76,9 @@ namespace PkmnFoundations.Web
             viewstate.RetinaImageBaseViewState = base.SaveViewState();
             viewstate.FormatString = FormatString;
             viewstate.AlternateSizes = AlternateSizes;
-            viewstate.ImageUrl = this.ImageUrl;
             return viewstate;
         }
 
-        public new String ImageUrl
-        {
-            get;
-            set;
-        }
-
         /// <summary>
         /// Format string for String.Format.
         /// 0: filename, 1: extension, 2: scale, 3: path
@@ -127,7 +119,6 @@ namespace PkmnFoundations.Web
             public object RetinaImageBaseViewState;
             public String FormatString;
             public String AlternateSizes;
-            public String ImageUrl;
         }
     }
 }

web/src/RetinaImageBase.cs

@@ -26,7 +26,7 @@ namespace PkmnFoundations.Web
             base.AddAttributesToRender(writer);
         }
 
-        public void WriteDataAttributes(HtmlTextWriter writer)
+        private void WriteDataAttributes(HtmlTextWriter writer)
         {
             foreach (ImageRendition r in m_scales)
             {
@@ -34,7 +34,7 @@ namespace PkmnFoundations.Web
             }
         }
 
-        private static NumberFormatInfo nfi = System.Globalization.CultureInfo.InvariantCulture.NumberFormat;
+        private static NumberFormatInfo nfi = CultureInfo.InvariantCulture.NumberFormat;
 
         public static String AttributeName(float scale)
         {
@@ -62,13 +62,19 @@ namespace PkmnFoundations.Web
                 r = f;
             }
 
-            this.ImageUrl = r.ImageUrl;
+            base.ImageUrl = r.ImageUrl;
         }
 
         private List<ImageRendition> m_scales;
 
         protected abstract List<ImageRendition> GetScales();
 
+        public new string ImageUrl
+        {
+            get;
+            set;
+        }
+
         private String m_css_class;
         /// <summary>
         /// Custom CSS class(es). A "retina" class will be appended to the start to drive jQuery selectors.
@@ -82,10 +88,55 @@ namespace PkmnFoundations.Web
             set
             {
                 m_css_class = value;
-                base.CssClass = value.Length > 0 ? "retina " + value : "retina";
+                UpdateCssClass();
             }
         }
 
+        private bool m_keep_high_res;
+        /// <summary>
+        /// If this is true, a high resolution image will be kept in place even
+        /// after the image has shrunken down to the next stop. This can
+        /// prevent unnecessary image downloads.
+        /// </summary>
+        public bool KeepHighRes
+        {
+            get
+            {
+                return m_keep_high_res;
+            }
+            set
+            {
+                m_keep_high_res = value;
+                UpdateCssClass();
+            }
+        }
+
+        private void UpdateCssClass()
+        {
+            String prefix = m_keep_high_res ? "retina keephr" : "retina";
+            base.CssClass = m_css_class.Length > 0 ? (prefix + " " + m_css_class) : prefix;
+        }
+
+        protected override void LoadViewState(object savedState)
+        {
+            RetinaImageBaseViewState viewstate = (RetinaImageBaseViewState)savedState;
+            base.LoadViewState(viewstate.ImageViewState);
+            this.ImageUrl = viewstate.ImageUrl;
+            m_css_class = viewstate.CssClass;
+            m_keep_high_res = viewstate.KeepHighRes;
+            UpdateCssClass();
+        }
+
+        protected override object SaveViewState()
+        {
+            RetinaImageBaseViewState viewstate = new RetinaImageBaseViewState();
+            viewstate.ImageViewState = base.SaveViewState();
+            viewstate.ImageUrl = this.ImageUrl;
+            viewstate.CssClass = this.CssClass;
+            viewstate.KeepHighRes = this.KeepHighRes;
+            return viewstate;
+        }
+
         protected struct ImageRendition : IComparable<ImageRendition>
         {
             public String ImageUrl;
@@ -102,5 +153,14 @@ namespace PkmnFoundations.Web
                 return Scale.CompareTo(other.Scale);
             }
         }
+
+        [Serializable()]
+        private struct RetinaImageBaseViewState
+        {
+            public object ImageViewState;
+            public String ImageUrl;
+            public String CssClass;
+            public bool KeepHighRes;
+        }
     }
 }