From d2d7c72e99d41950943fc17a9f63d0c814b38870 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Mon, 17 Nov 2014 13:29:11 +0800
Subject: [PATCH] [fileupload] redesigned 'add folder'

---
 media/css/seahub.css                         |  21 ++-
 seahub/base/templatetags/upload_tags.py      |  12 +-
 seahub/templates/repo.html                   | 127 ++++++++++++++++++-
 seahub/templates/snippets/repo_dir_data.html |  14 +-
 4 files changed, 165 insertions(+), 9 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 665a368486..6770aa76c0 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1794,6 +1794,7 @@ textarea:-moz-placeholder {/* for FF */
 }
 #repo-file-list .repo-file-list-topbar.fixed-hd {
     width:930px;
+    z-index:12; /* to make #upload-menu be on top of .repo-file-list tr.fixed-hd */
 }
 .repo-file-list .fixed-hd th {
     background:#fff;
@@ -1940,6 +1941,23 @@ textarea:-moz-placeholder {/* for FF */
     position:relative;
     overflow:hidden;
 }
+#upload-menu {
+    position:absolute;
+    left:0;
+    top:29px;
+    border:1px solid #c5c5c5;
+    border-radius:2px;
+    box-shadow: 0 0 2px #c5c5c5;
+    background:#fff;
+}
+#upload-menu .item {
+    position:relative;
+    text-align:left;
+    padding:0 10px;
+    height:27px;
+    line-height:27px;
+    overflow:hidden; /* for 'hover', as long 'input' in it. */
+}
 .fixed-upload-file-dialog {
     width: 540px;
     position: fixed;
@@ -1982,7 +2000,8 @@ textarea:-moz-placeholder {/* for FF */
     color:#333;
 }  
 .fileinput-button input,
-#upload-file input {
+#upload-file input,
+#upload-menu input {
     position: absolute;
     top: 0;     
     right: 0;   
diff --git a/seahub/base/templatetags/upload_tags.py b/seahub/base/templatetags/upload_tags.py
index 20f225c40b..69d035b8f0 100644
--- a/seahub/base/templatetags/upload_tags.py
+++ b/seahub/base/templatetags/upload_tags.py
@@ -10,12 +10,14 @@ def upload_js():
 {% for (var i=0, file; file=o.files[i]; i++) { %}
     <tr class="template-upload fade">
         {% if (file.error) { %}
-            <td class="name ellipsis" title="{%=file.name%}">{%=file.name%}</td>
+            <td class="name ellipsis" title="{%=file.webkitRelativePath || file.name%}">
+                {%=file.webkitRelativePath || file.name%}
+            </td>
             <td class="size">{%=o.formatFileSize(file.size)%}</td>
             <td class="error"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
         {% } else if (o.files.valid && !i) { %}
-            <td class="name ellipsis" title="{%=file.name%}">
-                {%=file.name%}
+            <td class="name ellipsis" title="{%=file.webkitRelativePath || file.name%}">
+                {%=file.webkitRelativePath || file.name%}
                 <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
             </td>
             <td class="size">{%=o.formatFileSize(file.size)%}</td>
@@ -41,7 +43,9 @@ def upload_js():
 <script id="template-download" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
     <tr class="template-download fade">
-            <td class="name ellipsis" title="{%=file.name%}">{%=file.name%}</td>
+            <td class="name ellipsis" title="{%=file.webkitRelativePath || file.name%}">
+                {%=file.webkitRelativePath || file.name%}
+            </td>
             <td class="size">{%=o.formatFileSize(file.size)%}</td>
         {% if (file.error) { %}
             <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}:</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
diff --git a/seahub/templates/repo.html b/seahub/templates/repo.html
index 6f2f25fb52..52905ce10d 100644
--- a/seahub/templates/repo.html
+++ b/seahub/templates/repo.html
@@ -287,17 +287,26 @@ $(function() {
                 'cancel_status':"{% trans "File Upload canceled" %}"
                 });
 
+        var update_dir_names = []; // dirs with 'time' to be updated
+        var new_dir_names = [];
         popup.fileupload({
             formData: {'parent_dir': cur_path},
             fileInput: $('#upload-file input'),
+            paramName: 'file',
             autoUpload:true,
             sequentialUploads: true
         })
-        .bind('fileuploadadd', function() {
+        .bind('fileuploadadd', function(e, data) {
             popup.removeClass('hide');
             fu_status.html("{% trans "File Uploading..." %}");
             cancel_all_btn.removeClass('hide');
             close_icon.addClass('hide');
+
+            // when add folder, a subdirectory will be shown as '.'. rm it.
+            var file = data.files[0];
+            if (file.name == '.') {
+                data.files.shift();
+            }
         })
         .bind('fileuploadsubmit', function(e, data) {
             var _this = $(this);
@@ -309,6 +318,15 @@ $(function() {
                     cache: false,
                     dataType: 'json',
                     success: function(ret) {
+                        var file_path = file.webkitRelativePath, // can be undefined, '', or a valid path
+                            r_path;
+                        if (file_path) { // 'add folder'
+                            r_path = file_path.substring(0, file_path.lastIndexOf('/') + 1);
+                        }
+                        var formData = popup.fileupload('option', 'formData');
+                        formData.relative_path = r_path || '';
+                        popup.fileupload('option', 'formData', formData);
+
                         data.url = ret['url'];
                         data.jqXHR = _this.fileupload('send', data);
                     },
@@ -324,10 +342,83 @@ $(function() {
         })
         .bind('fileuploaddone', function(e, data) {
             if (data.textStatus == 'success') {
-                if (data.formData.parent_dir == cur_path) {
+                if (data.formData.parent_dir != cur_path) {
+                    return;
+                }
+                var file = data.files[0];
+                var file_path = file.webkitRelativePath;
+
+                if (!file_path) {
                     addFile(data.result[0]);
+                    return;
+                }
+
+                // for 'add folder'
+                var cur_dirs = $('.dir-item');
+                var cur_dir_names = [];
+                cur_dirs.each(function() {
+                    cur_dir_names.push($(this).attr('data-name'));
+                });
+
+                var new_dir_name = file_path.substring(0, file_path.indexOf('/'));
+                if (cur_dir_names.indexOf(new_dir_name) == -1) {
+                    if (new_dir_names.indexOf(new_dir_name) == -1) {
+                        new_dir_names.push(new_dir_name);
+                    }
+                } else {
+                    if (update_dir_names.indexOf(new_dir_name) == -1) {
+                        update_dir_names.push(new_dir_name);
+                    }
+                }
+                data.result[0].webkitRelativePath = file_path; // for 'template_download'
+            }
+        })
+        .bind('fileuploadstop', function() {
+            if (popup.fileupload('option','formData').parent_dir != cur_path) {
+                return;
+            }
+            var now = parseInt(new Date().getTime()/1000);
+            var cur_dirs = $('.dir-item');
+            if (new_dir_names.length > 0) {
+                if (cur_dirs.length == 0) {
+                    reqDirData('{% url 'repo_dir_data' repo.id %}?p=' + e(cur_path));
+                    return;
+                } else {
+                    var dir_tpl = $(cur_dirs[0]);
+                    var path = cur_path;
+                    $(new_dir_names).each(function(index, new_dir_name) {
+                        var new_dir = dir_tpl.clone(true);
+                        new_dir.attr({
+                            'data-name': new_dir_name,
+                            'data-time': now
+                        });
+                        $('.dirent-name a', new_dir).html(new_dir_name).attr('href', '{% url 'repo' repo.id %}?p=' + e(path+new_dir_name));
+                        $('.dirent-update', new_dir).html("{% trans "Just now" %}");
+                        $('.dir-download', new_dir).attr('href', '{% url 'repo_download_dir' repo.id %}?p=' + e(path+new_dir_name));
+                        $('.dir-share', new_dir).attr({
+                            'data-link':'',
+                            'data-token':'',
+                            'data-upload-link':'',
+                            'data-upload-token':''
+                        });
+                        dir_tpl.before(new_dir);
+                    });
+                    updateCmt();
                 }
             }
+            if (update_dir_names.length > 0) {
+                cur_dirs.each(function() {
+                    var dir = $(this);
+                    if (update_dir_names.indexOf(dir.attr('data-name')) != -1) {
+                        dir.attr('data-time', now);
+                        $('.dirent-update', dir).html("{% trans "Just now" %}");
+                    }
+                });
+                updateCmt();
+            }
+            // empty the arrays
+            new_dir_names = [];
+            update_dir_names = [];
         });
 
         // Enable iframe cross-domain access via redirect option:
@@ -1078,6 +1169,38 @@ $('#upload-file').click(function () {
 $('#upload-file').click(function () {
     $('#upload-file-dialog').modal();
 });
+    {% else %}
+    if ('webkitdirectory' in $('#upload-file input[type="file"]')[0]) {
+        $('#upload-file').find('input').remove().end().addClass('cspt');
+        $('#upload-menu .item').click(function() {
+            $('#upload-file-dialog').fileupload(
+                'option',
+                'fileInput',
+                $('input[type="file"]', $(this))
+            );
+        })
+        .hover(
+            function() {
+                $(this).css({'background':'#f3f3f3'});
+            },
+            function() {
+                $(this).css({'background':'transparent'});
+            }
+        );
+        $('.repo-op').css({'position': 'relative'});
+        $('#upload-file').click(function () {
+            $('#upload-menu').toggleClass('hide');
+        });
+        $(document).click(function(e) {
+            var target = e.target || event.srcElement;
+            var closePopup = function(popup, popup_switch) {
+                if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target) && !popup_switch.find('*').is(target) ) {
+                    popup.addClass('hide');
+                }
+            };
+            closePopup($('#upload-menu'), $('#upload-file'));
+        });
+    }
     {% endif %}
 {% endif %}
 
diff --git a/seahub/templates/snippets/repo_dir_data.html b/seahub/templates/snippets/repo_dir_data.html
index facd378e9c..9c81184dab 100644
--- a/seahub/templates/snippets/repo_dir_data.html
+++ b/seahub/templates/snippets/repo_dir_data.html
@@ -1,5 +1,5 @@
 {% load seahub_tags i18n %}
-<div class="repo-file-list-topbar ovhd">
+<div class="repo-file-list-topbar">
     <p class="path fleft">
     {% for name, link in zipped %}
     {% if forloop.first or not forloop.last %}
@@ -13,7 +13,7 @@
         {% if user_perm == 'rw' %}
 
         {% if repo.encrypted and repo.enc_version == 2 and not server_crypto %}
-        <button id="upload-file" class="op-btn"><span class="icon-upload-alt"></span>{% trans "Upload"%}</button>
+            <button id="upload-file" class="op-btn"><span class="icon-upload-alt"></span>{% trans "Upload"%}</button>
         {% else %}
             {% if no_quota %}
             <button id="upload-file" class="op-btn"><span class="icon-upload-alt"></span>{% trans "Upload"%}</button>
@@ -22,6 +22,16 @@
                 <span class="icon-upload-alt"></span><span>{% trans "Upload"%}</span>
                 <input type="file" name="file" multiple />
             </div>
+            <ul id="upload-menu" class="hide">
+                <li class="item">
+                <span>{% trans "Upload Files" %}</span>
+                <input type="file" name="file" multiple />
+                </li>
+                <li class="item">
+                <span>{% trans "Upload Folder" %}</span>
+                <input type="file" name="file" multiple directory webkitdirectory />
+                </li>
+            </ul>
             {% endif %}
         {% endif %}
         <button id="add-new-dir" class="op-btn"><span class="icon-plus-sign-alt"></span>{% trans "New Directory"%}</button>