From: Michael Dale Date: Wed, 21 Oct 2009 00:23:39 +0000 (+0000) Subject: * html5 file api drag drop file stubs X-Git-Tag: 1.31.0-rc.0~39208 X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/?a=commitdiff_plain;h=85c08a3e3d51942066b9c12c979e1da6fa25a769;p=lhc%2Fweb%2Fwiklou.git * html5 file api drag drop file stubs --- diff --git a/js2/editPage.js b/js2/editPage.js index ca393d665e..936dc2d264 100644 --- a/js2/editPage.js +++ b/js2/editPage.js @@ -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 index 0000000000..a033b8c6fa --- /dev/null +++ b/js2/mwEmbed/libAddMedia/dragDropFile.js @@ -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); diff --git a/js2/mwEmbed/libAddMedia/mvFirefogg.js b/js2/mwEmbed/libAddMedia/mvFirefogg.js index d896ddf4a9..1978e57a5b 100644 --- a/js2/mwEmbed/libAddMedia/mvFirefogg.js +++ b/js2/mwEmbed/libAddMedia/mvFirefogg.js @@ -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(){ diff --git a/js2/mwEmbed/mv_embed.js b/js2/mwEmbed/mv_embed.js index 8ac1904bf8..8f48311841 100644 --- a/js2/mwEmbed/mv_embed.js +++ b/js2/mwEmbed/mv_embed.js @@ -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(''); + ''); + //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([ [