annotate e2gallerypro/e2upload/Source/Additions.js @ 13:f16185fe9ed9 judyates

[svn r14]
author rlm
date Mon, 12 Apr 2010 03:30:00 -0400
parents 3f6b44aa6b35
children
rev   line source
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 });