Refactor file uploader js

4 files changed, 139 insertions, 90 deletions

diff --git a/application/views/header.php b/application/views/header.php
index 89a3c8617..f77487ba9 100644
--- a/application/views/header.php
+++ b/application/views/header.php
@@ -29,7 +29,10 @@ if (is_cli_client() && !isset($force_full_html)) {
 	<script type="text/javascript">
 		/* <![CDATA[ */
 		var require = { baseUrl: '/data/js' };
-		window.appConfig = {};
+		window.appConfig = {
+			maxUploadSize: <?php echo $max_upload_size; ?>,
+			maxFilesPerUpload: <?php echo ini_get("max_file_uploads"); ?>
+		};
 		/* ]]> */
 	</script>
 	<script data-main="main" src="/data/js/vendor/require.js"></script>
diff --git a/data/js/application.js b/data/js/application.js
index 06a53854d..9db8d8398 100644
--- a/data/js/application.js
+++ b/data/js/application.js
@@ -7,9 +7,10 @@ define(
 		'lexer-input',
 		'tabwidth-input',
 		'thumbnail-view',
+		'uploader',
 		'vendor'
 	],
-	function (require, Util, LexerInput, TabwidthInput, ThumbnailView) {
+	function (require, Util, LexerInput, TabwidthInput, ThumbnailView, Uploader) {
 		require(['script']);
 		var App = {
 			 // Gets called for every request (before page load)
@@ -27,6 +28,7 @@ define(
 				TabwidthInput.initialize();
 				LexerInput.initialize();
 				ThumbnailView.initialize();
+				Uploader.initialize();
 				this.configureTooltips();
 				this.setupToggleSelectAllEvent();
 				this.setupLineWrapToggle();
diff --git a/data/js/script.js b/data/js/script.js
index 14250cd3d..b9f196fab 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -1,93 +1,5 @@
 (function($) {
 	$(function() {
-		// check file size before uploading if browser support html5
-		if (window.File && window.FileList) {
-			function checkFileUpload(evt) {
-				var sum = 0;
-				var filenum = 0;
-				var files = [];
-
-				$('.file-upload').each(function() {
-					for (var i = 0; i < this.files.length; i++) {
-						var file = this.files[i];
-						files.push(file);
-					}
-				});
-
-				for (var i = 0; i < files.length; i++) {
-					var f = files[i];
-					sum += f.size;
-					filenum++;
-				}
-
-				if (filenum > max_files_per_upload) {
-					document.getElementById('upload_button').innerHTML = "Too many files";
-					document.getElementById('upload_button').disabled = true;
-				} else if (sum > max_upload_size) {
-					document.getElementById('upload_button').innerHTML = "File(s) too big";
-					document.getElementById('upload_button').disabled = true;
-				} else {
-					document.getElementById('upload_button').innerHTML = "Upload/Paste it!";
-					document.getElementById('upload_button').disabled = false;
-				}
-			}
-
-			$(document).on('change', '.file-upload', checkFileUpload);
-		}
-
-		$(document).on("change", '.file-upload', function() {
-			var need_new = true;
-
-			$('.file-upload').each(function() {
-				if ($(this).prop("files").length == 0) {
-					need_new = false;
-					return;
-				}
-			});
-
-			if (need_new) {
-				$(this).parent().append('<input class="file-upload" type="file" name="file[]" multiple="multiple"><br>');
-			}
-
-		});
-
-		$(document).on("input propertychange", '.text-upload', function() {
-			var need_new = true;
-
-			$('.text-upload').each(function() {
-				if (!$(this).val()) {
-					need_new = false;
-					return;
-				}
-			});
-
-			if (need_new) {
-				var i = $('#textboxes .tab-content .tab-pane').length + 1;
-				var new_tab = $('#text-upload-tab-1')
-					.clone()
-					.attr("id", "text-upload-tab-"+i)
-					.toggleClass("active", false)
-					.appendTo('#textboxes .tab-content');
-				new_tab.find("[name^=filename]").attr("name", "filename["+i+"]").val("");
-				new_tab.find("[name^=content]").attr("name", "content["+i+"]").val("");
-				$('#textboxes ul.nav')
-					.append('<li><a href="#text-upload-tab-'+i+'" data-toggle="tab">Paste '+i+' </a></li>');
-			}
-		});
-
-		$(document).on("input propertychange", '#textboxes input[name^=filename]', function() {
-			var name = $(this).val();
-			var tabId = $(this).closest("[id^=text-upload-tab-]").attr("id");
-			var id = tabId.match(/-(\d)$/)[1];
-			var tab = $('#textboxes .nav a[href="#'+tabId+'"]');
-
-			if (name != "") {
-				tab.text(name);
-			} else {
-				tab.text("Paste " + id);
-			}
-		});
-
 		if (typeof $.tablesorter !== 'undefined') {
 			// source: https://projects.archlinux.org/archweb.git/tree/sitestatic/archweb.js
 			$.tablesorter.addParser({
diff --git a/data/js/uploader.js b/data/js/uploader.js
new file mode 100644
index 000000000..31a16abb1
--- /dev/null
+++ b/data/js/uploader.js
@@ -0,0 +1,132 @@
+(function () {
+'use strict';
+define(['jquery'], function ($) {
+	var ui = {
+		uploadButton: '#upload_button',
+		uploadInputs: 'input.file-upload',
+		textAreas: '#textboxes textarea.text-upload',
+		filenameInputs: '#textboxes input[name^=filename]',
+		textAreaTabsContainer: '#textboxes .tab-content',
+		textAreaTabs: '#textboxes .tab-content .tab-pane',
+		tabNavigation: '#textboxes ul.nav',
+		tabPane: '.tab-pane',
+		panelBody: '.panel-body'
+	};
+	var PrivateFunctions = {
+		filesForInput: function (input, callback) {
+			var files = $(input).prop('files');
+			for (var i = 0; i < files.length; i++) {
+				callback(files[i]);
+			}
+		},
+
+		filesForInputs: function (callback) {
+			_.each($(ui.uploadInputs), function (input) {
+				this.filesForInput(input, callback);
+			}, this);
+		},
+
+		checkFileUpload: function (event) {
+			var totalSize = 0;
+			var filesCount = 0;
+			this.filesForInputs(function (file) {
+				filesCount++;
+				totalSize += file.size;
+			});
+
+			var uploadButton = $(ui.uploadButton);
+			if (filesCount > appConfig.maxFilesPerUpload) {
+				uploadButton.html('Too many files').attr('disabled', true);
+			} else if (totalSize > appConfig.maxUploadSize) {
+				uploadButton.html('File(s) too big').attr('disabled', true);
+			} else {
+				uploadButton.html('Upload/Paste it!').attr('disabled', false);
+			}
+		},
+
+		hasNoFiles: function (input) {
+			return $(input).prop('files').length === 0;
+		},
+
+		appendUploadInput: function (event) {
+			if (_.any($(ui.uploadInputs), this.hasNoFiles)) { return; }
+			$(event.target).parent().append($(event.target).clone(), $('<br>'));
+		},
+
+		hasNoText: function (textArea) {
+			return !$(textArea).val(); 
+		},
+
+		setAttributeIndices: function (tab, index) {
+			tab.attr('id', tab.attr('id').replace(/\d+$/, index));
+			_.each(tab.find('input,textarea'), function (input) {
+				var name = $(input).attr('name');
+				$(input).attr('name', name.replace(/\[\d+\]/, '[' + index + ']'));
+			});
+		},
+
+		clearValues: function (tab) {
+			tab.find('input,textarea').val('');
+		},
+
+		tabNavigationItem: function (index) {
+			var link = $('<a data-toggle="tab">').attr({
+				href: '#text-upload-tab-' + index,
+			}).html('Paste ' + index);
+
+			return $('<li>').append(link);
+		},
+
+		appendTextField: function (event) {
+			if (_.any($(ui.textAreas), this.hasNoText)) { return; }
+
+			var newTab = $(ui.textAreaTabs).last().clone();
+			var index = parseInt(newTab.attr('id').match(/\d+$/)[0]) + 1;
+			this.setAttributeIndices(newTab, index);
+			this.clearValues(newTab);
+			newTab.toggleClass('active', false);
+			$(ui.textAreaTabsContainer).append(newTab);
+			$(ui.tabNavigation).append(this.tabNavigationItem(index));
+		},
+
+		setTabHeader: function (event) {
+			var name = $(event.target).val();
+			if (_.isEmpty(name)) {
+				var tabPane = $(event.target).closest(ui.tabPane);
+				var index = tabPane.attr('id').match(/\d+$/)[0];
+				name = 'Paste ' + index;
+			}
+			$(ui.tabNavigation).find('li.active a').html(name);
+		},
+
+		setupEvents: function () {
+			if (window.File && window.FileList) {
+				$(document).on(
+					'change', ui.uploadInputs,
+					_.bind(this.checkFileUpload, this)
+				);
+			}
+			$(document).on(
+				'change', ui.uploadInputs,
+				_.bind(this.appendUploadInput, this)
+			);
+			$(document).on(
+				'input propertychange', ui.textAreas,
+				_.bind(this.appendTextField, this)
+			);
+			$(document).on(
+				'input propertychange', ui.filenameInputs,
+				_.bind(this.setTabHeader, this)
+			);
+		}
+	};
+
+	var Uploader = {
+		initialize: function () {
+			PrivateFunctions.setupEvents();
+		}
+	};
+
+	return Uploader;
+});
+})();