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