filebrowser: add path bar

vispa/controller/filesystem.py

@@ -317,7 +317,7 @@ class FSAjaxController(AbstractController):
         self.release_database()
         fail_on_missing = self.convert(fail_on_missing, bool)
         return fs.get_workspaceini(request, fail_on_missing=fail_on_missing)
-    
+
     @cherrypy.expose
     @cherrypy.tools.ajax()
     def set_workspaceini(self, request):
@@ -328,4 +328,15 @@ class FSAjaxController(AbstractController):
         err = fs.set_workspaceini(request)
         if err:
             raise MessageException(err)
-        return {"success": not err}
\ No newline at end of file
+        return {"success": not err}
+
+    @cherrypy.expose
+    @cherrypy.tools.ajax()
+    def expand(self, path):
+        self.release_session()
+        fs = self.get('fs')
+        self.release_database()
+        path = json.loads(path)
+        # 'path' can be a unicode/string or list of unicodes/strings
+        # so convert it with the convert function
+        return fs.expand(path)

vispa/extensions/file/static/css/base/base.css

@@ -81,3 +81,25 @@
     cursor: move;
     -khtml-user-drag: element;
 }
+
+.file-path-bar {
+    line-height: 15px !important;
+    width: 100% !important;
+    position:absolute !important;
+    left: 0px !important;
+    bottom: 0px !important;
+    height: 30px !important;
+}
+
+.path-part-link{
+    visibility: hidden;
+}
+
+.breadcrumb {
+    background-color: #ddd;
+    border-radius: 0px;
+}
+
+.breadcrumb > li + li:before {
+    color: #333;
+}

vispa/extensions/file/static/css/base/views/symbol/symbol.css

 .file-view-symbol {
-    margin-top: 4px;
+    position: absolute;
     overflow: auto;
-    height: 100%;
     -webkit-user-select: none;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 30px !important;
 }
 
 .symbol-item {
@@ -40,7 +43,7 @@
     margin-top: -19px;
     text-align: center;
     z-index: -1;
-    padding  0px
+    padding: 0px;
     -webkit-user-select: none;
     width: 120px;
 }
@@ -137,15 +140,11 @@
     color: white;
 }
 
-
-
 .file-warning{
     background-color: red; text-align: center;
     -webkit-user-select: none;
 }
 
-
-
 /* opt icon */
 .symbol-item[selected] > .file-opt {
     visibility: visible;
@@ -171,5 +170,3 @@
     /*border: 1px solid silver;*/
     border-radius: 18px
 }
-
-

vispa/extensions/file/static/css/base/views/table/table.css

@@ -29,7 +29,7 @@
 /* div around the filelist */
 .files-table {
     position: absolute;
-    bottom: 0px;
+    bottom: 30px;
     right: 0px;
     top: 37px;
     left: 0px;

vispa/extensions/file/static/html/pathbar.html

+<div class="file-path-bar">
+    <ul class="file-path-parts breadcrumb">
+        <li><a href="#" data-bind="pathPart"></a></li>
+    </ul>
+</div>
\ No newline at end of file

vispa/extensions/file/static/html/symbol.html

-<!-- <div class="file-view-symbol file-view-content-container">
-    <div class="symbol-item" data-bind="data">
-        <p class="file-selection-p"><input type="checkbox" class="file-selection-checkbox"/></p>
-        <p class="glyphicon glyphicon-cog file-symbol-properties file-properties"></p>
-        <p class="file-symbol-icon"><img data-bind="icon"></p>
-        <p data-bind="name" class="file-symbol-name"></p>
-    </div>
-</div> -->
-
 <div class="file-view-symbol file-view-content-container">
     <div draggable="true" class="file-node symbol-item" data-bind="data">
         <p class="file-selection-p">

vispa/extensions/file/static/html/table.html

@@ -5,7 +5,7 @@
       <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 file-table-icon"></div>
       <div class="col-xs-8 col-sm-5 col-md-4 col-lg-6 file-table-name">Name <i class="glyphicon glyphicon-sort-by-alphabet"></i></div>
       <div class="                  col-md-2 col-lg-1 hidden-sm hidden-xs file-table-size">Size <i class="glyphicon glyphicon-sort"></i></div>
-      <div class="         col-sm-4 col-md-3 col-lg-2 hidden-xs file-table-time">Modified  <i class="glyphicon glyphicon-sort"></i></div>
+      <div class="         col-sm-4 col-md-3 col-lg-2 hidden-xs file-table-time">Modified <i class="glyphicon glyphicon-sort"></i></div>
       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 .file-table-options"></div>
   </div>
 

vispa/extensions/file/static/js/base/base.js

@@ -146,6 +146,7 @@ var FileBase = Class.extend({
     }
     this.helper.sortItems(content, sort, reverse);
     this.workflow.currentView.setContent(content);
+    this.view.setupPathBar();
     this.bookmarkcontainer.setup();
     this.menuitems.hideMenu();
     this.instance.setLabel(this.workflow.path, true);

vispa/extensions/file/static/js/base/helper.js

@@ -90,6 +90,15 @@ var FileBaseHelper = Class.extend({
     return parts.join("/");
   },
 
+  splitPath: function(abspath) {
+    var parts = abspath.split("/");
+    var pathList = [];
+    $.each(parts, function(idx, part){
+      pathList.push({"pathPart": part});
+    });
+    return pathList;
+  },
+
   // Helper function for getting the extension name
   strExtension: function(s) {
     if (s === undefined || s === null) {

vispa/extensions/file/static/js/base/view.js

@@ -6,6 +6,7 @@ var FileBaseView = Class.extend({
     this.instance = FileBase.instance;
     this.fileContentContainer = null;
     this.dropzone = null;
+    this.filePathBar = null;
     this.filterField = null;
     this.masterNode = null;
     this.previewBoxID = null;
@@ -121,6 +122,63 @@ var FileBaseView = Class.extend({
     return src;
   },
 
+  setupPathBar: function() {
+    var self = this;
+    this.instance.getTemplate("html/pathbar.html", function(err, tmpl, dfd) {
+      self.filePathBar = $(tmpl);
+      var path = self.FileBase.workflow.path;
+      var dfd = self.FileBase.instance.GET("/ajax/fs/expand", {
+        "path": JSON.stringify(path)
+      });
+      dfd.done(function() {
+        var pathParts = self.FileBase.helper.splitPath(dfd.responseText);
+
+        // to make path readable: replace first pathPart to disk
+        if (pathParts[0].pathPart == "") {
+          pathParts[0].pathPart = "Disk";
+        }
+
+        // build pathes to pathParts
+        var pathPartsLinks = []
+        var t = "";
+        $.each(pathParts, function(idx, part) {
+          if (idx == 0) {
+            t = "/";
+          } else {
+            t = t + "/" + part.pathPart;
+          }
+          t = t.replace(/\/{2,}/g, "/");
+          pathPartsLinks.push({
+            "pathPart": part.pathPart,
+            "pathPartLink": t
+          });
+        })
+
+        var directive = {
+          "pathPart": {
+            "href": function(nodeObj) {
+              return this.pathPartLink;
+            }
+          }
+        };
+
+        self.filePathBar.find(".file-path-parts").render(pathPartsLinks, directive);
+        $("li:last-child", self.filePathBar).addClass("active").html(pathParts[pathParts.length - 1].pathPart);
+
+        self.fileContentContainer.append(self.filePathBar);
+        $("a", self.filePathBar).on("click", function(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          var newPath = $(this).attr("href");
+          if (newPath != dfd.responseText) {
+            self.FileBase.workflow.path = newPath;
+          }
+          self.FileBase.updateView();
+        })
+      });
+    });
+  },
+
   // toggleViewMenu: function(prevView, newView) {
   toggleViewMenu: function() {
     var ids = ["Table", "Symbol"];

vispa/remote/filesystem.py

@@ -684,7 +684,7 @@ class FileSystem(object):
             return ""
         except Exception as e:
             return str(e)
-    
+
     def _watch_workspaceini(self):
         if self._monitor_watch_workspaceini:
             return
@@ -701,7 +701,6 @@ def string_compare(a, b):
     else:
         return -1
 
-
 def file_compare(a, b):
     if not a.startswith('.') and not b.startswith('.'):
         return string_compare(a, b)