mirror of
https://gitlab.easter-eggs.com/ee/ldapsaisie.git
synced 2024-07-01 07:53:43 +02:00
411 lines
12 KiB
JavaScript
411 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'));
|
|
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();
|
|
});
|