From 96536ecf27a4be6334bbda8a9504ffefc467da5e Mon Sep 17 00:00:00 2001 From: Aysam Guerler Date: Tue, 4 Feb 2014 14:53:26 -0500 Subject: [PATCH] Upload: Add file extension descriptions --- .../scripts/mvc/upload/upload-extensions.js | 110 ++++++++++++++++++ static/scripts/mvc/upload/upload-row.js | 48 +++++++- .../packed/mvc/upload/upload-extensions.js | 1 + .../scripts/packed/mvc/upload/upload-row.js | 2 +- static/scripts/packed/utils/uploadbox.js | 2 +- static/scripts/utils/uploadbox.js | 2 +- static/style/blue/base.css | 3 +- static/style/src/less/upload.less | 7 +- 8 files changed, 167 insertions(+), 8 deletions(-) create mode 100644 static/scripts/mvc/upload/upload-extensions.js create mode 100644 static/scripts/packed/mvc/upload/upload-extensions.js diff --git a/static/scripts/mvc/upload/upload-extensions.js b/static/scripts/mvc/upload/upload-extensions.js new file mode 100644 index 00000000000..26959122273 --- /dev/null +++ b/static/scripts/mvc/upload/upload-extensions.js @@ -0,0 +1,110 @@ +// dependencies +define([], function() { + +var dictionary = { + + auto : { + text: 'The system will attempt to detect Axt, Fasta, Fastqsolexa, Gff, Gff3, Html, Lav, Maf, Tabular, Wiggle, Bed and Interval (Bed with headers) formats. If your file is not detected properly as one of the known formats, it most likely means that it has some format problems (e.g., different number of columns on different rows). You can still coerce the system to set your data to the format you think it should be. You can also upload compressed files, which will automatically be decompressed' + }, + + ab1 : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Ab1', + text: 'A binary sequence file in \'ab1\' format with a \'.ab1\' file extension. You must manually select this \'File Format\' when uploading the file.' + }, + + axt : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Axt', + text: 'blastz pairwise alignment format. Each alignment block in an axt file contains three lines: a summary line and 2 sequence lines. Blocks are separated from one another by blank lines. The summary line contains chromosomal position and size information about the alignment. It consists of 9 required fields.' + }, + + bam : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#BAM', + text: 'A binary file compressed in the BGZF format with a \'.bam\' file extension.' + }, + + bed : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Bed', + text: 'BED format provides a flexible way to define the data lines that are displayed in an annotation track. BED lines have three required columns and nine additional optional columns. The three required columns are chrom, chromStart and chromEnd.' + }, + + fasta : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Fasta', + text: 'A sequence in FASTA format consists of a single-line description, followed by lines of sequence data. The first character of the description line is a greater-than (">") symbol in the first column. All lines should be shorter than 80 characters.' + }, + + fastq : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Fastq', + text: 'FASTQ format is a text-based format for storing both a biological sequence (usually nucleotide sequence) and its corresponding quality scores. ' + }, + + fastqsolexa : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#FastqSolexa', + text: 'FastqSolexa is the Illumina (Solexa) variant of the Fastq format, which stores sequences and quality scores in a single file.' + }, + + gff : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#GFF', + text: 'GFF lines have nine required fields that must be tab-separated.' + }, + + gff3 : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#GFF3', + text: 'The GFF3 format addresses the most common extensions to GFF, while preserving backward compatibility with previous formats.' + }, + + interval : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#GFF3', + text: 'File must start with definition line in the following format (columns may be in any order).' + }, + + lav : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#GFF3', + text: 'Lav is the primary output format for BLASTZ. The first line of a .lav file begins with #:lav..' + }, + + maf : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#MAF', + text: 'TBA and multiz multiple alignment format. The first line of a .maf file begins with ##maf. This word is followed by white-space-separated "variable=value" pairs. There should be no white space surrounding the "=".' + }, + + scf : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Scf', + text: 'A binary sequence file in \'scf\' format with a \'.scf\' file extension. You must manually select this \'File Format\' when uploading the file.' + }, + + sff : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Sff', + text: 'A binary file in \'Standard Flowgram Format\' with a \'.sff\' file extension.' + }, + + tabular : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Tabular_.28tab_delimited.29', + text: 'Any data in tab delimited format (tabular).' + }, + + wig : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Wig', + text: 'The wiggle format is line-oriented. Wiggle data is preceded by a track definition line, which adds a number of options for controlling the default display of this track.' + }, + + txt : { + url : 'https://wiki.galaxyproject.org/Learn/Datatypes#Plain_text', + text: 'Any text file.' + }, + +}; + +// create description content +return function(key) { + var description = dictionary[key]; + if (description) { + var tmpl = description.text; + if (description.url) { + tmpl += ' (read more)'; + } + return tmpl; + } else { + return 'There is no description available for this file extension.'; + } +} +}); diff --git a/static/scripts/mvc/upload/upload-row.js b/static/scripts/mvc/upload/upload-row.js index 26f13c629bf..c73b0f77739 100644 --- a/static/scripts/mvc/upload/upload-row.js +++ b/static/scripts/mvc/upload/upload-row.js @@ -1,11 +1,12 @@ // dependencies -define(['mvc/upload/upload-model'], function(UploadModel) { +define(['mvc/upload/upload-model', 'mvc/upload/upload-extensions'], function(UploadModel, UploadExtensions) { // item view return Backbone.View.extend({ // options options: { - padding : 8 + padding : 8, + timeout : 2000 }, // states @@ -46,6 +47,10 @@ return Backbone.View.extend({ self.app.collection.remove(self.model); } }); + + // handle mouse over + it.find('#extension_info').on('mouseover' , function() { self._showExtensionInfo(); }) + .on('mouseleave', function() { self._hideExtensionInfo(); }); // handle text editing event it.find('#text-content').on('keyup', function() { @@ -70,6 +75,7 @@ return Backbone.View.extend({ // handle extension selection it.find('#extension').on('change', function(e) { self.model.set('extension', $(e.target).val()); + self.$el.find('#extension_info').popover('destroy'); }); // handle space to tabs button @@ -139,7 +145,7 @@ return Backbone.View.extend({ // genome _refreshGenome: function() { - // write error message + // update genome info on screen var genome = this.model.get('genome'); this.$el.find('#genome').val(genome); }, @@ -226,6 +232,41 @@ return Backbone.View.extend({ return '' + (Math.round(size) / 10) + ' ' + unit; }, + // attach file info popup + _showExtensionInfo : function() + { + // initialize + var self = this; + var $el = $(this.el).find('#extension_info'); + var extension = this.model.get('extension'); + var title = $(this.el).find('#extension').find('option:selected').text(); + + // create popup + $el.popover({ + html: true, + title: title, + content: UploadExtensions(extension), + placement: 'bottom', + container: self.$el.parent() + }); + + // show popup + $el.popover('show'); + + // clear previous timers + clearTimeout(this.popover_timeout); + }, + + // attach file info popup + _hideExtensionInfo : function() + { + // remove popup + var self = this + this.popover_timeout = setTimeout(function() { + self.$el.find('#extension_info').popover('destroy'); + }, this.options.timeout); + }, + // template _template: function(options) { @@ -251,6 +292,7 @@ return Backbone.View.extend({ for (key in self.app.select_extension) tmpl += ''; tmpl += '' + + ' ' + ''; // add genome selector diff --git a/static/scripts/packed/mvc/upload/upload-extensions.js b/static/scripts/packed/mvc/upload/upload-extensions.js new file mode 100644 index 00000000000..215022207c6 --- /dev/null +++ b/static/scripts/packed/mvc/upload/upload-extensions.js @@ -0,0 +1 @@ +define([],function(){var a={auto:{text:"The system will attempt to detect Axt, Fasta, Fastqsolexa, Gff, Gff3, Html, Lav, Maf, Tabular, Wiggle, Bed and Interval (Bed with headers) formats. If your file is not detected properly as one of the known formats, it most likely means that it has some format problems (e.g., different number of columns on different rows). You can still coerce the system to set your data to the format you think it should be. You can also upload compressed files, which will automatically be decompressed"},ab1:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Ab1",text:"A binary sequence file in 'ab1' format with a '.ab1' file extension. You must manually select this 'File Format' when uploading the file."},axt:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Axt",text:"blastz pairwise alignment format. Each alignment block in an axt file contains three lines: a summary line and 2 sequence lines. Blocks are separated from one another by blank lines. The summary line contains chromosomal position and size information about the alignment. It consists of 9 required fields."},bam:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#BAM",text:"A binary file compressed in the BGZF format with a '.bam' file extension."},bed:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Bed",text:"BED format provides a flexible way to define the data lines that are displayed in an annotation track. BED lines have three required columns and nine additional optional columns. The three required columns are chrom, chromStart and chromEnd."},fasta:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Fasta",text:'A sequence in FASTA format consists of a single-line description, followed by lines of sequence data. The first character of the description line is a greater-than (">") symbol in the first column. All lines should be shorter than 80 characters.'},fastq:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Fastq",text:"FASTQ format is a text-based format for storing both a biological sequence (usually nucleotide sequence) and its corresponding quality scores. "},fastqsolexa:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#FastqSolexa",text:"FastqSolexa is the Illumina (Solexa) variant of the Fastq format, which stores sequences and quality scores in a single file."},gff:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#GFF",text:"GFF lines have nine required fields that must be tab-separated."},gff3:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#GFF3",text:"The GFF3 format addresses the most common extensions to GFF, while preserving backward compatibility with previous formats."},interval:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#GFF3",text:"File must start with definition line in the following format (columns may be in any order)."},lav:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#GFF3",text:"Lav is the primary output format for BLASTZ. The first line of a .lav file begins with #:lav.."},maf:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#MAF",text:'TBA and multiz multiple alignment format. The first line of a .maf file begins with ##maf. This word is followed by white-space-separated "variable=value" pairs. There should be no white space surrounding the "=".'},scf:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Scf",text:"A binary sequence file in 'scf' format with a '.scf' file extension. You must manually select this 'File Format' when uploading the file."},sff:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Sff",text:"A binary file in 'Standard Flowgram Format' with a '.sff' file extension."},tabular:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Tabular_.28tab_delimited.29",text:"Any data in tab delimited format (tabular)."},wig:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Wig",text:"The wiggle format is line-oriented. Wiggle data is preceded by a track definition line, which adds a number of options for controlling the default display of this track."},txt:{url:"https://wiki.galaxyproject.org/Learn/Datatypes#Plain_text",text:"Any text file."},};return function(c){var d=a[c];if(d){var b=d.text;if(d.url){b+=' (read more)'}return b}else{return"There is no description available for this file extension."}}}); \ No newline at end of file diff --git a/static/scripts/packed/mvc/upload/upload-row.js b/static/scripts/packed/mvc/upload/upload-row.js index 6e12601bc25..f9e0b3f8adf 100644 --- a/static/scripts/packed/mvc/upload/upload-row.js +++ b/static/scripts/packed/mvc/upload/upload-row.js @@ -1 +1 @@ -define(["mvc/upload/upload-model"],function(a){return Backbone.View.extend({options:{padding:8},status_classes:{init:"symbol fa fa-trash-o",queued:"symbol fa fa-spinner fa-spin",running:"symbol fa fa-spinner fa-spin",success:"symbol fa fa-check",error:"symbol fa fa-exclamation-triangle"},initialize:function(e,c){this.app=e;var b=this;this.model=new a.Model(c);this.setElement(this._template(c));var d=this.$el;d.find("#symbol").on("click",function(){var f=b.model.get("status");if(f=="init"||f=="success"||f=="error"){b.app.collection.remove(b.model)}});d.find("#text-content").on("keyup",function(){var f=d.find("#text-content");var h=f.val();var g=h.length;d.find("#size").html(b._formatSize(g));b.model.set("url_paste",h);b.model.set("file_size",g)});d.find("#genome").on("change",function(f){b.model.set("genome",$(f.target).val())});d.find("#extension").on("change",function(f){b.model.set("extension",$(f.target).val())});d.find("#space_to_tabs").on("change",function(f){b.model.set("space_to_tabs",$(f.target).prop("checked"))});this.model.on("change:percentage",function(){b._refreshPercentage()});this.model.on("change:status",function(){b._refreshStatus()});this.model.on("change:info",function(){b._refreshInfo()});this.model.on("change:genome",function(){b._refreshGenome()});this.model.on("remove",function(){b.remove()});this.app.collection.on("reset",function(){b.remove()})},render:function(){var h=this.model.get("file_name");var c=this.model.get("file_size");var e=this.$el;e.find("#title").html(h);e.find("#size").html(this._formatSize(c));if(c==-1){var g=e.find("#text");var f=this.options.padding;var d=e.width()-2*f;var b=e.height()-f;g.css("width",d+"px");g.css("top",b+"px");e.height(b+g.height()+2*f);g.show()}},_refreshGenome:function(){var b=this.model.get("genome");this.$el.find("#genome").val(b)},_refreshInfo:function(){var b=this.model.get("info");if(b){this.$el.find("#info").html("Failed: "+b).show()}else{this.$el.find("#info").hide()}},_refreshPercentage:function(){var b=parseInt(this.model.get("percentage"));this.$el.find(".progress-bar").css({width:b+"%"});if(b!=100){this.$el.find("#percentage").html(b+"%")}else{this.$el.find("#percentage").html("Adding to history...")}},_refreshStatus:function(){var c=this.$el;var b=this.model.get("status");var e=this.status_classes[b];var d=this.$el.find("#symbol");d.removeClass();d.addClass(e);if(b=="init"){c.find("#text-content").attr("disabled",false);c.find("#genome").attr("disabled",false);c.find("#extension").attr("disabled",false);c.find("#space_to_tabs").attr("disabled",false)}else{c.find("#text-content").attr("disabled",true);c.find("#genome").attr("disabled",true);c.find("#extension").attr("disabled",true);c.find("#space_to_tabs").attr("disabled",true)}if(b=="success"){c.addClass("success");c.find("#percentage").html("100%")}if(b=="error"){c.addClass("danger");c.find(".progress").remove()}},_formatSize:function(b){var c="";if(b>=100000000000){b=b/100000000000;c="TB"}else{if(b>=100000000){b=b/100000000;c="GB"}else{if(b>=100000){b=b/100000;c="MB"}else{if(b>=100){b=b/100;c="KB"}else{if(b>0){b=b*10;c="b"}else{return"-"}}}}}return""+(Math.round(b)/10)+" "+c},_template:function(d){var c=this;var b='
You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.
';b+='";b+='";b+='
0%
';return b}})}); \ No newline at end of file +define(["mvc/upload/upload-model","mvc/upload/upload-extensions"],function(a,b){return Backbone.View.extend({options:{padding:8,timeout:2000},status_classes:{init:"symbol fa fa-trash-o",queued:"symbol fa fa-spinner fa-spin",running:"symbol fa fa-spinner fa-spin",success:"symbol fa fa-check",error:"symbol fa fa-exclamation-triangle"},initialize:function(f,d){this.app=f;var c=this;this.model=new a.Model(d);this.setElement(this._template(d));var e=this.$el;e.find("#symbol").on("click",function(){var g=c.model.get("status");if(g=="init"||g=="success"||g=="error"){c.app.collection.remove(c.model)}});e.find("#extension_info").on("mouseover",function(){c._showExtensionInfo()}).on("mouseleave",function(){c._hideExtensionInfo()});e.find("#text-content").on("keyup",function(){var g=e.find("#text-content");var i=g.val();var h=i.length;e.find("#size").html(c._formatSize(h));c.model.set("url_paste",i);c.model.set("file_size",h)});e.find("#genome").on("change",function(g){c.model.set("genome",$(g.target).val())});e.find("#extension").on("change",function(g){c.model.set("extension",$(g.target).val());c.$el.find("#extension_info").popover("destroy")});e.find("#space_to_tabs").on("change",function(g){c.model.set("space_to_tabs",$(g.target).prop("checked"))});this.model.on("change:percentage",function(){c._refreshPercentage()});this.model.on("change:status",function(){c._refreshStatus()});this.model.on("change:info",function(){c._refreshInfo()});this.model.on("change:genome",function(){c._refreshGenome()});this.model.on("remove",function(){c.remove()});this.app.collection.on("reset",function(){c.remove()})},render:function(){var i=this.model.get("file_name");var d=this.model.get("file_size");var f=this.$el;f.find("#title").html(i);f.find("#size").html(this._formatSize(d));if(d==-1){var h=f.find("#text");var g=this.options.padding;var e=f.width()-2*g;var c=f.height()-g;h.css("width",e+"px");h.css("top",c+"px");f.height(c+h.height()+2*g);h.show()}},_refreshGenome:function(){var c=this.model.get("genome");this.$el.find("#genome").val(c)},_refreshInfo:function(){var c=this.model.get("info");if(c){this.$el.find("#info").html("Failed: "+c).show()}else{this.$el.find("#info").hide()}},_refreshPercentage:function(){var c=parseInt(this.model.get("percentage"));this.$el.find(".progress-bar").css({width:c+"%"});if(c!=100){this.$el.find("#percentage").html(c+"%")}else{this.$el.find("#percentage").html("Adding to history...")}},_refreshStatus:function(){var d=this.$el;var c=this.model.get("status");var f=this.status_classes[c];var e=this.$el.find("#symbol");e.removeClass();e.addClass(f);if(c=="init"){d.find("#text-content").attr("disabled",false);d.find("#genome").attr("disabled",false);d.find("#extension").attr("disabled",false);d.find("#space_to_tabs").attr("disabled",false)}else{d.find("#text-content").attr("disabled",true);d.find("#genome").attr("disabled",true);d.find("#extension").attr("disabled",true);d.find("#space_to_tabs").attr("disabled",true)}if(c=="success"){d.addClass("success");d.find("#percentage").html("100%")}if(c=="error"){d.addClass("danger");d.find(".progress").remove()}},_formatSize:function(c){var d="";if(c>=100000000000){c=c/100000000000;d="TB"}else{if(c>=100000000){c=c/100000000;d="GB"}else{if(c>=100000){c=c/100000;d="MB"}else{if(c>=100){c=c/100;d="KB"}else{if(c>0){c=c*10;d="b"}else{return"-"}}}}}return""+(Math.round(c)/10)+" "+d},_showExtensionInfo:function(){var c=this;var d=$(this.el).find("#extension_info");var f=this.model.get("extension");var e=$(this.el).find("#extension").find("option:selected").text();d.popover({html:true,title:e,content:b(f),placement:"bottom",container:c.$el.parent()});d.popover("show");clearTimeout(this.popover_timeout)},_hideExtensionInfo:function(){var c=this;this.popover_timeout=setTimeout(function(){c.$el.find("#extension_info").popover("destroy")},this.options.timeout)},_template:function(e){var d=this;var c='
You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.
';c+=' ';c+='";c+='
0%
';return c}})}); \ No newline at end of file diff --git a/static/scripts/packed/utils/uploadbox.js b/static/scripts/packed/utils/uploadbox.js index 70f4106ab6b..970355d9475 100644 --- a/static/scripts/packed/utils/uploadbox.js +++ b/static/scripts/packed/utils/uploadbox.js @@ -1 +1 @@ -(function(c){jQuery.event.props.push("dataTransfer");var h={url:"",paramname:"content",maxfilesize:2048,maxfilenumber:20,dragover:function(){},dragleave:function(){},announce:function(){},initialize:function(){},progress:function(){},success:function(){},error:function(k,l,m){alert(m)},complete:function(){},error_filesize:"File exceeds 2GB. Please use an FTP client.",error_default:"Please make sure the file is available.",error_server:"Upload request failed.",error_login:"Uploads require you to log in.",error_missing:"No upload content available."};var a={};var e={};var f=0;var j=0;var d=false;var g=false;var b=null;var i=null;c.fn.uploadbox=function(A){a=c.extend({},h,A);b=this;b.append('');b.on("drop",o);b.on("dragover",p);b.on("dragleave",x);c("#uploadbox_input").change(function(B){z(B.target.files);c(this).val("")});function o(B){if(!B.dataTransfer){return}z(B.dataTransfer.files);B.preventDefault();return false}function p(B){B.preventDefault();a.dragover.call(B)}function x(B){B.stopPropagation();a.dragleave.call(B)}function k(B){if(B.lengthComputable){a.progress(this.index,this.file,Math.round((B.loaded*100)/B.total))}}function z(D){if(d){return}for(var C=0;C=a.maxfilenumber){break}var B=String(f++);e[B]=D[C];a.announce(B,e[B],"");j++}}function r(B){if(e[B]){delete e[B];j--}}function m(){if(j==0||g){g=false;d=false;a.complete();return}else{d=true}var D=-1;for(var F in e){D=F;break}var E=e[D];r(D);var C=E.size;var B=1048576*a.maxfilesize;if(C0){F.append(a.paramname,D,D.name)}i=new XMLHttpRequest();i.open("POST",a.url,true);i.setRequestHeader("Accept","application/json");i.setRequestHeader("Cache-Control","no-cache");i.setRequestHeader("X-Requested-With","XMLHttpRequest");i.onreadystatechange=function(){if(i.readyState!=i.DONE){return}var G=null;if(i.responseText){try{G=jQuery.parseJSON(i.responseText)}catch(H){G=i.responseText}}if(i.status<200||i.status>299){var I=i.statusText;if(i.status==403){I=a.error_login}else{if(i.status==0){I=a.error_server}else{if(!I){I=a.error_default}}}u(B,D,I+" ("+i.status+")")}else{y(B,D,G)}};i.upload.index=B;i.upload.file=D;i.upload.addEventListener("progress",k,false);i.send(F)}function y(B,C,D){a.success(B,C,D);m()}function u(B,C,D){a.error(B,C,D);m()}function w(){c("#uploadbox_input").trigger("click")}function t(B){for(B in e){r(B)}}function l(){if(!d){d=true;m()}}function v(){g=true}function n(B){a=c.extend({},a,B);return a}function s(){return window.File&&window.FormData&&window.XMLHttpRequest&&window.FileList}return{select:w,add:z,remove:r,start:l,stop:v,reset:t,configure:n,compatible:s}}})(jQuery); \ No newline at end of file +(function(c){jQuery.event.props.push("dataTransfer");var h={url:"",paramname:"content",maxfilesize:2048,maxfilenumber:50,dragover:function(){},dragleave:function(){},announce:function(){},initialize:function(){},progress:function(){},success:function(){},error:function(k,l,m){alert(m)},complete:function(){},error_filesize:"File exceeds 2GB. Please use an FTP client.",error_default:"Please make sure the file is available.",error_server:"Upload request failed.",error_login:"Uploads require you to log in.",error_missing:"No upload content available."};var a={};var e={};var f=0;var j=0;var d=false;var g=false;var b=null;var i=null;c.fn.uploadbox=function(A){a=c.extend({},h,A);b=this;b.append('');b.on("drop",o);b.on("dragover",p);b.on("dragleave",x);c("#uploadbox_input").change(function(B){z(B.target.files);c(this).val("")});function o(B){if(!B.dataTransfer){return}z(B.dataTransfer.files);B.preventDefault();return false}function p(B){B.preventDefault();a.dragover.call(B)}function x(B){B.stopPropagation();a.dragleave.call(B)}function k(B){if(B.lengthComputable){a.progress(this.index,this.file,Math.round((B.loaded*100)/B.total))}}function z(D){if(d){return}for(var C=0;C=a.maxfilenumber){break}var B=String(f++);e[B]=D[C];a.announce(B,e[B],"");j++}}function r(B){if(e[B]){delete e[B];j--}}function m(){if(j==0||g){g=false;d=false;a.complete();return}else{d=true}var D=-1;for(var F in e){D=F;break}var E=e[D];r(D);var C=E.size;var B=1048576*a.maxfilesize;if(C0){F.append(a.paramname,D,D.name)}i=new XMLHttpRequest();i.open("POST",a.url,true);i.setRequestHeader("Accept","application/json");i.setRequestHeader("Cache-Control","no-cache");i.setRequestHeader("X-Requested-With","XMLHttpRequest");i.onreadystatechange=function(){if(i.readyState!=i.DONE){return}var G=null;if(i.responseText){try{G=jQuery.parseJSON(i.responseText)}catch(H){G=i.responseText}}if(i.status<200||i.status>299){var I=i.statusText;if(i.status==403){I=a.error_login}else{if(i.status==0){I=a.error_server}else{if(!I){I=a.error_default}}}u(B,D,I+" ("+i.status+")")}else{y(B,D,G)}};i.upload.index=B;i.upload.file=D;i.upload.addEventListener("progress",k,false);i.send(F)}function y(B,C,D){a.success(B,C,D);m()}function u(B,C,D){a.error(B,C,D);m()}function w(){c("#uploadbox_input").trigger("click")}function t(B){for(B in e){r(B)}}function l(){if(!d){d=true;m()}}function v(){g=true}function n(B){a=c.extend({},a,B);return a}function s(){return window.File&&window.FormData&&window.XMLHttpRequest&&window.FileList}return{select:w,add:z,remove:r,start:l,stop:v,reset:t,configure:n,compatible:s}}})(jQuery); \ No newline at end of file diff --git a/static/scripts/utils/uploadbox.js b/static/scripts/utils/uploadbox.js index 3dfb65b2365..dbc9613cdb0 100755 --- a/static/scripts/utils/uploadbox.js +++ b/static/scripts/utils/uploadbox.js @@ -12,7 +12,7 @@ url : '', paramname : 'content', maxfilesize : 2048, - maxfilenumber : 20, + maxfilenumber : 50, dragover : function() {}, dragleave : function() {}, announce : function() {}, diff --git a/static/style/blue/base.css b/static/style/blue/base.css index b38389c95b7..bba90d405e1 100644 --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -1257,7 +1257,8 @@ label{font-weight:normal} .progress-button .progress-bar-notransition{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none} .progress-button .label{position:absolute;top:0px;width:inherit;text-align:center;line-height:19px} .upload-info{font-weight:normal;text-align:center} -.upload-box{width:100%;height:95%;text-align:center;overflow:scroll;font-size:12px;line-height:1.33;-moz-border-radius:5px;border-radius:5px;border:1px dashed #bfbfbf;padding:10px;overflow-x:hidden;-ms-overflow-style:none}.upload-box .table{width:100%} +.upload-box{width:100%;height:95%;text-align:center;overflow:scroll;font-size:12px;line-height:1.33;-moz-border-radius:5px;border-radius:5px;border:1px dashed #bfbfbf;padding:10px;overflow-x:hidden;-ms-overflow-style:none}.upload-box .popover{max-width:600px;width:auto} +.upload-box .table{width:100%} .upload-box .table th{text-align:center;white-space:nowrap} .upload-box .table td{margin:0px;paddign:0px} .upload-box .title{width:130px;word-wrap:break-word;font-size:11px} diff --git a/static/style/src/less/upload.less b/static/style/src/less/upload.less index bfdd77249fd..dafcbcdfaf2 100644 --- a/static/style/src/less/upload.less +++ b/static/style/src/less/upload.less @@ -61,7 +61,12 @@ padding : 10px; overflow-x : hidden; -ms-overflow-style: none; - + + .popover { + max-width: 500px; + width: auto; + } + .table { width : 100%; }