From 0a30d0212874a4f1652b72571364186ce26c4cd7 Mon Sep 17 00:00:00 2001
From: coderaiser <mnemonic.enemy@gmail.com>
Date: Mon, 14 Apr 2014 08:07:24 -0400
Subject: [PATCH] feature(dom) images: add load progress

---
 css/style.css           |  9 +++++++++
 lib/client/dom.js       | 23 +++++++++++++++++++++++
 lib/client/listeners.js | 19 +++++++++++--------
 lib/client/loader.js    | 20 ++++++++++++--------
 4 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/css/style.css b/css/style.css
index b101e002..c786d509 100644
--- a/css/style.css
+++ b/css/style.css
@@ -104,6 +104,15 @@ body {
     vertical-align  : middle;
 }
 
+.loading::after {
+    content     : attr(data-progress);
+    position    : relative;
+    left        : 16px;
+    bottom      : 3px;
+    font-size   : 10px;
+    color       : rgb(49,123,249);
+}
+
 .loading-svg {
     background      : url(/img/spinner.svg);
 }
diff --git a/lib/client/dom.js b/lib/client/dom.js
index 047fb30c..ae018b44 100644
--- a/lib/client/dom.js
+++ b/lib/client/dom.js
@@ -26,6 +26,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
                         name        : 'span',
                         className   : classes,
                         id          : ID + name,
+                        attr        : 'data-progress',
                         not_append  : true
                     });
                     
@@ -158,6 +159,28 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
                 
                 return lErrorImage;
             };
+            
+            this.setProgress    = function(value, title) {
+                var DATA    = 'data-progress',
+                    element = Images.loading();
+                    
+                if (element) {
+                    element.setAttribute(DATA, value + '%');
+                    
+                    if (title)
+                        element.title = title;
+                }
+            };
+                
+            this.clearProgress  = function() {
+                var DATA    = 'data-progress',
+                    element = Images.loading();
+                    
+                 if (element) {
+                    element.setAttribute(DATA, '');
+                    element.title = '';
+                }
+            };
         },
         
         DOMTreeProto                = function() {
diff --git a/lib/client/listeners.js b/lib/client/listeners.js
index cab3c9d5..9c5dee49 100644
--- a/lib/client/listeners.js
+++ b/lib/client/listeners.js
@@ -305,13 +305,16 @@ var Util, DOM, CloudCmd;
                 onDrop          = function (event) {
                     var reader, file, files,
                          dir    = Info.dirPath,
-                         load   = function(file) {
-                            return function(event) {
-                                var path    = dir + file.name,
-                                    data    = event.target.result;
-                                
-                                DOM.RESTful.write(path, data, CloudCmd.refresh);
-                            };
+                         load   = function(file, event) {
+                            var Images  = DOM.Images,
+                                name    = file.name,
+                                path    = dir + name,
+                                data    = event.target.result;
+                            
+                            Images.showLoad({top: true});
+                            Images.setProgress(0, name);
+                            
+                            DOM.RESTful.write(path, data, CloudCmd.refresh);
                         };
                     
                     preventDefault(event);
@@ -325,7 +328,7 @@ var Util, DOM, CloudCmd;
                         for (i = 0; i < n; i++) {
                             reader          = new FileReader();
                             file            = files[i];
-                            Events.add('load', load(file), reader);
+                            Events.add('load', Util.bind(load, file), reader);
                             reader.readAsArrayBuffer(file);
                         }
                     }
diff --git a/lib/client/loader.js b/lib/client/loader.js
index f4db94ca..3232c646 100644
--- a/lib/client/loader.js
+++ b/lib/client/loader.js
@@ -43,7 +43,7 @@ var Util, DOM;
          * @param pParams
          */
         this.ajax                    = function(params) {
-            var p           = params,
+            var p           = params, countProgress,
                 type        = p.type || p.method || 'GET',
                 xhr         = new XMLHttpRequest();
             
@@ -53,22 +53,26 @@ var Util, DOM;
                 xhr.responseType = p.responseType;
             
             Events.add('progress', function(event) {
-                var percent, count, msg;
+                var percent, count;
                 
                 if (event.lengthComputable) {
-                    percent = (event.loaded / event.total) * 100,
-                    count   = Math.round(percent),
-                    msg     = type + ' ' + p.url + ': ' + count + '%';
-                    Util.log(msg);
-                }
+                    percent = (event.loaded / event.total) * 100;
+                    count   = Math.round(percent);
                     
-              }, xhr.upload);
+                    if (countProgress)
+                        Images.setProgress(count);
+                    
+                    countProgress = true;
+                }
+            
+            }, xhr.upload);
             
             Events.add('readystatechange', function(event) {
                 var TYPE_JSON, type, data, isContain,
                     xhr         = event.target;
                 
                 if (xhr.readyState === 4 /* Complete */) {
+                    Images.clearProgress();
                     TYPE_JSON   = 'application/json';
                     type        = xhr.getResponseHeader('content-type');