119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
var Overlay = new Class({
|
|
Implements: [Options, Events],
|
|
initialize: function( id, options ) {
|
|
this.setOptions( options );
|
|
|
|
this.mask = new Mask( document.body, {'maskMargins': false, 'class': 'overlayMask'} );
|
|
|
|
this.id = id?id:'overlay';
|
|
if ( typeOf(this.id) == 'string' ) {
|
|
if ( $(this.id) ) {
|
|
this.element = $(this.id);
|
|
}
|
|
} else {
|
|
this.element = this.id;
|
|
this.id = this.element.get('id');
|
|
}
|
|
if ( !this.element ) {
|
|
this.element = new Element( 'div', {'id': this.id, 'class': 'overlay', 'styles': {'display': 'none'}} );
|
|
if ( this.options.title || this.options.buttons ) {
|
|
var overlayHeader = new Element( 'div', {'class': 'overlayHeader'} );
|
|
if ( this.options.title ) {
|
|
var overlayTitle = new Element( 'div', {'class': 'overlayTitle', 'text': this.options.title} );
|
|
overlayHeader.grab( overlayTitle );
|
|
}
|
|
if ( this.options.buttons ) {
|
|
var overlayToolbar = new Element( 'div', {'class': 'overlayToolbar'} );
|
|
this.options.buttons.each(
|
|
function( button ) {
|
|
var overlayButton = new Element( 'button', {'text': button.text} );
|
|
if ( button.id ) {
|
|
overlayButton.setProperty( 'id', button.id );
|
|
}
|
|
if ( button.events ) {
|
|
overlayButton.set( 'events', events );
|
|
}
|
|
overlayToolbar.grab( overlayButton );
|
|
}
|
|
);
|
|
overlayHeader.grab( overlayTitle );
|
|
}
|
|
this.element.grab( overlayHeader );
|
|
var overlayBody = new Element( 'div', {'class': 'overlayBody'} );
|
|
var overlayContent = new Element( 'div', {'class': 'overlayContent'} );
|
|
overlayContent.grab( this.options.content );
|
|
overlayBody.grab( overlayContent );
|
|
this.element.grab( overlayBody );
|
|
}
|
|
this.target = document.id(this.options.target) || document.id(document.body);
|
|
this.element.inject( this.target );
|
|
}
|
|
},
|
|
show: function() {
|
|
this.mask.show();
|
|
window.addEventListener( 'resize', this.update.bind(this) );
|
|
window.addEventListener( 'scroll', this.update.bind(this) );
|
|
this.element.tween( 'opacity', [0, 1.0] );
|
|
this.element.show();
|
|
this.element.position();
|
|
this.mask.position();
|
|
},
|
|
hideComplete: function() {
|
|
this.element.hide();
|
|
this.mask.hide();
|
|
},
|
|
hide: function() {
|
|
new Fx.Tween( this.element, {duration: 400, transition: Fx.Transitions.Sine, onComplete: this.hideComplete.bind(this)} ).start( 'opacity', 1.0, 0 );
|
|
},
|
|
update: function() {
|
|
this.element.position();
|
|
this.mask.position();
|
|
},
|
|
showAnimation: function() {
|
|
showOverlay();
|
|
|
|
//console.log( "Showing overlay loading" );
|
|
if ( !this.loading ) {
|
|
this.loading = new Element( 'div', {'id': 'loading'+this.key, 'styles': {'display': 'none'}} );
|
|
this.loading.grab( this.loadingImage );
|
|
document.body.grab( this.loading );
|
|
}
|
|
updateOverlayLoading();
|
|
this.loading.setStyle( 'display', 'block' );
|
|
window.addEventListener( 'resize', this.update.bind(this) );
|
|
window.addEventListener( 'scroll', this.update.bind(this) );
|
|
},
|
|
hideAnimation: function() {
|
|
if ( this.loading ) {
|
|
this.loading.setStyle( 'display', 'none' );
|
|
}
|
|
}
|
|
});
|
|
|
|
function setupOverlays() {
|
|
try {
|
|
$$('.overlay').each(
|
|
function( overlay ) {
|
|
overlay.element = new Overlay( overlay.get('id') );
|
|
overlay.getElements('.overlayCloser').each(
|
|
function( closer ) {
|
|
closer.addEvent( 'click', function() {
|
|
overlay.element.hide();
|
|
} );
|
|
}
|
|
);
|
|
overlay.overlayShow = function() {
|
|
overlay.element.show();
|
|
};
|
|
overlay.overlayHide = function() {
|
|
overlay.element.hide();
|
|
};
|
|
}
|
|
);
|
|
} catch ( e ) {
|
|
alert( e );
|
|
}
|
|
}
|
|
|
|
window.addEventListener( 'DOMContentLoaded', setupOverlays );
|