;(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 height [int] <100> "Initial height (while loading)" * @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" * @param width [int] <100> "Initial height (while loading)" */ var options = { callback: $.noop, customClass: "", extensions: [ "jpg", "sjpg", "jpeg", "png", "gif" ], fixed: false, formatter: $.noop, height: 100, 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, width: 100 }; /** * @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 $(this); }, /** * @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) { // Check target type var $target = $(this), $object = e.data.$object, source = ($target[0].attributes) ? $target.attr("href") || "" : "", sourceParts = source.toLowerCase().split(".").pop().split(/\#|\?/), extension = sourceParts[0], type = '', // $target.data("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") ), isElement = ( (type === "element") || (!isImage && !isVideo && !isUrl && source.substr(0, 1) === "#") ), isObject = ( (typeof $object !== "undefined") ); // 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, /* oldContainerHeight: 0, oldContainerWidth: 0, */ oldContentHeight: 0, oldContentWidth: 0 }, e.data); // Double the margin data.margin *= 2; data.containerHeight = data.height; data.containerWidth = data.width; 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 += '
'; 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 = parseInt(data.$boxer.css("paddingTop"), 10) + parseInt(data.$boxer.css("paddingBottom"), 10); data.paddingHorizontal = parseInt(data.$boxer.css("paddingLeft"), 10) + parseInt(data.$boxer.css("paddingRight"), 10); // Center / update gallery _center(); 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(); 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 = _position(), controlHeight = 0, durration = data.isMobile ? 0 : data.duration; if (!data.isMobile) { controlHeight = data.$controls.outerHeight(); data.$controls.css({ marginTop: ((data.contentHeight - controlHeight) / 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.css({ left: position.left, top: position.top }); data.$container.on(transitionEvent, function(e) { _killEvent(e); if ($(e.target).is(data.$container)) { data.$container.off(transitionEvent); data.$content.on(transitionEvent, function(e) { _killEvent(e); if ($(e.target).is(data.$content)) { data.$content.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(); } } }).css({ height: data.containerHeight, width: data.containerWidth }); /* var containerHasChanged = (data.oldContainerHeight !== data.containerHeight || data.oldContainerWidth !== data.containerWidth), */ var contentHasChanged = (data.oldContentHeight !== data.contentHeight || data.oldContentWidth !== data.contentWidth); if (data.isMobile || !transitionSupported || !contentHasChanged /* || !containerHasChanged */) { data.$container.trigger(transitionEvent); } // tracking changes /* data.oldContainerHeight = data.containerHeight; data.oldContainerWidth = data.containerWidth; */ data.oldContentHeight = data.contentHeight; data.oldContentWidth = data.contentWidth; } /** * @method private * @name _size * @description Sizes active instance * @param animate [boolean] "Flag to animate sizing" */ function _size(animate) { animate = animate || false; if (data.visible) { var position = _position(), controlHeight = 0; if (!data.isMobile) { controlHeight = data.$controls.outerHeight(); data.$controls.css({ marginTop: ((data.contentHeight - controlHeight) / 2) }); } /* if (animate) { data.$boxer.css({ left: position.left, top: position.top }, data.duration); data.$container.css({ height: data.containerHeight, width: data.containerWidth }); } else { */ data.$boxer.css({ left: position.left, top: position.top }); data.$container.css({ height: data.containerHeight, width: data.containerWidth }); /* } */ } } /** * @method private * @name _center * @description Centers instance */ function _center() { var position = _position(); data.$boxer.css({ left: position.left, top: position.top }); } /** * @method private * @name _position * @description Calculates positions * @return [object] "Object containing top and left positions" */ function _position() { if (data.isMobile) { return { left: 0, top: 0 }; } var pos = { left: (data.$window.width() - data.containerWidth - data.paddingHorizontal) / 2, top: (data.top <= 0) ? ((data.$window.height() - data.containerHeight - 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 !== "" && title !== undefined) ? '

' + title + '

' : ""; } /** * @method private * @name _loadImage * @description Loads source image * @param source [string] "Source image URL" */ function _loadImage(source) { // Cache current image data.$image = $(""); data.$image.one("load.boxer", function() { var naturalSize = _naturalSize(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(); }).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.windowWidth = data.viewportWidth = data.$window.width(); data.containerHeight = Infinity; data.contentHeight = 0; data.containerWidth = Infinity; data.contentWidth = 0; data.imageMarginTop = 0; data.imageMarginLeft = 0; while (data.containerHeight > 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.contentWidth = data.viewportWidth; // Container match viewport, less padding data.containerHeight = data.viewportHeight - data.paddingVertical; data.containerWidth = data.viewportWidth - data.paddingHorizontal; _fitImage(); data.imageMarginTop = (data.containerHeight - data.targetImageHeight - data.metaHeight) / 2; data.imageMarginLeft = (data.containerWidth - data.targetImageWidth) / 2; } else { // Viewport 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.containerHeight = data.contentHeight = data.targetImageHeight; data.containerWidth = data.contentWidth = data.targetImageWidth; } // Modify DOM data.$content.css({ height: (data.isMobile) ? data.contentHeight : "auto", width: data.contentWidth }); 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.containerHeight += data.metaHeight; } count ++; } } /** * @method private * @name _fitImage * @description Calculates target image size */ function _fitImage() { var height = (!data.isMobile) ? data.viewportHeight : data.containerHeight - data.metaHeight, width = (!data.isMobile) ? data.viewportWidth : data.containerWidth; 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 = $('