ldapsaisie/trunk/includes/js/LSsmoothbox.js

410 lines
12 KiB
JavaScript

var LSsmoothbox = new Class({
initialize: function(options) {
this.labels = varLSdefault.LSjsConfig['LSsmoothbox_labels'];
if (!$type(this.labels)) {
this.labels = {
close_confirm_text: 'Are you sure to want to close this window and lose all changes ?',
validate: 'Validate'
};
}
this.build();
// Events
$$('a.LSsmoothbox').each(function(el) {
el.addEvent('click',this.clickA.bindWithEvent(this,el));
},this);
$$('img.LSsmoothbox').each(function(el) {
el.addEvent('click',this.clickImg.bindWithEvent(this,el));
el.setStyle('cursor','pointer');
},this);
// Fx
this.fx = {
over: new Fx.Tween(this.over, {property: 'opacity', duration: 300, fps: 30}),
winOpen: new Fx.Morph(this.win, {duration: 500, fps: 30, transition: Fx.Transitions.Sine.easeOut, onStart: this.hideContent.bind(this), onComplete: this.displayContent.bind(this)}),
winClose: new Fx.Morph(this.win, {duration: 500, fps: 30, transition: Fx.Transitions.Sine.easeOut, onStart: this.hideContent.bind(this), onComplete: this.resetWin.bind(this)})
};
this.asNew(options);
window.addEvent('resize', this.position.bind(this));
window.addEvent('scroll', this.positionWhenScrolling.bind(this));
},
build: function() {
this.over = new Element('div');
this.over.setProperty('id','over-LSsmoothbox');
this.over.setStyles({
position: 'absolute',
left: '0px',
top: '0px',
width: '100%',
height: '100%',
zIndex: 2,
backgroundColor: '#000',
opacity: 0
});
this.over.injectInside(document.body);
this.win = new Element('div');
this.win.setProperty('id','win-LSsmoothbox');
this.win.injectInside(document.body);
this.frame = new Element('div');
this.frame.setProperty('id','frame-LSsmoothbox');
this.frame.injectInside(this.win);
this.closeBtn = new Element('span');
this.closeBtn.setProperty('id','closeBtn-LSsmoothbox');
this.closeBtn.injectInside(this.win);
this.closeBtn.addEvent('click',this.closeConfirm.bind(this));
this._displayValidBtn = false;
this.validBtn = new Element('span');
this.validBtn.setProperty('id','validBtn-LSsmoothbox');
this.validBtn.set('html',this.labels.validate);
this.validBtn.injectInside(this.win);
this.validBtn.addEvent('click',this.valid.bindWithEvent(this,true));
},
asNew: function(options) {
this._options = ($type(options))?option:{};
if (this.img) {
this.img.dispose();
this.img.destroy();
this.img=undefined;
}
// Listeners
this.listeners = {
close: new Array(),
valid: new Array(),
cancel: new Array()
};
this._closeConfirm = true;
this._closeConfirmOpened = 0;
this._open=0;
this._scrolling=0;
this.openOptions = {};
this.frame.empty();
},
position: function(){
if (this._open==1) {
this.overPosition();
var endStyles = this.getEndStyles();
this.fx.winOpen.start({
width: endStyles.width,
height: endStyles.height,
top: endStyles.top,
left: endStyles.left
});
}
},
positionWhenScrolling: function(oldValue) {
if (this._scrolling==0||$type(oldValue)) {
this._scrolling = 1;
var current = window.getScrollTop().toInt();
if (oldValue == current) {
this.position();
this._scrolling=0;
}
else {
this.positionWhenScrolling.delay(200,this,current);
}
}
},
overPosition: function() {
var h = window.getScrollHeight()+'px';
var w = window.getScrollWidth()+'px';
this.over.setStyles({
top: '0px',
height: h,
width: w
});
},
getStartStyles: function() {
if (typeof(this.openOptions.startElement) != 'undefined') {
var startStyles = {
top: this.openOptions.startElement.getCoordinates().top,
left: this.openOptions.startElement.getCoordinates().left,
width: this.openOptions.startElement.getStyle('width'),
height: this.openOptions.startElement.getStyle('height')
};
}
else {
var startStyles = {
top: '0px',
left: '0px',
width: '0px',
height: '0px'
};
}
return startStyles;
},
getEndStyles: function() {
w = window.getWidth() * 0.9;
if (this.openOptions.width && (this.openOptions.width<=w)) {
w = this.openOptions.width;
}
h = window.getHeight() * 0.8;
if (this.openOptions.height && (this.openOptions.height<=h)) {
h = this.openOptions.height;
}
if (this.img) {
var rH = h.toInt() / this.img.height;
var rW = w.toInt() / this.img.width;
if (rH > rW) {
// W
this.img.height = Math.floor(this.img.height*w.toInt()/this.img.width);
h = this.img.height;
this.img.width = w.toInt();
}
else {
// H
this.img.width = Math.floor(this.img.width * h.toInt()/this.img.height);
w = this.img.width;
this.img.height = h.toInt();
}
}
var endStyles = {
width: w.toInt(),
height: h.toInt(),
top: ((window.getHeight()/2)-(h/2)-this.win.getStyle('border').toInt()+window.getScrollTop()).toInt(),
left: ((window.getWidth()/2)-(w/2)-this.win.getStyle('border').toInt()).toInt()
};
return endStyles;
},
open: function() {
this._open=1;
this.overPosition();
this.fx.over.start(0.7);
var startStyles = this.getStartStyles();
var endStyles = this.getEndStyles();
this.win.setStyles(startStyles);
this.fx.winOpen.setOptions({onComplete: this.displayContent.bind(this)});
this.win.setStyle('display','block');
this.fx.winOpen.start({
width: endStyles.width,
height: endStyles.height,
top: endStyles.top,
left: endStyles.left,
opacity: [0, 1]
});
[this.validBtn,this.closeBtn,this.frame].each(function(el){
el.setStyle('display','block');
},this);
},
hideContent: function() {
this.validBtn.setStyle('visibility','hidden');
this.frame.setStyle('visibility','hidden');
this.closeBtn.setStyle('visibility','hidden');
},
displayContent: function() {
if (this._displayValidBtn) {
this.validBtn.setStyle('visibility','visible');
}
this.frame.setStyle('visibility','visible');
this.closeBtn.setStyle('visibility','visible');
},
closeConfirm: function() {
if (this._closeConfirm && this._displayValidBtn) {
if (!this._closeConfirmOpened) {
this._closeConfirmOpened = 1;
this.confirmBox = new LSconfirmBox({
text: this.labels.close_confirm_text,
startElement: this.closeBtn,
onConfirm: this.cancel.bind(this),
onClose: (function(){this._closeConfirmOpened=0;}).bind(this)
});
}
}
else {
this.cancel();
}
},
valid: function() {
this.close();
this.fireEvent('valid');
},
cancel: function() {
this.close();
this.fireEvent('cancel');
},
close: function() {
if (this._closeConfirm) {
delete this.confirmBox;
}
var closeStyles = {
width: 0,
height: 0,
top: this.closeBtn.getTop(),
left: this.closeBtn.getLeft()
};
this.fx.over.cancel();
this.fx.over.start(0);
this.hideContent();
this.fx.winClose.start({
width: closeStyles.width,
height: closeStyles.height,
top: closeStyles.top,
left: closeStyles.left,
opacity: [1, 0]
});
this._open=0;
[this.validBtn,this.closeBtn,this.frame].each(function(el){
el.setStyle('display','none');
},this);
this.fireEvent('close');
},
resetWin: function() {
this.hideContent();
this.win.setStyles(this.getStartStyles());
},
clickA: function(event,a) {
new Event(event).stop();
this.openURL(a.href,{startElement: a});
},
clickImg: function(event,img) {
new Event(event).stop();
this.openImg(img.src,{startElement: img});
},
resize: function() {
var endStyles = this.getEndStyles();
this.fx.winOpen.cancel();
this.fx.winOpen.start({
width: endStyles.width,
height: endStyles.height,
top: endStyles.top,
left: endStyles.left,
opacity: [0, 1]
});
},
load: function() {
this.frame.empty();
this.loadingImage = new Element('img');
this.loadingImage.setProperty('src',varLSdefault.imagePath('loading.gif'));
this.loadingImage.setProperty('id','loadingImage-LSsmoothbox');
this.openOptions.width = 120;
this.openOptions.height = 120;
this.resize();
this.openOptions.width = undefined;
this.openOptions.height = undefined;
this.loadingImage.injectInside(this.frame);
},
endLoad: function() {
this.frame.empty();
},
openImg: function(src,openOptions) {
this.hideValidBtn();
this.openOptions=openOptions;
this.open();
this.load();
this.img = new Asset.image(src, {onload: this.endLoadImg.bind(this)});
this.img.addEvent('dblclick',this.closeConfirm.bind(this));
},
endLoadImg: function() {
this.endLoad();
this.resize();
this.img.injectInside(this.frame);
},
displayValidBtn: function() {
this._displayValidBtn = true;
},
hideValidBtn: function() {
this._displayValidBtn = false;
},
openURL: function(href,openOptions) {
this.load.bind(this)();
var options = {
method: 'post',
update: this.frame,
url: href,
evalScripts: true,
onComplete: (function(){varLSdefault.ajaxDisplayDebugAndError();this.resize()}).bind(this)
};
this.displayValidBtn();
new Request.HTML(options).send();
this.openOptions = openOptions;
this.open();
},
openHTML: function(html,openOptions) {
this.displayValidBtn();
this.frame.set('html',html);
this.openOptions = openOptions;
this.open();
},
setOption: function(name,value) {
this._options[name]=value;
},
addEvent: function(event,fnct) {
if ($type(this.listeners[event])) {
if ($type(fnct)=="function") {
this.listeners[event].include(fnct);
}
}
},
fireEvent: function(event) {
LSdebug('LSsmoothbox :: fireEvent('+event+')');
if ($type(this.listeners[event])) {
this.listeners[event].each(function(fnct) {
try {
fnct(this);
}
catch(e) {
LSdebug('LSsmoothbox :: '+event+'() -> failed');
}
},this);
}
}
});
window.addEvent(window.ie ? 'load' : 'domready', function() {
varLSsmoothbox = new LSsmoothbox();
});