viewing : '<a href="#" class="clearing-close">×</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,
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) {
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);
}
// 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;
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');
+ });
+ });
+ });
+ }));
});
projects / thirdparty / foundation / foundation-sites.git / commitdiff
