Ajout barre de progression de l’upload du fichier courant.

diff --git a/skins/ajax_scripts/folder_contents_script.js b/skins/ajax_scripts/folder_contents_script.js
index 7204a4edb63dd7af382f0c233876181f81183a1f..d427939092dc4b4e382aec5fbe7e2988a5ee95d8 100644 (file)
--- a/skins/ajax_scripts/folder_contents_script.js
+++ b/skins/ajax_scripts/folder_contents_script.js
@@ -244,6 +244,7 @@ loadListing = function(evt) {
 DDFolderUploader = function(dropbox, uploadUrl, listing) {
        DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
        this.listing = listing;
 DDFolderUploader = function(dropbox, uploadUrl, listing) {
        DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
        this.listing = listing;

+       this.progressBarMaxSize = listing.clientWidth;

        var thead = listing;
        do {
                thead = thead.previousSibling;
        var thead = listing;
        do {
                thead = thead.previousSibling;


@@ -273,9 +274,19 @@ DDFolderUploader.prototype.createRow = function(file) {
        this.lastRowClassName = row.className;
        var td = document.createElement('td');
        td.setAttribute('colspan', this.tableSpan);
        this.lastRowClassName = row.className;
        var td = document.createElement('td');
        td.setAttribute('colspan', this.tableSpan);

-       td.innerHTML = file.name;
+       var relSpan = document.createElement('span');
+       relSpan.style.position = 'relative';
+       td.appendChild(relSpan);
+       var progressBar = document.createElement('span');
+       progressBar.className = 'upload-progress';
+       row.progressBar = progressBar;
+       relSpan.appendChild(progressBar);
+       var fileNameSpan = document.createElement('span');
+       fileNameSpan.innerHTML = file.name;
+       td.appendChild(fileNameSpan);

        row.appendChild(td);
        this.listing.appendChild(row);
        row.appendChild(td);
        this.listing.appendChild(row);

+       this.progressBarMaxSize = row.clientWidth;

        return row;
 };
 
        return row;
 };
 


@@ -290,28 +301,31 @@ DDFolderUploader.prototype.handleFiles = function(files) {
 };
 
 DDFolderUploader.prototype.beforeUpload = function(item) {
 };
 
 DDFolderUploader.prototype.beforeUpload = function(item) {

-  this.uploadedItem = item;
-       // To be implemented by decendant.
+       this.uploadedItem = item;
+       this.progressBar = item.progressBar;

 };
 
 DDFolderUploader.prototype.uploadCompleteHandlerCB = function(req) {
        var item = this.uploadedItem;
        var row = getCopyOfNode(req.responseXML.documentElement.firstChild);
 };
 
 DDFolderUploader.prototype.uploadCompleteHandlerCB = function(req) {
        var item = this.uploadedItem;
        var row = getCopyOfNode(req.responseXML.documentElement.firstChild);

-  row.className = item.className;
+       row.className = item.className;

 
        if (req.status === 200) {
                // update
 
        if (req.status === 200) {
                // update

-    console.log('todo');
+       console.log('todo');

        }
        else if(req.status === 201) {
                // creation
                this.listing.replaceChild(row, item);
        }
        else if(req.status === 201) {
                // creation
                this.listing.replaceChild(row, item);

+               this.progressBarMaxSize = row.clientWidth;

        }
 };
 
 DDFolderUploader.prototype.progressHandlerCB = function(progress) {
        }
 };
 
 DDFolderUploader.prototype.progressHandlerCB = function(progress) {

-       // To be implemented by descendant.

        // 0 <= progress <= 1
        // 0 <= progress <= 1

+       var size = this.progressBarMaxSize * progress;
+       size = Math.round(size);
+       this.progressBar.style.width = size + 'px';

 };
 
 }());
\ No newline at end of file
 };
 
 }());
\ No newline at end of file

diff --git a/skins/custom_generic/zpt_stylesheet.css.dtml b/skins/custom_generic/zpt_stylesheet.css.dtml
index 8acbdab1ba3c7c8dc598241763bc004cbe49401b..77011e0d3387950695bb038e9a77519f18d58ba2 100644 (file)
--- a/skins/custom_generic/zpt_stylesheet.css.dtml
+++ b/skins/custom_generic/zpt_stylesheet.css.dtml
@@ -390,7 +390,18 @@ textarea {
 }
 .listing .even {
   background-color: &dtml-evenRowBackgroundColor;;
 }
 .listing .even {
   background-color: &dtml-evenRowBackgroundColor;;

-} 
+}
+
+.listing span.upload-progress {
+  display: block;
+  position:absolute;
+  background:#ef8e32;
+  height:4px;
+  border-radius:2px;
+  width:0;
+  top:3px;
+}
+

 
 /* Batched navigation */
 
 
 /* Batched navigation */