Add clearing interchange functionality complete with preloading, test…

…s and documentation. Also fix some testing issues.

doc/includes/clearing/examples_clearing_interchange_rendered.html

@@ -0,0 +1,9 @@
+{{#markdown}}
+```html
+<ul class="clearing-thumbs" data-clearing>
+  <li><a href="path/to/your/img" data-clearing-interchange="[path/to/default/img, (default)], [path/to/bigger/img, (large)]"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img" data-clearing-interchange="[path/to/default/img, (default)], [path/to/bigger/img, (large)]"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img" data-clearing-interchange="[path/to/default/img, (default)], [path/to/bigger/img, (large)]"><img src="path/to/your/img-th"></a></li>
+</ul>
+```
+{{/markdown}}

doc/pages/components/clearing.html

@@ -26,6 +26,18 @@ <h4>HTML</h4>
 
 ***
 
+## Using Responsive Images
+
+To use responsive images add `data-clearing-interchange` to your links:
+
+<h4>HTML</h4>
+
+{{> examples_clearing_interchange_rendered}}
+
+The rules for the interchange list are the same as described in the [Interchange documentation]({{rel 'components/interchange.html'}}#using-interchange-with-images).
+
+***
+
 ## Start From a Featured Image
 
 Sometimes you don't want to show a gallery full of images on your site, but you want to open the gallery from a single image. By including all of your images in a `.clearing-feature` list and using `.clearing-featured-img` on the `<li>` of your choice, you'll be able to hide the rest of the images in the on-page gallery. If you want to show more than one, try using our `.hide` class to set the ones you don't want to `display: none;`.

js/foundation/foundation.clearing.js

@@ -11,7 +11,9 @@
         viewing : '<a href="#" class="clearing-close">&times;</a>' +
           '<div class="visible-img" style="display: none"><div class="clearing-touch-label"></div><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
           '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
-          '<a href="#" class="clearing-main-next"><span></span></a></div>'
+          '<a href="#" class="clearing-main-next"><span></span></a></div>' +
+          '<img class="clearing-preload-next" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
+          '<img class="clearing-preload-prev" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />'
       },
 
       // comma delimited list of selectors that, on click, will close clearing,
@@ -201,7 +203,8 @@
           visible_image = self.S('.visible-img', container),
           image = self.S('img', visible_image).not($image),
           label = self.S('.clearing-touch-label', container),
-          error = false;
+          error = false,
+          loaded = {};
 
       // Event to disable scrolling on touch devices when Clearing is activated
       $('body').on('touchmove', function (e) {
@@ -246,9 +249,17 @@
       if (!this.locked()) {
         visible_image.trigger('open.fndtn.clearing');
         // set the image to the selected thumbnail
-        image
-          .attr('src', this.load($image))
-          .css('visibility', 'hidden');
+        loaded = this.load($image);
+        if (loaded.interchange) {
+          image
+            .attr('data-interchange', loaded.interchange)
+            .foundation('interchange', 'reflow');
+        } else {
+          image
+            .attr('src', loaded.src)
+            .attr('data-interchange', '');
+        }
+        image.css('visibility', 'hidden');
 
         startLoad.call(this);
       }
@@ -382,37 +393,55 @@
     // image loading and preloading
 
     load : function ($image) {
-      var href;
+      var href,
+          interchange,
+          closest_a;
 
       if ($image[0].nodeName === 'A') {
         href = $image.attr('href');
+        interchange = $image.data('clearing-interchange');
       } else {
-        href = $image.closest('a').attr('href');
+        closest_a = $image.closest('a');
+        href = closest_a.attr('href');
+        interchange = closest_a.data('clearing-interchange');
       }
 
       this.preload($image);
 
-      if (href) {
-        return href;
+      return {
+        'src': href ? href : $image.attr('src'),
+        'interchange': href ? interchange : $image.data('clearing-interchange')
       }
-      return $image.attr('src');
     },
 
     preload : function ($image) {
       this
-        .img($image.closest('li').next())
-        .img($image.closest('li').prev());
+        .img($image.closest('li').next(), 'next')
+        .img($image.closest('li').prev(), 'prev');
     },
 
-    img : function (img) {
+    img : function (img, sibling_type) {
       if (img.length) {
-        var new_img = new Image(),
-            new_a = this.S('a', img);
+        var preload_img = $('.clearing-preload-' + sibling_type),
+            new_a = this.S('a', img),
+            src,
+            interchange,
+            image;
 
         if (new_a.length) {
-          new_img.src = new_a.attr('href');
+          src = new_a.attr('href');
+          interchange = new_a.data('clearing-interchange');
+        } else {
+          image = this.S('img', img);
+          src = image.attr('src');
+          interchange = image.data('clearing-interchange');
+        }
+
+        if (interchange) {
+          preload_img.attr('data-interchange', interchange);
         } else {
-          new_img.src = this.S('img', img).attr('src');
+          preload_img.attr('src', src);
+          preload_img.attr('data-interchange', '');
         }
       }
       return this;

spec/clearing/basic.html

@@ -1,5 +1,5 @@
 <ul class="clearing-thumbs" data-clearing>
-  <li id="image1"><a href="/base/spec/clearing/ccc.gif"><img src="/base/spec/clearing/ccc.gif"></a></li>
-  <li id="image2"><a href="/base/spec/clearing/777.gif"><img src="/base/spec/clearing/777.gif"></a></li>
-  <li id="image3"><a href="/base/spec/clearing/222.gif"><img src="/base/spec/clearing/222.gif"></a></li>
+  <li><a href="/base/spec/clearing/ccc.gif"><img id="image1" src="/base/spec/clearing/ccc.gif"></a></li>
+  <li><a href="/base/spec/clearing/777.gif"><img id="image2" src="/base/spec/clearing/777.gif"></a></li>
+  <li><a href="/base/spec/clearing/222.gif"><img id="image3" src="/base/spec/clearing/222.gif"></a></li>
 </ul>

spec/clearing/clearing.js

@@ -17,39 +17,159 @@ describe('clearing:', function() {
       document.body.innerHTML = __html__['spec/clearing/basic.html'];
     });
 
-    // TODO: Disabled - PhantomJS fails during Travis for this but works during watch...needs investigation.
-    xit('displays the first image on click', function() {
-      $(document).foundation();
+    it('displays the first image on click', function() {
+      runs(function() {
+        $(document).foundation();
+        $('#image1').click();
+        jasmine.Clock.tick(500);
+      });
 
-      $('#image1').click();
+      waitsFor(function() {
+        return $('#image1').parents('li').hasClass('visible');
+      }, '#image1 should have class: visible', 500);
 
-      expect($('#image1').hasClass('visible')).toBe(true);
-      expect($('#image2').hasClass('visible')).toBe(false);
-      expect($('#image3').hasClass('visible')).toBe(false);
+      runs(function() {
+        expect($('#image1').parents('li').hasClass('visible')).toBe(true);
+        expect($('#image2').parents('li').hasClass('visible')).toBe(false);
+        expect($('#image3').parents('li').hasClass('visible')).toBe(false);
+      });
     });
 
-  // TODO: Disabled - PhantomJS fails during Travis for this but works during watch...needs investigation.
-      xit('displays the second image on click', function() {
-      $(document).foundation();
+    it('displays the second image on click', function() {
+      runs(function () {
+        $(document).foundation();
+        $('#image2').click();
+        jasmine.Clock.tick(500);
+      });
 
-      $('#image2').click();
+      waitsFor(function() {
+        return $('#image2').parents('li').hasClass('visible');
+      }, '#image2 should have class: visible', 500);
 
-      expect($('#image1').hasClass('visible')).toBe(false);
-      expect($('#image2').hasClass('visible')).toBe(true);
-      expect($('#image3').hasClass('visible')).toBe(false);
+      runs(function() {
+        expect($('#image1').parents('li').hasClass('visible')).toBe(false);
+        expect($('#image2').parents('li').hasClass('visible')).toBe(true);
+        expect($('#image3').parents('li').hasClass('visible')).toBe(false);
+      });
     });
 
-    // TODO: Works in Firefox but nowhere else... disabling test until this is figured out.
-    xit('goes to the next slide on next', function() {
-      $(document).foundation();
+    it('goes to the next slide on next', function() {
+      runs(function () {
+        $(document).foundation();
+        $('#image1').click();
+        jasmine.Clock.tick(500);
+      });
 
-      $('#image1').click();
+      waitsFor(function() {
+        return $('#image1').parents('li').hasClass('visible');
+      }, '#image1 should have class: visible', 500);
 
-      $('.clearing-main-next').click();
+      runs(function () {
+        $('.clearing-main-next').click();
+        jasmine.Clock.tick(500);
+      });
 
-      expect($('#image1').hasClass('visible')).toBe(false);
-      expect($('#image2').hasClass('visible')).toBe(true);
-      expect($('#image3').hasClass('visible')).toBe(false);
+      waitsFor(function() {
+        return $('#image2').parents('li').hasClass('visible');
+      }, '#image2 should have class: visible', 500);
+
+      runs(function() {
+        expect($('#image1').parents('li').hasClass('visible')).toBe(false);
+        expect($('#image2').parents('li').hasClass('visible')).toBe(true);
+        expect($('#image3').parents('li').hasClass('visible')).toBe(false);
+      });
     });
   });
+
+  describe('when below the large breakpoint', when_not('large', function() {
+    describe('when below the medium breakpoint', when_not('medium', function() {
+      describe('with clearing interchange', function() {
+        beforeEach(function() {
+          document.body.innerHTML = __html__['spec/clearing/interchange.html'];
+        });
+
+        it('displays the first image on click', function() {
+          runs(function () {
+            $(document).foundation();
+            $('#image1').click();
+            jasmine.Clock.tick(500);
+          });
+
+          waitsFor(function() {
+            return $('.visible-img img').data('interchange') ? true : false;
+          }, '.visible-img img should have interchange data', 500);
+
+          runs(function() {
+            expect($('.visible-img img').data('interchange')).toBe('[/base/spec/clearing/ccc.gif, (default)], [/base/spec/clearing/777.gif, (medium)], [/base/spec/clearing/222.gif, (large)]');
+            expect($('.visible-img img').attr('src')).toBe('/base/spec/clearing/ccc.gif');
+            expect($('.clearing-preload-next').attr('src')).toBe('/base/spec/clearing/777.gif');
+          });
+        });
+
+        it('displays the second image on click', function() {
+          runs(function () {
+            $(document).foundation();
+            $('#image2').click();
+            jasmine.Clock.tick(500);
+          });
+
+          waitsFor(function() {
+            return $('.visible-img img').data('interchange') ? true : false;
+          }, '.visible-img img should have interchange data', 500);
+
+          runs(function() {
+            expect($('.visible-img img').data('interchange')).toBe('[/base/spec/clearing/777.gif, (default)], [/base/spec/clearing/222.gif, (medium)], [/base/spec/clearing/ccc.gif, (large)]');
+            expect($('.visible-img img').attr('src')).toBe('/base/spec/clearing/777.gif');
+            expect($('.clearing-preload-next').attr('src')).toBe('/base/spec/clearing/222.gif');
+            expect($('.clearing-preload-prev').attr('src')).toBe('/base/spec/clearing/ccc.gif');
+          });
+        });
+      });
+    }));
+  }));
+
+  describe('when above the large breakpoint', when('large', function() {
+    describe('with clearing interchange', function() {
+      beforeEach(function() {
+        document.body.innerHTML = __html__['spec/clearing/interchange.html'];
+      });
+
+      it('displays the first image on click', function() {
+        runs(function () {
+          $(document).foundation();
+          $('#image1').click();
+          jasmine.Clock.tick(500);
+        });
+
+        waitsFor(function() {
+          return $('.visible-img img').data('interchange') ? true : false;
+        }, '.visible-img img should have interchange data', 500);
+
+        runs(function() {
+          expect($('.visible-img img').data('interchange')).toBe('[/base/spec/clearing/ccc.gif, (default)], [/base/spec/clearing/777.gif, (medium)], [/base/spec/clearing/222.gif, (large)]');
+          expect($('.visible-img img').attr('src')).toBe('/base/spec/clearing/222.gif');
+          expect($('.clearing-preload-next').attr('src')).toBe('/base/spec/clearing/ccc.gif');
+        });
+      });
+
+      it('displays the second image on click', function() {
+        runs(function () {
+          $(document).foundation();
+          $('#image2').click();
+          jasmine.Clock.tick(500);
+        });
+
+        waitsFor(function() {
+          return $('.visible-img img').data('interchange') ? true : false;
+        }, '.visible-img img should have interchange data', 500);
+
+        runs(function() {
+          expect($('.visible-img img').data('interchange')).toBe('[/base/spec/clearing/777.gif, (default)], [/base/spec/clearing/222.gif, (medium)], [/base/spec/clearing/ccc.gif, (large)]');
+          expect($('.visible-img img').attr('src')).toBe('/base/spec/clearing/ccc.gif');
+          expect($('.clearing-preload-next').attr('src')).toBe('/base/spec/clearing/777.gif');
+          expect($('.clearing-preload-prev').attr('src')).toBe('/base/spec/clearing/222.gif');
+        });
+      });
+    });
+  }));
 });

spec/clearing/interchange.html

@@ -0,0 +1,5 @@
+<ul class="clearing-thumbs" data-clearing>
+  <li><a href="/base/spec/clearing/ccc.gif" data-clearing-interchange="[/base/spec/clearing/ccc.gif, (default)], [/base/spec/clearing/777.gif, (medium)], [/base/spec/clearing/222.gif, (large)]"><img id="image1" src="/base/spec/clearing/ccc.gif"></a></li>
+  <li><a href="/base/spec/clearing/777.gif" data-clearing-interchange="[/base/spec/clearing/777.gif, (default)], [/base/spec/clearing/222.gif, (medium)], [/base/spec/clearing/ccc.gif, (large)]"><img id="image2" src="/base/spec/clearing/777.gif"></a></li>
+  <li><a href="/base/spec/clearing/222.gif" data-clearing-interchange="[/base/spec/clearing/222.gif, (default)], [/base/spec/clearing/ccc.gif, (medium)], [/base/spec/clearing/777.gif, (large)]"><img id="image3" src="/base/spec/clearing/222.gif"></a></li>
+</ul>

spec/interchange/interchange.js

@@ -110,6 +110,7 @@ describe('interchange:', function() {
       $element0.on('replace', callback0);
       $element1.on('replace', callback1);
 
+      Foundation.libs.interchange.update_images();
       Foundation.libs.interchange.update_nodes();
       Foundation.libs.interchange.resize();