rlm@3
|
1 /*
|
rlm@3
|
2 Script: Additions.js
|
rlm@3
|
3 MooTools Additions - Various Helpers, Overlay-Class, Dialog-Class
|
rlm@3
|
4
|
rlm@3
|
5 License:
|
rlm@3
|
6 MIT-style license.
|
rlm@3
|
7
|
rlm@3
|
8 Copyright:
|
rlm@3
|
9 Copyright (c) 2009 [Christoph Pojer](http://og5.net/christoph).
|
rlm@3
|
10
|
rlm@3
|
11 Dependencies:
|
rlm@3
|
12 - MooTools Core 1.2.2
|
rlm@3
|
13 - MooTools More 1.2.2.1 or newer: Tips.js
|
rlm@3
|
14
|
rlm@3
|
15 Contains:
|
rlm@3
|
16 - FileManager.Tips: Augmented version of Tips for use within the FileManager
|
rlm@3
|
17 - FileManager.Request: Simple extension to request to always use the loader-icon specified by the FileManager instance
|
rlm@3
|
18 - Element.appearOn: Can be used to show an element when another is hovered: $(myElement).appearOn(myWrapper)
|
rlm@3
|
19 - Element.center: Centers an element
|
rlm@3
|
20 - Dialog, Overlay: Nice Classes used by the FileManager
|
rlm@3
|
21 */
|
rlm@3
|
22
|
rlm@3
|
23 if(!window.FileManager) var FileManager = {};
|
rlm@3
|
24
|
rlm@3
|
25 FileManager.Tips = new Class({
|
rlm@3
|
26
|
rlm@3
|
27 Extends: Tips,
|
rlm@3
|
28
|
rlm@3
|
29 options: {
|
rlm@3
|
30 offsets: {x: 15, y: 0},
|
rlm@3
|
31 text: null,
|
rlm@3
|
32 onShow: function(tip, el){
|
rlm@3
|
33 if(tip.get('opacity')==0.8 && tip.getStyle('visibility')=='visible') return;
|
rlm@3
|
34
|
rlm@3
|
35 tip.get('tween').pause();
|
rlm@3
|
36 tip.set({
|
rlm@3
|
37 opacity: 0,
|
rlm@3
|
38 tween: {
|
rlm@3
|
39 duration: 200,
|
rlm@3
|
40 link: 'cancel'
|
rlm@3
|
41 }
|
rlm@3
|
42 }).fade(0.8);
|
rlm@3
|
43 },
|
rlm@3
|
44
|
rlm@3
|
45 onHide: function(tip, el){
|
rlm@3
|
46 tip.get('tween').pause().start('opacity', 0).chain(function(){
|
rlm@3
|
47 tip.setStyle('left', 0);
|
rlm@3
|
48 });
|
rlm@3
|
49 }
|
rlm@3
|
50 },
|
rlm@3
|
51
|
rlm@3
|
52 initialize: function(el, options){
|
rlm@3
|
53 this.parent(el, options);
|
rlm@3
|
54 this.tip.addClass('tip-filebrowser');
|
rlm@3
|
55 }
|
rlm@3
|
56
|
rlm@3
|
57 });
|
rlm@3
|
58
|
rlm@3
|
59 FileManager.Request = new Class({
|
rlm@3
|
60
|
rlm@3
|
61 Extends: Request.JSON,
|
rlm@3
|
62
|
rlm@3
|
63 initialize: function(options, filebrowser){
|
rlm@3
|
64 this.parent(options);
|
rlm@3
|
65
|
rlm@3
|
66 if(filebrowser) this.addEvents({
|
rlm@3
|
67 request: filebrowser.onRequest.bind(filebrowser),
|
rlm@3
|
68 complete: filebrowser.onComplete.bind(filebrowser)
|
rlm@3
|
69 });
|
rlm@3
|
70 }
|
rlm@3
|
71
|
rlm@3
|
72 });
|
rlm@3
|
73
|
rlm@3
|
74 Element.implement({
|
rlm@3
|
75
|
rlm@3
|
76 appearOn: function(el, opacity, options){
|
rlm@3
|
77 opacity = $type(opacity) == 'array' ? [opacity[0] || 1, opacity[1] || 0] : [opacity || 1, 0];
|
rlm@3
|
78
|
rlm@3
|
79 this.set({
|
rlm@3
|
80 opacity: opacity[1],
|
rlm@3
|
81 tween: options || {duration: 200}
|
rlm@3
|
82 });
|
rlm@3
|
83
|
rlm@3
|
84 $(el).addEvents({
|
rlm@3
|
85 mouseenter: this.fade.bind(this, opacity[0]),
|
rlm@3
|
86 mouseleave: this.fade.bind(this, opacity[1])
|
rlm@3
|
87 });
|
rlm@3
|
88
|
rlm@3
|
89 return this;
|
rlm@3
|
90 },
|
rlm@3
|
91
|
rlm@3
|
92 center: function(offsets){
|
rlm@3
|
93 var scroll = document.getScroll(),
|
rlm@3
|
94 offset = document.getSize(),
|
rlm@3
|
95 size = this.getSize(),
|
rlm@3
|
96 values = {x: 'left', y: 'top'};
|
rlm@3
|
97
|
rlm@3
|
98 if(!offsets) offsets = {};
|
rlm@3
|
99
|
rlm@3
|
100 for(var z in values){
|
rlm@3
|
101 var style = scroll[z]+(offset[z]-size[z])/2+(offsets[z] || 0);
|
rlm@3
|
102 this.setStyle(values[z], style < 10 ? 10 : style);
|
rlm@3
|
103 }
|
rlm@3
|
104
|
rlm@3
|
105 return this;
|
rlm@3
|
106 }
|
rlm@3
|
107
|
rlm@3
|
108 });
|
rlm@3
|
109
|
rlm@3
|
110 var Dialog = new Class({
|
rlm@3
|
111
|
rlm@3
|
112 Implements: [Options, Events],
|
rlm@3
|
113
|
rlm@3
|
114 options: {
|
rlm@3
|
115 /*onShow: $empty,
|
rlm@3
|
116 onOpen: $empty,
|
rlm@3
|
117 onConfirm: $empty,
|
rlm@3
|
118 onDecline: $empty,
|
rlm@3
|
119 onClose: $empty,*/
|
rlm@3
|
120 request: null,
|
rlm@3
|
121 buttons: ['confirm', 'decline'],
|
rlm@3
|
122 language: {}
|
rlm@3
|
123 },
|
rlm@3
|
124
|
rlm@3
|
125 initialize: function(text, options){
|
rlm@3
|
126 this.setOptions(options);
|
rlm@3
|
127
|
rlm@3
|
128 this.el = new Element('div', {
|
rlm@3
|
129 'class': 'dialog dialog-engine-'+Browser.Engine.name+(Browser.Engine.trident ? Browser.Engine.version : ''),
|
rlm@3
|
130 opacity: 0,
|
rlm@3
|
131 tween: {duration: 250}
|
rlm@3
|
132 }).adopt([
|
rlm@3
|
133 $type(text)=='string' ? new Element('div', {text: text}) : text
|
rlm@3
|
134 ]);
|
rlm@3
|
135
|
rlm@3
|
136 if(this.options.content) this.el.getElement('div').adopt(this.options.content);
|
rlm@3
|
137
|
rlm@3
|
138 Array.each(this.options.buttons, function(v){
|
rlm@3
|
139 new Element('button', {'class': 'dialog-'+v, text: this.options.language[v]}).addEvent('click', (function(e){
|
rlm@3
|
140 if(e) e.stop();
|
rlm@3
|
141 this.fireEvent(v).fireEvent('close');
|
rlm@3
|
142 this.overlay.hide();
|
rlm@3
|
143 this.destroy();
|
rlm@3
|
144 }).bind(this)).inject(this.el);
|
rlm@3
|
145 }, this);
|
rlm@3
|
146
|
rlm@3
|
147 this.overlay = new Overlay({
|
rlm@3
|
148 'class': 'overlay overlay-dialog',
|
rlm@3
|
149 events: {click: this.fireEvent.bind(this, ['close'])},
|
rlm@3
|
150 tween: {duration: 250}
|
rlm@3
|
151 });
|
rlm@3
|
152
|
rlm@3
|
153 this.bound = {
|
rlm@3
|
154 scroll: (function(){
|
rlm@3
|
155 if(!this.el) this.destroy();
|
rlm@3
|
156 else this.el.center();
|
rlm@3
|
157 }).bind(this),
|
rlm@3
|
158 keyesc: (function(e){
|
rlm@3
|
159 if(e.key=='esc') this.fireEvent('close').destroy();
|
rlm@3
|
160 }).bind(this)
|
rlm@3
|
161 };
|
rlm@3
|
162
|
rlm@3
|
163 this.show();
|
rlm@3
|
164 },
|
rlm@3
|
165
|
rlm@3
|
166 show: function(){
|
rlm@3
|
167 this.overlay.show();
|
rlm@3
|
168 var self = this.fireEvent('open');
|
rlm@3
|
169 this.el.setStyle('display', 'block').inject(document.body).center().fade(1).get('tween').chain(function(){
|
rlm@3
|
170 self.fireEvent('show');
|
rlm@3
|
171 });
|
rlm@3
|
172
|
rlm@3
|
173 window.addEvents({
|
rlm@3
|
174 scroll: this.bound.scroll,
|
rlm@3
|
175 resize: this.bound.scroll,
|
rlm@3
|
176 keyup: this.bound.keyesc
|
rlm@3
|
177 });
|
rlm@3
|
178 },
|
rlm@3
|
179
|
rlm@3
|
180 destroy: function(){
|
rlm@3
|
181 if(this.el) this.el.fade(0).get('tween').chain((function(){
|
rlm@3
|
182 this.overlay.destroy();
|
rlm@3
|
183 this.el.destroy();
|
rlm@3
|
184 }).bind(this));
|
rlm@3
|
185
|
rlm@3
|
186 window.removeEvent('scroll', this.bound.scroll).removeEvent('resize', this.bound.scroll).removeEvent('keyup', this.bound.keyesc);
|
rlm@3
|
187 }
|
rlm@3
|
188
|
rlm@3
|
189 }),
|
rlm@3
|
190 Overlay = new Class({
|
rlm@3
|
191
|
rlm@3
|
192 initialize: function(options){
|
rlm@3
|
193 this.el = new Element('div', $extend({
|
rlm@3
|
194 'class': 'overlay'
|
rlm@3
|
195 }, options)).inject(document.body);
|
rlm@3
|
196 },
|
rlm@3
|
197
|
rlm@3
|
198 show: function(){
|
rlm@3
|
199 this.objects = $$('object, select, embed').filter(function(el){
|
rlm@3
|
200 return el.id=='SwiffFileManagerUpload' || el.style.visibility=='hidden' ? false : !!(el.style.visibility = 'hidden');
|
rlm@3
|
201 });
|
rlm@3
|
202
|
rlm@3
|
203 this.resize = (function(){
|
rlm@3
|
204 if(!this.el) this.destroy();
|
rlm@3
|
205 else this.el.setStyles({
|
rlm@3
|
206 width: document.getScrollWidth(),
|
rlm@3
|
207 height: document.getScrollHeight()
|
rlm@3
|
208 });
|
rlm@3
|
209 }).bind(this);
|
rlm@3
|
210
|
rlm@3
|
211 this.resize();
|
rlm@3
|
212
|
rlm@3
|
213 this.el.setStyles({
|
rlm@3
|
214 opacity: 0,
|
rlm@3
|
215 display: 'block'
|
rlm@3
|
216 }).get('tween').pause().start('opacity', 0.5);
|
rlm@3
|
217
|
rlm@3
|
218 window.addEvent('resize', this.resize);
|
rlm@3
|
219
|
rlm@3
|
220 return this;
|
rlm@3
|
221 },
|
rlm@3
|
222
|
rlm@3
|
223 hide: function(){
|
rlm@3
|
224 this.el.fade(0).get('tween').chain((function(){
|
rlm@3
|
225 this.revertObjects();
|
rlm@3
|
226 this.el.setStyle('display', 'none');
|
rlm@3
|
227 }).bind(this));
|
rlm@3
|
228
|
rlm@3
|
229 window.removeEvent('resize', this.resize);
|
rlm@3
|
230
|
rlm@3
|
231 return this;
|
rlm@3
|
232 },
|
rlm@3
|
233
|
rlm@3
|
234 destroy: function(){
|
rlm@3
|
235 this.revertObjects().el.destroy();
|
rlm@3
|
236 },
|
rlm@3
|
237
|
rlm@3
|
238 revertObjects: function(){
|
rlm@3
|
239 if(this.objects && this.objects.length)
|
rlm@3
|
240 this.objects.each(function(el){
|
rlm@3
|
241 el.style.visibility = 'visible';
|
rlm@3
|
242 });
|
rlm@3
|
243
|
rlm@3
|
244 return this;
|
rlm@3
|
245 }
|
rlm@3
|
246
|
rlm@3
|
247 }); |