diff options
Diffstat (limited to 'data/js')
| -rw-r--r-- | data/js/application.js | 4 | ||||
| -rw-r--r-- | data/js/script.js | 88 | ||||
| -rw-r--r-- | data/js/uploader.js | 132 |
3 files changed, 135 insertions, 89 deletions
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; +}); +})(); |