Mirrors/cloudcmd
1
0
Fork 0
mirror of https://github.com/coderaiser/cloudcmd.git synced 2026-07-18 00:47:01 +00:00
Code Issues Projects Releases Wiki Activity

feature(dom) images: add load progress

Browse source
This commit is contained in:
coderaiser 2014-04-14 08:07:24 -04:00
parent 57b93bdc1b
commit 0a30d02128
4 changed files with 55 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/style.css
View file

@ -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);
}

23
lib/client/dom.js
View file

@ -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() {

19
lib/client/listeners.js
View file

@ -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);
}
}

20
lib/client/loader.js
View file

@ -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');