summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJoakim Reinert <mail@jreinert.com>2015-05-01 22:30:12 +0200
committerFlorian Pritz <bluewind@xinu.at>2015-05-05 12:21:27 +0200
commitb7d501a42b2245ef1fc33171f9b53565e176c648 (patch)
treed6f575cfbc0e5c642c54e445fe15314b6d584bfc
parentda835670f796774d1f98c05dfdf7da1c7ba2655a (diff)
Refactor file uploader js
-rw-r--r--application/views/header.php5
-rw-r--r--data/js/application.js4
-rw-r--r--data/js/script.js88
-rw-r--r--data/js/uploader.js132
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;
+});
+})();