diff --git a/web/scripts/retina.js b/web/scripts/retina.js index 1de349b7..af4c7d39 100644 --- a/web/scripts/retina.js +++ b/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); }); diff --git a/web/src/RetinaImage.cs b/web/src/RetinaImage.cs index 97918148..15ecb74c 100644 --- a/web/src/RetinaImage.cs +++ b/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; - } - /// /// 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; } } } diff --git a/web/src/RetinaImageBase.cs b/web/src/RetinaImageBase.cs index 27a6db82..2312e3b0 100644 --- a/web/src/RetinaImageBase.cs +++ b/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 m_scales; protected abstract List GetScales(); + public new string ImageUrl + { + get; + set; + } + private String m_css_class; /// /// 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; + /// + /// 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. + /// + 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 { 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; + } } }