From 27285e87609ee352d6da168cdf69311a360c1e11 Mon Sep 17 00:00:00 2001
From: Bradley Sepos <bradley@bradleysepos.com>
Date: Fri, 26 Jan 2018 23:17:33 -0500
Subject: [PATCH] templates: Improve lightbox script to handle images with
 srcset attribute.

---
 templates/mark1/assets/js/scripts.js | 34 +++++++++++++++++++++++++++-
 templates/mark1/template.yaml        |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/templates/mark1/assets/js/scripts.js b/templates/mark1/assets/js/scripts.js
index 166dbec3..66b63d2f 100644
--- a/templates/mark1/assets/js/scripts.js
+++ b/templates/mark1/assets/js/scripts.js
@@ -161,5 +161,37 @@ $(document).ready(function(){
         $('article.docs nav .breadcrumbs .language-separator').add('article.docs nav .breadcrumbs .language').css('display', 'inline');
     }
 
-    docs.find('figure > a:has(img)').featherlight({type: 'image', openSpeed: 150, closeSpeed: 150});
+    $.featherlight.defaults.onResize = function(){
+        $(this.$content[0]).css('max-width', this.$content[0].naturalWidth);
+        $(this.$content[0]).css('max-height', this.$content[0].naturalHeight);
+    };
+    $.featherlight.contentFilters.image2 = {
+        regex: /\.(png|jpg|jpeg|gif|tiff?|bmp|svg)(\?\S*)?$/i,
+        process: function(url){
+            var self = this,
+                deferred = $.Deferred(),
+                img = new Image(),
+                $img = $('<img src="'+url+'" alt="" class="'+self.namespace+'-image" />');
+            var srcset = $(this.$currentTarget[0]).attr('data-srcset');
+            if (srcset.length > 0) {
+                $img = $('<img src="'+url+'" srcset="'+srcset+'" alt="" class="'+self.namespace+'-image" />');
+            };
+            img.onload  = function() {
+                /* Store naturalWidth & height for IE8 */
+                $img.naturalWidth = img.width; $img.naturalHeight = img.height;
+                deferred.resolve( $img );
+            };
+            img.onerror = function() { deferred.reject($img); };
+            img.src = url;
+            return deferred.promise();
+        }
+    };
+    $.featherlight.defaults.contentFilters.unshift('image2');
+    docs.find('figure > a:has(img)').each(function(){
+        var srcset = $(this).children('img').first().attr('srcset');
+        if (srcset.length > 0){
+            $(this).attr('data-srcset', srcset);
+        }
+        $(this).featherlight({type: 'image2', openSpeed: 150, closeSpeed: 150});
+    });
 });
diff --git a/templates/mark1/template.yaml b/templates/mark1/template.yaml
index cd7de475..658e324e 100644
--- a/templates/mark1/template.yaml
+++ b/templates/mark1/template.yaml
@@ -33,5 +33,5 @@ Template:
       - assets/js/vendor/jquery/jquery-3.3.1.min.js
       - assets/js/vendor/js-cookie/js-cookie-2.1.1.min.js
       - assets/js/vendor/featherlight/featherlight-1.7.12.min.js
-      - assets/js/scripts.js?2016111901
+      - assets/js/scripts.js?2018012601
 ...