diff options
Diffstat (limited to 'source/bower_components/foundation/js/foundation/foundation.clearing.js')
-rw-r--r-- | source/bower_components/foundation/js/foundation/foundation.clearing.js | 558 |
1 files changed, 558 insertions, 0 deletions
diff --git a/source/bower_components/foundation/js/foundation/foundation.clearing.js b/source/bower_components/foundation/js/foundation/foundation.clearing.js new file mode 100644 index 0000000..b983533 --- /dev/null +++ b/source/bower_components/foundation/js/foundation/foundation.clearing.js @@ -0,0 +1,558 @@ +;(function ($, window, document, undefined) { + 'use strict'; + + Foundation.libs.clearing = { + name : 'clearing', + + version: '5.4.3', + + settings : { + templates : { + 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>' + }, + + // 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, div.clearing-blackout', + + // Default to the entire li element. + open_selectors : '', + + // Image will be skipped in carousel. + skip_selector : '', + + touch_label : '', + + // event initializers and locks + init : false, + locked : false + }, + + init : function (scope, method, options) { + var self = this; + Foundation.inherit(this, 'throttle image_loaded'); + + this.bindings(method, options); + + if (self.S(this.scope).is('[' + this.attr_name() + ']')) { + this.assemble(self.S('li', this.scope)); + } else { + self.S('[' + this.attr_name() + ']', this.scope).each(function () { + self.assemble(self.S('li', this)); + }); + } + }, + + events : function (scope) { + var self = this, + S = self.S, + $scroll_container = $('.scroll-container'); + + if ($scroll_container.length > 0) { + this.scope = $scroll_container; + } + + S(this.scope) + .off('.clearing') + .on('click.fndtn.clearing', 'ul[' + this.attr_name() + '] li ' + this.settings.open_selectors, + function (e, current, target) { + var current = current || S(this), + target = target || current, + next = current.next('li'), + settings = current.closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init'), + image = S(e.target); + + e.preventDefault(); + + if (!settings) { + self.init(); + settings = current.closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-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 = S('img', target); + } + + // 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) { self.nav(e, 'next') }) + .on('click.fndtn.clearing', '.clearing-main-prev', + function (e) { self.nav(e, 'prev') }) + .on('click.fndtn.clearing', this.settings.close_selectors, + function (e) { Foundation.libs.clearing.close(e, this) }); + + $(document).on('keydown.fndtn.clearing', + function (e) { self.keydown(e) }); + + S(window).off('.clearing').on('resize.fndtn.clearing', + function () { self.resize() }); + + this.swipe_events(scope); + }, + + swipe_events : function (scope) { + var self = this, + S = self.S; + + S(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 + }; + + S(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 = S(this).data('swipe-transition'); + + if (typeof data === 'undefined') { + data = {}; + } + + data.delta_x = e.touches[0].pageX - data.start_page_x; + + if (Foundation.rtl) { + data.delta_x = -data.delta_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) { + S(this).data('swipe-transition', {}); + e.stopPropagation(); + }); + }, + + assemble : function ($li) { + var $el = $li.parent(); + + if ($el.parent().hasClass('carousel')) { + return; + } + + $el.after('<div id="foundationClearingHolder"></div>'); + + var grid = $el.detach(), + grid_outerHTML = ''; + + if (grid[0] == null) { + return; + } else { + grid_outerHTML = grid[0].outerHTML; + } + + var holder = this.S('#foundationClearingHolder'), + settings = $el.data(this.attr_name(true) + '-init'), + data = { + grid: '<div class="carousel">' + grid_outerHTML + '</div>', + viewing: settings.templates.viewing + }, + wrapper = '<div class="clearing-assembled"><div>' + data.viewing + + data.grid + '</div></div>', + touch_label = this.settings.touch_label; + + if (Modernizr.touch) { + wrapper = $(wrapper).find('.clearing-touch-label').html(touch_label).end(); + } + + holder.after(wrapper).remove(); + }, + + open : function ($image, current, target) { + var self = this, + body = $(document.body), + root = target.closest('.clearing-assembled'), + container = self.S('div', root).first(), + visible_image = self.S('.visible-img', container), + image = self.S('img', visible_image).not($image), + label = self.S('.clearing-touch-label', container), + error = false; + + // Event to disable scrolling on touch devices when Clearing is activated + $('body').on('touchmove',function(e){ + e.preventDefault(); + }); + + image.error(function () { + error = true; + }); + + function startLoad() { + setTimeout(function () { + this.image_loaded(image, function () { + if (image.outerWidth() === 1 && !error) { + startLoad.call(this); + } else { + cb.call(this, image); + } + }.bind(this)); + }.bind(this), 100); + } + + function cb (image) { + var $image = $(image); + $image.css('visibility', 'visible'); + // toggle the gallery + body.css('overflow', 'hidden'); + root.addClass('clearing-blackout'); + container.addClass('clearing-container'); + visible_image.show(); + this.fix_height(target) + .caption(self.S('.clearing-caption', visible_image), self.S('img', target)) + .center_and_label(image, label) + .shift(current, target, function () { + target.closest('li').siblings().removeClass('visible'); + target.closest('li').addClass('visible'); + }); + visible_image.trigger('opened.fndtn.clearing') + } + + 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'); + + startLoad.call(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))), + body = $(document.body), container, visible_image; + + if (el === e.target && root) { + body.css('overflow', ''); + container = $('div', root).first(); + visible_image = $('.visible-img', container); + visible_image.trigger('close.fndtn.clearing'); + this.settings.prev_index = 0; + $('ul[' + this.attr_name() + ']', root) + .attr('style', '').closest('.clearing-blackout') + .removeClass('clearing-blackout'); + container.removeClass('clearing-container'); + visible_image.hide(); + visible_image.trigger('closed.fndtn.clearing'); + } + + // Event to re-enable scrolling on touch devices + $('body').off('touchmove'); + + return false; + }, + + is_open : function (current) { + return current.parent().prop('style').length > 0; + }, + + keydown : function (e) { + var clearing = $('.clearing-blackout ul[' + this.attr_name() + ']'), + NEXT_KEY = this.rtl ? 37 : 39, + PREV_KEY = this.rtl ? 39 : 37, + ESC_KEY = 27; + + if (e.which === NEXT_KEY) this.go(clearing, 'next'); + if (e.which === PREV_KEY) this.go(clearing, 'prev'); + if (e.which === ESC_KEY) this.S('a.clearing-close').trigger('click').trigger('click.fndtn.clearing'); + }, + + nav : function (e, direction) { + var clearing = $('ul[' + this.attr_name() + ']', '.clearing-blackout'); + + e.preventDefault(); + this.go(clearing, direction); + }, + + resize : function () { + var image = $('img', '.clearing-blackout .visible-img'), + label = $('.clearing-touch-label', '.clearing-blackout'); + + if (image.length) { + this.center_and_label(image, label); + image.trigger('resized.fndtn.clearing') + } + }, + + // visual adjustments + fix_height : function (target) { + var lis = target.parent().children(), + self = this; + + lis.each(function () { + var li = self.S(this), + image = li.find('img'); + + if (li.height() > image.outerHeight()) { + li.addClass('fix-height'); + } + }) + .closest('ul') + .width(lis.length * 100 + '%'); + + return this; + }, + + update_paddles : function (target) { + target = target.closest('li'); + var visible_image = target + .closest('.carousel') + .siblings('.visible-img'); + + if (target.next().length > 0) { + this.S('.clearing-main-next', visible_image).removeClass('disabled'); + } else { + this.S('.clearing-main-next', visible_image).addClass('disabled'); + } + + if (target.prev().length > 0) { + this.S('.clearing-main-prev', visible_image).removeClass('disabled'); + } else { + this.S('.clearing-main-prev', visible_image).addClass('disabled'); + } + }, + + center_and_label : function (target, label) { + if (!this.rtl) { + target.css({ + marginLeft : -(target.outerWidth() / 2), + marginTop : -(target.outerHeight() / 2) + }); + + if (label.length > 0) { + label.css({ + marginLeft : -(label.outerWidth() / 2), + marginTop : -(target.outerHeight() / 2)-label.outerHeight()-10 + }); + } + } else { + target.css({ + marginRight : -(target.outerWidth() / 2), + marginTop : -(target.outerHeight() / 2), + left: 'auto', + right: '50%' + }); + + if (label.length > 0) { + label.css({ + marginRight : -(label.outerWidth() / 2), + marginTop : -(target.outerHeight() / 2)-label.outerHeight()-10, + left: 'auto', + right: '50%' + }); + } + } + return this; + }, + + // image loading and preloading + + load : function ($image) { + var href; + + if ($image[0].nodeName === "A") { + href = $image.attr('href'); + } else { + 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()); + }, + + img : function (img) { + if (img.length) { + var new_img = new Image(), + new_a = this.S('a', img); + + if (new_a.length) { + new_img.src = new_a.attr('href'); + } else { + new_img.src = this.S('img', img).attr('src'); + } + } + return this; + }, + + // image caption + + caption : function (container, $image) { + var caption = $image.attr('data-caption'); + + if (caption) { + container + .html(caption) + .show(); + } else { + container + .text('') + .hide(); + } + return this; + }, + + // directional methods + + go : function ($ul, direction) { + var current = this.S('.visible', $ul), + target = current[direction](); + + // Check for skip selector. + if (this.settings.skip_selector && target.find(this.settings.skip_selector).length != 0) { + target = target[direction](); + } + + if (target.length) { + this.S('img', target) + .trigger('click', [current, target]).trigger('click.fndtn.clearing', [current, target]) + .trigger('change.fndtn.clearing'); + } + }, + + shift : function (current, target, callback) { + var clearing = target.parent(), + old_index = this.settings.prev_index || target.index(), + direction = this.direction(clearing, current, target), + dir = this.rtl ? 'right' : 'left', + left = parseInt(clearing.css('left'), 10), + width = target.outerWidth(), + skip_shift; + + var dir_obj = {}; + + // we use jQuery animate instead of CSS transitions because we + // need a callback to unlock the next animation + // needs support for RTL ** + if (target.index() !== old_index && !/skip/.test(direction)){ + if (/left/.test(direction)) { + this.lock(); + dir_obj[dir] = left + width; + clearing.animate(dir_obj, 300, this.unlock()); + } else if (/right/.test(direction)) { + this.lock(); + dir_obj[dir] = left - width; + clearing.animate(dir_obj, 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) { + dir_obj[dir] = -(skip_shift * width); + clearing.animate(dir_obj, 300, this.unlock()); + } else { + dir_obj[dir] = 0; + clearing.animate(dir_obj, 300, this.unlock()); + } + } + + callback(); + }, + + direction : function ($el, current, target) { + var lis = this.S('li', $el), + li_width = lis.outerWidth() + (lis.outerWidth() / 4), + up_count = Math.floor(this.S('.clearing-container').outerWidth() / 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; + }, + + off : function () { + this.S(this.scope).off('.fndtn.clearing'); + this.S(window).off('.fndtn.clearing'); + }, + + reflow : function () { + this.init(); + } + }; + +}(jQuery, window, window.document)); |