JAL-2759 Keep numColumns up to date
[jalview.git] / examples / javascript / facebox-1.3.js
1 /*
2  * Facebox (for jQuery)
3  * version: 1.2 (05/05/2008)
4  * @requires jQuery v1.2 or later
5  *
6  * Examples at http://famspam.com/facebox/
7  *
8  * Licensed under the MIT:
9  *   http://www.opensource.org/licenses/mit-license.php
10  *
11  * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ]
12  *
13  * Usage:
14  *
15  *  jQuery(document).ready(function() {
16  *    jQuery('a[rel*=facebox]').facebox()
17  *  })
18  *
19  *  <a href="#terms" rel="facebox">Terms</a>
20  *    Loads the #terms div in the box
21  *
22  *  <a href="terms.html" rel="facebox">Terms</a>
23  *    Loads the terms.html page in the box
24  *
25  *  <a href="terms.png" rel="facebox">Terms</a>
26  *    Loads the terms.png image in the box
27  *
28  *
29  *  You can also use it programmatically:
30  *
31  *    jQuery.facebox('some html')
32  *    jQuery.facebox('some html', 'my-groovy-style')
33  *
34  *  The above will open a facebox with "some html" as the content.
35  *
36  *    jQuery.facebox(function($) {
37  *      $.get('blah.html', function(data) { $.facebox(data) })
38  *    })
39  *
40  *  The above will show a loading screen before the passed function is called,
41  *  allowing for a better ajaxy experience.
42  *
43  *  The facebox function can also display an ajax page, an image, or the contents of a div:
44  *
45  *    jQuery.facebox({ ajax: 'remote.html' })
46  *    jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
47  *    jQuery.facebox({ image: 'stairs.jpg' })
48  *    jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
49  *    jQuery.facebox({ div: '#box' })
50  *    jQuery.facebox({ div: '#box' }, 'my-groovy-style')
51  *
52  *  Want to close the facebox?  Trigger the 'close.facebox' document event:
53  *
54  *    jQuery(document).trigger('close.facebox')
55  *
56  *  Facebox also has a bunch of other hooks:
57  *
58  *    loading.facebox
59  *    beforeReveal.facebox
60  *    reveal.facebox (aliased as 'afterReveal.facebox')
61  *    init.facebox
62  *    afterClose.facebox
63  *
64  *  Simply bind a function to any of these hooks:
65  *
66  *   $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
67  *
68  */
69 (function($) {
70   $.facebox = function(data, klass) {
71     $.facebox.loading()
72
73     if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
74     else if (data.image) fillFaceboxFromImage(data.image, klass)
75     else if (data.div) fillFaceboxFromHref(data.div, klass)
76     else if ($.isFunction(data)) data.call($)
77     else $.facebox.reveal(data, klass)
78   }
79
80   /*
81    * Public, $.facebox methods
82    */
83
84   $.extend($.facebox, {
85     settings: {
86       opacity      : 0.2,
87       overlay      : true,
88       loadingImage : 'https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/loading.gif',
89       closeImage   : 'https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/cancel.png',
90       imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
91       faceboxHtml  : '\
92     <div id="facebox" style="display:none;"> \
93       <div class="popup"> \
94         <div class="content"> \
95         </div> \
96         <a href="#" class="close"><img src="https://raw.githubusercontent.com/jalview/biojson/gh-pages/images/cancel.png" title="close" class="close_image" /></a> \
97       </div> \
98     </div>'
99     },
100
101     loading: function() {
102       init()
103       if ($('#facebox .loading').length == 1) return true
104       showOverlay()
105
106       $('#facebox .content').empty()
107       $('#facebox .body').children().hide().end().
108         append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
109
110       $('#facebox').css({
111         top:    getPageScroll()[1] + (getPageHeight() / 10),
112         left:   $(window).width() / 2 - 205
113       }).show()
114
115       $(document).bind('keydown.facebox', function(e) {
116         if (e.keyCode == 27) $.facebox.close()
117         return true
118       })
119       $(document).trigger('loading.facebox')
120     },
121
122     reveal: function(data, klass) {
123       $(document).trigger('beforeReveal.facebox')
124       if (klass) $('#facebox .content').addClass(klass)
125       $('#facebox .content').append('<pre><code>'+JSON.stringify(JSON.parse(data),null,4)+'</pre></code>')
126       $('#facebox .loading').remove()
127       $('#facebox .body').children().fadeIn('normal')
128       $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2))
129       $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
130     },
131
132     close: function() {
133       $(document).trigger('close.facebox')
134       return false
135     }
136   })
137
138   /*
139    * Public, $.fn methods
140    */
141
142   $.fn.facebox = function(settings) {
143     if ($(this).length == 0) return
144
145     init(settings)
146
147     function clickHandler() {
148       $.facebox.loading(true)
149
150       // support for rel="facebox.inline_popup" syntax, to add a class
151       // also supports deprecated "facebox[.inline_popup]" syntax
152       var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
153       if (klass) klass = klass[1]
154
155       fillFaceboxFromHref(this.href, klass)
156       return false
157     }
158
159     return this.bind('click.facebox', clickHandler)
160   }
161
162   /*
163    * Private methods
164    */
165
166   // called one time to setup facebox on this page
167   function init(settings) {
168     if ($.facebox.settings.inited) return true
169     else $.facebox.settings.inited = true
170
171     $(document).trigger('init.facebox')
172     makeCompatible()
173
174     var imageTypes = $.facebox.settings.imageTypes.join('|')
175     $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i')
176
177     if (settings) $.extend($.facebox.settings, settings)
178     $('body').append($.facebox.settings.faceboxHtml)
179
180     var preload = [ new Image(), new Image() ]
181     preload[0].src = $.facebox.settings.closeImage
182     preload[1].src = $.facebox.settings.loadingImage
183
184     $('#facebox').find('.b:first, .bl').each(function() {
185       preload.push(new Image())
186       preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
187     })
188
189     $('#facebox .close').click($.facebox.close)
190     $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
191   }
192
193   // getPageScroll() by quirksmode.com
194   function getPageScroll() {
195     var xScroll, yScroll;
196     if (self.pageYOffset) {
197       yScroll = self.pageYOffset;
198       xScroll = self.pageXOffset;
199     } else if (document.documentElement && document.documentElement.scrollTop) {         // Explorer 6 Strict
200       yScroll = document.documentElement.scrollTop;
201       xScroll = document.documentElement.scrollLeft;
202     } else if (document.body) {// all other Explorers
203       yScroll = document.body.scrollTop;
204       xScroll = document.body.scrollLeft;
205     }
206     return new Array(xScroll,yScroll)
207   }
208
209   // Adapted from getPageSize() by quirksmode.com
210   function getPageHeight() {
211     var windowHeight
212     if (self.innerHeight) {     // all except Explorer
213       windowHeight = self.innerHeight;
214     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
215       windowHeight = document.documentElement.clientHeight;
216     } else if (document.body) { // other Explorers
217       windowHeight = document.body.clientHeight;
218     }
219     return windowHeight
220   }
221
222   // Backwards compatibility
223   function makeCompatible() {
224     var $s = $.facebox.settings
225
226     $s.loadingImage = $s.loading_image || $s.loadingImage
227     $s.closeImage = $s.close_image || $s.closeImage
228     $s.imageTypes = $s.image_types || $s.imageTypes
229     $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
230   }
231
232   // Figures out what you want to display and displays it
233   // formats are:
234   //     div: #id
235   //   image: blah.extension
236   //    ajax: anything else
237   function fillFaceboxFromHref(href, klass) {
238     // div
239     if (href.match(/#/)) {
240       var url    = window.location.href.split('#')[0]
241       var target = href.replace(url,'')
242       if (target == '#') return
243       $.facebox.reveal($(target).html(), klass)
244
245     // image
246     } else if (href.match($.facebox.settings.imageTypesRegexp)) {
247       fillFaceboxFromImage(href, klass)
248     // ajax
249     } else {
250       fillFaceboxFromAjax(href, klass)
251     }
252   }
253
254   function fillFaceboxFromImage(href, klass) {
255     var image = new Image()
256     image.onload = function() {
257       $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
258     }
259     image.src = href
260   }
261
262   function fillFaceboxFromAjax(href, klass) {
263     $.get(href, function(data) { $.facebox.reveal(data, klass) })
264   }
265
266   function skipOverlay() {
267     return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
268   }
269
270   function showOverlay() {
271     if (skipOverlay()) return
272
273     if ($('#facebox_overlay').length == 0)
274       $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
275
276     $('#facebox_overlay').hide().addClass("facebox_overlayBG")
277       .css('opacity', $.facebox.settings.opacity)
278       .click(function() { $(document).trigger('close.facebox') })
279       .fadeIn(200)
280     return false
281   }
282
283   function hideOverlay() {
284     if (skipOverlay()) return
285
286     $('#facebox_overlay').fadeOut(200, function(){
287       $("#facebox_overlay").removeClass("facebox_overlayBG")
288       $("#facebox_overlay").addClass("facebox_hide")
289       $("#facebox_overlay").remove()
290     })
291
292     return false
293   }
294
295   /*
296    * Bindings
297    */
298
299   $(document).bind('close.facebox', function() {
300     $(document).unbind('keydown.facebox')
301     $('#facebox').fadeOut(function() {
302       $('#facebox .content').removeClass().addClass('content')
303       $('#facebox .loading').remove()
304       $(document).trigger('afterClose.facebox')
305     })
306     hideOverlay()
307   })
308
309 })(jQuery);