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