buildup fixes

danielkocsan · May 22, 2012 · bc90fef · bc90fef
1 parent 5f328b1
commit bc90fef
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 32 deletions.
diff --git a/ajaxUploader.uppit.js b/ajaxUploader.uppit.js
@@ -1,4 +1,4 @@
-(function (uppit) {
+(function (uppit, document) {
     "use strict";
     if (!uppit instanceof Object) {
         throw new Error('Uppit object not found for ajaxUploader plugin');
@@ -8,7 +8,10 @@
 
         var upload,
             handleFileDrop,
-            element = uppit.getElement();
+            element,
+            triggerDone,
+            init,
+            handleElementSet;
 
         upload = function (file) {
             var handleOnload,
@@ -33,11 +36,11 @@
             }());
 
             xhr.addEventListener('load', handleOnload);
-            xhr.addEventListener('progress', function() {console.log('progress')}, true);
+            xhr.upload.onprogress = function (event) {console.log(event);};
 
             xhr.open(
-                'POST', 
-                'upload.php', 
+                'POST',
+                'upload.php',
                 true
             );
 
@@ -52,8 +55,19 @@
             };
         }());
 
-        element.addEventListener('filedrop', handleFileDrop);
+        init = function () {
+            element.addEventListener('filedrop', handleFileDrop);
+        };
+
+        handleElementSet = (function () {
+            return function (event) {
+                element = event.elements.element;
+                init();
+            };
+        }());
+
+        document.addEventListener('elementSet', handleElementSet);
 
         return {};
     }());
-})(uppit);
+})(uppit, window.document);
diff --git a/dragAndDrop.uppit.js b/dragAndDrop.uppit.js
@@ -10,7 +10,8 @@
             handleWithNoop,
             triggerDrop,
             handleDrop,
-            element;
+            element,
+            handleElementSet;
 
         handleDragEnter = (function () {
             return function (event) {
@@ -66,7 +67,7 @@
 
         handleElementSet = (function () {
             return function (event) {
-                element = event.element;
+                element = event.elements.element;
                 init();
             };
         }());

diff --git a/index.html b/index.html
@@ -1,7 +1,3 @@
-<!--
-To change this template, choose Tools | Templates
-and open the template in the editor.
--->
 <!DOCTYPE html>
 <html>
     <head>
@@ -11,11 +7,13 @@
     </head>
     <body>
         <div id="uppit">Drop files here</div>
-    </body>
     <script type="text/javascript" src="uppit.js"></script>
     <script type="text/javascript" src="dragAndDrop.uppit.js"></script>
+    <script type="text/javascript" src="ajaxUploader.uppit.js"></script>
+    <script type="text/javascript" src="preview.uppit.js"></script>
     <script type="text/javascript">
         var element = document.getElementById('uppit');
         uppit.setElement(element);
     </script>
+    </body>
 </html>
diff --git a/preview.uppit.js b/preview.uppit.js
@@ -9,21 +9,27 @@
             handleFileDrop,
             handleLoad,
             element = uppit.getElement(),
-            fileNodes = [];
+            fileNodes = [],
+            setPreviewHref,
+            handleUploadDone,
+            init,
+            handleElementSet,
+            filesNode;
 
         handleLoad = function (data, file) {
 
         };
 
 
         createPreview = function (file) {
-            var fileNode = document.createElement('div');
+            var fileNode = document.createElement('div'),
+                fileReader = new FileReader();
+
             fileNode.innerHTML = file.name;
-            element.appendChild(fileNode);
+            fileNode.setAttribute('class', 'file');
+            filesNode.appendChild(fileNode);
             fileNodes.push(fileNode);
 
-            var fileReader = new FileReader();
-
             fileReader.onload = (function (file) {
                 return function (event) {
                     handleLoad(event.target.result, file);
@@ -59,8 +65,19 @@
             };
         }());
 
-        element.addEventListener('filedrop', handleFileDrop);
-        element.addEventListener('upload.done', handleUploadDone);
+        init = function () {
+            element.addEventListener('filedrop', handleFileDrop);
+        };
+
+        handleElementSet = (function () {
+            return function (event) {
+                element = event.elements.element;
+                filesNode = event.elements.files;
+                init();
+            };
+        }());
+
+        document.addEventListener('elementSet', handleElementSet);
 
         return {};
     }());

diff --git a/uppit.css b/uppit.css
@@ -1,5 +1,5 @@
 #uppit {
-    height: 100px;
+    min-height: 100px;
     border: 1px dashed #ececec;
     line-height: 100px;
     font-size: 32px;
@@ -10,4 +10,21 @@
 #uppit.active {
     border-color: orangered;
     color: orangered;
+}
+
+#uppit>#files>.file {
+    width: 5em;
+    height: 7em;
+    float: left;
+    border: .05em solid rgba(100,100,100, .1);
+    border-radius: .1em;
+    box-shadow: .01em .01em .2em rgba(100,100,100, .3);
+    margin: .2em;
+    font-size: 0.5em;
+    line-height: 1em;
+    word-break: break-all;
+}
+
+#uppit .clear {
+    clear: both;
 }
diff --git a/uppit.js b/uppit.js
@@ -1,20 +1,40 @@
-var uppit = function () {
+var uppit = function (document) {
+    "use strict";
     var element = null,
-        plugins = {};
-
-    function setElement (elmnt) {
+        plugins = {},
+        filesNode,
+        createNodes;
+
+    function setElement(elmnt) {
         var event = document.createEvent('Event');
+
+        element = elmnt;
+        createNodes();
+
         event.initEvent('elementSet', true, true);
-        event.element = elmnt;
+        event.elements = {
+            element: elmnt,
+            files: filesNode
+        };
         document.dispatchEvent(event);
-        element = elmnt;
-    }
-
+    };
+
+    createNodes = function () {
+        var clearNode = document.createElement('div');
+        clearNode.setAttribute('class', 'clear');
+
+        filesNode = document.createElement('div');
+        filesNode.setAttribute('id', 'files');
+
+        element.appendChild(filesNode);
+        element.appendChild(clearNode);
+    };
+
     return {
         setElement: setElement,
         getElement: function () {
             return element;
         },
         plugins: plugins
-    }
-}();
+    };
+}(window.document);