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();
+} );