- LSconfirmBox : Ajout de la possibilité de traduction des label des boutons
[ldapsaisie.git] / trunk / includes / js / LSconfirmBox.js
1 var LSconfirmBox = new Class({
2     initialize: function(options) {
3       this._options = options;
4       this.create();
5       this.display();
6     },
7     
8     create: function() {
9       this.box = new Element('div');
10       this.box.setProperty('id','box-LSconfirmBox');
11       this.box.injectInside(document.body);
12
13       this.title = new Element('p');
14       this.title.setProperty('id','title-LSconfirmBox');
15       if (this._options.title) {
16         this.title.set('html',this._options.title);
17       }
18       else {
19         this.title.set('html','Comfirmation');
20       };
21       this.title.injectInside(this.box)
22       
23       this.closeBtn = new Element('span');
24       this.closeBtn.setProperty('id','closeBtn-LSconfirmBox');
25       this.closeBtn.injectInside(this.box);
26       this.closeBtn.addEvent('click',this.cancel.bind(this));
27       
28       this.text = new Element('p');
29       this.text.setProperty('id','text-LSconfirmBox');
30       if (this._options.text) {
31         this.text.set('html',this._options.text);
32       }
33       else {
34         this.text.set('html','You comfirm your choice ?');
35       }
36       this.text.injectInside(this.box);
37       
38       this.btnsBox = new Element('p');
39       this.btnsBox.setProperty('id','btnsBox-LSconfirmBox');
40       this.btnsBox.injectInside(this.box);
41       
42       this.confirmBtn = new Element('span');
43       this.confirmBtn.addClass('btn-LSconfirmBox');
44       if (this._options.validate_label) {
45         this.confirmBtn.set('html',this._options.validate_label);
46       }
47       else {
48         this.confirmBtn.set('html','Validate');
49       }
50       this.confirmBtn.injectInside(this.btnsBox);
51       this.confirmBtn.addEvent('click',this.confirm.bind(this));
52       
53       this.cancelBtn = new Element('span');
54       this.cancelBtn.addClass('btn-LSconfirmBox');
55       if (this._options.cancel_label) {
56         this.cancelBtn.set('html',this._options.cancel_label);
57       }
58       else {
59         this.cancelBtn.set('html','Cancel');
60       }
61       this.cancelBtn.injectInside(this.btnsBox);
62       this.cancelBtn.addEvent('click',this.cancel.bind(this));
63       
64       this._purge=0;
65       
66       this.fx = {
67         open:   new Fx.Morph(this.box, {duration: 500, transition: Fx.Transitions.Sine.easeOut, onComplete: this.displayContent.bind(this)}),
68         close:  new Fx.Morph(this.box, {duration: 500, transition: Fx.Transitions.Sine.easeOut, onComplete: this.onClose.bind(this)})
69       };
70       this._scrolling=0;
71     },
72     
73     display: function() {
74       this.box.setStyle('display','block');
75       this.position(true);
76       window.addEvent('resize', this.position.bind(this));
77       window.addEvent('scroll', this.positionWhenScrolling.bind(this));
78     },
79     
80     positionWhenScrolling: function(oldValue) {
81       if (this._scrolling==0||$type(oldValue)) {
82         this._scrolling = 1;
83         var current = window.getScrollTop().toInt();
84         if (oldValue == current) {
85           this.position();
86           this._scrolling=0;
87         }
88         else {
89           this.positionWhenScrolling.delay(200,this,current);
90         }
91       }
92     },
93     
94     displayContent: function() {
95       [this.title, this.closeBtn, this.text, this.btnsBox].each(function(el) {
96         var fx = new Fx.Tween(el,{duration: 200});
97         fx.start('opacity',1);
98       },this);
99     },
100     
101     hide: function() {
102       this.box.empty();
103       this.fx.close.start(this.getStartStyles());
104       window.removeEvent('resize', this.position.bind(this));
105     },
106     
107     onClose: function() {
108       this.box.setStyle('display','none');
109       this.purge();
110       if (this._options.onClose) {
111         $try(this._options.onClose);
112       }
113     },
114     
115     purge: function() {
116       this._purge=1;
117       this.box.empty();
118       this.box.destroy();
119       delete this.fx;
120     },
121     
122     getStartStyles: function() {
123       if (typeof(this._options.startElement) != 'undefined') {
124         var startStyles = {
125           top:      this._options.startElement.getCoordinates().top,
126           left:     this._options.startElement.getCoordinates().left,
127           width:    this._options.startElement.getStyle('width').toInt(),
128           opacity:  0
129         };
130       }
131       else {
132         var startStyles = {
133           top:      '0px',
134           left:     '0px',
135           width:    '0px',
136           opacity:  0
137         };
138       }
139       return startStyles;
140     },
141     
142     getEndStyles: function() {
143       if (this._options.width) {
144         w = this._options.width;
145       }
146       else {
147         w = 300;
148       }
149       
150       var endStyles = {
151         width:    w.toInt()+'px',
152         top:      ((window.getHeight()/2)-(this.box.getStyle('height').toInt()/2)-this.box.getStyle('border').toInt()+window.getScrollTop()).toInt(),
153         left:     ((window.getWidth()/2)-(w/2)-this.box.getStyle('border').toInt()).toInt(),
154         opacity:  1
155       };
156       return endStyles;
157     },
158     
159     position: function(start) {
160       if (this._purge==0) {
161         var endStyles = this.getEndStyles();
162         if (start) {
163           this.box.setStyles(this.getStartStyles());
164         }
165         this.fx.open.start(endStyles);
166       }
167     },
168     
169     confirm: function() {
170       this.hide();
171       if (this._options.onConfirm) {
172         $try(this._options.onConfirm);
173       }
174     },
175     
176     cancel: function() {
177       this.hide();
178       if (this._options.onCancel) {
179         $try(this._options.onCancel);
180       }
181     }
182 });