X-Git-Url: http://source.jalview.org/gitweb/?a=blobdiff_plain;f=examples%2Fjavascript%2Ffacebox-1.3.js;fp=examples%2Fjavascript%2Ffacebox-1.3.js;h=ad45310384d0714ef4b87d302da073f5560d2b44;hb=2595e9d4ee0dbbd3406a98c4e49a61ccde806479;hp=0000000000000000000000000000000000000000;hpb=e20075ba805d744d7cc4976e2b8d5e5840fb0a8d;p=jalview.git diff --git a/examples/javascript/facebox-1.3.js b/examples/javascript/facebox-1.3.js new file mode 100644 index 0000000..ad45310 --- /dev/null +++ b/examples/javascript/facebox-1.3.js @@ -0,0 +1,309 @@ +/* + * Facebox (for jQuery) + * version: 1.2 (05/05/2008) + * @requires jQuery v1.2 or later + * + * Examples at http://famspam.com/facebox/ + * + * Licensed under the MIT: + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ] + * + * Usage: + * + * jQuery(document).ready(function() { + * jQuery('a[rel*=facebox]').facebox() + * }) + * + * Terms + * Loads the #terms div in the box + * + * Terms + * Loads the terms.html page in the box + * + * Terms + * Loads the terms.png image in the box + * + * + * You can also use it programmatically: + * + * jQuery.facebox('some html') + * jQuery.facebox('some html', 'my-groovy-style') + * + * The above will open a facebox with "some html" as the content. + * + * jQuery.facebox(function($) { + * $.get('blah.html', function(data) { $.facebox(data) }) + * }) + * + * The above will show a loading screen before the passed function is called, + * allowing for a better ajaxy experience. + * + * The facebox function can also display an ajax page, an image, or the contents of a div: + * + * jQuery.facebox({ ajax: 'remote.html' }) + * jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style') + * jQuery.facebox({ image: 'stairs.jpg' }) + * jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style') + * jQuery.facebox({ div: '#box' }) + * jQuery.facebox({ div: '#box' }, 'my-groovy-style') + * + * Want to close the facebox? Trigger the 'close.facebox' document event: + * + * jQuery(document).trigger('close.facebox') + * + * Facebox also has a bunch of other hooks: + * + * loading.facebox + * beforeReveal.facebox + * reveal.facebox (aliased as 'afterReveal.facebox') + * init.facebox + * afterClose.facebox + * + * Simply bind a function to any of these hooks: + * + * $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... }) + * + */ +(function($) { + $.facebox = function(data, klass) { + $.facebox.loading() + + if (data.ajax) fillFaceboxFromAjax(data.ajax, klass) + else if (data.image) fillFaceboxFromImage(data.image, klass) + else if (data.div) fillFaceboxFromHref(data.div, klass) + else if ($.isFunction(data)) data.call($) + else $.facebox.reveal(data, klass) + } + + /* + * Public, $.facebox methods + */ + + $.extend($.facebox, { + settings: { + opacity : 0.2, + overlay : true, + loadingImage : 'https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/loading.gif', + closeImage : 'https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/cancel.png', + imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ], + faceboxHtml : '\ +
' + }, + + loading: function() { + init() + if ($('#facebox .loading').length == 1) return true + showOverlay() + + $('#facebox .content').empty() + $('#facebox .body').children().hide().end(). + append('') + + $('#facebox').css({ + top: getPageScroll()[1] + (getPageHeight() / 10), + left: $(window).width() / 2 - 205 + }).show() + + $(document).bind('keydown.facebox', function(e) { + if (e.keyCode == 27) $.facebox.close() + return true + }) + $(document).trigger('loading.facebox') + }, + + reveal: function(data, klass) { + $(document).trigger('beforeReveal.facebox') + if (klass) $('#facebox .content').addClass(klass) + $('#facebox .content').append(''+JSON.stringify(JSON.parse(data),null,4)+'
')
+ $('#facebox .loading').remove()
+ $('#facebox .body').children().fadeIn('normal')
+ $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2))
+ $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
+ },
+
+ close: function() {
+ $(document).trigger('close.facebox')
+ return false
+ }
+ })
+
+ /*
+ * Public, $.fn methods
+ */
+
+ $.fn.facebox = function(settings) {
+ if ($(this).length == 0) return
+
+ init(settings)
+
+ function clickHandler() {
+ $.facebox.loading(true)
+
+ // support for rel="facebox.inline_popup" syntax, to add a class
+ // also supports deprecated "facebox[.inline_popup]" syntax
+ var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
+ if (klass) klass = klass[1]
+
+ fillFaceboxFromHref(this.href, klass)
+ return false
+ }
+
+ return this.bind('click.facebox', clickHandler)
+ }
+
+ /*
+ * Private methods
+ */
+
+ // called one time to setup facebox on this page
+ function init(settings) {
+ if ($.facebox.settings.inited) return true
+ else $.facebox.settings.inited = true
+
+ $(document).trigger('init.facebox')
+ makeCompatible()
+
+ var imageTypes = $.facebox.settings.imageTypes.join('|')
+ $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i')
+
+ if (settings) $.extend($.facebox.settings, settings)
+ $('body').append($.facebox.settings.faceboxHtml)
+
+ var preload = [ new Image(), new Image() ]
+ preload[0].src = $.facebox.settings.closeImage
+ preload[1].src = $.facebox.settings.loadingImage
+
+ $('#facebox').find('.b:first, .bl').each(function() {
+ preload.push(new Image())
+ preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
+ })
+
+ $('#facebox .close').click($.facebox.close)
+ $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
+ }
+
+ // getPageScroll() by quirksmode.com
+ function getPageScroll() {
+ var xScroll, yScroll;
+ if (self.pageYOffset) {
+ yScroll = self.pageYOffset;
+ xScroll = self.pageXOffset;
+ } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
+ yScroll = document.documentElement.scrollTop;
+ xScroll = document.documentElement.scrollLeft;
+ } else if (document.body) {// all other Explorers
+ yScroll = document.body.scrollTop;
+ xScroll = document.body.scrollLeft;
+ }
+ return new Array(xScroll,yScroll)
+ }
+
+ // Adapted from getPageSize() by quirksmode.com
+ function getPageHeight() {
+ var windowHeight
+ if (self.innerHeight) { // all except Explorer
+ windowHeight = self.innerHeight;
+ } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+ windowHeight = document.documentElement.clientHeight;
+ } else if (document.body) { // other Explorers
+ windowHeight = document.body.clientHeight;
+ }
+ return windowHeight
+ }
+
+ // Backwards compatibility
+ function makeCompatible() {
+ var $s = $.facebox.settings
+
+ $s.loadingImage = $s.loading_image || $s.loadingImage
+ $s.closeImage = $s.close_image || $s.closeImage
+ $s.imageTypes = $s.image_types || $s.imageTypes
+ $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
+ }
+
+ // Figures out what you want to display and displays it
+ // formats are:
+ // div: #id
+ // image: blah.extension
+ // ajax: anything else
+ function fillFaceboxFromHref(href, klass) {
+ // div
+ if (href.match(/#/)) {
+ var url = window.location.href.split('#')[0]
+ var target = href.replace(url,'')
+ if (target == '#') return
+ $.facebox.reveal($(target).html(), klass)
+
+ // image
+ } else if (href.match($.facebox.settings.imageTypesRegexp)) {
+ fillFaceboxFromImage(href, klass)
+ // ajax
+ } else {
+ fillFaceboxFromAjax(href, klass)
+ }
+ }
+
+ function fillFaceboxFromImage(href, klass) {
+ var image = new Image()
+ image.onload = function() {
+ $.facebox.reveal('', klass)
+ }
+ image.src = href
+ }
+
+ function fillFaceboxFromAjax(href, klass) {
+ $.get(href, function(data) { $.facebox.reveal(data, klass) })
+ }
+
+ function skipOverlay() {
+ return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
+ }
+
+ function showOverlay() {
+ if (skipOverlay()) return
+
+ if ($('#facebox_overlay').length == 0)
+ $("body").append('')
+
+ $('#facebox_overlay').hide().addClass("facebox_overlayBG")
+ .css('opacity', $.facebox.settings.opacity)
+ .click(function() { $(document).trigger('close.facebox') })
+ .fadeIn(200)
+ return false
+ }
+
+ function hideOverlay() {
+ if (skipOverlay()) return
+
+ $('#facebox_overlay').fadeOut(200, function(){
+ $("#facebox_overlay").removeClass("facebox_overlayBG")
+ $("#facebox_overlay").addClass("facebox_hide")
+ $("#facebox_overlay").remove()
+ })
+
+ return false
+ }
+
+ /*
+ * Bindings
+ */
+
+ $(document).bind('close.facebox', function() {
+ $(document).unbind('keydown.facebox')
+ $('#facebox').fadeOut(function() {
+ $('#facebox .content').removeClass().addClass('content')
+ $('#facebox .loading').remove()
+ $(document).trigger('afterClose.facebox')
+ })
+ hideOverlay()
+ })
+
+})(jQuery);