/* * Boxer v3.3.0 - 2015-04-04 * A jQuery plugin for displaying images, videos or content in a modal overlay. Part of the Formstone Library. * http://classic.formstone.it/boxer/ * * Copyright 2015 Ben Plum; MIT Licensed */ ;(function ($, window) { "use strict"; var $body = null, data = {}, trueMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test((window.navigator.userAgent||window.navigator.vendor||window.opera)), transitionEvent, transitionSupported; /** * @options * @param callback [function] <$.noop> "Funciton called after opening instance" * @param customClass [string] <''> "Class applied to instance" * @param extensions [array] <"jpg", "sjpg", "jpeg", "png", "gif"> "Image type extensions" * @param fixed [boolean] "Flag for fixed positioning" * @param formatter [function] <$.noop> "Caption format function" * @param labels.close [string] <'Close'> "Close button text" * @param labels.count [string] <'of'> "Gallery count separator text" * @param labels.next [string] <'Next'> "Gallery control text" * @param labels.previous [string] <'Previous'> "Gallery control text" * @param margin [int] <50> "Margin used when sizing (single side)" * @param minHeight [int] <100> "Minimum height of modal" * @param minWidth [int] <100> "Minimum width of modal" * @param mobile [boolean] "Flag to force 'mobile' rendering" * @param opacity [number] <0.75> "Overlay target opacity" * @param retina [boolean] "Use 'retina' sizing (half's natural sizes)" * @param requestKey [string] <'boxer'> "GET variable for ajax / iframe requests" * @param top [int] <0> "Target top position; over-rides centering" * @param videoRadio [number] <0.5625> "Video height / width ratio (9 / 16 = 0.5625)" * @param videoWidth [int] <600> "Video target width" */ var options = { callback: $.noop, customClass: "", extensions: [ "jpg", "sjpg", "jpeg", "png", "gif" ], fixed: false, formatter: $.noop, labels: { close: "Close", count: "of", next: "Next", previous: "Previous" }, margin: 50, minHeight: 100, minWidth: 100, mobile: false, opacity: 0.75, retina: false, requestKey: "boxer", top: 0, videoRatio: 0.5625, videoWidth: 600 }; /** * @events * @event open.boxer "Modal opened; triggered on window" * @event close.boxer "Modal closed; triggered on window" */ var pub = { /** * @method * @name close * @description Closes active instance of plugin * @example $.boxer("close"); */ close: function() { if (typeof data.$boxer !== "undefined") { data.$boxer.off(".boxer"); data.$overlay.trigger("click"); } }, /** * @method * @name defaults * @description Sets default plugin options * @param opts [object] <{}> "Options object" * @example $.boxer("defaults", opts); */ defaults: function(opts) { options = $.extend(options, opts || {}); return (typeof this === 'object') ? $(this) : false; }, /** * @method * @name destroy * @description Removes plugin bindings * @example $(".target").boxer("destroy"); */ destroy: function() { return $(this).off(".boxer"); }, /** * @method * @name resize * @description Triggers resize of instance * @example $.boxer("resize"); * @param height [int | false] "Target height or false to auto size" * @param width [int | false] "Target width or false to auto size" */ resize: function(e) { if (typeof data.$boxer !== "undefined") { if (typeof e !== "object") { data.targetHeight = arguments[0]; data.targetWidth = arguments[1]; } if (data.type === "element") { sizeContent(data.$content.find(">:first-child")); } else if (data.type === "image") { sizeImage(); } else if (data.type === "video") { sizeVideo(); } size(); } return $(this); } }; /** * @method private * @name init * @description Initializes plugin * @param opts [object] "Initialization options" */ function init(opts) { options.formatter = formatCaption; $body = $("body"); transitionEvent = getTransitionEvent(); transitionSupported = (transitionEvent !== false); // no transitions :( if (!transitionSupported) { transitionEvent = "transitionend.boxer"; } return $(this).on("click.boxer", $.extend({}, options, opts || {}), build); } /** * @method private * @name build * @description Builds target instance * @param e [object] "Event data" */ function build(e) { if (typeof data.$boxer === "undefined") { // Check target type var $target = $(this), $object = e.data.$object, source = ($target[0].href) ? $target[0].href || "" : "", hash = ($target[0].hash) ? $target[0].hash || "" : "", sourceParts = source.toLowerCase().split(".").pop().split(/\#|\?/), extension = sourceParts[0], type = $target.data("boxer-type") || "", isImage = ( (type === "image") || ($.inArray(extension, e.data.extensions) > -1 || source.substr(0, 10) === "data:image") ), isVideo = ( source.indexOf("youtube.com/embed") > -1 || source.indexOf("player.vimeo.com/video") > -1 ), isUrl = ( (type === "url") || (!isImage && !isVideo && source.substr(0, 4) === "http" && !hash) ), isElement = ( (type === "element") || (!isImage && !isVideo && !isUrl && (hash.substr(0, 1) === "#")) ), isObject = ( (typeof $object !== "undefined") ); if (isElement) { source = hash; } // Check if boxer is already active, retain default click if ($("#boxer").length > 1 || !(isImage || isVideo || isUrl || isElement || isObject)) { return; } // Kill event killEvent(e); // Cache internal data data = $.extend({}, { $window: $(window), $body: $("body"), $target: $target, $object: $object, visible: false, resizeTimer: null, touchTimer: null, gallery: { active: false }, isMobile: (trueMobile || e.data.mobile), isAnimating: true, oldContentHeight: 0, oldContentWidth: 0 }, e.data); // Double the margin data.margin *= 2; if (isImage) { data.type = "image"; } else if (isVideo) { data.type = "video"; } else { data.type = "element"; } if (isImage || isVideo) { // Check for gallery var id = data.$target.data("gallery") || data.$target.attr("rel"); // backwards compatibility if (typeof id !== "undefined" && id !== false) { data.gallery.active = true; data.gallery.id = id; data.gallery.$items = $("a[data-gallery= " + data.gallery.id + "], a[rel= " + data.gallery.id + "]"); // backwards compatibility data.gallery.index = data.gallery.$items.index(data.$target); data.gallery.total = data.gallery.$items.length - 1; } } // Assemble HTML var html = ''; if (!data.isMobile) { html += '
'; } html += '
'; html += '' + data.labels.close + ''; html += ''; html += '
'; html += '
'; if (isImage || isVideo) { html += '
'; if (data.gallery.active) { html += ''; html += ''; html += '

' + data.labels.count + ' ' + (data.gallery.total + 1) + ''; html += '

'; html += ''; // caption, meta } html += '
'; //container, content, boxer // Modify Dom data.$body.append(html); // Cache jquery objects data.$overlay = $("#boxer-overlay"); data.$boxer = $("#boxer"); data.$container = data.$boxer.find(".boxer-container"); data.$content = data.$boxer.find(".boxer-content"); data.$meta = data.$boxer.find(".boxer-meta"); data.$position = data.$boxer.find(".boxer-position"); data.$caption = data.$boxer.find(".boxer-caption"); data.$controls = data.$boxer.find(".boxer-control"); data.paddingVertical = (!data.isMobile) ? (parseInt(data.$boxer.css("paddingTop"), 10) + parseInt(data.$boxer.css("paddingBottom"), 10)) : (data.$boxer.find(".boxer-close").outerHeight() / 2); data.paddingHorizontal = (!data.isMobile) ? (parseInt(data.$boxer.css("paddingLeft"), 10) + parseInt(data.$boxer.css("paddingRight"), 10)) : 0; data.contentHeight = data.$boxer.outerHeight() - data.paddingVertical; data.contentWidth = data.$boxer.outerWidth() - data.paddingHorizontal; data.controlHeight = data.$controls.outerHeight(); // Center center(); // Update gallery if (data.gallery.active) { updateControls(); } // Bind events data.$window.on("resize.boxer", pub.resize) .on("keydown.boxer", onKeypress); data.$body.on("touchstart.boxer click.boxer", "#boxer-overlay, #boxer .boxer-close", onClose) .on("touchmove.boxer", killEvent); if (data.gallery.active) { data.$boxer.on("touchstart.boxer click.boxer", ".boxer-control", advanceGallery); } data.$boxer.on(transitionEvent, function(e) { killEvent(e); if ($(e.target).is(data.$boxer)) { data.$boxer.off(transitionEvent); if (isImage) { loadImage(source); } else if (isVideo) { loadVideo(source); } else if (isUrl) { loadURL(source); } else if (isElement) { cloneElement(source); } else if (isObject) { appendObject(data.$object); } else { $.error("BOXER: '" + source + "' is not valid."); } } }); $body.addClass("boxer-open"); if (!transitionSupported) { data.$boxer.trigger(transitionEvent); } if (isObject) { return data.$boxer; } } } /** * @method private * @name onClose * @description Closes active instance * @param e [object] "Event data" */ function onClose(e) { killEvent(e); if (typeof data.$boxer !== "undefined") { data.$boxer.on(transitionEvent, function(e) { killEvent(e); if ($(e.target).is(data.$boxer)) { data.$boxer.off(transitionEvent); data.$overlay.remove(); data.$boxer.remove(); // reset data data = {}; } }).addClass("animating"); $body.removeClass("boxer-open"); if (!transitionSupported) { data.$boxer.trigger(transitionEvent); } clearTimer(data.resizeTimer); // Clean up data.$window.off("resize.boxer") .off("keydown.boxer"); data.$body.off(".boxer") .removeClass("boxer-open"); if (data.gallery.active) { data.$boxer.off(".boxer"); } if (data.isMobile) { if (data.type === "image" && data.gallery.active) { data.$container.off(".boxer"); } } data.$window.trigger("close.boxer"); } } /** * @method private * @name open * @description Opens active instance */ function open() { var position = calculatePosition(), durration = data.isMobile ? 0 : data.duration; if (!data.isMobile) { data.$controls.css({ marginTop: ((data.contentHeight - data.controlHeight - data.metaHeight) / 2) }); } if (!data.visible && data.isMobile && data.gallery.active) { data.$content.on("touchstart.boxer", ".boxer-image", onTouchStart); } if (data.isMobile || data.fixed) { data.$body.addClass("boxer-open"); } data.$boxer.on(transitionEvent, function(e) { killEvent(e); if ($(e.target).is(data.$boxer)) { data.$boxer.off(transitionEvent); data.$container.on(transitionEvent, function(e) { killEvent(e); if ($(e.target).is(data.$container)) { data.$container.off(transitionEvent); data.$boxer.removeClass("animating"); data.isAnimating = false; } }); data.$boxer.removeClass("loading"); if (!transitionSupported) { data.$content.trigger(transitionEvent); } data.visible = true; // Fire callback + event data.callback.apply(data.$boxer); data.$window.trigger("open.boxer"); // Start preloading if (data.gallery.active) { preloadGallery(); } } }); if (!data.isMobile) { data.$boxer.css({ height: data.contentHeight + data.paddingVertical, width: data.contentWidth + data.paddingHorizontal, top: (!data.fixed) ? position.top : 0 }); } // Trigger event in case the content size hasn't changed var contentHasChanged = (data.oldContentHeight !== data.contentHeight || data.oldContentWidth !== data.contentWidth); if (data.isMobile || !transitionSupported || !contentHasChanged) { data.$boxer.trigger(transitionEvent); } // Track content size changes data.oldContentHeight = data.contentHeight; data.oldContentWidth = data.contentWidth; } /** * @method private * @name size * @description Sizes active instance */ function size() { if (data.visible && !data.isMobile) { var position = calculatePosition(); data.$controls.css({ marginTop: ((data.contentHeight - data.controlHeight - data.metaHeight) / 2) }); data.$boxer.css({ height: data.contentHeight + data.paddingVertical, width: data.contentWidth + data.paddingHorizontal, top: (!data.fixed) ? position.top : 0 }); } } /** * @method private * @name center * @description Centers instance */ function center() { var position = calculatePosition(); data.$boxer.css({ top: (!data.fixed) ? position.top : 0 }); } /** * @method private * @name calculatePosition * @description Calculates positions * @return [object] "Object containing top and left positions" */ function calculatePosition() { if (data.isMobile) { return { left: 0, top: 0 }; } var pos = { left: (data.$window.width() - data.contentWidth - data.paddingHorizontal) / 2, top: (data.top <= 0) ? ((data.$window.height() - data.contentHeight - data.paddingVertical) / 2) : data.top }; if (data.fixed !== true) { pos.top += data.$window.scrollTop(); } return pos; } /** * @method private * @name formatCaption * @description Formats caption * @param $target [jQuery object] "Target element" */ function formatCaption($target) { var title = $target.attr("title"); return (title !== undefined && title.trim() !== "") ? '

' + title.trim() + '

' : ""; } /** * @method private * @name loadImage * @description Loads source image * @param source [string] "Source image URL" */ function loadImage(source) { // Cache current image data.$image = $(""); data.$image.load(function() { data.$image.off("load, error"); var naturalSize = calculateNaturalSize(data.$image); data.naturalHeight = naturalSize.naturalHeight; data.naturalWidth = naturalSize.naturalWidth; if (data.retina) { data.naturalHeight /= 2; data.naturalWidth /= 2; } data.$content.prepend(data.$image); if (data.$caption.html() === "") { data.$caption.hide(); } else { data.$caption.show(); } // Size content to be sure it fits the viewport sizeImage(); open(); }).error(loadError) .attr("src", source) .addClass("boxer-image"); // If image has already loaded into cache, trigger load event if (data.$image[0].complete || data.$image[0].readyState === 4) { data.$image.trigger("load"); } } /** * @method private * @name sizeImage * @description Sizes image to fit in viewport * @param count [int] "Number of resize attempts" */ function sizeImage() { var count = 0; data.windowHeight = data.viewportHeight = data.$window.height() - data.paddingVertical; data.windowWidth = data.viewportWidth = data.$window.width() - data.paddingHorizontal; data.contentHeight = Infinity; data.contentWidth = Infinity; data.imageMarginTop = 0; data.imageMarginLeft = 0; while (data.contentHeight > data.viewportHeight && count < 2) { data.imageHeight = (count === 0) ? data.naturalHeight : data.$image.outerHeight(); data.imageWidth = (count === 0) ? data.naturalWidth : data.$image.outerWidth(); data.metaHeight = (count === 0) ? 0 : data.metaHeight; if (count === 0) { data.ratioHorizontal = data.imageHeight / data.imageWidth; data.ratioVertical = data.imageWidth / data.imageHeight; data.isWide = (data.imageWidth > data.imageHeight); } // Double check min and max if (data.imageHeight < data.minHeight) { data.minHeight = data.imageHeight; } if (data.imageWidth < data.minWidth) { data.minWidth = data.imageWidth; } if (data.isMobile) { // Get meta height before sizing data.$meta.css({ width: data.windowWidth }); data.metaHeight = data.$meta.outerHeight(true); // Content match viewport data.contentHeight = data.viewportHeight - data.paddingVertical; data.contentWidth = data.viewportWidth - data.paddingHorizontal; fitImage(); data.imageMarginTop = (data.contentHeight - data.targetImageHeight - data.metaHeight) / 2; data.imageMarginLeft = (data.contentWidth - data.targetImageWidth) / 2; } else { // Viewport should match window, less margin, padding and meta if (count === 0) { data.viewportHeight -= (data.margin + data.paddingVertical); data.viewportWidth -= (data.margin + data.paddingHorizontal); } data.viewportHeight -= data.metaHeight; fitImage(); data.contentHeight = data.targetImageHeight; data.contentWidth = data.targetImageWidth; } // Modify DOM data.$meta.css({ width: data.contentWidth }); data.$image.css({ height: data.targetImageHeight, width: data.targetImageWidth, marginTop: data.imageMarginTop, marginLeft: data.imageMarginLeft }); if (!data.isMobile) { data.metaHeight = data.$meta.outerHeight(true); data.contentHeight += data.metaHeight; } count ++; } } /** * @method private * @name fitImage * @description Calculates target image size */ function fitImage() { var height = (!data.isMobile) ? data.viewportHeight : data.contentHeight - data.metaHeight, width = (!data.isMobile) ? data.viewportWidth : data.contentWidth; if (data.isWide) { //WIDE data.targetImageWidth = width; data.targetImageHeight = data.targetImageWidth * data.ratioHorizontal; if (data.targetImageHeight > height) { data.targetImageHeight = height; data.targetImageWidth = data.targetImageHeight * data.ratioVertical; } } else { //TALL data.targetImageHeight = height; data.targetImageWidth = data.targetImageHeight * data.ratioVertical; if (data.targetImageWidth > width) { data.targetImageWidth = width; data.targetImageHeight = data.targetImageWidth * data.ratioHorizontal; } } // MAX if (data.targetImageWidth > data.imageWidth || data.targetImageHeight > data.imageHeight) { data.targetImageHeight = data.imageHeight; data.targetImageWidth = data.imageWidth; } // MIN if (data.targetImageWidth < data.minWidth || data.targetImageHeight < data.minHeight) { if (data.targetImageWidth < data.minWidth) { data.targetImageWidth = data.minWidth; data.targetImageHeight = data.targetImageWidth * data.ratioHorizontal; } else { data.targetImageHeight = data.minHeight; data.targetImageWidth = data.targetImageHeight * data.ratioVertical; } } } /** * @method private * @name loadVideo * @description Loads source video * @param source [string] "Source video URL" */ function loadVideo(source) { data.$videoWrapper = $('
'); data.$video = $('