From 2ab7fa93e44eb222eed9a7cc902ffbebd3f20957 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ma=CC=81rton=20Szinovszki?= Date: Tue, 4 Nov 2014 01:25:01 +0100 Subject: [PATCH] Add clearing interchange functionality complete with preloading, tests and documentation. Also fix some testing issues. --- ...xamples_clearing_interchange_rendered.html | 9 + doc/pages/components/clearing.html | 12 ++ js/foundation/foundation.clearing.js | 63 +++++-- spec/clearing/basic.html | 6 +- spec/clearing/clearing.js | 164 +++++++++++++++--- spec/clearing/interchange.html | 5 + spec/interchange/interchange.js | 1 + 7 files changed, 218 insertions(+), 42 deletions(-) create mode 100644 doc/includes/clearing/examples_clearing_interchange_rendered.html create mode 100644 spec/clearing/interchange.html diff --git a/doc/includes/clearing/examples_clearing_interchange_rendered.html b/doc/includes/clearing/examples_clearing_interchange_rendered.html new file mode 100644 index 000000000..5d3b0cfec --- /dev/null +++ b/doc/includes/clearing/examples_clearing_interchange_rendered.html @@ -0,0 +1,9 @@ +{{#markdown}} +```html + +``` +{{/markdown}} \ No newline at end of file diff --git a/doc/pages/components/clearing.html b/doc/pages/components/clearing.html index aead60da9..662b321e9 100644 --- a/doc/pages/components/clearing.html +++ b/doc/pages/components/clearing.html @@ -26,6 +26,18 @@ We're using the `.th` class from Foundation to style the thumbnails in the Clear *** +## Using Responsive Images + +To use responsive images add `data-clearing-interchange` to your links: + +

HTML

+ +{{> 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 `
  • ` 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;`. diff --git a/js/foundation/foundation.clearing.js b/js/foundation/foundation.clearing.js index 7ab45c137..0e6763ea8 100644 --- a/js/foundation/foundation.clearing.js +++ b/js/foundation/foundation.clearing.js @@ -11,7 +11,9 @@ viewing : '×' + '' + '' + + '' + + '' }, // 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; diff --git a/spec/clearing/basic.html b/spec/clearing/basic.html index b3ecfa1d0..e9b525bc2 100644 --- a/spec/clearing/basic.html +++ b/spec/clearing/basic.html @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/spec/clearing/clearing.js b/spec/clearing/clearing.js index 758973ce5..ba00c6513 100644 --- a/spec/clearing/clearing.js +++ b/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'); + }); + }); + }); + })); }); diff --git a/spec/clearing/interchange.html b/spec/clearing/interchange.html new file mode 100644 index 000000000..ab98fcde8 --- /dev/null +++ b/spec/clearing/interchange.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/spec/interchange/interchange.js b/spec/interchange/interchange.js index 719d3ad56..3a7e3b714 100644 --- a/spec/interchange/interchange.js +++ b/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(); -- 2.47.2