Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.13

Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.13

charitable / assets / js / charitable-plupload-fields.js

charitable-plupload-fields.js in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.13, at assets/js/charitable-plupload-fields.js

278 lines 8.5 KB

Raw Download Zip

1	CHARITABLE = window.CHARITABLE \|\| {};
2
3	( function( $, exports ){
4
5	/**
6	* Main Uploader object.
7	*/
8	var Uploader = function( $dragdrop ) {
9	var self = this,
10	params = $dragdrop.data('params'),
11	uploader = new plupload.Uploader( params );
12
13	this.$dragdrop = $dragdrop;
14	this.$dropzone = $(uploader.settings.drop_element);
15	this.$images = $('#' + $dragdrop.data('images'));
16	this.$loader = this.$dragdrop.find('.charitable-drag-drop-image-loader').first();
17	this.max_file_uploads = params.multipart_params.max_uploads;
18	this.max_file_size = parseInt( this.$dragdrop.data( 'max-size' ), 10 );
19	this.uploaded = this.$images.children().length;
20	this.max_uploads_alert_shown = false;
21	this.max_upload_size_alert_shown = false;
22
23	uploader.init();
24
25	uploader.bind( 'Init', function( uploader ) {
26	self.Init( uploader );
27	});
28
29	uploader.bind( 'PostInit', function( uploader ) {
30	uploader.refresh();
31	});
32
33	uploader.bind( 'FileFiltered', function( uploader, files ) {
34	self.FileFiltered( uploader, files );
35	});
36
37	uploader.bind( 'FilesAdded', function( uploader, files ) {
38	self.FilesAdded( uploader, files );
39	});
40
41	uploader.bind( 'Error', function( uploader, e ){
42	console.log( e );
43	});
44
45	uploader.bind( 'FileUploaded', function( uploader, file, r ){
46	self.FileUploaded( uploader, file, r );
47	});
48	};
49
50	/**
51	* PostInit event
52	*/
53	Uploader.prototype.Init = function( uploader ) {
54	var self = this;
55
56	if ( ! this.$dropzone ) {
57	return;
58	}
59
60	if ( uploader.features.dragdrop && ! this.$dragdrop.parent().hasClass('mobile') ) {
61	this.$dragdrop.parent().addClass( 'supports-drag-drop' );
62
63	// We may need to enhance this to account for the issue noted
64	// in https://core.trac.wordpress.org/ticket/21705
65	this.$dropzone.bind( 'dragover', function(){
66	self.$dropzone.addClass('drag-over');
67	});
68
69	this.$dropzone.bind( 'dragleave', function(){
70	self.$dropzone.removeClass('drag-over');
71	});
72	}
73
74	// Set up image remove handler
75	this.$dragdrop.on( 'click', '.remove-image', function( e ) {
76	e.preventDefault();
77	return self.remove_image( $(this), uploader );
78	});
79	};
80
81	/**
82	* FileFiltered event
83	*/
84	Uploader.prototype.FileFiltered = function( uploader, file ) {
85	var full = this.max_file_uploads && this.uploaded >= this.max_file_uploads;
86
87	// Don't queue file if the max number of files have been uploaded.
88	if ( full ) {
89	if ( ! this.max_uploads_alert_shown ) {
90	alert( this.get_max_uploads_message() );
91	}
92
93	this.max_uploads_alert_shown = true;
94	return uploader.removeFile( file );
95	}
96
97	// If the file is too big, remove it and show a message.
98	if ( file.size >= this.max_file_size ) {
99	if ( ! this.max_upload_size_alert_shown ) {
100	alert( CHARITABLE_UPLOAD_VARS.max_file_size.replace('%1$s', file.name).replace('%2$s', this.bytes_to_mb( this.max_file_size ) ) );
101	}
102
103	this.max_upload_size_alert_shown = true;
104	return uploader.removeFile( file );
105	}
106
107	this.uploaded += 1;
108
109	// Hide drag & drop section if we have reached the max number of file uploads.
110	if ( this.uploaded === this.max_file_uploads ) {
111	this.hide_dropzone();
112	}
113
114	this.add_image_loader( file );
115	}
116
117	/**
118	* FilesAdded event
119	*/
120	Uploader.prototype.FilesAdded = function( uploader, files ) {
121	this.$dropzone.removeClass('drag-over');
122
123	// If the user tries to upload too many files again, or too large a file, show the alert again.
124	this.max_uploads_alert_shown = false;
125	this.max_upload_size_alert_shown = false;
126
127	uploader.refresh();
128	uploader.start();
129	};
130
131	/**
132	* FileUploaded event
133	*/
134	Uploader.prototype.FileUploaded = function( uploader, file, r ) {
135	var input, data, message;
136
137	r = $.parseJSON( r.response );
138
139	if ( ! r.success ) {
140
141	// Show the server's own reason when it sends one - a refusal ("please log in")
142	// or a rejected file type is not something retrying can fix, so the generic
143	// "please try again" is only the fallback. Only data.message is trusted here:
144	// data.error carries WordPress core's raw upload errors, which name php.ini
145	// directives and server paths and must not be shown to public visitors.
146	message = r.data && typeof r.data.message === 'string' ? r.data.message : '';
147
148	this.add_image_error( file, message \|\| CHARITABLE_UPLOAD_VARS.upload_problem.replace('%s', file.name) );
149	return;
150
151	}
152
153	// Remove the image from the loader & possibly hide the loader.
154	this.hide_image_loader( file );
155
156	// Display the image
157	this.$images.append( r.data );
158	};
159
160	/**
161	* Return the message to be displayed when the max number of file uploads has been reach or exceeded.
162	*
163	* @param int max_file_uploads
164	* @return string
165	*/
166	Uploader.prototype.get_max_uploads_message = function() {
167	var msg = this.max_file_uploads > 1 ? CHARITABLE_UPLOAD_VARS.max_file_uploads_plural : CHARITABLE_UPLOAD_VARS.max_file_uploads_single;
168
169	return msg.replace( '%d', this.max_file_uploads );
170	};
171
172	/**
173	* Add an image loader bar to indicate that an image is being uploaded.
174	*
175	* @param $loader
176	* @param array file
177	* @return void
178	*/
179	Uploader.prototype.add_image_loader = function( file ) {
180	this.$loader.fadeIn( 300 )
181	this.$loader.children('.images').append( '<li data-file-id="' + file.id + '" class="">' + file.name + '</li>' );
182	};
183
184	/**
185	* Hide the image loader.
186	*
187	* @param $loader
188	* @param array file
189	* @return void
190	*/
191	Uploader.prototype.hide_image_loader = function( file ) {
192	this.$loader.find( '[data-file-id=' + file.id + ']' ).remove();
193
194	if ( ! this.$loader.find('.images li').length ) {
195	this.$loader.hide();
196	}
197	};
198
199	/**
200	* Remove an image.
201	*
202	* @return void
203	*/
204	Uploader.prototype.remove_image = function($anchor, uploader) {
205	var $image = $anchor.parent();
206
207	$image.fadeOut( 300, function(){
208	this.remove();
209	});
210
211	this.$dropzone.fadeIn( 300 );
212
213	this.uploaded -= 1;
214
215	// Required to ensure browse button works on iOS Safari.
216	uploader.refresh();
217
218	return false;
219	}
220
221	/**
222	* Hide the dropzone.
223	*
224	* @return void
225	*/
226	Uploader.prototype.hide_dropzone = function() {
227	// this.$dropzone.removeClass('drag-over').fadeOut( 300 );
228	this.$dropzone.removeClass('drag-over');
229	this.$dropzone.hide();
230	}
231
232	/**
233	* Return a readable filesize.
234	*/
235	Uploader.prototype.bytes_to_mb = function( size ) {
236	var i = Math.floor( Math.log(size) / Math.log(1024) );
237	return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
238	}
239
240	/**
241	* Dequeues the file and displays an error.
242	*
243	* @param object $loader
244	* @param object $dropzone
245	* @param object file
246	* @param string msg
247	* @return void
248	*/
249	Uploader.prototype.add_image_error = function( file, msg ) {
250	var self = this;
251
252	// FileFiltered counted this file against max_file_uploads before it was sent. A
253	// failed upload never becomes a preview, so nothing else gives the slot back, and
254	// without this the next attempt is rejected client-side with the "you have already
255	// uploaded the maximum number of files" alert and the user is stuck until reload.
256	if ( self.uploaded > 0 ) {
257	self.uploaded -= 1;
258	}
259
260	self.$dropzone.fadeIn( 300 );
261
262	self.$loader.find( '[data-file-id=' + file.id + ']' ).addClass( 'error' ).text( msg ).delay( 5000 ).fadeOut( 300, function(){
263	self.hide_image_loader( file );
264	});
265	}
266
267	exports.Uploader = Uploader;
268
269	/**
270	* Load the Uploaders
271	*/
272	$(document).ready( function() {
273	$('.charitable-drag-drop').each( function() {
274	new Uploader( $(this) );
275	});
276	});
277
278	})( jQuery, CHARITABLE );