docs/assets/js/foundation/foundation.clearing.js
/*jslint unparam: true, browser: true, indent: 2 */
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.clearing = {
name : 'clearing',
version : '4.2.2',
settings : {
templates : {
viewing : '<a href="#" class="clearing-close">×</a>' +
'<div class="visible-img" style="display: none"><img src="//:0">' +
'<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
'<a href="#" class="clearing-main-next"><span></span></a></div>'
},
// comma delimited list of selectors that, on click, will close clearing,
// add 'div.clearing-blackout, div.visible-img' to close on background click
close_selectors : '.clearing-close',
// event initializers and locks
init : false,
locked : false
},
init : function (scope, method, options) {
var self = this;
Foundation.inherit(this, 'set_data get_data remove_data throttle data_options');
if (typeof method === 'object') {
options = $.extend(true, this.settings, method);
}
if (typeof method !== 'string') {
$(this.scope).find('ul[data-clearing]').each(function () {
var $el = $(this),
options = options || {},
lis = $el.find('li'),
settings = self.get_data($el);
if (!settings && lis.length > 0) {
options.$parent = $el.parent();
self.set_data($el, $.extend({}, self.settings, options, self.data_options($el)));
self.assemble($el.find('li'));
if (!self.settings.init) {
self.events().swipe_events();
}
}
});
return this.settings.init;
} else {
// fire method
return this[method].call(this, options);
}
},
// event binding and initial setup
events : function () {
var self = this;
$(this.scope)
.on('click.fndtn.clearing', 'ul[data-clearing] li',
function (e, current, target) {
var current = current || $(this),
target = target || current,
next = current.next('li'),
settings = self.get_data(current.parent()),
image = $(e.target);
e.preventDefault();
if (!settings) self.init();
// if clearing is open and the current image is
// clicked, go to the next image in sequence
if (target.hasClass('visible') &&
current[0] === target[0] &&
next.length > 0 && self.is_open(current)) {
target = next;
image = target.find('img');
}
// set current and target to the clicked li if not otherwise defined.
self.open(image, current, target);
self.update_paddles(target);
})
.on('click.fndtn.clearing', '.clearing-main-next',
function (e) { this.nav(e, 'next') }.bind(this))
.on('click.fndtn.clearing', '.clearing-main-prev',
function (e) { this.nav(e, 'prev') }.bind(this))
.on('click.fndtn.clearing', this.settings.close_selectors,
function (e) { Foundation.libs.clearing.close(e, this) })
.on('keydown.fndtn.clearing',
function (e) { this.keydown(e) }.bind(this));
$(window).on('resize.fndtn.clearing',
function () { this.resize() }.bind(this));
this.settings.init = true;
return this;
},
swipe_events : function () {
var self = this;
$(this.scope)
.on('touchstart.fndtn.clearing', '.visible-img', function(e) {
if (!e.touches) { e = e.originalEvent; }
var data = {
start_page_x: e.touches[0].pageX,
start_page_y: e.touches[0].pageY,
start_time: (new Date()).getTime(),
delta_x: 0,
is_scrolling: undefined
};
$(this).data('swipe-transition', data);
e.stopPropagation();
})
.on('touchmove.fndtn.clearing', '.visible-img', function(e) {
if (!e.touches) { e = e.originalEvent; }
// Ignore pinch/zoom events
if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
var data = $(this).data('swipe-transition');
if (typeof data === 'undefined') {
data = {};
}
data.delta_x = e.touches[0].pageX - data.start_page_x;
if ( typeof data.is_scrolling === 'undefined') {
data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
}
if (!data.is_scrolling && !data.active) {
e.preventDefault();
var direction = (data.delta_x < 0) ? 'next' : 'prev';
data.active = true;
self.nav(e, direction);
}
})
.on('touchend.fndtn.clearing', '.visible-img', function(e) {
$(this).data('swipe-transition', {});
e.stopPropagation();
});
},
assemble : function ($li) {
var $el = $li.parent();
$el.after('<div id="foundationClearingHolder"></div>');
var holder = $('#foundationClearingHolder'),
settings = this.get_data($el),
grid = $el.detach(),
data = {
grid: '<div class="carousel">' + this.outerHTML(grid[0]) + '</div>',
viewing: settings.templates.viewing
},
wrapper = '<div class="clearing-assembled"><div>' + data.viewing +
data.grid + '</div></div>';
return holder.after(wrapper).remove();
},
// event callbacks
open : function ($image, current, target) {
var root = target.closest('.clearing-assembled'),
container = root.find('div').first(),
visible_image = container.find('.visible-img'),
image = visible_image.find('img').not($image);
if (!this.locked()) {
// set the image to the selected thumbnail
image
.attr('src', this.load($image))
.css('visibility', 'hidden');
this.loaded(image, function () {
image.css('visibility', 'visible');
// toggle the gallery
root.addClass('clearing-blackout');
container.addClass('clearing-container');
visible_image.show();
this.fix_height(target)
.caption(visible_image.find('.clearing-caption'), $image)
.center(image)
.shift(current, target, function () {
target.siblings().removeClass('visible');
target.addClass('visible');
});
}.bind(this));
}
},
close : function (e, el) {
e.preventDefault();
var root = (function (target) {
if (/blackout/.test(target.selector)) {
return target;
} else {
return target.closest('.clearing-blackout');
}
}($(el))), container, visible_image;
if (el === e.target && root) {
container = root.find('div').first();
visible_image = container.find('.visible-img');
this.settings.prev_index = 0;
root.find('ul[data-clearing]')
.attr('style', '').closest('.clearing-blackout')
.removeClass('clearing-blackout');
container.removeClass('clearing-container');
visible_image.hide();
}
return false;
},
is_open : function (current) {
return current.parent().attr('style').length > 0;
},
keydown : function (e) {
var clearing = $('.clearing-blackout').find('ul[data-clearing]');
if (e.which === 39) this.go(clearing, 'next');
if (e.which === 37) this.go(clearing, 'prev');
if (e.which === 27) $('a.clearing-close').trigger('click');
},
nav : function (e, direction) {
var clearing = $('.clearing-blackout').find('ul[data-clearing]');
e.preventDefault();
this.go(clearing, direction);
},
resize : function () {
var image = $('.clearing-blackout .visible-img').find('img');
if (image.length) {
this.center(image);
}
},
// visual adjustments
fix_height : function (target) {
var lis = target.parent().children(),
self = this;
lis.each(function () {
var li = $(this),
image = li.find('img');
if (li.height() > self.outerHeight(image)) {
li.addClass('fix-height');
}
})
.closest('ul')
.width(lis.length * 100 + '%');
return this;
},
update_paddles : function (target) {
var visible_image = target
.closest('.carousel')
.siblings('.visible-img');
if (target.next().length > 0) {
visible_image
.find('.clearing-main-next')
.removeClass('disabled');
} else {
visible_image
.find('.clearing-main-next')
.addClass('disabled');
}
if (target.prev().length > 0) {
visible_image
.find('.clearing-main-prev')
.removeClass('disabled');
} else {
visible_image
.find('.clearing-main-prev')
.addClass('disabled');
}
},
center : function (target) {
if (!this.rtl) {
target.css({
marginLeft : -(this.outerWidth(target) / 2),
marginTop : -(this.outerHeight(target) / 2)
});
} else {
target.css({
marginRight : -(this.outerWidth(target) / 2),
marginTop : -(this.outerHeight(target) / 2)
});
}
return this;
},
// image loading and preloading
load : function ($image) {
if ($image[0].nodeName === "A") {
var href = $image.attr('href');
} else {
var href = $image.parent().attr('href');
}
this.preload($image);
if (href) return href;
return $image.attr('src');
},
preload : function ($image) {
this
.img($image.closest('li').next())
.img($image.closest('li').prev());
},
loaded : function (image, callback) {
// based on jquery.imageready.js
// @weblinc, @jsantell, (c) 2012
function loaded () {
callback();
}
function bindLoad () {
this.one('load', loaded);
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
var src = this.attr( 'src' ),
param = src.match( /\?/ ) ? '&' : '?';
param += 'random=' + (new Date()).getTime();
this.attr('src', src + param);
}
}
if (!image.attr('src')) {
loaded();
return;
}
if (image[0].complete || image[0].readyState === 4) {
loaded();
} else {
bindLoad.call(image);
}
},
img : function (img) {
if (img.length) {
var new_img = new Image(),
new_a = img.find('a');
if (new_a.length) {
new_img.src = new_a.attr('href');
} else {
new_img.src = img.find('img').attr('src');
}
}
return this;
},
// image caption
caption : function (container, $image) {
var caption = $image.data('caption');
if (caption) {
container
.html(caption)
.show();
} else {
container
.text('')
.hide();
}
return this;
},
// directional methods
go : function ($ul, direction) {
var current = $ul.find('.visible'),
target = current[direction]();
if (target.length) {
target
.find('img')
.trigger('click', [current, target]);
}
},
shift : function (current, target, callback) {
var clearing = target.parent(),
old_index = this.settings.prev_index || target.index(),
direction = this.direction(clearing, current, target),
left = parseInt(clearing.css('left'), 10),
width = this.outerWidth(target),
skip_shift;
// we use jQuery animate instead of CSS transitions because we
// need a callback to unlock the next animation
if (target.index() !== old_index && !/skip/.test(direction)){
if (/left/.test(direction)) {
this.lock();
clearing.animate({left : left + width}, 300, this.unlock());
} else if (/right/.test(direction)) {
this.lock();
clearing.animate({left : left - width}, 300, this.unlock());
}
} else if (/skip/.test(direction)) {
// the target image is not adjacent to the current image, so
// do we scroll right or not
skip_shift = target.index() - this.settings.up_count;
this.lock();
if (skip_shift > 0) {
clearing.animate({left : -(skip_shift * width)}, 300, this.unlock());
} else {
clearing.animate({left : 0}, 300, this.unlock());
}
}
callback();
},
direction : function ($el, current, target) {
var lis = $el.find('li'),
li_width = this.outerWidth(lis) + (this.outerWidth(lis) / 4),
up_count = Math.floor(this.outerWidth($('.clearing-container')) / li_width) - 1,
target_index = lis.index(target),
response;
this.settings.up_count = up_count;
if (this.adjacent(this.settings.prev_index, target_index)) {
if ((target_index > up_count)
&& target_index > this.settings.prev_index) {
response = 'right';
} else if ((target_index > up_count - 1)
&& target_index <= this.settings.prev_index) {
response = 'left';
} else {
response = false;
}
} else {
response = 'skip';
}
this.settings.prev_index = target_index;
return response;
},
adjacent : function (current_index, target_index) {
for (var i = target_index + 1; i >= target_index - 1; i--) {
if (i === current_index) return true;
}
return false;
},
// lock management
lock : function () {
this.settings.locked = true;
},
unlock : function () {
this.settings.locked = false;
},
locked : function () {
return this.settings.locked;
},
// plugin management/browser quirks
outerHTML : function (el) {
// support FireFox < 11
return el.outerHTML || new XMLSerializer().serializeToString(el);
},
off : function () {
$(this.scope).off('.fndtn.clearing');
$(window).off('.fndtn.clearing');
this.remove_data(); // empty settings cache
this.settings.init = false;
},
reflow : function () {
this.init();
}
};
}(Foundation.zj, this, this.document));