Added responsive example in test

Former-commit-id: 86d777fc8bb7158292940d1604565c6b5318a406

src/Test/Test/Controllers/HomeController.cs

@@ -44,5 +44,10 @@ namespace Test.Controllers
 
             return View(images);
         }
+
+        public ActionResult Responsive()
+        {
+            return this.View();
+        }
     }
 }

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));

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\Tulips.jpg" />
-    <Content Include="Images\stan.jpg" />
+    <Content Include="Images\war_horse_quad.jpg" />
-    <Content Include="Images\tbc.gif" />
+    <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. 

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>

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>