]> git.mxchange.org Git - friendica.git/blob - js/ajaxupload.js
Merge remote-tracking branch 'friendika/master'
[friendica.git] / js / ajaxupload.js
1 /**
2  * AJAX Upload ( http://valums.com/ajax-upload/ ) 
3  * Copyright (c) Andris Valums
4  * Licensed under the MIT license ( http://valums.com/mit-license/ )
5  * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions. 
6  */
7
8 (function () {
9     /* global window */
10     /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */
11     
12     /**
13      * Wrapper for FireBug's console.log
14      */
15     function log(){
16         if (typeof(console) != 'undefined' && typeof(console.log) == 'function'){            
17             Array.prototype.unshift.call(arguments, '[Ajax Upload]');
18             console.log( Array.prototype.join.call(arguments, ' '));
19         }
20     } 
21
22     /**
23      * Attaches event to a dom element.
24      * @param {Element} el
25      * @param type event name
26      * @param fn callback This refers to the passed element
27      */
28     function addEvent(el, type, fn){
29         if (el.addEventListener) {
30             el.addEventListener(type, fn, false);
31         } else if (el.attachEvent) {
32             el.attachEvent('on' + type, function(){
33                 fn.call(el);
34                 });
35             } else {
36             throw new Error('not supported or DOM not loaded');
37         }
38     }   
39     
40     /**
41      * Attaches resize event to a window, limiting
42      * number of event fired. Fires only when encounteres
43      * delay of 100 after series of events.
44      * 
45      * Some browsers fire event multiple times when resizing
46      * http://www.quirksmode.org/dom/events/resize.html
47      * 
48      * @param fn callback This refers to the passed element
49      */
50     function addResizeEvent(fn){
51         var timeout;
52                
53             addEvent(window, 'resize', function(){
54             if (timeout){
55                 clearTimeout(timeout);
56             }
57             timeout = setTimeout(fn, 100);                        
58         });
59     }    
60     
61     // Needs more testing, will be rewriten for next version        
62     // getOffset function copied from jQuery lib (http://jquery.com/)
63     if (document.documentElement.getBoundingClientRect){
64         // Get Offset using getBoundingClientRect
65         // http://ejohn.org/blog/getboundingclientrect-is-awesome/
66         var getOffset = function(el){
67             var box = el.getBoundingClientRect();
68             var doc = el.ownerDocument;
69             var body = doc.body;
70             var docElem = doc.documentElement; // for ie 
71             var clientTop = docElem.clientTop || body.clientTop || 0;
72             var clientLeft = docElem.clientLeft || body.clientLeft || 0;
73              
74             // In Internet Explorer 7 getBoundingClientRect property is treated as physical,
75             // while others are logical. Make all logical, like in IE8. 
76             var zoom = 1;            
77             if (body.getBoundingClientRect) {
78                 var bound = body.getBoundingClientRect();
79                 zoom = (bound.right - bound.left) / body.clientWidth;
80             }
81             
82             if (zoom > 1) {
83                 clientTop = 0;
84                 clientLeft = 0;
85             }
86             
87             var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop, left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft;
88             
89             return {
90                 top: top,
91                 left: left
92             };
93         };        
94     } else {
95         // Get offset adding all offsets 
96         var getOffset = function(el){
97             var top = 0, left = 0;
98             do {
99                 top += el.offsetTop || 0;
100                 left += el.offsetLeft || 0;
101                 el = el.offsetParent;
102             } while (el);
103             
104             return {
105                 left: left,
106                 top: top
107             };
108         };
109     }
110     
111     /**
112      * Returns left, top, right and bottom properties describing the border-box,
113      * in pixels, with the top-left relative to the body
114      * @param {Element} el
115      * @return {Object} Contains left, top, right,bottom
116      */
117     function getBox(el){
118         var left, right, top, bottom;
119         var offset = getOffset(el);
120         left = offset.left;
121         top = offset.top;
122         
123         right = left + el.offsetWidth;
124         bottom = top + el.offsetHeight;
125         
126         return {
127             left: left,
128             right: right,
129             top: top,
130             bottom: bottom
131         };
132     }
133     
134     /**
135      * Helper that takes object literal
136      * and add all properties to element.style
137      * @param {Element} el
138      * @param {Object} styles
139      */
140     function addStyles(el, styles){
141         for (var name in styles) {
142             if (styles.hasOwnProperty(name)) {
143                 el.style[name] = styles[name];
144             }
145         }
146     }
147         
148     /**
149      * Function places an absolutely positioned
150      * element on top of the specified element
151      * copying position and dimentions.
152      * @param {Element} from
153      * @param {Element} to
154      */    
155     function copyLayout(from, to){
156             var box = getBox(from);
157         
158         addStyles(to, {
159                 position: 'absolute',                    
160                 left : box.left + 'px',
161                 top : box.top + 'px',
162                 width : from.offsetWidth + 'px',
163                 height : from.offsetHeight + 'px'
164             });        
165         to.title = from.title;
166
167     }
168
169     /**
170     * Creates and returns element from html chunk
171     * Uses innerHTML to create an element
172     */
173     var toElement = (function(){
174         var div = document.createElement('div');
175         return function(html){
176             div.innerHTML = html;
177             var el = div.firstChild;
178             return div.removeChild(el);
179         };
180     })();
181             
182     /**
183      * Function generates unique id
184      * @return unique id 
185      */
186     var getUID = (function(){
187         var id = 0;
188         return function(){
189             return 'ValumsAjaxUpload' + id++;
190         };
191     })();        
192  
193     /**
194      * Get file name from path
195      * @param {String} file path to file
196      * @return filename
197      */  
198     function fileFromPath(file){
199         return file.replace(/.*(\/|\\)/, "");
200     }
201     
202     /**
203      * Get file extension lowercase
204      * @param {String} file name
205      * @return file extenstion
206      */    
207     function getExt(file){
208         return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : '';
209     }
210
211     function hasClass(el, name){        
212         var re = new RegExp('\\b' + name + '\\b');        
213         return re.test(el.className);
214     }    
215     function addClass(el, name){
216         if ( ! hasClass(el, name)){   
217             el.className += ' ' + name;
218         }
219     }    
220     function removeClass(el, name){
221         var re = new RegExp('\\b' + name + '\\b');                
222         el.className = el.className.replace(re, '');        
223     }
224     
225     function removeNode(el){
226         el.parentNode.removeChild(el);
227     }
228
229     /**
230      * Easy styling and uploading
231      * @constructor
232      * @param button An element you want convert to 
233      * upload button. Tested dimentions up to 500x500px
234      * @param {Object} options See defaults below.
235      */
236     window.AjaxUpload = function(button, options){
237         this._settings = {
238             // Location of the server-side upload script
239             action: 'upload.php',
240             // File upload name
241             name: 'userfile',
242             // Additional data to send
243             data: {},
244             // Submit file as soon as it's selected
245             autoSubmit: true,
246             // The type of data that you're expecting back from the server.
247             // html and xml are detected automatically.
248             // Only useful when you are using json data as a response.
249             // Set to "json" in that case. 
250             responseType: false,
251             // Class applied to button when mouse is hovered
252             hoverClass: 'hover',
253             // Class applied to button when button is focused
254             focusClass: 'focus',
255             // Class applied to button when AU is disabled
256             disabledClass: 'disabled',            
257             // When user selects a file, useful with autoSubmit disabled
258             // You can return false to cancel upload                    
259             onChange: function(file, extension){
260             },
261             // Callback to fire before file is uploaded
262             // You can return false to cancel upload
263             onSubmit: function(file, extension){
264             },
265             // Fired when file upload is completed
266             // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
267             onComplete: function(file, response){
268             }
269         };
270                         
271         // Merge the users options with our defaults
272         for (var i in options) {
273             if (options.hasOwnProperty(i)){
274                 this._settings[i] = options[i];
275             }
276         }
277                 
278         // button isn't necessary a dom element
279         if (button.jquery){
280             // jQuery object was passed
281             button = button[0];
282         } else if (typeof button == "string") {
283             if (/^#.*/.test(button)){
284                 // If jQuery user passes #elementId don't break it                                      
285                 button = button.slice(1);                
286             }
287             
288             button = document.getElementById(button);
289         }
290         
291         if ( ! button || button.nodeType !== 1){
292             throw new Error("Please make sure that you're passing a valid element"); 
293         }
294                 
295         if ( button.nodeName.toUpperCase() == 'A'){
296             // disable link                       
297             addEvent(button, 'click', function(e){
298                 if (e && e.preventDefault){
299                     e.preventDefault();
300                 } else if (window.event){
301                     window.event.returnValue = false;
302                 }
303             });
304         }
305                     
306         // DOM element
307         this._button = button;        
308         // DOM element                 
309         this._input = null;
310         // If disabled clicking on button won't do anything
311         this._disabled = false;
312         
313         // if the button was disabled before refresh if will remain
314         // disabled in FireFox, let's fix it
315         this.enable();        
316         
317         this._rerouteClicks();
318     };
319     
320     // assigning methods to our class
321     AjaxUpload.prototype = {
322         setData: function(data){
323             this._settings.data = data;
324         },
325         disable: function(){            
326             addClass(this._button, this._settings.disabledClass);
327             this._disabled = true;
328             
329             var nodeName = this._button.nodeName.toUpperCase();            
330             if (nodeName == 'INPUT' || nodeName == 'BUTTON'){
331                 this._button.setAttribute('disabled', 'disabled');
332             }            
333             
334             // hide input
335             if (this._input){
336                 // We use visibility instead of display to fix problem with Safari 4
337                 // The problem is that the value of input doesn't change if it 
338                 // has display none when user selects a file           
339                 this._input.parentNode.style.visibility = 'hidden';
340             }
341         },
342         enable: function(){
343             removeClass(this._button, this._settings.disabledClass);
344             this._button.removeAttribute('disabled');
345             this._disabled = false;
346             
347         },
348         /**
349          * Creates invisible file input 
350          * that will hover above the button
351          * <div><input type='file' /></div>
352          */
353         _createInput: function(){ 
354             var self = this;
355                         
356             var input = document.createElement("input");
357             input.setAttribute('type', 'file');
358             input.setAttribute('name', this._settings.name);
359
360             addStyles(input, {
361                 'position' : 'absolute',
362                 // in Opera only 'browse' button
363                 // is clickable and it is located at
364                 // the right side of the input
365                 'right' : 0,
366                 'margin' : 0,
367                 'padding' : 0,
368                 'fontSize' : '480px',
369                 // in Firefox if font-family is set to
370                 // 'inherit' the input doesn't work
371                 'fontFamily' : 'sans-serif',
372                 'cursor' : 'pointer'
373             });            
374
375             var div = document.createElement("div");                        
376             addStyles(div, {
377                 'display' : 'block',
378                 'position' : 'absolute',
379                 'overflow' : 'hidden',
380                 'margin' : 0,
381                 'padding' : 0,                
382                 'opacity' : 0,
383                 // Make sure browse button is in the right side
384                 // in Internet Explorer
385                 'direction' : 'ltr',
386                 //Max zIndex supported by Opera 9.0-9.2
387                 'zIndex': 2147483583,
388                                 'cursor' : 'pointer'
389
390             });
391             
392             // Make sure that element opacity exists.
393             // Otherwise use IE filter            
394             if ( div.style.opacity !== "0") {
395                 if (typeof(div.filters) == 'undefined'){
396                     throw new Error('Opacity not supported by the browser');
397                 }
398                 div.style.filter = "alpha(opacity=0)";
399             }            
400             
401             addEvent(input, 'change', function(){
402                  
403                 if ( ! input || input.value === ''){                
404                     return;                
405                 }
406                             
407                 // Get filename from input, required                
408                 // as some browsers have path instead of it          
409                 var file = fileFromPath(input.value);
410                                 
411                 if (false === self._settings.onChange.call(self, file, getExt(file))){
412                     self._clearInput();                
413                     return;
414                 }
415                 
416                 // Submit form when value is changed
417                 if (self._settings.autoSubmit) {
418                     self.submit();
419                 }
420             });            
421
422             addEvent(input, 'mouseover', function(){
423                 addClass(self._button, self._settings.hoverClass);
424             });
425             
426             addEvent(input, 'mouseout', function(){
427                 removeClass(self._button, self._settings.hoverClass);
428                 removeClass(self._button, self._settings.focusClass);
429                 
430                 // We use visibility instead of display to fix problem with Safari 4
431                 // The problem is that the value of input doesn't change if it 
432                 // has display none when user selects a file           
433                 input.parentNode.style.visibility = 'hidden';
434
435             });   
436                         
437             addEvent(input, 'focus', function(){
438                 addClass(self._button, self._settings.focusClass);
439             });
440             
441             addEvent(input, 'blur', function(){
442                 removeClass(self._button, self._settings.focusClass);
443             });
444             
445                 div.appendChild(input);
446             document.body.appendChild(div);
447               
448             this._input = input;
449         },
450         _clearInput : function(){
451             if (!this._input){
452                 return;
453             }            
454                              
455             // this._input.value = ''; Doesn't work in IE6                               
456             removeNode(this._input.parentNode);
457             this._input = null;                                                                   
458             this._createInput();
459             
460             removeClass(this._button, this._settings.hoverClass);
461             removeClass(this._button, this._settings.focusClass);
462         },
463         /**
464          * Function makes sure that when user clicks upload button,
465          * the this._input is clicked instead
466          */
467         _rerouteClicks: function(){
468             var self = this;
469             
470             // IE will later display 'access denied' error
471             // if you use using self._input.click()
472             // other browsers just ignore click()
473
474             addEvent(self._button, 'mouseover', function(){
475                 if (self._disabled){
476                     return;
477                 }
478                                 
479                 if ( ! self._input){
480                         self._createInput();
481                 }
482                 
483                 var div = self._input.parentNode;                            
484                 copyLayout(self._button, div);
485                 div.style.visibility = 'visible';
486                                 
487             });
488             
489             
490             // commented because we now hide input on mouseleave
491             /**
492              * When the window is resized the elements 
493              * can be misaligned if button position depends
494              * on window size
495              */
496             //addResizeEvent(function(){
497             //    if (self._input){
498             //        copyLayout(self._button, self._input.parentNode);
499             //    }
500             //});            
501                                          
502         },
503         /**
504          * Creates iframe with unique name
505          * @return {Element} iframe
506          */
507         _createIframe: function(){
508             // We can't use getTime, because it sometimes return
509             // same value in safari :(
510             var id = getUID();            
511              
512             // We can't use following code as the name attribute
513             // won't be properly registered in IE6, and new window
514             // on form submit will open
515             // var iframe = document.createElement('iframe');
516             // iframe.setAttribute('name', id);                        
517  
518             var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
519             // src="javascript:false; was added
520             // because it possibly removes ie6 prompt 
521             // "This page contains both secure and nonsecure items"
522             // Anyway, it doesn't do any harm.            
523             iframe.setAttribute('id', id);
524             
525             iframe.style.display = 'none';
526             document.body.appendChild(iframe);
527             
528             return iframe;
529         },
530         /**
531          * Creates form, that will be submitted to iframe
532          * @param {Element} iframe Where to submit
533          * @return {Element} form
534          */
535         _createForm: function(iframe){
536             var settings = this._settings;
537                         
538             // We can't use the following code in IE6
539             // var form = document.createElement('form');
540             // form.setAttribute('method', 'post');
541             // form.setAttribute('enctype', 'multipart/form-data');
542             // Because in this case file won't be attached to request                    
543             var form = toElement('<form method="post" enctype="multipart/form-data"></form>');
544                         
545             form.setAttribute('action', settings.action);
546             form.setAttribute('target', iframe.name);                                   
547             form.style.display = 'none';
548             document.body.appendChild(form);
549             
550             // Create hidden input element for each data key
551             for (var prop in settings.data) {
552                 if (settings.data.hasOwnProperty(prop)){
553                     var el = document.createElement("input");
554                     el.setAttribute('type', 'hidden');
555                     el.setAttribute('name', prop);
556                     el.setAttribute('value', settings.data[prop]);
557                     form.appendChild(el);
558                 }
559             }
560             return form;
561         },
562         /**
563          * Gets response from iframe and fires onComplete event when ready
564          * @param iframe
565          * @param file Filename to use in onComplete callback 
566          */
567         _getResponse : function(iframe, file){            
568             // getting response
569             var toDeleteFlag = false, self = this, settings = this._settings;   
570                
571             addEvent(iframe, 'load', function(){                
572                 
573                 if (// For Safari 
574                     iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||
575                     // For FF, IE
576                     iframe.src == "javascript:'<html></html>';"){                                                                        
577                         // First time around, do not delete.
578                         // We reload to blank page, so that reloading main page
579                         // does not re-submit the post.
580                         
581                         if (toDeleteFlag) {
582                             // Fix busy state in FF3
583                             setTimeout(function(){
584                                 removeNode(iframe);
585                             }, 0);
586                         }
587                                                 
588                         return;
589                 }
590                 
591                 var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document;
592                 
593                 // fixing Opera 9.26,10.00
594                 if (doc.readyState && doc.readyState != 'complete') {
595                    // Opera fires load event multiple times
596                    // Even when the DOM is not ready yet
597                    // this fix should not affect other browsers
598                    return;
599                 }
600                 
601                 // fixing Opera 9.64
602                 if (doc.body && doc.body.innerHTML == "false") {
603                     // In Opera 9.64 event was fired second time
604                     // when body.innerHTML changed from false 
605                     // to server response approx. after 1 sec
606                     return;
607                 }
608                 
609                 var response;
610                 
611                 if (doc.XMLDocument) {
612                     // response is a xml document Internet Explorer property
613                     response = doc.XMLDocument;
614                 } else if (doc.body){
615                     // response is html document or plain text
616                     response = doc.body.innerHTML;
617                     
618                     if (settings.responseType && settings.responseType.toLowerCase() == 'json') {
619                         // If the document was sent as 'application/javascript' or
620                         // 'text/javascript', then the browser wraps the text in a <pre>
621                         // tag and performs html encoding on the contents.  In this case,
622                         // we need to pull the original text content from the text node's
623                         // nodeValue property to retrieve the unmangled content.
624                         // Note that IE6 only understands text/html
625                         if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE') {
626                             doc.normalize();
627                             response = doc.body.firstChild.firstChild.nodeValue;
628                         }
629                         
630                         if (response) {
631                             response = eval("(" + response + ")");
632                         } else {
633                             response = {};
634                         }
635                     }
636                 } else {
637                     // response is a xml document
638                     response = doc;
639                 }
640                 
641                 settings.onComplete.call(self, file, response);
642                 
643                 // Reload blank page, so that reloading main page
644                 // does not re-submit the post. Also, remember to
645                 // delete the frame
646                 toDeleteFlag = true;
647                 
648                 // Fix IE mixed content issue
649                 iframe.src = "javascript:'<html></html>';";
650             });            
651         },        
652         /**
653          * Upload file contained in this._input
654          */
655         submit: function(){                        
656             var self = this, settings = this._settings;
657             
658             if ( ! this._input || this._input.value === ''){                
659                 return;                
660             }
661                                     
662             var file = fileFromPath(this._input.value);
663             
664             // user returned false to cancel upload
665             if (false === settings.onSubmit.call(this, file, getExt(file))){
666                 this._clearInput();                
667                 return;
668             }
669             
670             // sending request    
671             var iframe = this._createIframe();
672             var form = this._createForm(iframe);
673             
674             // assuming following structure
675             // div -> input type='file'
676             removeNode(this._input.parentNode);            
677             removeClass(self._button, self._settings.hoverClass);
678             removeClass(self._button, self._settings.focusClass);
679                         
680             form.appendChild(this._input);
681                         
682             form.submit();
683
684             // request set, clean up                
685             removeNode(form); form = null;                          
686             removeNode(this._input); this._input = null;            
687             
688             // Get response from iframe and fire onComplete event when ready
689             this._getResponse(iframe, file);            
690
691             // get ready for next request            
692             this._createInput();
693         }
694     };
695 })();