/* Facebox for Lowpro, version 1.0
* By Brian Landau
*
* Heavily based on Facebox by Chris Wanstrath - http://famspam.com/facebox
* First ported to Prototype by Phil Burrows - http://blog.philburrows.com
*
* Licensed under the MIT:
* http://www.opensource.org/licenses/mit-license.php
*
* Dependencies: prototype & script.aculo.us + lowpro + images & CSS files from original facebox
* Usage:
* Event.addBehavior({
* 'a#fbox' : Facebox
* });
*
*--------------------------------------------------------------------------*/
Facebox = Behavior.create({
initialize : function(extra_set) {
this.settings = {
opacity : 0.3,
overlay : true,
loading_image : '/lowpro-fbox/loading.gif',
close_image : '/lowpro-fbox/closelabel.gif',
image_types : new RegExp('\.' + ['png', 'jpg', 'jpeg', 'gif'].join('|') + '$', 'i'),
inited : true,
clickOutsideCloses: false,
fadeDuration : 0.3,
facebox_html : '\
<div id="facebox" style="display:none;"> \
<div class="popup"> \
<table> \
<tbody> \
<tr> \
<td class="tl"/><td class="b"/><td class="tr"/> \
</tr> \
<tr> \
<td class="b"/> \
<td class="body"> \
<div class="content"> \
</div> \
<div class="footer"> \
<a href="#" class="close"> \
<img src="/lowpro-fbox/closelabel.gif" title="close" class="close_image" /> \
</a> \
</div> \
</td> \
<td class="b"/> \
</tr> \
<tr> \
<td class="bl"/><td class="b"/><td class="br"/> \
</tr> \
</tbody> \
</table> \
</div> \
</div>'
};
if (extra_set) Object.extend(this.settings, extra_set);
$(document.body).insert({bottom: this.settings.facebox_html});
this.preload = [ new Image(), new Image() ];
this.preload[0].src = this.settings.close_image;
this.preload[1].src = this.settings.loading_image;
f = this;
$$('#facebox .b:first, #facebox .bl, #facebox .br, #facebox .tl, #facebox .tr').each(function(elem) {
f.preload.push(new Image());
f.preload.slice(-1).src = elem.getStyle('background-image').replace(/url\((.+)\)/, '$1');
});
this.facebox = $('facebox');
fb = this;
Event.observe($$('#facebox .close').first(), 'click', function(e) {
Event.stop(e);
fb.close();
});
Event.observe($$('#facebox .close_image').first(), 'click', function(e) {
Event.stop(e);
fb.close();
});
},
loading : function() {
if ($$('#facebox .loading').length == 1) return true;
this.showOverlay();
contentWrapper = $$('#facebox .content').first();
contentWrapper.childElements().each(function(elem, i){
elem.remove();
});
contentWrapper.insert({bottom: '<div class="loading"><img src="'+this.settings.loading_image+'"/></div>'});
var pageScroll = document.viewport.getScrollOffsets();
this.facebox.setStyle({
'top': pageScroll.top + (document.viewport.getHeight() / 10) + 'px',
'left': document.viewport.getWidth() / 2 - (this.facebox.getWidth() / 2) + 'px'
});
},
reveal : function(data, klass) {
this.loading();
load = $$('#facebox .loading').first();
if(load) load.remove();
contentWrapper = $$('#facebox .content').first();
if (klass) contentWrapper.addClassName(klass);
contentWrapper.insert({bottom: data});
$$('#facebox .body').first().childElements().each(function(elem,i){
elem.show();
});
if(!this.facebox.visible()) new Effect.Appear(this.facebox, {duration: .3});
this.facebox.setStyle({
'left': document.viewport.getWidth() / 2 - (this.facebox.getWidth() / 2) + 'px'
});
},
close : function() {
new Effect.Fade('facebox', {duration: this.settings.fadeDuration});
this.hideOverlay();
if ($$('#facebox .loading').length > 0)
$$('#facebox .loading').first().remove();
},
onclick : function(e) {
this.loading();
Event.stop(e);
// support for rel="facebox[.inline_popup]" syntax, to add a class
var klass = this.element.rel.match(/facebox\[\.(\w+)\]/);
if (klass) klass = klass[1];
new Effect.Appear(this.facebox, {duration: this.settings.fadeDuration});
this.loadUrl(this.element.href, klass);
},
loadUrl : function(href, klass) {
if (href.match(/#/)) {
var url = window.location.href.split('#')[0];
var target = href.replace(url + '#', '');
// var data = $$(target).first();
var d = $(target);
// create a new element so as to not delete the original on close()
var data = new Element(d.tagName);
data.innerHTML = d.innerHTML;
this.reveal(data, klass);
}
else if (href.match(this.settings.image_types)) {
var image = new Image();
fb = this;
image.onload = function() {
fb.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass);
};
image.src = href;
}
else {
var fb = this;
var url = href;
new Ajax.Request(url, {
method : 'get',
onFailure : function(transport) {
fb.reveal(transport.responseText, klass);
},
onSuccess : function(transport) {
fb.reveal(transport.responseText, klass);
}
});
}
},
skipOverlay : function() {
return this.settings.overlay == false || this.settings.opacity === null;
},
showOverlay : function() {
if (this.skipOverlay()) return true;
if (!$('facebox_overlay'))
$(document.body).insert({bottom: '<div id="facebox_overlay" class="facebox_overlayBG" style="display:none;"></div>'});
$('facebox_overlay').observe('click', function(e){this.close();});
$('facebox_overlay').appear({'duration':0.2, 'to': this.settings.opacity});
},
hideOverlay : function() {
if (this.skipOverlay()) return true;
if ($('facebox_overlay')){
$('facebox_overlay').fade({'duration':0.2});
$("facebox_overlay").remove();
}
}
});
) is private.
