From 84a336a88f899106ac6227d647c64ca21454363a Mon Sep 17 00:00:00 2001
From: JimBobSquarePants <james_south@hotmail.com>
Date: Fri, 27 Jul 2012 02:19:37 +0100
Subject: [PATCH] Added responsive example in test

Former-commit-id: 86d777fc8bb7158292940d1604565c6b5318a406
---
 src/Test/Test/Controllers/HomeController.cs   |   5 +
 .../Test/Scripts/img.srcsect.pollyfill.js     | 103 ++++++++++++++++++
 src/Test/Test/Test.csproj                     |  14 ++-
 src/Test/Test/Views/Home/Responsive.cshtml    |  18 +++
 src/Test/Test/Views/Shared/_Layout.cshtml     |   1 +
 5 files changed, 136 insertions(+), 5 deletions(-)
 create mode 100644 src/Test/Test/Scripts/img.srcsect.pollyfill.js
 create mode 100644 src/Test/Test/Views/Home/Responsive.cshtml

diff --git a/src/Test/Test/Controllers/HomeController.cs b/src/Test/Test/Controllers/HomeController.cs
index aa1999dd78..c08a321319 100644
--- a/src/Test/Test/Controllers/HomeController.cs
+++ b/src/Test/Test/Controllers/HomeController.cs
@@ -44,5 +44,10 @@ namespace Test.Controllers
 
             return View(images);
         }
+
+        public ActionResult Responsive()
+        {
+            return this.View();
+        }
     }
 }
diff --git a/src/Test/Test/Scripts/img.srcsect.pollyfill.js b/src/Test/Test/Scripts/img.srcsect.pollyfill.js
new file mode 100644
index 0000000000..9eaa4e2ed4
--- /dev/null
+++ b/src/Test/Test/Scripts/img.srcsect.pollyfill.js
@@ -0,0 +1,103 @@
+(function ($) {
+    // http: //www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset
+
+    // Regexes for matching queries.
+    var rSrc = /[^\s]+/,
+        rWidth = /(\d+)w/,
+        rRatio = /(\d+)x/;
+
+    // Detect retina display
+    // http: //www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
+    var pixelRatio = (window.devicePixelRatio || 1);
+
+    // Cache the images as theres no point querying them twice.
+    var imageList = [];
+
+    // http://lodash.com/docs/#debounce
+    var debounce = function (func, wait, immediate) {
+        var args,
+            result,
+            thisArg,
+            timeoutId;
+
+        function delayed() {
+            timeoutId = null;
+            if (!immediate) {
+                func.apply(thisArg, args);
+            }
+        }
+
+        return function () {
+            var isImmediate = immediate && !timeoutId;
+            args = arguments;
+            thisArg = this;
+
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(delayed, wait);
+
+            if (isImmediate) {
+                result = func.apply(thisArg, args);
+            }
+            return result;
+        };
+    };
+
+    var getImgSrc = function (image) {
+        var imgSrc = null, imgWidth = 0, i,
+            imgSrcParts = image.attributes["srcset"].nodeValue.split(","),
+            len = imgSrcParts.length,
+            width = $(window).width();
+
+        for (i = 0; i < len; i += 1) {
+
+            // This is just a rough play on the algorithm.
+            var newImgSrc = imgSrcParts[i].match(rSrc)[0],
+                newImgWidth = rWidth.test(imgSrcParts[i]) ? parseInt(imgSrcParts[i].match(rWidth)[1], 10) : 1, // Use 1 for truthy
+                newPixelRatio = rRatio.test(imgSrcParts[i]) ? parseInt(imgSrcParts[i].match(rRatio)[1], 10) : 1;
+
+            if ((newImgWidth > imgWidth && width > newImgWidth && newPixelRatio === pixelRatio)) {
+
+                imgWidth = newImgWidth || imgWidth;
+                imgSrc = newImgSrc;
+            }
+        }
+
+        // Return null  
+        return imgSrc;
+    };
+
+    $(window).resize(function () {
+
+        $.each(imageList, function () {
+            var self = this,
+                checkImage = function () {
+                    var src = getImgSrc(self);
+
+                    if (src) {
+                        self.src = src;
+                    }
+
+                },
+                lazyCheck = debounce(checkImage, 100);
+
+            // Run debounced
+            lazyCheck();
+
+        });
+
+    });
+
+    $(window).load(function () {
+        $("img[srcset]").each(function () {
+
+            var src = getImgSrc(this);
+
+            if (src) {
+                this.src = src;
+            }
+
+            imageList.push(this);
+        });
+    });
+
+} (jQuery));
\ No newline at end of file
diff --git a/src/Test/Test/Test.csproj b/src/Test/Test/Test.csproj
index c0b62bba59..45cf111ad5 100644
--- a/src/Test/Test/Test.csproj
+++ b/src/Test/Test/Test.csproj
@@ -105,11 +105,13 @@
     <Content Include="Content\themes\base\jquery.ui.tabs.css" />
     <Content Include="Content\themes\base\jquery.ui.theme.css" />
     <Content Include="Global.asax" />
-    <Content Include="Images\leaf.jpg" />
+    <Content Include="Images\1182076_e8c402e938_z.jpg" />
+    <Content Include="Images\Desert.jpg" />
+    <Content Include="Images\MSwanson - Wide Large - Rock 02.jpg" />
     <Content Include="Images\Penguins.jpg" />
-    <Content Include="Images\shotgun.png" />
-    <Content Include="Images\stan.jpg" />
-    <Content Include="Images\tbc.gif" />
+    <Content Include="Images\Tulips.jpg" />
+    <Content Include="Images\war_horse_quad.jpg" />
+    <Content Include="Scripts\img.srcsect.pollyfill.js" />
     <Content Include="Web.config">
       <SubType>Designer</SubType>
     </Content>
@@ -130,7 +132,6 @@
   <ItemGroup>
     <Folder Include="App_Data\" />
     <Folder Include="Models\" />
-    <Folder Include="Scripts\" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="packages.config" />
@@ -145,6 +146,9 @@
       <Name>ImageProcessor</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Home\Responsive.cshtml" />
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
diff --git a/src/Test/Test/Views/Home/Responsive.cshtml b/src/Test/Test/Views/Home/Responsive.cshtml
new file mode 100644
index 0000000000..95b79c6d4b
--- /dev/null
+++ b/src/Test/Test/Views/Home/Responsive.cshtml
@@ -0,0 +1,18 @@
+@{
+    ViewBag.Title = "Responsive";
+}
+<style type="text/css">
+    img
+    {
+        max-width: 100%;
+    }
+</style>
+<h2>
+    Responsive</h2>
+<img src="/Images/desert.jpg?width=480" srcset="/Images/desert.jpg?width=768 480w, /Images/penguins.jpg?width=979 640w 2x,  /Images/jellyfish.jpg?width=480 2x"
+    alt="desert" />
+@*<img src="/Images/desert.jpg?width=480" srcset="/Images/desert.jpg?width=768 480w, /Images/jellyfish.jpg?width=480 2x, /Images/penguins.jpg?width=979 640w 2x"
+    alt="desert" />*@ @*<img src="/Images/desert.jpg?width=480" srcset="/Images/desert.jpg?width=768 480w, /Images/desert.jpg?width=979 768w"
+    alt="desert" />*@
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="/Scripts/img.srcsect.pollyfill.js" type="text/javascript"></script>
diff --git a/src/Test/Test/Views/Shared/_Layout.cshtml b/src/Test/Test/Views/Shared/_Layout.cshtml
index e7210b9cbb..abe37402be 100644
--- a/src/Test/Test/Views/Shared/_Layout.cshtml
+++ b/src/Test/Test/Views/Shared/_Layout.cshtml
@@ -18,6 +18,7 @@
                 <ul id="menu">
                     <li>@Html.ActionLink("Home", "Index", "Home")</li>
                     <li>@Html.ActionLink("About", "About", "Home")</li>
+                    <li>@Html.ActionLink("Responsive", "Responsive", "Home")</li>
                 </ul>
             </nav>
         </header>