Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed

if(!dojo._hasResource["dojox.widget.FileInputAuto"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.widget.FileInputAuto"] = true;
dojo.provide("dojox.widget.FileInputAuto");

dojo.require("dojox.widget.FileInput");
dojo.require("dojo.io.iframe"); 

dojo.declare("dojox.widget.FileInputAuto",
        dojox.widget.FileInput,
        {
        // summary: An extension on dojox.widget.FileInput providing background upload progress
        //
        // description: An extended version of FileInput - when the user focuses away from the input
        //      the selected file is posted via dojo.io.iframe to the url. example implementation
        //      comes with PHP solution for handling upload, and returning required data.
        //      
        // notes: the return data from the io.iframe is used to populate the input element with 
        //      data regarding the results. it will be a JSON object, like:
        //      
        //      results = { size: "1024", filename: "file.txt" }
        //      
        //      all the parameters allowed to dojox.widget.FileInput apply

        // url: String
        //      the URL where our background FileUpload will be sent
        url: "",

        // blurDelay: Integer
        //      time in ms before an un-focused widget will wait before uploading the file to the url="" specified
        //      default: 2 seconds
        blurDelay: 2000,

        // duration: Integer
        //      The time in ms to use as the generic timing mechanism for the animations
        //      set to 1 or 0 for "immediate respose"
        duration: 500,

        // uploadMessage: String
        //      
        //      FIXME: i18n somehow?
        uploadMessage: "Uploading ...", 
        
        _sent: false,

        // small template changes, new attachpoint: overlay
        templateString:"<div class=\"dijitFileInput\">\n\t<input class=\"dijitFileInputReal\" type=\"file\" dojoAttachPoint=\"fileInput\" />\n\t<div class=\"dijitFakeInput\" dojoAttachPoint=\"fakeNodeHolder\">\n\t\t<input class=\"dijitFileInputVisible\" type=\"text\" dojoAttachPoint=\"focusNode, inputNode\" />\n\t\t<span class=\"dijitInline dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</span>\n\t\t<span class=\"dijitInline dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" dojoAttachEvent=\"onclick:_onClick\">${cancelText}</span>\n\t</div>\n\t<div class=\"dijitProgressOverlay\" dojoAttachPoint=\"overlay\">&nbsp;</div>\n</div>\n",

        startup: function(){
                // summary: add our extra blur listeners
                this._blurListener = dojo.connect(this.fileInput,"onblur",this,"_onBlur");
                this._focusListener = dojo.connect(this.fileInput,"onfocus",this,"_onFocus"); 
                this.inherited("startup",arguments);
        },

        _onFocus: function(){
                // summary: clear the upload timer
                if(this._blurTimer){ clearTimeout(this._blurTimer); }
        },

        _onBlur: function(){
                // summary: start the upload timer
                if(this._blurTimer){ clearTimeout(this._blurTimer); }
                if(!this._sent){
                        this._blurTimer = setTimeout(dojo.hitch(this,"_sendFile"),this.blurDelay);              
                }
        },


        setMessage: function(/*String*/title){
                // summary: set the text of the progressbar
                
                // FIXME: this throws errors in IE?!?!?!? egads.                
                if(!dojo.isIE){ this.overlay.innerHTML = title; }
        },
        
        _sendFile: function(/* Event */e){
                // summary: triggers the chain of events needed to upload a file in the background.
                if(!this.fileInput.value || this._sent){ return; }
                
                dojo.style(this.fakeNodeHolder,"display","none");
                dojo.style(this.overlay,"opacity","0");
                dojo.style(this.overlay,"display","block");

                this.setMessage(this.uploadMessage);

                dojo.fadeIn({ node: this.overlay, duration:this.duration }).play();

                var _newForm = document.createElement('form');
                _newForm.setAttribute("enctype","multipart/form-data");
                var node = dojo.clone(this.fileInput);
                _newForm.appendChild(this.fileInput);
                dojo.body().appendChild(_newForm);

                dojo.io.iframe.send({
                        url: this.url+"?name="+this.name,
                        form: _newForm,
                        handleAs: "text",
                        handle: dojo.hitch(this,"_handleSend")
                });
        },

        _handleSend: function(data,ioArgs){
                // summary: The callback to toggle the progressbar, and fire the user-defined callback
                
                if(!dojo.isIE){
                        // otherwise, this throws errors in ie? FIXME:
                        this.overlay.innerHTML = "";
                }
                
                this._sent = true;
                dojo.style(this.overlay,"opacity","0");
                dojo.style(this.overlay,"border","none");
                dojo.style(this.overlay,"background","none"); 

                this.overlay.style.backgroundImage = "none";
                this.fileInput.style.display = "none";
                this.fakeNodeHolder.style.display = "none";
                dojo.fadeIn({ node:this.overlay, duration:this.duration }).play(250);
                
                dojo.disconnect(this._blurListener);
                dojo.disconnect(this._focusListener);
                
                this.onComplete(data,ioArgs,this);
        },

        _onClick: function(e){
                // summary: accomodate our extra focusListeners
                if(this._blurTimer){ clearTimeout(this._blurTimer); }

                dojo.disconnect(this._blurListener);
                dojo.disconnect(this._focusListener);

                this.inherited("_onClick",arguments);

                this._blurListener = dojo.connect(this.fileInput,"onblur",this,"_onBlur");
                this._focusListener = dojo.connect(this.fileInput,"onfocus",this,"_onFocus"); 
        },

        onComplete: function(/* Object */data, /* dojo.Deferred._ioArgs */ioArgs, /* this */widgetRef){
                // summary: stub function fired when an upload has finished. 
                // data: the raw data found in the first [TEXTAREA] tag of the post url
                // ioArgs: the dojo.Deferred data being passed from the handle: callback
        }
});

dojo.declare("dojox.widget.FileInputBlind",
        dojox.widget.FileInputAuto,
        {
        // summary: An extended version of dojox.widget.FileInputAuto
        //      that does not display an input node, but rather only a button
        //      and otherwise behaves just like FileInputAuto
        
        startup: function(){
                // summary: hide our fileInput input field
                this.inherited("startup",arguments);
                this._off = dojo.style(this.inputNode,"width");
                this.inputNode.style.display = "none";
                this._fixPosition();
        },
        
        _fixPosition: function(){               
                // summary: in this case, set the button under where the visible button is 
                if(dojo.isIE){
                        dojo.style(this.fileInput,"width","1px");
                        //dojo.style(this.fileInput,"height",this.overlay.scrollHeight+"px")
                }else{
                        dojo.style(this.fileInput,"left","-"+(this._off)+"px");
                }
        },

        _onClick: function(e){
                // summary: onclick, we need to reposition our newly created input type="file"
                this.inherited("_onClick",arguments);
                this._fixPosition(); 
        }
});

}