diff options
Diffstat (limited to 'plugins/jetpack/modules/custom-post-types/comics/comics.js')
-rw-r--r-- | plugins/jetpack/modules/custom-post-types/comics/comics.js | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/custom-post-types/comics/comics.js b/plugins/jetpack/modules/custom-post-types/comics/comics.js new file mode 100644 index 00000000..159cf3bd --- /dev/null +++ b/plugins/jetpack/modules/custom-post-types/comics/comics.js @@ -0,0 +1,134 @@ +/* jshint onevar: false, smarttabs: true, devel: true */ +/* global Jetpack_Comics_Options */ + +jQuery( function( $ ) { + /** + * Enable front-end uploading of images for Comics users. + */ + var Jetpack_Comics = { + init: function() { + $( document ).on( + 'dragover.jetpack-comics', + 'body, #jetpack-comic-drop-zone', + this.onDragOver + ); + $( document ).on( + 'dragleave.jetpack-comics', + 'body, #jetpack-comic-drop-zone', + this.onDragLeave + ); + $( document ).on( 'drop.jetpack-comics', 'body, #jetpack-comic-drop-zone', this.onDrop ); + + $( 'body' ).append( + $( '<div id="jetpack-comic-drop-zone"><p class="dragging" /><p class="uploading" /></div>' ) + ); + $( '#jetpack-comic-drop-zone' ) + .find( '.dragging' ) + .text( Jetpack_Comics_Options.labels.dragging ) + .end() + .find( '.uploading' ) + .text( Jetpack_Comics_Options.labels.uploading ) + .prepend( $( '<span class="spinner"/>' ) ); + + if ( ! ( 'FileReader' in window && 'File' in window ) ) { + $( '#jetpack-comic-drop-zone .dragging' ).text( Jetpack_Comics_Options.labels.unsupported ); + $( document ) + .off( 'drop.jetpack-comics' ) + .on( 'drop.jetpack-comics', 'body, #jetpack-comic-drop-zone', this.onDragLeave ); + } + }, + + /** + * Only upload image files. + */ + filterImageFiles: function( files ) { + var validFiles = []; + + for ( var i = 0, _len = files.length; i < _len; i++ ) { + if ( files[ i ].type.match( /^image\//i ) ) { + validFiles.push( files[ i ] ); + } + } + + return validFiles; + }, + + dragTimeout: null, + + onDragOver: function( event ) { + event.preventDefault(); + + clearTimeout( Jetpack_Comics.dragTimeout ); + + $( 'body' ).addClass( 'dragging' ); + }, + + onDragLeave: function(/*event*/) { + clearTimeout( Jetpack_Comics.dragTimeout ); + + // In Chrome, the screen flickers because we're moving the drop zone in front of 'body' + // so the dragover/dragleave events happen frequently. + Jetpack_Comics.dragTimeout = setTimeout( function() { + $( 'body' ).removeClass( 'dragging' ); + }, 100 ); + }, + + onDrop: function( event ) { + event.preventDefault(); + event.stopPropagation(); + + // recent chrome bug requires this, see stackoverflow thread: http://bit.ly/13BU7b5 + event.originalEvent.stopPropagation(); + event.originalEvent.preventDefault(); + + var files = Jetpack_Comics.filterImageFiles( event.originalEvent.dataTransfer.files ); + + $( 'body' ).removeClass( 'dragging' ); + + if ( files.length === 0 ) { + alert( Jetpack_Comics_Options.labels.invalidUpload ); + return; + } + + $( 'body' ).addClass( 'uploading' ); + + var formData = new FormData(); + + for ( var i = 0, fl = files.length; i < fl; i++ ) { + formData.append( 'image_' + i, files[ i ] ); // won't work as image[] + } + + $( '#jetpack-comic-drop-zone .uploading .spinner' ).spin(); + + $.ajax( { + url: Jetpack_Comics_Options.writeURL + '&nonce=' + Jetpack_Comics_Options.nonce, + data: formData, + processData: false, + contentType: false, + type: 'POST', + dataType: 'json', + xhrFields: { + withCredentials: true, + }, + } ) + .done( function( data ) { + $( '#jetpack-comic-drop-zone .uploading' ).text( + Jetpack_Comics_Options.labels.processing + ); + + if ( 'url' in data ) { + document.location.href = data.url; + } else if ( 'error' in data ) { + alert( data.error ); + + $( 'body' ).removeClass( 'uploading' ); + } + } ) + .fail( function(/*req*/) { + alert( Jetpack_Comics_Options.labels.error ); + } ); + }, + }; + + Jetpack_Comics.init(); +} ); |