* updated special:upload page js2 upload interface.
authorMichael Dale <dale@users.mediawiki.org>
Sat, 15 Aug 2009 20:46:43 +0000 (20:46 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Sat, 15 Aug 2009 20:46:43 +0000 (20:46 +0000)
** stubs / groundwork for add-media-wizard upload and inject edit interface
** does upload in background iframe
** tested in Firefox and ie6-8
* stubs for iframe api proxy (upload to commons from other wikis)

js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js
js2/mwEmbed/libAddMedia/simpleUploadForm.js
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/mv_embed.js
js2/mwEmbed/mwHostProxy.html [deleted file]
js2/mwEmbed/mwIframeProxy.html [new file with mode: 0644]
js2/mwEmbed/php/jsAutoloadLocalClasses.php
js2/mwRemoteProxy.html [deleted file]

index 3e87d2e..2be2ab6 100644 (file)
@@ -47,8 +47,8 @@ var default_bui_options = {
        'done_upload_cb': null,
        'target_edit_from':null,
        
-       //upload_mode can be 'post', 'chunks' or autodetect. (autodetect issues an api call)
-       'upload_mode':'autodetect'
+       //upload_mode can be 'post', 'api' or 'autodetect'. (autodetect issues an api call)
+       'upload_mode': 'autodetect'
        
 }
 var mvBaseUploadInterface = function( iObj ){
@@ -79,25 +79,27 @@ mvBaseUploadInterface.prototype = {
                var _this = this;               
                //set up the local pointer to the edit form:
                _this.editForm = _this.getEditForm();                           
-               
+               $j(_this.editForm).attr('target', 'f_1');
                if( _this.editForm ){
                        //set up the org_onsubmit if not set: 
                        if( typeof( _this.org_onsubmit ) == 'undefined' &&  _this.editForm.onsubmit )
-                               _this.org_onsubmit = _this.editForm.onsubmit;                                   
+                               _this.org_onsubmit = _this.editForm.onsubmit;                                                                                   
                        
-                       //have to define the onsubmit function inline or its hard to pass the "_this" instance
-                       $j( _this.editForm ).submit( function(){                
+                       //set up the submit action: 
+                       $j( _this.editForm ).submit( function(){        
+                               js_log('j.onSubmit');   
                                //run the original onsubmit (if not run yet set flag to avoid excessive chaining ) 
                                if( typeof( _this.org_onsubmit ) == 'function' ){                                                                 
                                        if( ! _this.org_onsubmit() ){
                                                //error in org submit return false;
                                                return false;
                                        }
-                               }                               
+                               }       
                                //check for post action override:                                                                                                                       
-                               if( _this.form_post_override ){                                 
+                               if( _this.form_post_override ){ 
+                                       js_log('form_post_override is true do form proccessing:');                                                                                                              
                                        return true;
-                               }                                                                       
+                               }                                                                               
                                //get the input form data in flat json:                                                                                 
                                var tmpAryData = $j( _this.editForm ).serializeArray();                                 
                                for(var i=0; i < tmpAryData.length; i++){
@@ -164,29 +166,72 @@ mvBaseUploadInterface.prototype = {
                var _this = this;                       
                js_log('mvUPload:doUploadSwitch():' + _this.upload_mode);                       
                //issue a normal post request           
-               if( _this.upload_mode == 'post' || //we don't support the upload api
-                       (_this.upload_mode=='api' &&  ( $j('#wpSourceTypeFile').length ==  0 || $j('#wpSourceTypeFile').get(0).checked ) ) // web form uplaod even though we support api                        
-               ){                      
-                       js_log('do original submit form');
-                       //update the status to 100% progress bar: 
-                       $j( '#up-progressbar' ).progressbar('value', parseInt( 100 ) );         
-                                                       
-                       $j('#up-status-container').html( gM('upload-in-progress') );
-                       //do normal post upload no status indicators (also since its a file I think we have to submit the form)
+               if( _this.upload_mode == 'post' ) {
+                       //we don't support the upload api
+                       //trick the browser into thinking the wpUpload button was pressed (there might be a cleaner way to do this)                     
+                       $j(_this.editForm).append(
+                               '<input type="hidden" name="wpUpload" value="' + $j('input[name=\'wpUpload\']').val() + '"/>'
+                       );                      
+                       //do normal post
                        _this.form_post_override = true;
+                       //do the submit :                       
+                       _this.editForm.submit();
+               }else if(
+                       _this.upload_mode=='api' &&  
+                       ( $j('#wpSourceTypeFile').length ==  0 || $j('#wpSourceTypeFile').get(0).checked )              
+               ){      
+                       //@@TODO check for sendAsBinnary to support firefox 3.5 progress                                
+                       //else remap to iframe target
+                       var id = 'f_' + ($j('iframe').length + 1);
+                       $j("body").append('<iframe src="javascript:false;" id="' + id + '" ' +
+                               'name="' + id + '" style="display:none;" ></iframe>');                  
+                       //set up the done binding
+                       $j('#' + id).load(function(){
+                               var iframe = $j(this).get(0);   
+                               _this.proccessIframeResult( iframe );
+                       });             
+                       //set the editForm iframe target
+                       //$j(_this.editForm).attr('target', id);
                        
-                       //trick the browser into thinking the wpUpload button was pressed (there might be a cleaner way to do this)
+                       //set the action to the api url:
+                       $j(_this.editForm).attr('action', _this.api_url );
+                       //add api action:
+                       if( $j(_this.editForm).find("[name='action']").length == 0)
+                               $j(_this.editForm).append('<input type="hidden" name="action" value="upload">');
                        
-                       $j(_this.editForm).append(
-                               '<input type="hidden" name="wpUpload" value="' + $j('input[name=\'wpUpload\']').val() + '"/>'
-                       );
+                       //add json format
+                       if( $j(_this.editForm).find("[name='format']").length == 0)
+                               $j(_this.editForm).append('<input type="hidden" name="format" value="json">');
                        
-                       //@@todo support firefox 3.0 ajax file upload progress
-                       //http://igstan.blogspot.com/2009/01/pure-javascript-file-upload.html
+                       //add text format type request (IE tries to "run"/download the script otherwise) 
+                       if( $j(_this.editForm).find("[name='ctypetext']").length == 0)
+                               $j(_this.editForm).append('<input type="hidden" name="ctypetext" value="true">');                               
                        
-                       //do the submit :                       
+                       //map the form vars to api vars:  
+                       $j(_this.editForm).find('#wpUploadFile').attr('name', 'file');
+                       $j(_this.editForm).find('#wpDestFile').attr('name', 'filename');
+                       $j(_this.editForm).find('#wpUploadDescription').attr('name', 'comment');
+                       $j(_this.editForm).find('#wpEditToken').attr('name', 'token');                  
+                       $j(_this.editForm).find('#wpIgnoreWarning').attr('name', 'ignorewarnings');
+                       $j(_this.editForm).find('#wpWatchthis').attr('name', 'watch');
+                       
+                       //update the status to 100% progress bar (no status in iframe submit) 
+                       $j('#up-progressbar' ).progressbar('value', parseInt( 100 ) );                                                          
+                       $j('#up-status-container').html( gM('upload-in-progress') );
+                       
+                       
+                       js_log('do iframe form submit');
+                                               
+
+                       //do post override
+                       _this.form_post_override = true;                                                        
+                       //reset the done with action flag:
+                       _this.action_done = false;                                       
+                       //do the submit :
+                       js_log('do the submit');        
                        _this.editForm.submit();
-                       return true;
+                                                                                                               
+                       return false;
                }else if( _this.upload_mode == 'api' && $j('#wpSourceTypeURL').get(0).checked){ 
                        js_log('doHttpUpload (no form submit) ');
                        //if the api is supported.. && source type is http do upload with http status updates
@@ -194,19 +239,65 @@ mvBaseUploadInterface.prototype = {
                            'url'               : $j('#wpUploadFileURL').val(),
                            'filename'  : $j('#wpDestFile').val(),
                            'comment'   : $j('#wpUploadDescription').val(),                             
-                               'watch'         :  ($j('#wpWatchthis').is(':checked'))?'true':'false'                                       
+                               'watch'         : ($j('#wpWatchthis').is(':checked'))?'true':'false'                                        
                        }
+                       //set up ignore warnings and watch arguments: 
                        if( $j('#wpIgnoreWarning').is(':checked') ){
                                httpUpConf[ 'ignorewarnings'] =  'true';
                        }
+                       if( $j('#wpWatchthis').is(':checked') ){
+                               httpUpConf[ 'watch'] =  'true';
+                       }
                        //check for editToken
-                       _this.etoken = $j("input[name='wpEditToken']").val();                                           
+                       _this.etoken = $j("#wpEditToken").val();                                                
                        _this.doHttpUpload( httpUpConf );
                }else{
                        js_error( 'Error: unrecongized upload mode: ' + _this.upload_mode );
                }                               
                return false;
        },
+       proccessIframeResult:function(iframe){
+               var _this = this;
+               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;          
+                       // try and parse the api response:
+                       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;
+               }                                       
+               _this.processApiResult( response );
+       },
        doHttpUpload:function( opt ){
                var _this = this;
                //set the http box to loading (in case we don't get an update for some time) 
@@ -342,6 +433,7 @@ mvBaseUploadInterface.prototype = {
                        //gennerate the error button:           
                        var bObj = {};
                        bObj[ gM('return-to-form') ] =  function(){
+                                       _this.form_post_override = false;
                                        $j(this).dialog('close');
                         };             
                         
@@ -476,6 +568,7 @@ mvBaseUploadInterface.prototype = {
                        };
                        bObj[ gM('return-to-form') ] = function(){
                                $j(this).dialog('close');
+                               _this.form_post_override = false;
                        }
                        _this.updateProgressWin(  gM('uploadwarning'),  '<h3>' + gM('uploadwarning') + '</h3>' +wmsg + '<p>',bObj);
                        return false;
@@ -515,6 +608,7 @@ mvBaseUploadInterface.prototype = {
                                        var bObj = {};
                                        bObj[ gM('return-to-form')] = function(){
                                                $j(this).dialog('close');
+                                               _this.form_post_override = false;
                                        }
                                        bObj[ gM('go-to-resource') ] = function(){
                                                        window.location = url;
index f1d493a..7ea8a0d 100644 (file)
@@ -67,7 +67,7 @@ var default_form_options = {
                });
                        
                //set up the binding per the config
-               if( opt.enable_fogg ){
+               if( opt.enable_fogg ){                  
                        $j('#wpUploadFile').firefogg({ 
                                //an api url (we won't submit directly to action of the form)
                                'api_url' : opt.api_target,
@@ -81,6 +81,6 @@ var default_form_options = {
                        });             
                }else{
                        //simple web form rewrite               
-               }                       
+               }               
        }
 })(jQuery);
\ No newline at end of file
index 5dc4824..d8ffe7f 100644 (file)
@@ -230,8 +230,8 @@ mvEmbed = {
                $j('#'+embed_video.id).get(0).on_dom_swap();    
                          
                // now that "embed_video" is stable, do more initialization (if we are ready)
-               if($j('#'+embed_video.id).get(0).loading_external_data==false && 
-                          $j('#'+embed_video.id).get(0).init_with_sources_loadedDone==false){
+               if($j('#'+embed_video.id).get(0).loading_external_data == false && 
+                          $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){
                        //load and set ready state since source are available: 
                        $j('#'+embed_video.id).get(0).init_with_sources_loaded();
                }
@@ -2399,7 +2399,7 @@ embedVideo.prototype = {
                //js_log('op:' + offset_perc + ' *('+perc+' * ' + $j('#slider_'+id).width() + ')');
        },
        highlightPlaySection:function(options){
-               js_log('highlightPlaySection');         
+               js_log('highlightPlaySection');
                var this_id = (this.pc)?this.pc.pp.id:this.id;
                var dur = this.getDuration();
                var hide_progress = true;               
index 7ae89a9..f3b6666 100644 (file)
@@ -544,12 +544,14 @@ var mvJsLoader = {
        embedVideoCheck:function( callback ){
                var _this = this;
                js_log('embedVideoCheck:');
+               //set videonojs to loading              
                //issue a style sheet request get both mv_embed and jquery styles: 
                loadExternalCss( mv_jquery_skin_path + 'jquery-ui-1.7.1.custom.css' );
                loadExternalCss( mv_embed_path  + 'skins/'+mv_skin_name+'/styles.css');
                                 
                //make sure we have jQuery
                _this.jQueryCheck(function(){
+                       $j('.videonojs').html( gM('loading_txt') );
                        var depReq = [
                                [
                                        '$j.ui', 
@@ -557,7 +559,7 @@ var mvJsLoader = {
                                        '$j.cookie'                                                                                                                                                             
                                ], 
                                [
-                                       '$j.ui.slider',                                 
+                                       '$j.ui.slider'                                  
                                ]
                        ];                              
                        //add png fix if needed:
@@ -567,6 +569,7 @@ var mvJsLoader = {
                        _this.doLoadDepMode(depReq,function(){                                                                                           
                                embedTypes.init();                                                                              
                                callback();     
+                               $j('.videonojs').remove();
                        });
                });
        },      
@@ -614,10 +617,14 @@ function mwdomReady(force){
        //handle the execution of Queded function with jQuery "ready"   
        
        //check if this page does have video or playlist
-       if(document.getElementsByTagName("video").length!=0 ||
-          document.getElementsByTagName("audio").length!=0 ||
-          document.getElementsByTagName("playlist").length!=0){
-               js_log('we have things to rewrite');                                    
+       var e = [ 
+               document.getElementsByTagName("video"), 
+               document.getElementsByTagName("audio"),
+               document.getElementsByTagName("playlist")
+       ];      
+       if(e[0].length!=0 || e[1].length!=0 || e[2].length!=0){
+               js_log('we have items to rewrite');                                                             
+                       
                //load libs and proccess:                                        
                mvJsLoader.embedVideoCheck(function(){
                        //run any queded global events:
diff --git a/js2/mwEmbed/mwHostProxy.html b/js2/mwEmbed/mwHostProxy.html
deleted file mode 100644 (file)
index 48787c9..0000000
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-       <title></title>                         
-       <script type="text/javascript">
-       
-       </script> 
-</head>
-<body>
-<h3> This file should be inclued by external sites that want to be proxied: </h3>
-</body>
-</html>
-
diff --git a/js2/mwEmbed/mwIframeProxy.html b/js2/mwEmbed/mwIframeProxy.html
new file mode 100644 (file)
index 0000000..7d66d13
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+       <title>Javascript Api Proxy</title>
+       <style type="text/css">
+               body{
+                       font-size:80%;
+               }
+               img  {
+                       border:medium none;
+               }
+       </style>                        
+       <script type="text/javascript">
+               var domainList = [
+                       '127.0.0.1'
+               ];
+       </script> 
+</head>
+<body>
+<h3> This file proxies api and html output for source domains: </h3>
+<div id="domainList"></div>
+       <script type="text/javascript">
+               var o='';
+               for( var i in domainList){
+                       o+='<br><i>'+ domainList[i] + '</i>';
+               }
+       </script>
+</body>
+</html>
+
index 3260103..c9ad238 100644 (file)
@@ -10,12 +10,9 @@ $wgJSAutoloadLocalClasses['mv_embed']                        = $wgMwEmbedDirectory . 'mv_embed.js';
 $wgJSAutoloadLocalClasses['window.jQuery']             = $wgMwEmbedDirectory . 'jquery/jquery-1.3.2.js';
 
 $wgJSAutoloadLocalClasses['j.secureEvalJSON']  = $wgMwEmbedDirectory . 'jquery/plugins/jquery.json-1.3.js';
-
 $wgJSAutoloadLocalClasses['j.cookie']                  = $wgMwEmbedDirectory . 'jquery/plugins/jquery.cookie.js';
-
 $wgJSAutoloadLocalClasses['j.contextMenu']             = $wgMwEmbedDirectory . 'jquery/plugins/jquery.contextMenu.js';
 $wgJSAutoloadLocalClasses['j.fn.pngFix']               = $wgMwEmbedDirectory . 'jquery/plugins/jquery.pngFix.js';
-
 $wgJSAutoloadLocalClasses['j.fn.autocomplete'] = $wgMwEmbedDirectory . 'jquery/plugins/jquery.autocomplete.js';
 $wgJSAutoloadLocalClasses['j.fn.hoverIntent']  = $wgMwEmbedDirectory . 'jquery/plugins/jquery.hoverIntent.js';
 $wgJSAutoloadLocalClasses['Date.fromString']   = $wgMwEmbedDirectory . 'jquery/plugins/date.js';
@@ -58,7 +55,7 @@ $wgJSAutoloadLocalClasses['j.ui.selectable']  = $wgMwEmbedDirectory . 'jquery/jqu
 // libAddMedia:
 $wgJSAutoloadLocalClasses['mvFirefogg']                = $wgMwEmbedDirectory . 'libAddMedia/mvFirefogg.js';
 $wgJSAutoloadLocalClasses['mvAdvFirefogg']             = $wgMwEmbedDirectory . 'libAddMedia/mvAdvFirefogg.js';
-$wgJSAutoloadLocalClasses['j.fn.simpleUploadForm']     = $wgMwEmbedDirectory . 'libAddMedia/simpleUploadForm.js';
+
 $wgJSAutoloadLocalClasses['mvBaseUploadInterface'] = $wgMwEmbedDirectory . 'libAddMedia/mvBaseUploadInterface.js';
 $wgJSAutoloadLocalClasses['remoteSearchDriver'] = $wgMwEmbedDirectory . 'libAddMedia/remoteSearchDriver.js';
 $wgJSAutoloadLocalClasses['seqRemoteSearchDriver'] = $wgMwEmbedDirectory . 'libAddMedia/seqRemoteSearchDriver.js';
@@ -68,6 +65,8 @@ $wgJSAutoloadLocalClasses['metavidSearch']            = $wgMwEmbedDirectory . 'libAddMedi
 $wgJSAutoloadLocalClasses['archiveOrgSearch']  = $wgMwEmbedDirectory . 'libAddMedia/searchLibs/archiveOrgSearch.js';
 $wgJSAutoloadLocalClasses['baseRemoteSearch']  = $wgMwEmbedDirectory . 'libAddMedia/searchLibs/baseRemoteSearch.js';
 
+$wgJSAutoloadLocalClasses['j.fn.simpleUploadForm']     = $wgMwEmbedDirectory . 'libAddMedia/simpleUploadForm.js';
+
 // libClipEdit:
 $wgJSAutoloadLocalClasses['mvClipEdit']                = $wgMwEmbedDirectory . 'libClipEdit/mvClipEdit.js';
 
diff --git a/js2/mwRemoteProxy.html b/js2/mwRemoteProxy.html
deleted file mode 100644 (file)
index 7d66d13..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-       <title>Javascript Api Proxy</title>
-       <style type="text/css">
-               body{
-                       font-size:80%;
-               }
-               img  {
-                       border:medium none;
-               }
-       </style>                        
-       <script type="text/javascript">
-               var domainList = [
-                       '127.0.0.1'
-               ];
-       </script> 
-</head>
-<body>
-<h3> This file proxies api and html output for source domains: </h3>
-<div id="domainList"></div>
-       <script type="text/javascript">
-               var o='';
-               for( var i in domainList){
-                       o+='<br><i>'+ domainList[i] + '</i>';
-               }
-       </script>
-</body>
-</html>
-