erp/template/erp/js2/ajaxupload.3.5.js

/**
 * Ajax upload
 * Project page - http://valums.com/ajax-upload/
 * Copyright (c) 2008 Andris Valums, http://valums.com
 * Licensed under the MIT license (http://valums.com/mit-license/)
 * Version 3.5 (23.06.2009)
 */

/**
 * Changes from the previous version:
 * 1. Added better JSON handling that allows to use 'application/javascript' as a response
 * 2. Added demo for usage with jQuery UI dialog
 * 3. Fixed IE "mixed content" issue when used with secure connections
 * 
 * For the full changelog please visit: 
 * http://valums.com/ajax-upload-changelog/
 */

(function(){
    
var d = document, w = window;

/**
 * Get element by id
 */    
function get(element){
    if (typeof element == "string")
        element = d.getElementById(element);
    return element;
}

/**
 * Attaches event to a dom element
 */
function addEvent(el, type, fn){
    if (w.addEventListener){
        el.addEventListener(type, fn, false);
    } else if (w.attachEvent){
        var f = function(){
          fn.call(el, w.event);
        };            
        el.attachEvent('on' + type, f)
    }
}


/**
 * Creates and returns element from html chunk
 */
var toElement = function(){
    var div = d.createElement('div');
    return function(html){
        div.innerHTML = html;
        var el = div.childNodes[0];
        div.removeChild(el);
        return el;
    }
}();

function hasClass(ele,cls){
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
    if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
}

// getOffset function copied from jQuery lib (http://jquery.com/)
if (document.documentElement["getBoundingClientRect"]){
    // Get Offset using getBoundingClientRect
    // http://ejohn.org/blog/getboundingclientrect-is-awesome/
    var getOffset = function(el){
        var box = el.getBoundingClientRect(),
        doc = el.ownerDocument,
        body = doc.body,
        docElem = doc.documentElement,
        
        // for ie 
        clientTop = docElem.clientTop || body.clientTop || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        
        // In Internet Explorer 7 getBoundingClientRect property is treated as physical,
        // while others are logical. Make all logical, like in IE8.
        
        
        zoom = 1;
        if (body.getBoundingClientRect) {
            var bound = body.getBoundingClientRect();
            zoom = (bound.right - bound.left)/body.clientWidth;
        }
        if (zoom > 1){
            clientTop = 0;
            clientLeft = 0;
        }
        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;
                
        return {
            top: top,
            left: left
        };
    }
    
} else {
    // Get offset adding all offsets 
    var getOffset = function(el){
        if (w.jQuery){
            return jQuery(el).offset();
        }        
            
        var top = 0, left = 0;
        do {
            top += el.offsetTop || 0;
            left += el.offsetLeft || 0;
        }
        while (el = el.offsetParent);
        
        return {
            left: left,
            top: top
        };
    }
}

function getBox(el){
    var left, right, top, bottom;    
    var offset = getOffset(el);
    left = offset.left;
    top = offset.top;
                        
    right = left + el.offsetWidth;
    bottom = top + el.offsetHeight;        
        
    return {
        left: left,
        right: right,
        top: top,
        bottom: bottom
    };
}

/**
 * Crossbrowser mouse coordinates
 */
function getMouseCoords(e){        
    // pageX/Y is not supported in IE
    // http://www.quirksmode.org/dom/w3c_cssom.html            
    if (!e.pageX && e.clientX){
        // In Internet Explorer 7 some properties (mouse coordinates) are treated as physical,
        // while others are logical (offset).
        var zoom = 1;    
        var body = document.body;
        
        if (body.getBoundingClientRect) {
            var bound = body.getBoundingClientRect();
            zoom = (bound.right - bound.left)/body.clientWidth;
        }

        return {
            x: e.clientX / zoom + d.body.scrollLeft + d.documentElement.scrollLeft,
            y: e.clientY / zoom + d.body.scrollTop + d.documentElement.scrollTop
        };
    }
    
    return {
        x: e.pageX,
        y: e.pageY
    };        

}
/**
 * Function generates unique id
 */        
var getUID = function(){
    var id = 0;
    return function(){
        return 'ValumsAjaxUpload' + id++;
    }
}();

function fileFromPath(file){
    return file.replace(/.*(\/|\\)/, "");            
}

function getExt(file){
    return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
}            

// Please use AjaxUpload , Ajax_upload will be removed in the next version
Ajax_upload = AjaxUpload = function(button, options){
    if (button.jquery){
        // jquery object was passed
        button = button[0];
    } else if (typeof button == "string" && /^#.*/.test(button)){                    
        button = button.slice(1);                
    }
    button = get(button);    
    
    this._input = null;
    this._button = button;
    this._disabled = false;
    this._submitting = false;
    // Variable changes to true if the button was clicked
    // 3 seconds ago (requred to fix Safari on Mac error)
    this._justClicked = false;
    this._parentDialog = d.body;
    
    if (window.jQuery && jQuery.ui && jQuery.ui.dialog){
        var parentDialog = jQuery(this._button).parents('.ui-dialog');
        if (parentDialog.length){
            this._parentDialog = parentDialog[0];
        }
    }            
                    
    this._settings = {
        // Location of the server-side upload script
        action: 'upload.php',            
        // File upload name
        name: 'userfile',
        // Additional data to send
        data: {},
        // Submit file as soon as it's selected
        autoSubmit: true,
        // The type of data that you're expecting back from the server.
        // Html and xml are detected automatically.
        // Only useful when you are using json data as a response.
        // Set to "json" in that case. 
        responseType: false,
        // When user selects a file, useful with autoSubmit disabled            
        onChange: function(file, extension){},                    
        // Callback to fire before file is uploaded
        // You can return false to cancel upload
        onSubmit: function(file, extension){},
        // Fired when file upload is completed
        // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
        onComplete: function(file, response) {}
    };

    // Merge the users options with our defaults
    for (var i in options) {
        this._settings[i] = options[i];
    }
    
    this._createInput();
    this._rerouteClicks();
}
            
// assigning methods to our class
AjaxUpload.prototype = {
    setData : function(data){
        this._settings.data = data;
    },
    disable : function(){
        this._disabled = true;
    },
    enable : function(){
        this._disabled = false;
    },
    // removes ajaxupload
    destroy : function(){
        if(this._input){
            if(this._input.parentNode){
                this._input.parentNode.removeChild(this._input);
            }
            this._input = null;
        }
    },                
    /**
     * Creates invisible file input above the button 
     */
    _createInput : function(){
        var self = this;
        var input = d.createElement("input");
        input.setAttribute('type', 'file');
        input.setAttribute('name', this._settings.name);
        var styles = {
            'position' : 'absolute'
            ,'margin': '-5px 0 0 -175px'
            ,'padding': 0
            ,'width': '220px'
            ,'height': '30px'
            ,'fontSize': '14px'                                
            ,'opacity': 0
            ,'cursor': 'pointer'
            ,'display' : 'none'
            ,'zIndex' :  2147483583 //Max zIndex supported by Opera 9.0-9.2x 
            // Strange, I expected 2147483647                    
        };
        for (var i in styles){
            input.style[i] = styles[i];
        }
        
        // Make sure that element opacity exists
        // (IE uses filter instead)
        if ( ! (input.style.opacity === "0")){
            input.style.filter = "alpha(opacity=0)";
        }
                            
        this._parentDialog.appendChild(input);

        addEvent(input, 'change', function(){
            // get filename from input
            var file = fileFromPath(this.value);    
            if(self._settings.onChange.call(self, file, getExt(file)) == false ){
                return;                
            }                                                        
            // Submit form when value is changed
            if (self._settings.autoSubmit){
                self.submit();                        
            }                        
        });
        
        // Fixing problem with Safari
        // The problem is that if you leave input before the file select dialog opens
        // it does not upload the file.
        // As dialog opens slowly (it is a sheet dialog which takes some time to open)
        // there is some time while you can leave the button.
        // So we should not change display to none immediately
        addEvent(input, 'click', function(){
            self.justClicked = true;
            setTimeout(function(){
                // we will wait 3 seconds for dialog to open
                self.justClicked = false;
            }, 3000);            
        });        
        
        this._input = input;
    },
    _rerouteClicks : function (){
        var self = this;
    
        // IE displays 'access denied' error when using this method
        // other browsers just ignore click()
        // addEvent(this._button, 'click', function(e){
        //   self._input.click();
        // });
                
        var box, dialogOffset = {top:0, left:0}, over = false;                            
        addEvent(self._button, 'mouseover', function(e){
            if (!self._input || over) return;
            over = true;
            box = getBox(self._button);
                    
            if (self._parentDialog != d.body){
                dialogOffset = getOffset(self._parentDialog);
            }    
        });
        
    
        // we can't use mouseout on the button,
        // because invisible input is over it
        addEvent(document, 'mousemove', function(e){
            var input = self._input;            
            if (!input || !over) return;
            
            if (self._disabled){
                removeClass(self._button, 'hover');
                input.style.display = 'none';
                return;
            }    
                                        
            var c = getMouseCoords(e);

            if ((c.x >= box.left) && (c.x <= box.right) && 
            (c.y >= box.top) && (c.y <= box.bottom)){            
                input.style.top = c.y - dialogOffset.top + 'px';
                input.style.left = c.x - dialogOffset.left + 'px';
                input.style.display = 'block';
                addClass(self._button, 'hover');                
            } else {        
                // mouse left the button
                over = false;
                if (!self.justClicked){
                    input.style.display = 'none';
                }
                removeClass(self._button, 'hover');
            }            
        });            
            
    },
    /**
     * Creates iframe with unique name
     */
    _createIframe : function(){
        // unique name
        // We cannot use getTime, because it sometimes return
        // same value in safari :(
        var id = getUID();
        
        // Remove ie6 "This page contains both secure and nonsecure items" prompt 
        // http://tinyurl.com/77w9wh
        var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
        iframe.id = id;
        iframe.style.display = 'none';
        d.body.appendChild(iframe);            
        return iframe;                        
    },
    /**
     * Upload file without refreshing the page
     */
    submit : function(){
        var self = this, settings = this._settings;    
                    
        if (this._input.value === ''){
            // there is no file
            return;
        }
                                        
        // get filename from input
        var file = fileFromPath(this._input.value);            

        // execute user event
        if (! (settings.onSubmit.call(this, file, getExt(file)) == false)) {
            // Create new iframe for this submission
            var iframe = this._createIframe();
            
            // Do not submit if user function returns false                                        
            var form = this._createForm(iframe);
            form.appendChild(this._input);
            
            form.submit();
            
            d.body.removeChild(form);                
            form = null;
            this._input = null;
            
            // create new input
            this._createInput();
            
            var toDeleteFlag = false;
            
            addEvent(iframe, 'load', function(e){
                    
                if (// For Safari
                    iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||
                    // For FF, IE
                    iframe.src == "javascript:'<html></html>';"){                        
                    
                    // First time around, do not delete.
                    if( toDeleteFlag ){
                        // Fix busy state in FF3
                        setTimeout( function() {
                            d.body.removeChild(iframe);
                        }, 0);
                    }
                    return;
                }                
                
                var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;

                // fixing Opera 9.26
                if (doc.readyState && doc.readyState != 'complete'){
                    // Opera fires load event multiple times
                    // Even when the DOM is not ready yet
                    // this fix should not affect other browsers
                    return;
                }
                
                // fixing Opera 9.64
                if (doc.body && doc.body.innerHTML == "false"){
                    // In Opera 9.64 event was fired second time
                    // when body.innerHTML changed from false 
                    // to server response approx. after 1 sec
                    return;                
                }
                
                var response;
                                    
                if (doc.XMLDocument){
                    // response is a xml document IE property
                    response = doc.XMLDocument;
                } else if (doc.body){
                    // response is html document or plain text
                    response = doc.body.innerHTML;
                    if (settings.responseType && settings.responseType.toLowerCase() == 'json'){
                        // If the document was sent as 'application/javascript' or
                        // 'text/javascript', then the browser wraps the text in a <pre>
                        // tag and performs html encoding on the contents.  In this case,
                        // we need to pull the original text content from the text node's
                        // nodeValue property to retrieve the unmangled content.
                        // Note that IE6 only understands text/html
                        if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE'){
                            response = doc.body.firstChild.firstChild.nodeValue;
                        }
                        if (response) {
                            response = window["eval"]("(" + response + ")");
                        } else {
                            response = {};
                        }
                    }
                } else {
                    // response is a xml document
                    var response = doc;
                }
                                                                            
                settings.onComplete.call(self, file, response);
                        
                // Reload blank page, so that reloading main page
                // does not re-submit the post. Also, remember to
                // delete the frame
                toDeleteFlag = true;
                
                // Fix IE mixed content issue
                iframe.src = "javascript:'<html></html>';";                                         
            });
    
        } else {
            // clear input to allow user to select same file
            // Doesn't work in IE6
            // this._input.value = '';
            d.body.removeChild(this._input);                
            this._input = null;
            
            // create new input
            this._createInput();                        
        }
    },        
    /**
     * Creates form, that will be submitted to iframe
     */
    _createForm : function(iframe){
        var settings = this._settings;
        
        // method, enctype must be specified here
        // because changing this attr on the fly is not allowed in IE 6/7        
        var form = toElement('<form method="post" enctype="multipart/form-data"></form>');
        form.style.display = 'none';
        form.action = settings.action;
        form.target = iframe.name;
        d.body.appendChild(form);
        
        // Create hidden input element for each data key
        for (var prop in settings.data){
            var el = d.createElement("input");
            el.type = 'hidden';
            el.name = prop;
            el.value = settings.data[prop];
            form.appendChild(el);
        }            
        return form;
    }    
};
})();