3c2a66d9bef3bf78f2ff9c223dc5e6a5344f7285
[ldapsaisie.git] / public_html / includes / js / LSsmoothbox.js
1 var LSsmoothbox = new Class({
2     initialize: function(options) {
3       this.labels = varLSdefault.LSjsConfig['LSsmoothbox_labels'];
4       if (!$type(this.labels)) {
5         this.labels = {
6           close_confirm_text: 'Are you sure to want to close this window and lose all changes ?',
7           validate:           'Validate'
8         };
9       }
10       
11       this.build();
12       
13       // Events
14       $$('a.LSsmoothbox').each(function(el) {
15         el.addEvent('click',this.clickA.bindWithEvent(this,el));
16       },this);
17       
18       $$('img.LSsmoothbox').each(function(el) {
19         el.addEvent('click',this.clickImg.bindWithEvent(this,el));
20         el.setStyle('cursor','pointer');
21       },this);
22       
23       // Fx
24       this.fx = {
25         over:      new Fx.Tween(this.over, {property: 'opacity', duration: 300, fps: 30}),
26         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)}),
27         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)})
28       };
29       
30       this.asNew(options);
31       
32       window.addEvent('resize', this.position.bind(this));
33       window.addEvent('scroll', this.positionWhenScrolling.bind(this));
34     },
35     
36     build: function() {
37       this.over = new Element('div');
38       this.over.setProperty('id','over-LSsmoothbox');
39       this.over.setStyles({
40         position: 'absolute',
41         left: '0px',
42         top: '0px',
43         width: '100%',
44         height: '100%',
45         zIndex: 2,
46         backgroundColor: '#000',
47         opacity:          0
48       });
49       this.over.injectInside(document.body);
50       
51       this.win = new Element('div');
52       this.win.setProperty('id','win-LSsmoothbox');
53       this.win.injectInside(document.body);
54       
55       this.frame = new Element('div');
56       this.frame.setProperty('id','frame-LSsmoothbox');
57       
58       this.frame.injectInside(this.win);
59       
60       this.closeBtn = new Element('span');
61       this.closeBtn.setProperty('id','closeBtn-LSsmoothbox');
62       this.closeBtn.injectInside(this.win);
63       this.closeBtn.addEvent('click',this.closeConfirm.bind(this));
64       
65       this._displayValidBtn = false;
66       this.validBtn = new Element('span');
67       this.validBtn.setProperty('id','validBtn-LSsmoothbox');
68       this.validBtn.set('html',this.labels.validate);
69       this.validBtn.injectInside(this.win);
70       this.validBtn.addEvent('click',this.valid.bindWithEvent(this,true));
71     },
72     
73     asNew: function(options) {
74       this._options = ($type(options))?option:{};
75       
76       if (this.img) {
77         this.img.dispose();
78         this.img.destroy();
79         this.img=undefined;
80       }
81       
82       // Listeners
83       this.listeners = {
84         close:    new Array(),
85         valid:    new Array(),
86         cancel:   new Array()
87       };
88             
89       this._closeConfirm = true;
90       this._closeConfirmOpened = 0;
91       
92       this._open=0;
93       this._scrolling=0;
94       
95       this.openOptions = {};
96       
97       this.frame.empty();
98     },
99     
100     position: function(){ 
101       if (this._open==1) {
102         this.overPosition();
103         
104         var endStyles = this.getEndStyles();
105         this.fx.winOpen.start({
106           width:    endStyles.width,
107           height:   endStyles.height,
108           top:      endStyles.top,
109           left:     endStyles.left
110         });
111       }
112     },
113     
114     positionWhenScrolling: function(oldValue) {
115       if (this._scrolling==0||$type(oldValue)) {
116         this._scrolling = 1;
117         var current = window.getScrollTop().toInt();
118         if (oldValue == current) {
119           this.position();
120           this._scrolling=0;
121         }
122         else {
123           this.positionWhenScrolling.delay(200,this,current);
124         }
125       }
126     },
127     
128     overPosition: function() {
129       var h = window.getScrollHeight()+'px'; 
130       var w = window.getScrollWidth()+'px'; 
131       this.over.setStyles({
132         top:    '0px',
133         height: h,
134         width:  w
135       });
136     },
137     
138     getStartStyles: function() {
139       if (typeof(this.openOptions.startElement) != 'undefined') {
140         var startStyles = {
141           top:      this.openOptions.startElement.getCoordinates().top,
142           left:     this.openOptions.startElement.getCoordinates().left,
143           width:    this.openOptions.startElement.getStyle('width'),
144           height:   this.openOptions.startElement.getStyle('height')
145         };
146       }
147       else {
148         var startStyles = {
149           top:    '0px',
150           left:   '0px',
151           width:  '0px',
152           height: '0px'
153         };
154       }
155       return startStyles;
156     },
157     
158     getEndStyles: function() {
159       w = window.getWidth() * 0.9;
160       if (this.openOptions.width && (this.openOptions.width<=w)) {
161         w = this.openOptions.width;
162       }
163       
164       h = window.getHeight() * 0.8;
165       if (this.openOptions.height && (this.openOptions.height<=h)) {
166         h = this.openOptions.height;
167       }
168       
169       if (this.img) {
170         var rH = h.toInt() / this.img.height;
171         var rW = w.toInt() / this.img.width;
172         if (rH > rW) {
173           // W
174           this.img.height = Math.floor(this.img.height*w.toInt()/this.img.width);
175           h = this.img.height;
176           this.img.width  = w.toInt();
177         }
178         else {
179           // H
180           this.img.width  = Math.floor(this.img.width * h.toInt()/this.img.height);
181           w = this.img.width;
182           this.img.height = h.toInt();
183         }
184       }
185       
186       var endStyles = {
187         width:    w.toInt(),
188         height:   h.toInt(),
189         top:      ((window.getHeight()/2)-(h/2)-this.win.getStyle('border').toInt()+window.getScrollTop()).toInt(),
190         left:     ((window.getWidth()/2)-(w/2)-this.win.getStyle('border').toInt()).toInt()
191       };
192       return endStyles;
193     },
194     
195     
196     open: function() {
197       this._open=1;
198       this.overPosition();
199       this.fx.over.start(0.7);
200       var startStyles = this.getStartStyles();
201       var endStyles = this.getEndStyles();  
202       
203       this.win.setStyles(startStyles);
204
205       this.fx.winOpen.setOptions({onComplete: this.displayContent.bind(this)});
206       this.win.setStyle('display','block');
207       this.fx.winOpen.start({
208         width:    endStyles.width,
209         height:   endStyles.height,
210         top:      endStyles.top,
211         left:     endStyles.left,
212         opacity:  [0, 1]
213       });
214       [this.validBtn,this.closeBtn,this.frame].each(function(el){
215         el.setStyle('display','block');
216       },this);
217     },
218     
219     hideContent: function() {
220       this.validBtn.setStyle('visibility','hidden');
221       this.frame.setStyle('visibility','hidden');
222       this.closeBtn.setStyle('visibility','hidden');
223     },
224     
225     displayContent: function() {
226       if (this._displayValidBtn) {
227         this.validBtn.setStyle('visibility','visible'); 
228       }
229       this.frame.setStyle('visibility','visible');
230       this.closeBtn.setStyle('visibility','visible');
231     },
232     
233     closeConfirm: function() {
234       if (this._closeConfirm && this._displayValidBtn) {
235         if (!this._closeConfirmOpened) {
236           this._closeConfirmOpened = 1;
237           this.confirmBox = new LSconfirmBox({
238             text:           this.labels.close_confirm_text,
239             startElement:   this.closeBtn,
240             onConfirm:      this.cancel.bind(this),
241             onClose:        (function(){this._closeConfirmOpened=0;}).bind(this)
242           });
243         }
244       }
245       else {
246         this.cancel();
247       }
248     },
249     
250     valid: function() {
251       this.close();
252       this.fireEvent('valid');
253     },
254     
255     cancel: function() {
256       this.close();
257       this.fireEvent('cancel');
258     },
259     
260     close: function() {
261       if (this._closeConfirm) {
262         delete this.confirmBox;
263       }
264       
265       var closeStyles = {
266         width:    0,
267         height:   0,
268         top:      this.closeBtn.getTop(),
269         left:     this.closeBtn.getLeft()
270       };
271       
272       this.fx.over.cancel();
273       this.fx.over.start(0);
274       this.hideContent();
275       this.fx.winClose.start({
276         width:    closeStyles.width,
277         height:   closeStyles.height,
278         top:      closeStyles.top,
279         left:     closeStyles.left,
280         opacity:  [1, 0]
281       });
282       this._open=0;
283       
284       [this.validBtn,this.closeBtn,this.frame].each(function(el){
285         el.setStyle('display','none');
286       },this);
287       
288       this.fireEvent('close');
289       
290     },
291     
292     resetWin: function() {
293       this.hideContent();
294       this.win.setStyles(this.getStartStyles());
295       
296     },
297     
298     clickA: function(event,a) {
299       new Event(event).stop();
300       this.openURL(a.href,{startElement: a});
301     },
302     
303     clickImg: function(event,img) {
304       new Event(event).stop();
305       this.openImg(img.src,{startElement: img});
306     },
307     
308     resize: function() {
309       var endStyles = this.getEndStyles();
310       this.fx.winOpen.cancel();
311       this.fx.winOpen.start({
312         width:    endStyles.width,
313         height:   endStyles.height,
314         top:      endStyles.top,
315         left:     endStyles.left,
316         opacity:  [0, 1]
317       });
318     },
319     
320     load: function() {
321       this.frame.empty();
322       this.loadingImage = new Element('img');
323       this.loadingImage.setProperty('src',varLSdefault.imagePath('loading.gif'));
324       this.loadingImage.setProperty('id','loadingImage-LSsmoothbox');
325       this.openOptions.width = 120;
326       this.openOptions.height = 120;
327       this.resize();
328       this.openOptions.width = undefined;
329       this.openOptions.height = undefined;
330       this.loadingImage.injectInside(this.frame);
331     },
332     
333     endLoad: function() {
334       this.frame.empty();
335     },
336     
337     openImg: function(src,openOptions) {
338       this.hideValidBtn();
339       this.openOptions=openOptions;
340       this.open();
341       this.load();
342       this.img = new Asset.image(src, {onload: this.endLoadImg.bind(this)});
343       this.img.addEvent('dblclick',this.closeConfirm.bind(this));
344     },
345     
346     endLoadImg: function() {
347       this.endLoad();
348       this.resize();
349       this.img.injectInside(this.frame);
350     },
351
352     displayValidBtn: function() {
353       this._displayValidBtn = true;
354     },
355
356     hideValidBtn: function() {
357       this._displayValidBtn = false;
358     },
359
360     openURL: function(href,openOptions) {
361       this.load.bind(this)();
362       var options = {
363           method:       'post',
364           update:       this.frame,
365           url:          href,
366           evalScripts:  true,
367           onComplete:   (function(){varLSdefault.ajaxDisplayDebugAndError();this.resize()}).bind(this)
368       };
369       this.displayValidBtn();
370       new Request.HTML(options).send();
371       this.openOptions = openOptions;
372       this.open();
373     },
374     
375     openHTML: function(html,openOptions) {
376       this.displayValidBtn();
377       this.frame.set('html',html);
378       this.openOptions = openOptions;
379       this.open();
380     },
381     
382     setOption: function(name,value) {
383       this._options[name]=value;
384     },
385     
386     addEvent: function(event,fnct) {
387       if ($type(this.listeners[event])) {
388         if ($type(fnct)=="function") {
389           this.listeners[event].include(fnct);
390         }
391       }
392     },
393     
394     fireEvent: function(event) {
395       LSdebug('LSsmoothbox :: fireEvent('+event+')');
396       if ($type(this.listeners[event])) {
397         this.listeners[event].each(function(fnct) {
398           try {
399             fnct(this);
400           }
401           catch(e) {
402             LSdebug('LSsmoothbox :: '+event+'() -> failed');
403           }
404         },this);
405       }
406     }
407 });
408 window.addEvent(window.ie ? 'load' : 'domready', function() {
409   varLSsmoothbox = new LSsmoothbox();
410 });