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

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

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

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

263 lines 7.6 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;
136
137	r = $.parseJSON( r.response );
138
139	if ( ! r.success ) {
140
141	this.add_image_error( file, CHARITABLE_UPLOAD_VARS.upload_problem.replace('%s', file.name) );
142	return;
143
144	}
145
146	// Remove the image from the loader & possibly hide the loader.
147	this.hide_image_loader( file );
148
149	// Display the image
150	this.$images.append( r.data );
151	};
152
153	/**
154	* Return the message to be displayed when the max number of file uploads has been reach or exceeded.
155	*
156	* @param int max_file_uploads
157	* @return string
158	*/
159	Uploader.prototype.get_max_uploads_message = function() {
160	var msg = this.max_file_uploads > 1 ? CHARITABLE_UPLOAD_VARS.max_file_uploads_plural : CHARITABLE_UPLOAD_VARS.max_file_uploads_single;
161
162	return msg.replace( '%d', this.max_file_uploads );
163	};
164
165	/**
166	* Add an image loader bar to indicate that an image is being uploaded.
167	*
168	* @param $loader
169	* @param array file
170	* @return void
171	*/
172	Uploader.prototype.add_image_loader = function( file ) {
173	this.$loader.fadeIn( 300 )
174	this.$loader.children('.images').append( '<li data-file-id="' + file.id + '" class="">' + file.name + '</li>' );
175	};
176
177	/**
178	* Hide the image loader.
179	*
180	* @param $loader
181	* @param array file
182	* @return void
183	*/
184	Uploader.prototype.hide_image_loader = function( file ) {
185	this.$loader.find( '[data-file-id=' + file.id + ']' ).remove();
186
187	if ( ! this.$loader.find('.images li').length ) {
188	this.$loader.hide();
189	}
190	};
191
192	/**
193	* Remove an image.
194	*
195	* @return void
196	*/
197	Uploader.prototype.remove_image = function($anchor, uploader) {
198	var $image = $anchor.parent();
199
200	$image.fadeOut( 300, function(){
201	this.remove();
202	});
203
204	this.$dropzone.fadeIn( 300 );
205
206	this.uploaded -= 1;
207
208	// Required to ensure browse button works on iOS Safari.
209	uploader.refresh();
210
211	return false;
212	}
213
214	/**
215	* Hide the dropzone.
216	*
217	* @return void
218	*/
219	Uploader.prototype.hide_dropzone = function() {
220	// this.$dropzone.removeClass('drag-over').fadeOut( 300 );
221	this.$dropzone.removeClass('drag-over');
222	this.$dropzone.hide();
223	}
224
225	/**
226	* Return a readable filesize.
227	*/
228	Uploader.prototype.bytes_to_mb = function( size ) {
229	var i = Math.floor( Math.log(size) / Math.log(1024) );
230	return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
231	}
232
233	/**
234	* Dequeues the file and displays an error.
235	*
236	* @param object $loader
237	* @param object $dropzone
238	* @param object file
239	* @param string msg
240	* @return void
241	*/
242	Uploader.prototype.add_image_error = function( file, msg ) {
243	var self = this;
244
245	self.$dropzone.fadeIn( 300 );
246
247	self.$loader.find( '[data-file-id=' + file.id + ']' ).addClass( 'error' ).text( msg ).delay( 5000 ).fadeOut( 300, function(){
248	self.hide_image_loader( file );
249	});
250	}
251
252	exports.Uploader = Uploader;
253
254	/**
255	* Load the Uploaders
256	*/
257	$(document).ready( function() {
258	$('.charitable-drag-drop').each( function() {
259	new Uploader( $(this) );
260	});
261	});
262
263	})( jQuery, CHARITABLE );