Team:NCTU Formosa/source/header-safety
From 2013.igem.org
(Difference between revisions)
Line 14: | Line 14: | ||
}); | }); | ||
/*! | /*! | ||
- | + | Colorbox v1.4.31 - 2013-09-25 | |
- | (c) | + | jQuery lightbox and modal window plugin |
- | + | (c) 2013 Jack Moore - http://www.jacklmoore.com/colorbox | |
+ | license: http://www.opensource.org/licenses/mit-license.php | ||
*/ | */ | ||
- | (function( | + | (function ($, document, window) { |
+ | var | ||
+ | // Default settings object. | ||
+ | // See http://jacklmoore.com/colorbox for details. | ||
+ | defaults = { | ||
+ | // data sources | ||
+ | html: false, | ||
+ | photo: false, | ||
+ | iframe: false, | ||
+ | inline: false, | ||
+ | |||
+ | // behavior and appearance | ||
+ | transition: "elastic", | ||
+ | speed: 300, | ||
+ | fadeOut: 300, | ||
+ | width: false, | ||
+ | initialWidth: "600", | ||
+ | innerWidth: false, | ||
+ | maxWidth: false, | ||
+ | height: false, | ||
+ | initialHeight: "450", | ||
+ | innerHeight: false, | ||
+ | maxHeight: false, | ||
+ | scalePhotos: true, | ||
+ | scrolling: true, | ||
+ | href: false, | ||
+ | title: false, | ||
+ | rel: false, | ||
+ | opacity: 0.9, | ||
+ | preloading: true, | ||
+ | className: false, | ||
+ | overlayClose: true, | ||
+ | escKey: true, | ||
+ | arrowKey: true, | ||
+ | top: false, | ||
+ | bottom: false, | ||
+ | left: false, | ||
+ | right: false, | ||
+ | fixed: false, | ||
+ | data: undefined, | ||
+ | closeButton: true, | ||
+ | fastIframe: true, | ||
+ | open: false, | ||
+ | reposition: true, | ||
+ | loop: true, | ||
+ | slideshow: false, | ||
+ | slideshowAuto: true, | ||
+ | slideshowSpeed: 2500, | ||
+ | slideshowStart: "start slideshow", | ||
+ | slideshowStop: "stop slideshow", | ||
+ | photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp)((#|\?).*)?$/i, | ||
+ | |||
+ | // alternate image paths for high-res displays | ||
+ | retinaImage: false, | ||
+ | retinaUrl: false, | ||
+ | retinaSuffix: '@2x.$1', | ||
+ | |||
+ | // internationalization | ||
+ | current: "image {current} of {total}", | ||
+ | previous: "previous", | ||
+ | next: "next", | ||
+ | close: "close", | ||
+ | xhrError: "This content failed to load.", | ||
+ | imgError: "This image failed to load.", | ||
+ | |||
+ | // accessbility | ||
+ | returnFocus: true, | ||
+ | trapFocus: true, | ||
+ | |||
+ | // callbacks | ||
+ | onOpen: false, | ||
+ | onLoad: false, | ||
+ | onComplete: false, | ||
+ | onCleanup: false, | ||
+ | onClosed: false | ||
+ | }, | ||
+ | |||
+ | // Abstracting the HTML and event identifiers for easy rebranding | ||
+ | colorbox = 'colorbox', | ||
+ | prefix = 'cbox', | ||
+ | boxElement = prefix + 'Element', | ||
+ | |||
+ | // Events | ||
+ | event_open = prefix + '_open', | ||
+ | event_load = prefix + '_load', | ||
+ | event_complete = prefix + '_complete', | ||
+ | event_cleanup = prefix + '_cleanup', | ||
+ | event_closed = prefix + '_closed', | ||
+ | event_purge = prefix + '_purge', | ||
+ | |||
+ | // Cached jQuery Object Variables | ||
+ | $overlay, | ||
+ | $box, | ||
+ | $wrap, | ||
+ | $content, | ||
+ | $topBorder, | ||
+ | $leftBorder, | ||
+ | $rightBorder, | ||
+ | $bottomBorder, | ||
+ | $related, | ||
+ | $window, | ||
+ | $loaded, | ||
+ | $loadingBay, | ||
+ | $loadingOverlay, | ||
+ | $title, | ||
+ | $current, | ||
+ | $slideshow, | ||
+ | $next, | ||
+ | $prev, | ||
+ | $close, | ||
+ | $groupControls, | ||
+ | $events = $('<a/>'), | ||
+ | |||
+ | // Variables for cached values or use across multiple functions | ||
+ | settings, | ||
+ | interfaceHeight, | ||
+ | interfaceWidth, | ||
+ | loadedHeight, | ||
+ | loadedWidth, | ||
+ | element, | ||
+ | index, | ||
+ | photo, | ||
+ | open, | ||
+ | active, | ||
+ | closing, | ||
+ | loadingTimer, | ||
+ | publicMethod, | ||
+ | div = "div", | ||
+ | className, | ||
+ | requests = 0, | ||
+ | previousCSS = {}, | ||
+ | init; | ||
+ | |||
+ | // **************** | ||
+ | // HELPER FUNCTIONS | ||
+ | // **************** | ||
+ | |||
+ | // Convenience function for creating new jQuery objects | ||
+ | function $tag(tag, id, css) { | ||
+ | var element = document.createElement(tag); | ||
+ | |||
+ | if (id) { | ||
+ | element.id = prefix + id; | ||
+ | } | ||
+ | |||
+ | if (css) { | ||
+ | element.style.cssText = css; | ||
+ | } | ||
+ | |||
+ | return $(element); | ||
+ | } | ||
+ | |||
+ | // Get the window height using innerHeight when available to avoid an issue with iOS | ||
+ | // http://bugs.jquery.com/ticket/6724 | ||
+ | function winheight() { | ||
+ | return window.innerHeight ? window.innerHeight : $(window).height(); | ||
+ | } | ||
+ | |||
+ | // Determine the next and previous members in a group. | ||
+ | function getIndex(increment) { | ||
+ | var | ||
+ | max = $related.length, | ||
+ | newIndex = (index + increment) % max; | ||
+ | |||
+ | return (newIndex < 0) ? max + newIndex : newIndex; | ||
+ | } | ||
+ | |||
+ | // Convert '%' and 'px' values to integers | ||
+ | function setSize(size, dimension) { | ||
+ | return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)); | ||
+ | } | ||
+ | |||
+ | // Checks an href to see if it is a photo. | ||
+ | // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex. | ||
+ | function isImage(settings, url) { | ||
+ | return settings.photo || settings.photoRegex.test(url); | ||
+ | } | ||
+ | |||
+ | function retinaUrl(settings, url) { | ||
+ | return settings.retinaUrl && window.devicePixelRatio > 1 ? url.replace(settings.photoRegex, settings.retinaSuffix) : url; | ||
+ | } | ||
+ | |||
+ | function trapFocus(e) { | ||
+ | if ('contains' in $box[0] && !$box[0].contains(e.target)) { | ||
+ | e.stopPropagation(); | ||
+ | $box.focus(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Assigns function results to their respective properties | ||
+ | function makeSettings() { | ||
+ | var i, | ||
+ | data = $.data(element, colorbox); | ||
+ | |||
+ | if (data == null) { | ||
+ | settings = $.extend({}, defaults); | ||
+ | if (console && console.log) { | ||
+ | console.log('Error: cboxElement missing settings object'); | ||
+ | } | ||
+ | } else { | ||
+ | settings = $.extend({}, data); | ||
+ | } | ||
+ | |||
+ | for (i in settings) { | ||
+ | if ($.isFunction(settings[i]) && i.slice(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time. | ||
+ | settings[i] = settings[i].call(element); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | settings.rel = settings.rel || element.rel || $(element).data('rel') || 'nofollow'; | ||
+ | settings.href = settings.href || $(element).attr('href'); | ||
+ | settings.title = settings.title || element.title; | ||
+ | |||
+ | if (typeof settings.href === "string") { | ||
+ | settings.href = $.trim(settings.href); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function trigger(event, callback) { | ||
+ | // for external use | ||
+ | $(document).trigger(event); | ||
+ | |||
+ | // for internal use | ||
+ | $events.trigger(event); | ||
+ | |||
+ | if ($.isFunction(callback)) { | ||
+ | callback.call(element); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | var slideshow = (function(){ | ||
+ | var active, | ||
+ | className = prefix + "Slideshow_", | ||
+ | click = "click." + prefix, | ||
+ | timeOut; | ||
+ | |||
+ | function clear () { | ||
+ | clearTimeout(timeOut); | ||
+ | } | ||
+ | |||
+ | function set() { | ||
+ | if (settings.loop || $related[index + 1]) { | ||
+ | clear(); | ||
+ | timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function start() { | ||
+ | $slideshow | ||
+ | .html(settings.slideshowStop) | ||
+ | .unbind(click) | ||
+ | .one(click, stop); | ||
+ | |||
+ | $events | ||
+ | .bind(event_complete, set) | ||
+ | .bind(event_load, clear); | ||
+ | |||
+ | $box.removeClass(className + "off").addClass(className + "on"); | ||
+ | } | ||
+ | |||
+ | function stop() { | ||
+ | clear(); | ||
+ | |||
+ | $events | ||
+ | .unbind(event_complete, set) | ||
+ | .unbind(event_load, clear); | ||
+ | |||
+ | $slideshow | ||
+ | .html(settings.slideshowStart) | ||
+ | .unbind(click) | ||
+ | .one(click, function () { | ||
+ | publicMethod.next(); | ||
+ | start(); | ||
+ | }); | ||
+ | |||
+ | $box.removeClass(className + "on").addClass(className + "off"); | ||
+ | } | ||
+ | |||
+ | function reset() { | ||
+ | active = false; | ||
+ | $slideshow.hide(); | ||
+ | clear(); | ||
+ | $events | ||
+ | .unbind(event_complete, set) | ||
+ | .unbind(event_load, clear); | ||
+ | $box.removeClass(className + "off " + className + "on"); | ||
+ | } | ||
+ | |||
+ | return function(){ | ||
+ | if (active) { | ||
+ | if (!settings.slideshow) { | ||
+ | $events.unbind(event_cleanup, reset); | ||
+ | reset(); | ||
+ | } | ||
+ | } else { | ||
+ | if (settings.slideshow && $related[1]) { | ||
+ | active = true; | ||
+ | $events.one(event_cleanup, reset); | ||
+ | if (settings.slideshowAuto) { | ||
+ | start(); | ||
+ | } else { | ||
+ | stop(); | ||
+ | } | ||
+ | $slideshow.show(); | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | }()); | ||
+ | |||
+ | |||
+ | function launch(target) { | ||
+ | if (!closing) { | ||
+ | |||
+ | element = target; | ||
+ | |||
+ | makeSettings(); | ||
+ | |||
+ | $related = $(element); | ||
+ | |||
+ | index = 0; | ||
+ | |||
+ | if (settings.rel !== 'nofollow') { | ||
+ | $related = $('.' + boxElement).filter(function () { | ||
+ | var data = $.data(this, colorbox), | ||
+ | relRelated; | ||
+ | |||
+ | if (data) { | ||
+ | relRelated = $(this).data('rel') || data.rel || this.rel; | ||
+ | } | ||
+ | |||
+ | return (relRelated === settings.rel); | ||
+ | }); | ||
+ | index = $related.index(element); | ||
+ | |||
+ | // Check direct calls to Colorbox. | ||
+ | if (index === -1) { | ||
+ | $related = $related.add(element); | ||
+ | index = $related.length - 1; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $overlay.css({ | ||
+ | opacity: parseFloat(settings.opacity), | ||
+ | cursor: settings.overlayClose ? "pointer" : "auto", | ||
+ | visibility: 'visible' | ||
+ | }).show(); | ||
+ | |||
+ | |||
+ | if (className) { | ||
+ | $box.add($overlay).removeClass(className); | ||
+ | } | ||
+ | if (settings.className) { | ||
+ | $box.add($overlay).addClass(settings.className); | ||
+ | } | ||
+ | className = settings.className; | ||
+ | |||
+ | if (settings.closeButton) { | ||
+ | $close.html(settings.close).appendTo($content); | ||
+ | } else { | ||
+ | $close.appendTo('<div/>'); | ||
+ | } | ||
+ | |||
+ | if (!open) { | ||
+ | open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. | ||
+ | |||
+ | // Show colorbox so the sizes can be calculated in older versions of jQuery | ||
+ | $box.css({visibility:'hidden', display:'block'}); | ||
+ | |||
+ | $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden'); | ||
+ | $content.css({width:'', height:''}).append($loaded); | ||
+ | |||
+ | // Cache values needed for size calculations | ||
+ | interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height(); | ||
+ | interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width(); | ||
+ | loadedHeight = $loaded.outerHeight(true); | ||
+ | loadedWidth = $loaded.outerWidth(true); | ||
+ | |||
+ | // Opens inital empty Colorbox prior to content being loaded. | ||
+ | settings.w = setSize(settings.initialWidth, 'x'); | ||
+ | settings.h = setSize(settings.initialHeight, 'y'); | ||
+ | $loaded.css({width:'', height:settings.h}); | ||
+ | publicMethod.position(); | ||
+ | |||
+ | trigger(event_open, settings.onOpen); | ||
+ | |||
+ | $groupControls.add($title).hide(); | ||
+ | |||
+ | $box.focus(); | ||
+ | |||
+ | if (settings.trapFocus) { | ||
+ | // Confine focus to the modal | ||
+ | // Uses event capturing that is not supported in IE8- | ||
+ | if (document.addEventListener) { | ||
+ | |||
+ | document.addEventListener('focus', trapFocus, true); | ||
+ | |||
+ | $events.one(event_closed, function () { | ||
+ | document.removeEventListener('focus', trapFocus, true); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Return focus on closing | ||
+ | if (settings.returnFocus) { | ||
+ | $events.one(event_closed, function () { | ||
+ | $(element).focus(); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | load(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Colorbox's markup needs to be added to the DOM prior to being called | ||
+ | // so that the browser will go ahead and load the CSS background images. | ||
+ | function appendHTML() { | ||
+ | if (!$box && document.body) { | ||
+ | init = false; | ||
+ | $window = $(window); | ||
+ | $box = $tag(div).attr({ | ||
+ | id: colorbox, | ||
+ | 'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS. | ||
+ | role: 'dialog', | ||
+ | tabindex: '-1' | ||
+ | }).hide(); | ||
+ | $overlay = $tag(div, "Overlay").hide(); | ||
+ | $loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]); | ||
+ | $wrap = $tag(div, "Wrapper"); | ||
+ | $content = $tag(div, "Content").append( | ||
+ | $title = $tag(div, "Title"), | ||
+ | $current = $tag(div, "Current"), | ||
+ | $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}), | ||
+ | $next = $('<button type="button"/>').attr({id:prefix+'Next'}), | ||
+ | $slideshow = $tag('button', "Slideshow"), | ||
+ | $loadingOverlay | ||
+ | ); | ||
+ | |||
+ | $close = $('<button type="button"/>').attr({id:prefix+'Close'}); | ||
+ | |||
+ | $wrap.append( // The 3x3 Grid that makes up Colorbox | ||
+ | $tag(div).append( | ||
+ | $tag(div, "TopLeft"), | ||
+ | $topBorder = $tag(div, "TopCenter"), | ||
+ | $tag(div, "TopRight") | ||
+ | ), | ||
+ | $tag(div, false, 'clear:left').append( | ||
+ | $leftBorder = $tag(div, "MiddleLeft"), | ||
+ | $content, | ||
+ | $rightBorder = $tag(div, "MiddleRight") | ||
+ | ), | ||
+ | $tag(div, false, 'clear:left').append( | ||
+ | $tag(div, "BottomLeft"), | ||
+ | $bottomBorder = $tag(div, "BottomCenter"), | ||
+ | $tag(div, "BottomRight") | ||
+ | ) | ||
+ | ).find('div div').css({'float': 'left'}); | ||
+ | |||
+ | $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none'); | ||
+ | |||
+ | $groupControls = $next.add($prev).add($current).add($slideshow); | ||
+ | |||
+ | $(document.body).append($overlay, $box.append($wrap, $loadingBay)); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Add Colorbox's event bindings | ||
+ | function addBindings() { | ||
+ | function clickHandler(e) { | ||
+ | // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt. | ||
+ | // See: http://jacklmoore.com/notes/click-events/ | ||
+ | if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey)) { | ||
+ | e.preventDefault(); | ||
+ | launch(this); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if ($box) { | ||
+ | if (!init) { | ||
+ | init = true; | ||
+ | |||
+ | // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly. | ||
+ | $next.click(function () { | ||
+ | publicMethod.next(); | ||
+ | }); | ||
+ | $prev.click(function () { | ||
+ | publicMethod.prev(); | ||
+ | }); | ||
+ | $close.click(function () { | ||
+ | publicMethod.close(); | ||
+ | }); | ||
+ | $overlay.click(function () { | ||
+ | if (settings.overlayClose) { | ||
+ | publicMethod.close(); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // Key Bindings | ||
+ | $(document).bind('keydown.' + prefix, function (e) { | ||
+ | var key = e.keyCode; | ||
+ | if (open && settings.escKey && key === 27) { | ||
+ | e.preventDefault(); | ||
+ | publicMethod.close(); | ||
+ | } | ||
+ | if (open && settings.arrowKey && $related[1] && !e.altKey) { | ||
+ | if (key === 37) { | ||
+ | e.preventDefault(); | ||
+ | $prev.click(); | ||
+ | } else if (key === 39) { | ||
+ | e.preventDefault(); | ||
+ | $next.click(); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | if ($.isFunction($.fn.on)) { | ||
+ | // For jQuery 1.7+ | ||
+ | $(document).on('click.'+prefix, '.'+boxElement, clickHandler); | ||
+ | } else { | ||
+ | // For jQuery 1.3.x -> 1.6.x | ||
+ | // This code is never reached in jQuery 1.9, so do not contact me about 'live' being removed. | ||
+ | // This is not here for jQuery 1.9, it's here for legacy users. | ||
+ | $('.'+boxElement).live('click.'+prefix, clickHandler); | ||
+ | } | ||
+ | } | ||
+ | return true; | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | // Don't do anything if Colorbox already exists. | ||
+ | if ($.colorbox) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | // Append the HTML when the DOM loads | ||
+ | $(appendHTML); | ||
+ | |||
+ | |||
+ | // **************** | ||
+ | // PUBLIC FUNCTIONS | ||
+ | // Usage format: $.colorbox.close(); | ||
+ | // Usage from within an iframe: parent.jQuery.colorbox.close(); | ||
+ | // **************** | ||
+ | |||
+ | publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) { | ||
+ | var $this = this; | ||
+ | |||
+ | options = options || {}; | ||
+ | |||
+ | appendHTML(); | ||
+ | |||
+ | if (addBindings()) { | ||
+ | if ($.isFunction($this)) { // assume a call to $.colorbox | ||
+ | $this = $('<a/>'); | ||
+ | options.open = true; | ||
+ | } else if (!$this[0]) { // colorbox being applied to empty collection | ||
+ | return $this; | ||
+ | } | ||
+ | |||
+ | if (callback) { | ||
+ | options.onComplete = callback; | ||
+ | } | ||
+ | |||
+ | $this.each(function () { | ||
+ | $.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options)); | ||
+ | }).addClass(boxElement); | ||
+ | |||
+ | if (($.isFunction(options.open) && options.open.call($this)) || options.open) { | ||
+ | launch($this[0]); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | return $this; | ||
+ | }; | ||
+ | |||
+ | publicMethod.position = function (speed, loadedCallback) { | ||
+ | var | ||
+ | css, | ||
+ | top = 0, | ||
+ | left = 0, | ||
+ | offset = $box.offset(), | ||
+ | scrollTop, | ||
+ | scrollLeft; | ||
+ | |||
+ | $window.unbind('resize.' + prefix); | ||
+ | |||
+ | // remove the modal so that it doesn't influence the document width/height | ||
+ | $box.css({top: -9e4, left: -9e4}); | ||
+ | |||
+ | scrollTop = $window.scrollTop(); | ||
+ | scrollLeft = $window.scrollLeft(); | ||
+ | |||
+ | if (settings.fixed) { | ||
+ | offset.top -= scrollTop; | ||
+ | offset.left -= scrollLeft; | ||
+ | $box.css({position: 'fixed'}); | ||
+ | } else { | ||
+ | top = scrollTop; | ||
+ | left = scrollLeft; | ||
+ | $box.css({position: 'absolute'}); | ||
+ | } | ||
+ | |||
+ | // keeps the top and left positions within the browser's viewport. | ||
+ | if (settings.right !== false) { | ||
+ | left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0); | ||
+ | } else if (settings.left !== false) { | ||
+ | left += setSize(settings.left, 'x'); | ||
+ | } else { | ||
+ | left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2); | ||
+ | } | ||
+ | |||
+ | if (settings.bottom !== false) { | ||
+ | top += Math.max(winheight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0); | ||
+ | } else if (settings.top !== false) { | ||
+ | top += setSize(settings.top, 'y'); | ||
+ | } else { | ||
+ | top += Math.round(Math.max(winheight() - settings.h - loadedHeight - interfaceHeight, 0) / 2); | ||
+ | } | ||
+ | |||
+ | $box.css({top: offset.top, left: offset.left, visibility:'visible'}); | ||
+ | |||
+ | // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly, | ||
+ | // but it has to be shrank down around the size of div#colorbox when it's done. If not, | ||
+ | // it can invoke an obscure IE bug when using iframes. | ||
+ | $wrap[0].style.width = $wrap[0].style.height = "9999px"; | ||
+ | |||
+ | function modalDimensions() { | ||
+ | $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt($box[0].style.width,10) - interfaceWidth)+'px'; | ||
+ | $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt($box[0].style.height,10) - interfaceHeight)+'px'; | ||
+ | } | ||
+ | |||
+ | css = {width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left}; | ||
+ | |||
+ | // setting the speed to 0 if the content hasn't changed size or position | ||
+ | if (speed) { | ||
+ | var tempSpeed = 0; | ||
+ | $.each(css, function(i){ | ||
+ | if (css[i] !== previousCSS[i]) { | ||
+ | tempSpeed = speed; | ||
+ | return; | ||
+ | } | ||
+ | }); | ||
+ | speed = tempSpeed; | ||
+ | } | ||
+ | |||
+ | previousCSS = css; | ||
+ | |||
+ | if (!speed) { | ||
+ | $box.css(css); | ||
+ | } | ||
+ | |||
+ | $box.dequeue().animate(css, { | ||
+ | duration: speed || 0, | ||
+ | complete: function () { | ||
+ | modalDimensions(); | ||
+ | |||
+ | active = false; | ||
+ | |||
+ | // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation. | ||
+ | $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px"; | ||
+ | $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px"; | ||
+ | |||
+ | if (settings.reposition) { | ||
+ | setTimeout(function () { // small delay before binding onresize due to an IE8 bug. | ||
+ | $window.bind('resize.' + prefix, publicMethod.position); | ||
+ | }, 1); | ||
+ | } | ||
+ | |||
+ | if (loadedCallback) { | ||
+ | loadedCallback(); | ||
+ | } | ||
+ | }, | ||
+ | step: modalDimensions | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | publicMethod.resize = function (options) { | ||
+ | var scrolltop; | ||
+ | |||
+ | if (open) { | ||
+ | options = options || {}; | ||
+ | |||
+ | if (options.width) { | ||
+ | settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth; | ||
+ | } | ||
+ | |||
+ | if (options.innerWidth) { | ||
+ | settings.w = setSize(options.innerWidth, 'x'); | ||
+ | } | ||
+ | |||
+ | $loaded.css({width: settings.w}); | ||
+ | |||
+ | if (options.height) { | ||
+ | settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight; | ||
+ | } | ||
+ | |||
+ | if (options.innerHeight) { | ||
+ | settings.h = setSize(options.innerHeight, 'y'); | ||
+ | } | ||
+ | |||
+ | if (!options.innerHeight && !options.height) { | ||
+ | scrolltop = $loaded.scrollTop(); | ||
+ | $loaded.css({height: "auto"}); | ||
+ | settings.h = $loaded.height(); | ||
+ | } | ||
+ | |||
+ | $loaded.css({height: settings.h}); | ||
+ | |||
+ | if(scrolltop) { | ||
+ | $loaded.scrollTop(scrolltop); | ||
+ | } | ||
+ | |||
+ | publicMethod.position(settings.transition === "none" ? 0 : settings.speed); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | publicMethod.prep = function (object) { | ||
+ | if (!open) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | var callback, speed = settings.transition === "none" ? 0 : settings.speed; | ||
+ | |||
+ | $loaded.empty().remove(); // Using empty first may prevent some IE7 issues. | ||
+ | |||
+ | $loaded = $tag(div, 'LoadedContent').append(object); | ||
+ | |||
+ | function getWidth() { | ||
+ | settings.w = settings.w || $loaded.width(); | ||
+ | settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w; | ||
+ | return settings.w; | ||
+ | } | ||
+ | function getHeight() { | ||
+ | settings.h = settings.h || $loaded.height(); | ||
+ | settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h; | ||
+ | return settings.h; | ||
+ | } | ||
+ | |||
+ | $loaded.hide() | ||
+ | .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations. | ||
+ | .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'}) | ||
+ | .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height. | ||
+ | .prependTo($content); | ||
+ | |||
+ | $loadingBay.hide(); | ||
+ | |||
+ | // floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width. | ||
+ | |||
+ | $(photo).css({'float': 'none'}); | ||
+ | |||
+ | callback = function () { | ||
+ | var total = $related.length, | ||
+ | iframe, | ||
+ | frameBorder = 'frameBorder', | ||
+ | allowTransparency = 'allowTransparency', | ||
+ | complete; | ||
+ | |||
+ | if (!open) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | function removeFilter() { // Needed for IE7 & IE8 in versions of jQuery prior to 1.7.2 | ||
+ | if ($.support.opacity === false) { | ||
+ | $box[0].style.removeAttribute('filter'); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | complete = function () { | ||
+ | clearTimeout(loadingTimer); | ||
+ | $loadingOverlay.hide(); | ||
+ | trigger(event_complete, settings.onComplete); | ||
+ | }; | ||
+ | |||
+ | |||
+ | $title.html(settings.title).add($loaded).show(); | ||
+ | |||
+ | if (total > 1) { // handle grouping | ||
+ | if (typeof settings.current === "string") { | ||
+ | $current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show(); | ||
+ | } | ||
+ | |||
+ | $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next); | ||
+ | $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous); | ||
+ | |||
+ | slideshow(); | ||
+ | |||
+ | // Preloads images within a rel group | ||
+ | if (settings.preloading) { | ||
+ | $.each([getIndex(-1), getIndex(1)], function(){ | ||
+ | var src, | ||
+ | img, | ||
+ | i = $related[this], | ||
+ | data = $.data(i, colorbox); | ||
+ | |||
+ | if (data && data.href) { | ||
+ | src = data.href; | ||
+ | if ($.isFunction(src)) { | ||
+ | src = src.call(i); | ||
+ | } | ||
+ | } else { | ||
+ | src = $(i).attr('href'); | ||
+ | } | ||
+ | |||
+ | if (src && isImage(data, src)) { | ||
+ | src = retinaUrl(data, src); | ||
+ | img = document.createElement('img'); | ||
+ | img.src = src; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | } else { | ||
+ | $groupControls.hide(); | ||
+ | } | ||
+ | |||
+ | if (settings.iframe) { | ||
+ | iframe = $tag('iframe')[0]; | ||
+ | |||
+ | if (frameBorder in iframe) { | ||
+ | iframe[frameBorder] = 0; | ||
+ | } | ||
+ | |||
+ | if (allowTransparency in iframe) { | ||
+ | iframe[allowTransparency] = "true"; | ||
+ | } | ||
+ | |||
+ | if (!settings.scrolling) { | ||
+ | iframe.scrolling = "no"; | ||
+ | } | ||
+ | |||
+ | $(iframe) | ||
+ | .attr({ | ||
+ | src: settings.href, | ||
+ | name: (new Date()).getTime(), // give the iframe a unique name to prevent caching | ||
+ | 'class': prefix + 'Iframe', | ||
+ | allowFullScreen : true, // allow HTML5 video to go fullscreen | ||
+ | webkitAllowFullScreen : true, | ||
+ | mozallowfullscreen : true | ||
+ | }) | ||
+ | .one('load', complete) | ||
+ | .appendTo($loaded); | ||
+ | |||
+ | $events.one(event_purge, function () { | ||
+ | iframe.src = "//about:blank"; | ||
+ | }); | ||
+ | |||
+ | if (settings.fastIframe) { | ||
+ | $(iframe).trigger('load'); | ||
+ | } | ||
+ | } else { | ||
+ | complete(); | ||
+ | } | ||
+ | |||
+ | if (settings.transition === 'fade') { | ||
+ | $box.fadeTo(speed, 1, removeFilter); | ||
+ | } else { | ||
+ | removeFilter(); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | if (settings.transition === 'fade') { | ||
+ | $box.fadeTo(speed, 0, function () { | ||
+ | publicMethod.position(0, callback); | ||
+ | }); | ||
+ | } else { | ||
+ | publicMethod.position(speed, callback); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | function load () { | ||
+ | var href, setResize, prep = publicMethod.prep, $inline, request = ++requests; | ||
+ | |||
+ | active = true; | ||
+ | |||
+ | photo = false; | ||
+ | |||
+ | element = $related[index]; | ||
+ | |||
+ | makeSettings(); | ||
+ | |||
+ | trigger(event_purge); | ||
+ | |||
+ | trigger(event_load, settings.onLoad); | ||
+ | |||
+ | settings.h = settings.height ? | ||
+ | setSize(settings.height, 'y') - loadedHeight - interfaceHeight : | ||
+ | settings.innerHeight && setSize(settings.innerHeight, 'y'); | ||
+ | |||
+ | settings.w = settings.width ? | ||
+ | setSize(settings.width, 'x') - loadedWidth - interfaceWidth : | ||
+ | settings.innerWidth && setSize(settings.innerWidth, 'x'); | ||
+ | |||
+ | // Sets the minimum dimensions for use in image scaling | ||
+ | settings.mw = settings.w; | ||
+ | settings.mh = settings.h; | ||
+ | |||
+ | // Re-evaluate the minimum width and height based on maxWidth and maxHeight values. | ||
+ | // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead. | ||
+ | if (settings.maxWidth) { | ||
+ | settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth; | ||
+ | settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw; | ||
+ | } | ||
+ | if (settings.maxHeight) { | ||
+ | settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight; | ||
+ | settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh; | ||
+ | } | ||
+ | |||
+ | href = settings.href; | ||
+ | |||
+ | loadingTimer = setTimeout(function () { | ||
+ | $loadingOverlay.show(); | ||
+ | }, 100); | ||
+ | |||
+ | if (settings.inline) { | ||
+ | // Inserts an empty placeholder where inline content is being pulled from. | ||
+ | // An event is bound to put inline content back when Colorbox closes or loads new content. | ||
+ | $inline = $tag(div).hide().insertBefore($(href)[0]); | ||
+ | |||
+ | $events.one(event_purge, function () { | ||
+ | $inline.replaceWith($loaded.children()); | ||
+ | }); | ||
+ | |||
+ | prep($(href)); | ||
+ | } else if (settings.iframe) { | ||
+ | // IFrame element won't be added to the DOM until it is ready to be displayed, | ||
+ | // to avoid problems with DOM-ready JS that might be trying to run in that iframe. | ||
+ | prep(" "); | ||
+ | } else if (settings.html) { | ||
+ | prep(settings.html); | ||
+ | } else if (isImage(settings, href)) { | ||
+ | |||
+ | href = retinaUrl(settings, href); | ||
+ | |||
+ | photo = document.createElement('img'); | ||
+ | |||
+ | $(photo) | ||
+ | .addClass(prefix + 'Photo') | ||
+ | .bind('error',function () { | ||
+ | settings.title = false; | ||
+ | prep($tag(div, 'Error').html(settings.imgError)); | ||
+ | }) | ||
+ | .one('load', function () { | ||
+ | var percent; | ||
+ | |||
+ | if (request !== requests) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | $.each(['alt', 'longdesc', 'aria-describedby'], function(i,val){ | ||
+ | var attr = $(element).attr(val) || $(element).attr('data-'+val); | ||
+ | if (attr) { | ||
+ | photo.setAttribute(val, attr); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | if (settings.retinaImage && window.devicePixelRatio > 1) { | ||
+ | photo.height = photo.height / window.devicePixelRatio; | ||
+ | photo.width = photo.width / window.devicePixelRatio; | ||
+ | } | ||
+ | |||
+ | if (settings.scalePhotos) { | ||
+ | setResize = function () { | ||
+ | photo.height -= photo.height * percent; | ||
+ | photo.width -= photo.width * percent; | ||
+ | }; | ||
+ | if (settings.mw && photo.width > settings.mw) { | ||
+ | percent = (photo.width - settings.mw) / photo.width; | ||
+ | setResize(); | ||
+ | } | ||
+ | if (settings.mh && photo.height > settings.mh) { | ||
+ | percent = (photo.height - settings.mh) / photo.height; | ||
+ | setResize(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if (settings.h) { | ||
+ | photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px'; | ||
+ | } | ||
+ | |||
+ | if ($related[1] && (settings.loop || $related[index + 1])) { | ||
+ | photo.style.cursor = 'pointer'; | ||
+ | photo.onclick = function () { | ||
+ | publicMethod.next(); | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | photo.style.width = photo.width + 'px'; | ||
+ | photo.style.height = photo.height + 'px'; | ||
+ | |||
+ | setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise. | ||
+ | prep(photo); | ||
+ | }, 1); | ||
+ | }); | ||
+ | |||
+ | setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise. | ||
+ | photo.src = href; | ||
+ | }, 1); | ||
+ | } else if (href) { | ||
+ | $loadingBay.load(href, settings.data, function (data, status) { | ||
+ | if (request === requests) { | ||
+ | prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents()); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Navigates to the next page/image in a set. | ||
+ | publicMethod.next = function () { | ||
+ | if (!active && $related[1] && (settings.loop || $related[index + 1])) { | ||
+ | index = getIndex(1); | ||
+ | launch($related[index]); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | publicMethod.prev = function () { | ||
+ | if (!active && $related[1] && (settings.loop || index)) { | ||
+ | index = getIndex(-1); | ||
+ | launch($related[index]); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | // Note: to use this within an iframe use the following format: parent.jQuery.colorbox.close(); | ||
+ | publicMethod.close = function () { | ||
+ | if (open && !closing) { | ||
+ | |||
+ | closing = true; | ||
+ | |||
+ | open = false; | ||
+ | |||
+ | trigger(event_cleanup, settings.onCleanup); | ||
+ | |||
+ | $window.unbind('.' + prefix); | ||
+ | |||
+ | $overlay.fadeTo(settings.fadeOut || 0, 0); | ||
+ | |||
+ | $box.stop().fadeTo(settings.fadeOut || 0, 0, function () { | ||
+ | |||
+ | $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide(); | ||
+ | |||
+ | trigger(event_purge); | ||
+ | |||
+ | $loaded.empty().remove(); // Using empty first may prevent some IE7 issues. | ||
+ | |||
+ | setTimeout(function () { | ||
+ | closing = false; | ||
+ | trigger(event_closed, settings.onClosed); | ||
+ | }, 1); | ||
+ | }); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | // Removes changes Colorbox made to the document, but does not remove the plugin. | ||
+ | publicMethod.remove = function () { | ||
+ | if (!$box) { return; } | ||
+ | |||
+ | $box.stop(); | ||
+ | $.colorbox.close(); | ||
+ | $box.stop().remove(); | ||
+ | $overlay.remove(); | ||
+ | closing = false; | ||
+ | $box = null; | ||
+ | $('.' + boxElement) | ||
+ | .removeData(colorbox) | ||
+ | .removeClass(boxElement); | ||
+ | |||
+ | $(document).unbind('click.'+prefix); | ||
+ | }; | ||
+ | |||
+ | // A method for fetching the current element Colorbox is referencing. | ||
+ | // returns a jQuery object. | ||
+ | publicMethod.element = function () { | ||
+ | return $(element); | ||
+ | }; | ||
+ | |||
+ | publicMethod.settings = defaults; | ||
+ | |||
+ | }(jQuery, document, window)); | ||
</script> | </script> |
Revision as of 13:43, 26 September 2013