summaryrefslogtreecommitdiff
blob: 159cf3bda9c4c48a4b27422228dd99e7784b57d8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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();
} );