26d69cf6bd14f9fe6e3e7e088d8ef6974756640d
[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','Comfirmez-vous votre choix ?');
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       this.confirmBtn.set('html','Valider');
45       this.confirmBtn.injectInside(this.btnsBox);
46       this.confirmBtn.addEvent('click',this.confirm.bind(this));
47       
48       this.cancelBtn = new Element('span');
49       this.cancelBtn.addClass('btn-LSconfirmBox');
50       this.cancelBtn.set('html','Annuler');
51       this.cancelBtn.injectInside(this.btnsBox);
52       this.cancelBtn.addEvent('click',this.cancel.bind(this));
53       
54       this._purge=0;
55       
56       this.fx = {
57         open:   new Fx.Morph(this.box, {duration: 500, transition: Fx.Transitions.Sine.easeOut, onComplete: this.displayContent.bind(this)}),
58         close:  new Fx.Morph(this.box, {duration: 500, transition: Fx.Transitions.Sine.easeOut, onComplete: this.onClose.bind(this)})
59       };
60       this._scrolling=0;
61     },
62     
63     display: function() {
64       this.box.setStyle('display','block');
65       this.position(true);
66       window.addEvent('resize', this.position.bind(this));
67       window.addEvent('scroll', this.positionWhenScrolling.bind(this));
68     },
69     
70     positionWhenScrolling: function(oldValue) {
71       if (this._scrolling==0||$type(oldValue)) {
72         this._scrolling = 1;
73         var current = window.getScrollTop().toInt();
74         if (oldValue == current) {
75           this.position();
76           this._scrolling=0;
77         }
78         else {
79           this.positionWhenScrolling.delay(200,this,current);
80         }
81       }
82     },
83     
84     displayContent: function() {
85       [this.title, this.closeBtn, this.text, this.btnsBox].each(function(el) {
86         var fx = new Fx.Tween(el,{duration: 200});
87         fx.start('opacity',1);
88       },this);
89     },
90     
91     hide: function() {
92       this.box.empty();
93       this.fx.close.start(this.getStartStyles());
94       window.removeEvent('resize', this.position.bind(this));
95     },
96     
97     onClose: function() {
98       this.box.setStyle('display','none');
99       this.purge();
100       if (this._options.onClose) {
101         $try(this._options.onClose);
102       }
103     },
104     
105     purge: function() {
106       this._purge=1;
107       this.box.empty();
108       this.box.destroy();
109       delete this.fx;
110     },
111     
112     getStartStyles: function() {
113       if (typeof(this._options.startElement) != 'undefined') {
114         var startStyles = {
115           top:      this._options.startElement.getCoordinates().top,
116           left:     this._options.startElement.getCoordinates().left,
117           width:    this._options.startElement.getStyle('width').toInt(),
118           opacity:  0
119         };
120       }
121       else {
122         var startStyles = {
123           top:      '0px',
124           left:     '0px',
125           width:    '0px',
126           opacity:  0
127         };
128       }
129       return startStyles;
130     },
131     
132     getEndStyles: function() {
133       if (this._options.width) {
134         w = this._options.width;
135       }
136       else {
137         w = 300;
138       }
139       
140       var endStyles = {
141         width:    w.toInt()+'px',
142         top:      ((window.getHeight()/2)-(this.box.getStyle('height').toInt()/2)-this.box.getStyle('border').toInt()+window.getScrollTop()).toInt(),
143         left:     ((window.getWidth()/2)-(w/2)-this.box.getStyle('border').toInt()).toInt(),
144         opacity:  1
145       };
146       return endStyles;
147     },
148     
149     position: function(start) {
150       if (this._purge==0) {
151         var endStyles = this.getEndStyles();
152         if (start) {
153           this.box.setStyles(this.getStartStyles());
154         }
155         this.fx.open.start(endStyles);
156       }
157     },
158     
159     confirm: function() {
160       this.hide();
161       if (this._options.onConfirm) {
162         $try(this._options.onConfirm);
163       }
164     },
165     
166     cancel: function() {
167       this.hide();
168       if (this._options.onCancel) {
169         $try(this._options.onCancel);
170       }
171     }
172 });