* html5 file api drag drop file stubs
authorMichael Dale <dale@users.mediawiki.org>
Wed, 21 Oct 2009 00:23:39 +0000 (00:23 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Wed, 21 Oct 2009 00:23:39 +0000 (00:23 +0000)
js2/editPage.js
js2/mwEmbed/libAddMedia/dragDropFile.js [new file with mode: 0644]
js2/mwEmbed/libAddMedia/mvFirefogg.js
js2/mwEmbed/mv_embed.js

index ca393d6..936dc2d 100644 (file)
@@ -24,6 +24,11 @@ js2AddOnloadHook( function() {
        var amwConf = $j.extend( true, defaultAddMediaConfig, mwAddMediaConfig );
        // kind of tricky, it would be nice to use run on ready "loader" call here
        var didWikiEditorBind = false;
+       
+       //setup the drag drop binding (will only work for html5 upload browsers) 
+       //$j( 'textarea#wpTextbox1' ).dragFileUpload();
+       
+       //set up the add-media-wizard binding: 
        if( typeof $j.wikiEditor != 'undefined' ) {
                        $j( 'textarea#wpTextbox1' ).bind( 'wikiEditor-toolbar-buildSection-main',
                    function( e, section ) {
diff --git a/js2/mwEmbed/libAddMedia/dragDropFile.js b/js2/mwEmbed/libAddMedia/dragDropFile.js
new file mode 100644 (file)
index 0000000..a033b8c
--- /dev/null
@@ -0,0 +1,75 @@
+/* firefox 3.6 drag-drop uploading 
+*/
+var TCNDDU = TCNDDU || {};
+               
+(function( $ ) {
+       $.dragDropFile = function ( selector ) {
+               //setup drag binding and highlight
+               var dC = $j( selector ).get(0);
+               dC.addEventListener("dragenter", 
+                       function(event){
+                               $j(dC).css('border', 'solid red');
+                               event.stopPropagation();
+                               event.preventDefault();
+                       }, false);
+               dC.addEventListener("dragleave", 
+                       function(event){
+                               //default textbox css (should be an easy way to do this)
+                               $j(dC).css('border', '');
+                               event.stopPropagation(); 
+                               event.preventDefault();
+                       }, false);
+               dC.addEventListener("dragover", 
+                       function(event){                                                
+                               event.stopPropagation(); 
+                               event.preventDefault();
+                       }, false);
+               dC.addEventListener("drop", 
+                       function( event ){                                                                                                                      
+                               //for some reason scope does not persist for events so here we go: 
+                               doDrop( event );
+                               //handle the drop loader and call event 
+                               
+                       }, false);
+       function doDrop(event){         
+               var dt = event.dataTransfer,
+                       files = dt.files,
+                       imgPreviewFragment = document.createDocumentFragment(),
+                       count = files.length,
+                       domElements;
+                       
+               event.stopPropagation();
+               event.preventDefault();
+               // ( error out if they dragged multiple files for now) 
+               if( files.length > 1 ){
+                       js_log( 'errro multiple files');
+                       
+                       return false;
+               }
+               for (var i = 0; i < count; i++) {
+                       if(files[i].fileSize < 1048576) {
+                               domElements = [
+                                       document.createElement('li'),
+                                       document.createElement('a'),
+                                       document.createElement('img')
+                               ];
+                       
+                               domElements[2].src = files[i].getAsDataURL(); // base64 encodes local file(s)
+                               domElements[2].width = 300;
+                               domElements[2].height = 200;
+                               domElements[1].appendChild(domElements[2]);
+                               domElements[0].id = "item"+i;
+                               domElements[0].appendChild(domElements[1]);
+                               
+                               imgPreviewFragment.appendChild(domElements[0]);
+                               
+                               dropListing.appendChild(imgPreviewFragment);
+                               
+                               TCNDDU.processXHR(files.item(i), i);
+                       } else {
+                               alert("file is too big, needs to be below 1mb");
+                       }       
+               }
+       }
+       
+})(window.$mw);
index d896ddf..1978e57 100644 (file)
@@ -508,23 +508,20 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                //grab the extension:
                var sf = _this.fogg.sourceFilename;
                var ext = '';
-               if(     sf.lastIndexOf('.') != -1){
-                       ext = sf.substring( sf.lastIndexOf('.')+1 ).toLowerCase();
-               }
+               if(     sf.lastIndexOf('.') != -1)
+                       ext = sf.substring( sf.lastIndexOf('.')+1 ).toLowerCase();              
 
                //set to passthrough to true by default (images, arbitrary files that we want to send with http chunks)
                this.encoder_settings['passthrough'] = true;
 
                //see if we have video or audio:
-               if(  _this.isSourceAudio() || _this.isSourceVideo() ){
-                        _this.encoder_settings['passthrough'] = false;
-               }
+               if(  _this.isSourceAudio() || _this.isSourceVideo() )
+                        _this.encoder_settings['passthrough'] = false;         
 
                //special case see if we already have ogg video:
-               if( _this.isOggFormat() ){
+               if( _this.isOggFormat() )
                        _this.encoder_settings['passthrough'] = true;
-               }
-
+               
                js_log('base autoEncoderSettings::' + _this.sourceFileInfo.contentType  + ' passthrough:' + _this.encoder_settings['passthrough']);
        },
        isUnknown:function(){
index 8ac1904..8f48311 100644 (file)
@@ -451,7 +451,7 @@ if( !mv_embed_path ) {
                        },
                        updateText : function( wikiText ){
                                this.wikiText = wikiText;
-                               //invalidate the output (will force a reparse)
+                               //invalidate the output (will force a re-parse )
                                this.pOut = '';
                        },
                        parse : function(){
@@ -530,7 +530,7 @@ if( !mv_embed_path ) {
                                }
                                function getMagicTxtFromTempNode( node ){
                                        node.tObj = parseTmplTxt ( node.t );
-                                       //do magic swap if templet key found in pMagicSet
+                                       //do magic swap if template key found in pMagicSet
                                        if( node.tObj.name in pMagicSet){
                                                var nt = pMagicSet[ node.tObj.name ]( node.tObj );
                                                return nt;
@@ -575,7 +575,7 @@ if( !mv_embed_path ) {
                                //strip out the parent from the root    
                                this.pNode['p'] = null;
                                
-                               //do the recusrive magic swap text:
+                               //do the recursive magic swap text:
                                this.pOut = recurse_magic_swap( this.pNode );
 
                        },
@@ -613,10 +613,10 @@ if( !mv_embed_path ) {
                        /**
                         * Returns the transformed wikitext
                         * 
-                        * Build output from swapable index 
-                        *              (all transforms must be expanded in parse stage and linerarly rebuilt)  
-                        * Alternativly we could build output using a placeholder & replace system 
-                        *              (this lets us be slightly more slopty with ordering and indexes, but probably slower)
+                        * Build output from swappable index 
+                        *              (all transforms must be expanded in parse stage and linearly rebuilt)  
+                        * Alternatively we could build output using a place-holder & replace system 
+                        *              (this lets us be slightly more slopy with ordering and indexes, but probably slower)
                         * 
                         * Ideal: we build a 'wiki DOM' 
                         *              When editing you update the data structure directly
@@ -641,11 +641,6 @@ var loadGM = $mw.lang.loadGM;
 var loadRS = $mw.lang.loadRS;
 var gM = $mw.lang.gM;
 
-//if some no-js2 script defined and loaded gMsg in global space:
-if( _global['gMsg'] ){
-       loadGM( _global['gMsg'] );
-}
-
 // All default messages in [English] should be overwritten by the CMS language message system.
 $mw.lang.loadGM({
        "mwe-loading_txt" : "loading ...",
@@ -656,11 +651,11 @@ $mw.lang.loadGM({
        "mwe-size-bytes" : "$1 B",
        "mwe-error_load_lib" : "Error: JavaScript $1 was not retrievable or does not define $2",
        "mwe-loading-add-media-wiz": "Loading add media wizard",
-       "mwe-apiproxy-setup" : " Setting up API proxy"
+       "mwe-apiproxy-setup" : "Setting up API proxy",
+       "mwe-load-drag-item" : "Loading draged item", 
+       "mwe-ok" : "Ok" 
 });
 
-
-
 /**
  * AutoLoader paths (this should mirror the file: jsAutoloadLocalClasses.php )
  * Any file _not_ listed here won't be auto-loadable
@@ -757,6 +752,7 @@ lcPaths({
        "$j.ui.draggable"               : "jquery/jquery.ui/ui/ui.draggable.js",
        "$j.ui.selectable"              : "jquery/jquery.ui/ui/ui.selectable.js",
 
+       "$mw.dragDropFile"              : "libAddMedia/dragDropFile.js",
        "mvFirefogg"                    : "libAddMedia/mvFirefogg.js",
        "mvAdvFirefogg"                 : "libAddMedia/mvAdvFirefogg.js",
        "mvBaseUploadInterface" : "libAddMedia/mvBaseUploadInterface.js",
@@ -1133,8 +1129,6 @@ function mwdomReady( force ) {
                document.getElementsByTagName( "playlist" )
        ];
        if( e[0].length != 0 || e[1].length != 0 || e[2].length != 0 ) {
-               js_log( 'we have items to rewrite' );
-               setSwappableToLoading( e );
                // Load libs and process them
                mvJsLoader.embedVideoCheck( function() {
                        // Run any queued global events:
@@ -1148,16 +1142,9 @@ function mwdomReady( force ) {
                mvJsLoader.runQueuedFunctions();
        }
 }
-// A quick function that sets the initial text of swappable elements to "loading".
-// jQuery might not be ready. Does not destroy inner elements.
-function setSwappableToLoading( e ) {
-       //for(var i =0)
-       //for(var j = 0; i < j.length; j++){
-       //}
-}
+
 //js2AddOnloadHook: ensure jQuery and the DOM are ready
-function js2AddOnloadHook( func ) {
-       js_log("js2AddOnloadHook::" + mvJsLoader.doneReadyEvents);
+function js2AddOnloadHook( func ) {    
        // If we have already run the DOM-ready function, just run the function directly:
        if( mvJsLoader.doneReadyEvents ) {
                // Make sure jQuery is there:
@@ -1204,14 +1191,26 @@ window.onload = function () {
  * Store all the mwEmbed jQuery-specific bindings
  * (set up after jQuery is available).
  *
- * These functions are genneraly are loaders that do the dynamic mapping of
- * dependencies for a given compoent
+ * These functions are generaly are loaders that do the dynamic mapping of
+ * dependencies for a given componet
  * 
  *
  */
 function mv_jqueryBindings() {
        js_log( 'mv_jqueryBindings' );
        (function( $ ) {
+               /*
+               * dragDrop file loader 
+               */
+               $.fn.dragFileUpload = function ( conf ){
+                       if( this.selector ){    
+                               var _this = this;       
+                               //load the dragger and "setup"
+                               $mw.load( ['$mw.dragDropFile'], function(){
+                                       $mw.dragDropFile( _this.selector );                                                     
+                               }); 
+                       }                                        
+               }
                /*
                 * apiProxy Loader loader:
                 * 
@@ -1491,7 +1490,13 @@ function mv_jqueryBindings() {
                        //append the style free loader ontop: 
                        $('body').append('<div id="mwe_tmp_loader" style="display:none" title="' + title + '" >' +
                                        msg_txt +
-                       '</div>');
+                       '</div>');                      
+                       //special btn == ok gives empty give a single "oky" -> "close"
+                       if( btn == 'ok' ){
+                               btn[ gM('mwe-ok') ] = function(){
+                                       $j('#mwe_tmp_loader').close();
+                               }
+                       }
                        //turn the loader into a real dialog loader: 
                        mvJsLoader.doLoadDepMode([
                                [