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