diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..f0d204a --- /dev/null +++ b/.jshintrc @@ -0,0 +1,4 @@ +{ + "mootools": true, + "browser": true +} diff --git a/Source/Form.MultipleFileInput.js b/Source/Form.MultipleFileInput.js index 1ab751c..fcbc5ec 100644 --- a/Source/Form.MultipleFileInput.js +++ b/Source/Form.MultipleFileInput.js @@ -11,7 +11,6 @@ provides: Form.MultipleFileInput ... */ - Object.append(Element.NativeEvents, { dragenter: 2, dragleave: 2, dragover: 2, dragend: 2, drop: 2 }); diff --git a/Source/Form.Upload.js b/Source/Form.Upload.js index 3700b18..88e1312 100644 --- a/Source/Form.Upload.js +++ b/Source/Form.Upload.js @@ -11,7 +11,11 @@ provides: Form.Upload ... */ +(function(){ +"use strict"; + if (!this.Form) this.Form = {}; +var Form = this.Form; Form.Upload = new Class({ @@ -19,7 +23,7 @@ Form.Upload = new Class({ options: { dropMsg: 'Please drop your files here', - fireAtOnce: false, + fireAtOnce: false, onComplete: function(){ // reload window.location.href = window.location.href; @@ -43,97 +47,97 @@ Form.Upload = new Class({ var form = input.getParent('form'); if (!form) return; - var self = this, - - drop = new Element('div.droppable', { - text: this.options.dropMsg - }).inject(input, 'after'), - - list = new Element('ul.uploadList').inject(drop, 'after'), - - progress = new Element('div.progress') - .setStyle('display', 'none').inject(list, 'after'), - - inputFiles = new Form.MultipleFileInput(input, list, drop, { - onDragenter: drop.addClass.pass('hover', drop), - onDragleave: drop.removeClass.pass('hover', drop), - onDrop: function() { - drop.removeClass.pass('hover', drop); - if (self.options.fireAtOnce) - form.fireEvent("submit"); - } - }), - - uploadReq = new Request.File({ - url: form.get('action'), - onRequest: progress.setStyles.pass({display: 'block', width: 0}, progress), - onProgress: function(event){ - var loaded = event.loaded, total = event.total; - progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%'); - }, - onComplete: function(){ - progress.setStyle('width', '100%'); - self.fireEvent('complete', arguments); - this.reset(); + var self = this; + + var drop = new Element('div.droppable', { + text: this.options.dropMsg + }).inject(input, 'after'); + + var list = new Element('ul.uploadList').inject(drop, 'after'); + + var progress = new Element('div.progress') + .setStyle('display', 'none').inject(list, 'after'); + + var inputFiles = new Form.MultipleFileInput(input, list, drop, { + onDragenter: drop.addClass.pass('hover', drop), + onDragleave: drop.removeClass.pass('hover', drop), + onDrop: function(){ + drop.removeClass.pass('hover', drop); + if (self.options.fireAtOnce){ + form.fireEvent("submit"); } - }), + } + }); + + var uploadReq = new Request.File({ + url: form.get('action'), + onRequest: progress.setStyles.pass({display: 'block', width: 0}, progress), + onProgress: function(event){ + var loaded = event.loaded, total = event.total; + progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%'); + }, + onComplete: function(){ + progress.setStyle('width', '100%'); + self.fireEvent('complete', Array.slice(arguments)); + this.reset(); + } + }); - inputname = input.get('name'); + var inputname = input.get('name'); form.addEvent('submit', function(event){ - if (event) { - event.preventDefault(); - } + if (event) event.preventDefault(); inputFiles.getFiles().each(function(file){ uploadReq.append(inputname , file); }); uploadReq.send(); }); - self.reset = function() { - var files = inputFiles.getFiles(); - for (var i = 0; i < files.length; i++) { - inputFiles.remove(files[i]); - } - }; + + self.reset = function() { + var files = inputFiles.getFiles(); + for (var i = 0; i < files.length; i++){ + inputFiles.remove(files[i]); + } + }; }, legacyUpload: function(input){ - var rows = []; + var rows = []; var row = input.getParent('.formRow'); - rowClone = row.clone(true, true), - add = function(event){ - event.preventDefault(); - - var newRow = rowClone.clone(true, true), - inputID = String.uniqueID(), - label = newRow.getElement('label'); - - newRow.getElement('input').set('id', inputID).grab(new Element('a.delInputRow', { - text: 'x', - events: {click: function(event){ - event.preventDefault(); - newRow.destroy(); - }} - }), 'after'); - - if (label) label.set('for', inputID); - newRow.inject(row, 'after'); - rows.push(newRow); - }; + var rowClone = row.clone(true, true); + var add = function(event){ + event.preventDefault(); + + var newRow = rowClone.clone(true, true), + inputID = String.uniqueID(), + label = newRow.getElement('label'); + + newRow.getElement('input').set('id', inputID).grab(new Element('a.delInputRow', { + text: 'x', + events: {click: function(event){ + event.preventDefault(); + newRow.destroy(); + }} + }), 'after'); + + if (label) label.set('for', inputID); + newRow.inject(row, 'after'); + rows.push(newRow); + }; new Element('a.addInputRow', { text: '+', events: {click: add} }).inject(input, 'after'); - this.reset = function() { - for (var i = 0; i < rows.length; i++) { - rows[i].destroy(); - } - rows = []; - }; + this.reset = function() { + for (var i = 0; i < rows.length; i++){ + rows[i].destroy(); + } + rows = []; + }; }, @@ -142,3 +146,5 @@ Form.Upload = new Class({ } }); + +}).call(window); diff --git a/Source/Request.File.js b/Source/Request.File.js index 3160e5c..68959d2 100644 --- a/Source/Request.File.js +++ b/Source/Request.File.js @@ -14,7 +14,7 @@ credits: https://gist.github.com/a77b537e729aff97429c (function(){ -var progressSupport = ('onprogress' in new Browser.Request); +var progressSupport = ('onprogress' in new Browser.Request()); Request.File = new Class({