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