// the semi-colon before function invocation is a safety net against concatenated // scripts and/or other plugins which may not be closed properly. ;(function ( $, window, document, undefined ) {
"use strict"; // undefined is used here as the undefined global variable in ECMAScript 3 is // mutable (ie. it can be changed by someone else). undefined isn't really being // passed in so we can ensure the value of it is truly undefined. In ES5, undefined // can no longer be modified. // window and document are passed through as local variable rather than global // as this (slightly) quickens the resolution process and can be more efficiently // minified (especially when both are regularly referenced in your plugin). // Create the defaults once var $w = $(window), $d = $(document), pluginName = "fluidbox", defaults = { immediateOpen: false, loader: false, maxWidth: 0, maxHeight: 0, resizeThrottle: 500, stackIndex: 1000, stackIndexDelta: 10, viewportFill: 0.95, }, globalData = {}, keyboardEvents = ['keyup', 'keydown', 'keypress']; // Global plugin instance tracker var fbInstance = 0; // Check the availability of the console object. This ensures compatibility with IE8. if(typeof console === "undefined" || console.warn === "undefined" ) { console = {}; console.warn = function(){}; } // Check if dependencies are loaded // 1. Ben Almen's debounce/throttle plugin if (!$.isFunction($.throttle)) { console.warn('Fluidbox: The jQuery debounce/throttle plugin is not found/loaded. Even though Fluidbox works without it, the window resize event will fire extremely rapidly in browsers, resulting in significant degradation in performance upon viewport resize.'); } // ---------------------------------------------------------------------------------------------------------------------- // // Dependency: David Walsh (http://davidwalsh.name/css-animation-callback) // // and // // Jonathan Suh (https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/) // // ---------------------------------------------------------------------------------------------------------------------- // var whichTransitionEvent = function() { var t, el = document.createElement("fakeelement"); var transitions = { "transition" : "transitionend", "OTransition" : "oTransitionEnd", "MozTransition" : "transitionend", "WebkitTransition": "webkitTransitionEnd" }; for (t in transitions){ if (el.style[t] !== undefined){ return transitions[t]; } } }; var customTransitionEnd = whichTransitionEvent(); // The actual plugin constructor function Plugin (element, options) { // Assign element this.element = element; // Manipulate HTML5 dataset object // - Format: data-fluidbox-(setting-name). When converted into camel case: fluidboxSettingName // - So, we will have to remove 'fluidbox' in the front, and change the first letter to lowercase var elementData = {}; $.each($(this.element).data(), function(k,v) { var capitalize = function(s) { return s && s[0].toLowerCase() + s.slice(1); }, key = capitalize(k.replace('fluidbox','')); // Only push non-empty keys (that are part of the Fluidbox HTML5 data- attributes) into new object if(key !== '' || key !== null) { // Coerce boolean values if (v == 'false') { v = false; } else if (v == 'true') { v = true; } elementData[key] = v; } }); // Merge defaults into options, into dataset this.settings = $.extend( {}, defaults, options, elementData); // Coerce settings this.settings.viewportFill = Math.max(Math.min(parseFloat(this.settings.viewportFill), 1), 0); if(this.settings.stackIndex < this.settings.stackIndexDelta) { settings.stackIndexDelta = settings.stackIndex; } // Store plugin name this._name = pluginName; // Initialize this.init(); } // Private functions var _fun = { dom: function() { // Wrap and add ghost element var $fb_innerWrap = $('<div />', { 'class': 'fluidbox__wrap', css: { zIndex: this.settings.stackIndex - this.settings.stackIndexDelta } }); $(this.element) .addClass('fluidbox--closed') .wrapInner($fb_innerWrap) .find('img') .first() .css({ opacity: 1}) .addClass('fluidbox__thumb') .after('<div class="fluidbox__ghost" />'); // Append loader if(this.settings.loader) { var $fbLoader = $('<div />', { 'class': 'fluidbox__loader', css: { zIndex: 2 } }); $(this.element).find('.fluidbox__wrap').append($fbLoader); } }, prepareFb: function() { var fb = this, $fb = $(this.element); // Thumbnail is successfully loaded, fire event $fb.trigger('thumbloaddone.fluidbox'); // Get basic measurements and to resize the ghost element _fun.measure.fbElements.call(this); // Bind events fb.bindEvents(); // Status: Fluidbox is ready to use $fb.addClass('fluidbox--ready'); // Bind listeners fb.bindListeners(); // Emit custom event $fb.trigger('ready.fluidbox'); }, measure: { viewport: function() { globalData.viewport = { w: $w.width(), h: $w.height() }; }, fbElements: function() { var fb = this, $fb = $(this.element), $fbThumb = $fb.find('img').first(), $fbGhost = $fb.find('.fluidbox__ghost'), $fbWrap = $fb.find('.fluidbox__wrap'); // Store image dimensions in instance data fb.instanceData.thumb = { natW: $fbThumb[0].naturalWidth, natH: $fbThumb[0].naturalHeight, w: $fbThumb.width(), h: $fbThumb.height() }; // Set ghost dimensions $fbGhost .css({ width: $fbThumb.width(), height: $fbThumb.height(), top: $fbThumb.offset().top - $fbWrap.offset().top + parseInt($fbThumb.css('borderTopWidth')) + parseInt($fbThumb.css('paddingTop')), left: $fbThumb.offset().left - $fbWrap.offset().left + parseInt($fbThumb.css('borderLeftWidth')) + parseInt($fbThumb.css('paddingLeft')) }); } }, checkURL: function(url) { var exitCode = 0; if(/[\s+]/g.test(url)) { console.warn('Fluidbox: Fluidbox opening is halted because it has detected characters in your URL string that need to be properly encoded/escaped. Whitespace(s) have to be escaped manually. See RFC3986 documentation.'); exitCode = 1; } else if(/[\"\'\(\)]/g.test(url)) { console.warn('Fluidbox: Fluidbox opening will proceed, but it has detected characters in your URL string that need to be properly encoded/escaped. These will be escaped for you. See RFC3986 documentation.'); exitCode = 0; } return exitCode; }, formatURL: function(url) { return url .replace(/"/g, '%22') .replace(/'/g, '%27') .replace(/\(/g, '%28') .replace(/\)/g, '%29'); } }; // Public functions $.extend(Plugin.prototype, { init: function () { // Define elements var fb = this, $fb = $(this.element), $fbThumb = $fb.find('img').first(); // Get basic measurements _fun.measure.viewport(); // Only perform initialization when // - It is not yet initialized // + DOM checks are satisfied: // +-- An anchor element is selected // +-- Contains one and only one child // +-- The only child is an image element OR a picture element // +-- The element must not be hidden (itself or its parents) if( (!fb.instanceData || !fb.instanceData.initialized) && ( $fb.is('a') && $fb.children().length === 1 && ( $fb.children().is('img') || ( $fb.children().is('picture') && $fb.find('img').length === 1 ) ) && $fb.css('display') !== 'none' && $fb.children().css('display') !== 'none' && $fb.parents().css('display') !== 'none' ) ) { // Initialize and store original node $fb.removeClass('fluidbox--destroyed'); fb.instanceData = {}; fb.instanceData.initialized = true; fb.instanceData.originalNode = $fb.html(); // Append instance ID fbInstance += 1; fb.instanceData.id = fbInstance; $fb.addClass('fluidbox__instance-'+fbInstance); // Status: Fluidbox has been initialized $fb.addClass('fluidbox--initialized'); // DOM replacement _fun.dom.call(fb); // Emit custom event $fb.trigger('init.fluidbox'); // Wait for image to load, but only if image is not found in cache var img = new Image(); if($fbThumb.width() > 0 && $fbThumb.height() > 0) { // Thumbnail loaded from cache, let's prepare fluidbox _fun.prepareFb.call(fb); } else { img.onload = function() { // Thumbnail loaded, let's prepare fluidbox _fun.prepareFb.call(fb); }; img.onerror = function() { // Trigger custom error event $fb.trigger('thumbloadfail.fluidbox'); }; img.src = $fbThumb.attr('src'); } } }, open: function() { // Open Fluidbox var fb = this, $fb = $(this.element), $fbThumb = $fb.find('img').first(), $fbGhost = $fb.find('.fluidbox__ghost'), $fbWrap = $fb.find('.fluidbox__wrap'); // Update state fb.instanceData.state = 1; // Forcibly turn off transition end detection, // otherwise users will get choppy transition if toggling between states rapidly $fbGhost.off(customTransitionEnd); // Close all other Fluidbox instances $('.fluidbox--opened').fluidbox('close'); // Append overlay var $fbOverlay = $('<div />', { 'class': 'fluidbox__overlay', css: { zIndex: -1 } }); $fbWrap.append($fbOverlay); // Add class to indicate larger image being loaded $fb .removeClass('fluidbox--closed') .addClass('fluidbox--loading'); // Check of URL is properly formatted if(_fun.checkURL($fbThumb.attr('src'))) { fb.close(); return false; } // Set thumbnail image source as background image first, worry later $fbGhost.css({ 'background-image': 'url(' + _fun.formatURL($fbThumb.attr('src')) + ')', opacity: 1 }); // Set dimensions for ghost _fun.measure.fbElements.call(fb); // Wait for ghost image to preload var img; if (fb.settings.immediateOpen) { // Update classes $fb .addClass('fluidbox--opened fluidbox--loaded') .find('.fluidbox__wrap') .css({ zIndex: fb.settings.stackIndex + fb.settings.stackIndexDelta }); // Emit custom event $fb.trigger('openstart.fluidbox'); // Compute fb.compute(); // Hide thumbnail $fbThumb.css({ opacity: 0 }); // Show overlay $('.fluidbox__overlay').css({ opacity: 1 }); // Emit custom event when ghost image finishes transition $fbGhost.one(customTransitionEnd, function() { $fb.trigger('openend.fluidbox'); }); img = new Image(); img.onload = function() { // Emit custom event $fb.trigger('imageloaddone.fluidbox'); // Perform only if the Fluidbox instance is still open if (fb.instanceData.state === 1) { // Set new natural dimensions fb.instanceData.thumb.natW = img.naturalWidth; fb.instanceData.thumb.natH = img.naturalHeight; // Remove loading status $fb.removeClass('fluidbox--loading'); // Check of URL is properly formatted if(_fun.checkURL(img.src)) { fb.close({ error: true }); return false; } // Set new image background $fbGhost.css({ 'background-image': 'url(' + _fun.formatURL(img.src) + ')' }); // Compute fb.compute(); } }; img.onerror = function() { // Trigger closing fb.close({ error: true }); // Emit custom event $fb.trigger('imageloadfail.fluidbox'); $fb.trigger('delayedloadfail.fluidbox'); }; img.src = $fb.attr('href'); } else { img = new Image(); img.onload = function() { // Emit custom event $fb.trigger('imageloaddone.fluidbox'); // Update classes $fb .removeClass('fluidbox--loading') .addClass('fluidbox--opened fluidbox--loaded') .find('.fluidbox__wrap') .css({ zIndex: fb.settings.stackIndex + fb.settings.stackIndexDelta }); // Emit custom event $fb.trigger('openstart.fluidbox'); // Check of URL is properly formatted if(_fun.checkURL(img.src)) { fb.close({ error: true }); return false; } // Set new image background $fbGhost.css({ 'background-image': 'url(' + _fun.formatURL(img.src) + ')' }); // Set new natural dimensions fb.instanceData.thumb.natW = img.naturalWidth; fb.instanceData.thumb.natH = img.naturalHeight; // Compute fb.compute(); // Hide thumbnail $fbThumb.css({ opacity: 0 }); // Show overlay $('.fluidbox__overlay').css({ opacity: 1 }); // Emit custom event when ghost image finishes transition $fbGhost.one(customTransitionEnd, function() { $fb.trigger('openend.fluidbox'); }); }; img.onerror = function() { // Trigger closing fb.close({ error: true }); // Emit custom event $fb.trigger('imageloadfail.fluidbox'); }; img.src = $fb.attr('href'); } }, compute: function() { var fb = this, $fb = $(this.element), $fbThumb = $fb.find('img').first(), $fbGhost = $fb.find('.fluidbox__ghost'), $fbWrap = $fb.find('.fluidbox__wrap'); // Shorthand for dimensions var imgNatW = fb.instanceData.thumb.natW, imgNatH = fb.instanceData.thumb.natH, imgW = fb.instanceData.thumb.w, imgH = fb.instanceData.thumb.h; // Calculate aspect ratios var thumbRatio = imgNatW / imgNatH, viewportRatio = globalData.viewport.w / globalData.viewport.h; // Replace dimensions if maxWidth or maxHeight is declared if (fb.settings.maxWidth > 0) { imgNatW = fb.settings.maxWidth; imgNatH = imgNatW / thumbRatio; } else if (fb.settings.maxHeight > 0) { imgNatH = fb.settings.maxHeight; imgNatW = imgNatH * thumbRatio; } // Compare image ratio with viewport ratio var computedHeight, computedWidth, imgScaleY, imgScaleX, imgMinScale; if (viewportRatio > thumbRatio) { computedHeight = (imgNatH < globalData.viewport.h) ? imgNatH : globalData.viewport.h*fb.settings.viewportFill; imgScaleY = computedHeight / imgH; imgScaleX = imgNatW * (imgH * imgScaleY / imgNatH) / imgW; imgMinScale = imgScaleY; } else { computedWidth = (imgNatW < globalData.viewport.w) ? imgNatW : globalData.viewport.w*fb.settings.viewportFill; imgScaleX = computedWidth / imgW; imgScaleY = imgNatH * (imgW * imgScaleX / imgNatW) / imgH; imgMinScale = imgScaleX; } // Display console error if both maxHeight and maxWidth are specific if (fb.settings.maxWidth && fb.settings.maxHeight) console.warn('Fluidbox: Both maxHeight and maxWidth are specified. You can only specify one. If both are specified, only the maxWidth property will be respected. This will not generate any error, but may cause unexpected sizing behavior.'); // Scale var offsetY = $w.scrollTop() - $fbThumb.offset().top + 0.5*(imgH*(imgMinScale-1)) + 0.5*($w.height() - imgH*imgMinScale), offsetX = 0.5*(imgW*(imgMinScale-1)) + 0.5*($w.width() - imgW*imgMinScale) - $fbThumb.offset().left, scale = parseInt(imgScaleX*100)/100 + ',' + parseInt(imgScaleY*100)/100; // Apply styles to ghost and loader (if present) $fbGhost .css({ 'transform': 'translate(' + parseInt(offsetX*100)/100 + 'px,' + parseInt(offsetY*100)/100 + 'px) scale(' + scale + ')', top: $fbThumb.offset().top - $fbWrap.offset().top, left: $fbThumb.offset().left - $fbWrap.offset().left }); $fb.find('.fluidbox__loader').css({ 'transform': 'translate(' + parseInt(offsetX*100)/100 + 'px,' + parseInt(offsetY*100)/100 + 'px) scale(' + scale + ')' }); // Emit custom event $fb.trigger('computeend.fluidbox'); }, recompute: function() { // Recompute is simply an alias for the compute method this.compute(); }, close: function(d) { // Close Fluidbox var fb = this, $fb = $(this.element), $fbThumb = $fb.find('img').first(), $fbGhost = $fb.find('.fluidbox__ghost'), $fbWrap = $fb.find('.fluidbox__wrap'), $fbOverlay = $fb.find('.fluidbox__overlay'), closeData = $.extend(null, { error: false }, d); // Do not do anything if Fluidbox is not opened/closed, for performance reasons if (fb.instanceData.state === null || typeof fb.instanceData.state === typeof undefined || fb.instanceData.state === 0) return false; // Update state fb.instanceData.state = 0; // Emit custom event $fb.trigger('closestart.fluidbox'); // Change classes $fb .removeClass(function(i,c) { return (c.match (/(^|\s)fluidbox--(opened|loaded|loading)+/g) || []).join(' '); }) .addClass('fluidbox--closed'); $fbGhost .css({ 'transform': 'translate(0,0) scale(1,1)', top: $fbThumb.offset().top - $fbWrap.offset().top + parseInt($fbThumb.css('borderTopWidth')) + parseInt($fbThumb.css('paddingTop')), left: $fbThumb.offset().left - $fbWrap.offset().left + parseInt($fbThumb.css('borderLeftWidth')) + parseInt($fbThumb.css('paddingLeft')) }); $fb.find('.fluidbox__loader') .css({ 'transform': 'none' }); $fbGhost.one(customTransitionEnd, function() { $fbGhost.css({ opacity: 0 }); $fbThumb.css({ opacity: 1 }); $fbOverlay.remove(); $fbWrap.css({ zIndex: fb.settings.stackIndex - fb.settings.stackIndexDelta }); $fb.trigger('closeend.fluidbox'); }); // Manually trigger transitionend if an error is detected // Errors will not trigger any transition changes to the ghost element if(closeData.error) $fbGhost.trigger('transitionend'); // Fadeout overlay $fbOverlay.css({ opacity: 0 }); }, bindEvents: function() { var fb = this, $fb = $(this.element); // Click handler $fb.on('click.fluidbox', function(e) { e.preventDefault(); // Check state // If state does not exist, or if Fluidbox is closed, we open it if(!fb.instanceData.state || fb.instanceData.state === 0) { // Open Fluidbox fb.open(); // If state exists, we close it } else { // Close Fluidbox fb.close(); } }); }, bindListeners: function() { var fb = this, $fb = $(this.element); // Window resize // Namespaced using unique instance IDs so that we can unbind resize event specific to a Fluidbox instance var resizeFunction = function() { // Re-measure viewport dimensions _fun.measure.viewport(); _fun.measure.fbElements.call(fb); // Re-compute, but only for the active element if($fb.hasClass('fluidbox--opened')) fb.compute(); }; if ($.isFunction($.throttle)) { $w.on('resize.fluidbox'+fb.instanceData.id, $.throttle(fb.settings.resizeThrottle, resizeFunction)); } else { $w.on('resize.fluidbox'+fb.instanceData.id, resizeFunction); } // Reposition $fb.on('reposition.fluidbox', function() { fb.reposition(); }); // Recompute $fb.on('recompute.fluidbox, compute.fluidbox', function() { fb.compute(); }); // Destroy $fb.on('destroy.fluidbox', function() { fb.destroy(); }); // Close $fb.on('close.fluidbox', function() { fb.close(); }); }, unbind: function() { $(this.element).off('click.fluidbox reposition.fluidbox recompute.fluidbox compute.fluidbox destroy.fluidbox close.fluidbox'); $w.off('resize.fluidbox'+this.instanceData.id); }, reposition: function() { _fun.measure.fbElements.call(this); }, destroy: function() { // Cache original node var originalNode = this.instanceData.originalNode; // Unbind event hanlders this.unbind(); // Destroy plugin data entirely $.data(this.element, 'plugin_' + pluginName, null); // DOM reversal $(this.element) .removeClass(function(i,c) { return (c.match (/(^|\s)fluidbox[--|__]\S+/g) || []).join(' '); }) .empty() .html(originalNode) .addClass('fluidbox--destroyed') .trigger('destroyed.fluidbox'); }, getMetadata: function() { // Return instance data return this.instanceData; } }); // A really lightweight plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[pluginName] = function (options) { var args = arguments; // Check the options parameter // If it is undefined or is an object (plugin configuration), // we create a new instance (conditionally, see inside) of the plugin if (options === undefined || typeof options === 'object') { return this.each(function() { // Only if the plugin_fluidbox data is not present, // to prevent multiple instances being created if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); // If it is defined, but it is a string, does not start with an underscore and does not call init(), // we allow users to make calls to public methods } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { var returnVal; this.each(function() { var instance = $.data(this, 'plugin_' + pluginName); if (instance instanceof Plugin && typeof instance[options] === 'function') { returnVal = instance[options].apply(instance, Array.prototype.slice.call(args, 1)); } else { console.warn('Fluidbox: The method "' + options + '" used is not defined in Fluidbox. Please make sure you are calling the correct public method.'); } }); return returnVal !== undefined ? returnVal : this; } // Return to allow chaining return this; };
})(jQuery, window, document);