File: Make reordering without rerendering and reactions on small changes (<10)...

File: Make reordering without rerendering and reactions on small changes (<10) for table and symbolview available

extra/jshintrc

@@ -60,6 +60,7 @@
 
   "globals": {
     "$":           false,
-    "vispa":       false
+    "vispa":       false,
+    "Class":       false
   }
 }

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

@@ -181,7 +181,7 @@
 .file-view-symbol .file-selection-box {
   position: absolute;
   top: 2px;
-  visibility: hidden;
+  visibility: visible;
   -webkit-user-select: none;
   content: '';
 }

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

@@ -175,7 +175,7 @@
   .file-selection-box {
     position: absolute;
     top: 2px;
-    visibility: hidden;
+    visibility: visible;
     -webkit-user-select: none;
     content: '';
     span {

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

@@ -12,7 +12,8 @@ var FileBaseSorting = Class.extend({
     if (sortMenu === null) {
       return;
     }
-    for (var i = 0; i < sortGlyphicons.length; i++) {
+    var i;
+    for (i = 0; i < sortGlyphicons.length; i++) {
       var button = $("#fastmenu-" + sortGlyphicons[i], sortMenu);
       var glyph = $("i.glyphicon", button);
       if (sortGlyphicons[i] != type) {
@@ -46,14 +47,7 @@ var FileBaseSorting = Class.extend({
       this.toggleSortButtons(type, this.wf.reverse);
     }
     this.wf.sort = type;
-    if (this.FileBase.workflow.currentView.type == "Symbol") {
-      this.FileBase.helper.sortItems(this.wf.data, this.wf.sort, this.wf.reverse);
-      this.FileBase.workflow.currentView.reorder();
-    }
-    else {
-      this.FileBase.refresh(this.wf.data, type);
-    }
-
-
+    this.FileBase.helper.sortItems(this.wf.data, this.wf.sort, this.wf.reverse);
+    this.FileBase.view.reorder();
   }
 });

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

 var FileBaseView = Class.extend({
 
-  init: function(FileBase) {
+  init: function (FileBase) {
     var self = this;
     this.FileBase = FileBase;
     this.instance = FileBase.instance;
@@ -10,23 +10,23 @@ var FileBaseView = Class.extend({
     // directives for rendering, needed for all views
     this.directives = {
       "icon": {
-        "class": function() {
+        "class": function () {
           return self.setupSymbols(this.name, this.type, this.symlink);
         }
       },
       // pseudo attribute to set the data to the node
       "data": {
-        "data": function(nodeObj) {
+        "data": function (nodeObj) {
           var node = $(nodeObj.element);
-          node.css("order", nodeObj.index);
+          //node.css("order", nodeObj.index);
           node.data("data", this);
         },
         // set the events that can happen when a click on the node occurs
-        "action": function(nodeObj) {
+        "action": function (nodeObj) {
           self.FileBase.events.setupNodeEvents(nodeObj);
         },
         // set opacity if cutted
-        "opacity": function(nodeObj) {
+        "opacity": function (nodeObj) {
           var cookie = $.cookie("vispaFile");
           if (cookie === undefined || cookie === null) {
             return;
@@ -39,9 +39,10 @@ var FileBaseView = Class.extend({
           var path = self.FileBase.workflow.path + "/" + this.name;
           self.instance.GET("/ajax/fs/expand", {
             "path": JSON.stringify("$HOME")
-          }).done(function(res) {
+          }).done(function (res) {
             path = path.replace("$HOME", res);
-            for (var i = 0; i < paths.length; i++) {
+            var i;
+            for (i = 0; i < paths.length; i++) {
               paths[i] = paths[i].replace("$HOME", res);
             }
             if ($.inArray(path, paths) !== -1) {
@@ -52,38 +53,38 @@ var FileBaseView = Class.extend({
       },
       // convert timestamp to dd.mm.jjjj  hh:mm:ss
       "mtime": {
-        "text": function() {
+        "text": function () {
           return self.FileBase.helper.convertTimestamp(this.mtime);
         }
       },
       // convert size from bytes to kB, Mb, etc
       "size": {
-        "text": function() {
+        "text": function () {
           return self.FileBase.helper.convertSize(this.size).size;
         }
       },
       "sizeSuffix": {
-        "text": function() {
+        "text": function () {
           return self.FileBase.helper.convertSize(this.size).sizeSuffix;
         }
       }
     };
   },
 
-  setMainContainer: function(node) {
+  setMainContainer: function (node) {
     var self = this;
 
     // Get the template. When it is loaded append it to the maindiv
     // Then the view can be loaded
-    this.instance.getTemplate("html/main.html", function(err, tmpl) {
-      // Save the content container 
+    this.instance.getTemplate("html/main.html", function (err, tmpl) {
+      // Save the content container
       // Each view will dump its content into this container,
       // thus it is the background
       self.fileContentContainer = $(tmpl).appendTo(node);
       self.FileBase.events.setupBkgEvents(self.fileContentContainer);
 
       // Get the menu via AJAX rejquest and append it to the container
-      self.instance.getTemplate("html/menu.html", function(err2, tmplMenu) {
+      self.instance.getTemplate("html/menu.html", function (err2, tmplMenu) {
         node.append(tmplMenu);
         self.node = node;
         // make the menu clickable
@@ -95,7 +96,7 @@ var FileBaseView = Class.extend({
     });
 
 
-    self.instance.getTemplate("html/filter.html", function(err2, filterField) {
+    self.instance.getTemplate("html/filter.html", function (err2, filterField) {
       self.filterField = $(filterField);
       // node.append(self.filterField);
     });
@@ -103,7 +104,7 @@ var FileBaseView = Class.extend({
   },
 
   // Helper function for setting the symbol
-  setupSymbols: function(name, type, symlink) {
+  setupSymbols: function (name, type, symlink) {
     var self = this;
     var iconPrefix = "icon-";
     var src = null;
@@ -111,14 +112,13 @@ var FileBaseView = Class.extend({
       "f90", "f95", "F", "F03", "F90", "F95", "gif", "h", "html", "ico", "ini", "jade",
       "jpeg", "jpg", "js", "less", "lnk", "log", "mako", "pdf", "png", "ps", "pxlio",
       "py", "pyc", "rar", "raw", "root", "sh", "svg", "tar", "tar.gz", "tex", "tif",
-      "tiff", "txt", "xml", "yaml", "yml", "zip"
-    ];
+      "tiff", "txt", "xml", "yaml", "yml", "zip"];
     // return null;
-    if (symlink && type == "f") {
+    if (symlink && type === "f") {
       src = iconPrefix + "default-symlink";
-    } else if (symlink && type == "d") {
+    } else if (symlink && type === "d") {
       src = iconPrefix + "folder-symlink";
-    } else if (type == "d") {
+    } else if (type === "d") {
       src = iconPrefix + "folder";
     } else {
       // to do: fortran and targz
@@ -134,25 +134,26 @@ var FileBaseView = Class.extend({
       } else {
         src = iconPrefix + "default-alt";
       }
-    }
-    // take correct icon for targz
-    if (extension == "gz") {
-      src = iconPrefix + "targz";
+      // take correct icon for targz
+      if (extension === "gz") {
+        src = iconPrefix + "targz";
+      }
     }
     return src;
   },
 
   // toggleViewMenu: function(preView, newView) {
-  toggleViewMenu: function() {
+  toggleViewMenu: function () {
     var ids = ["Table", "Symbol"];
     var view = this.FileBase.workflow.currentView.type;
     var idx = ids.indexOf(view);
-    if (~idx)
+    if (~idx) {
       ids.splice(idx, 1);
+    }
 
     try {
       this.FileBase.instance.toggleMenuEntry(view, false);
-      ids.forEach(function(view) {
+      ids.forEach(function (view) {
         this.FileBase.instance.toggleMenuEntry(view, true);
       }, this);
     } catch (err) {
@@ -160,11 +161,11 @@ var FileBaseView = Class.extend({
     }
   },
 
-  toggleFilter: function(toggleOff) {
+  toggleFilter: function (toggleOff) {
     toggleOff = toggleOff === undefined ? false : toggleOff;
     var display = this.filterField.css("visibility");
     var input = $("input", this.filterField);
-    if (display == "visible" || toggleOff) {
+    if (display === "visible" || toggleOff) {
       this.filterField.css({
         "visibility": "hidden"
       });
@@ -179,6 +180,69 @@ var FileBaseView = Class.extend({
       input.focus();
       this.FileBase.actions.filter();
     }
+  },
+
+  reorder: function () {
+    var parentNode = $(".file-list", this.fileContentContainer);
+    var nodes = $(".file-node", this.fileContentContainer);
+    var filelist = this.FileBase.workflow.data.filelist;
+    var len = nodes.length;
+    var nodeNameMap = {};
+    var j;
+    for (j = 0; j < len; j++) {
+      nodeNameMap[$(nodes[j]).data().data.name] = nodes[j];
+    }
+    nodes.detach();
+    var name;
+    var i;
+    for (i = 0; i < len; i++) {
+      name = filelist[i].name;
+      parentNode.append(nodeNameMap[name]);
+    }
+  },
+
+  reactOnChange: function (data) {
+    //noinspection JSUnresolvedVariable
+    var changeSize = data.subject_infos.length;
+    var change = {};
+    var newNodes = [];
+    var i;
+    for (i = 0; i < changeSize; i++) {
+      //noinspection JSUnresolvedVariable
+      change = data.subject_infos[i];
+      if (change.mtime !== undefined) {
+        newNodes.push(change);
+      } else {
+        this.removeNode(change.name);
+      }
+    }
+    if (newNodes.length) {
+      this.addNodes(newNodes);
+    }
+  },
+
+  removeNode: function (name) {
+    var nodes = $(".file-node", this.fileContentContainer);
+    var i;
+    for (i = 0; i < nodes.length; i++) {
+      if ($(nodes[i]).data().data.name === name) {
+        $(nodes[i]).remove();
+        this.FileBase.workflow.data.filelist.splice(i, 1);
+        break;
+      }
+    }
+  },
+
+  addNodes: function (data) {
+    this.wf = this.FileBase.workflow;
+    var container = $(".file-node", this.FileBase.workflow.currentView.template);
+    var docFragment = document.createDocumentFragment();
+    $(docFragment).append(container);
+    $(docFragment).render(data, this.FileBase.view.directives);
+    $(".file-list", this.fileContentContainer).append(docFragment);
+    this.wf.data.filelist.push.apply(this.wf.data.filelist, data);
+    this.FileBase.helper.sortItems(this.wf.data, this.wf.sort, this.wf.reverse);
+    this.reorder();
   }
 
 });

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

@@ -27,12 +27,6 @@ var Symbolview = Class.extend({
     // Get the container, empty it and fill the template
     this.fileContentContainer.html(this.template);
 
-    //noinspection JSUnresolvedVariable
-    if (this.FileBase.instance.getPreference("Open") === "single" || vispa.device.hasTouch) {
-      $(".file-selection-box").css("visibility", "visible");
-    } else {
-      $(".file-selection-box").css("visibility", "hidden");
-    }
     //noinspection JSUnresolvedVariable,JSLint
     if (vispa.device.hasTouch) {
       $(".file-properties").css("visibility", "visible");
@@ -55,67 +49,6 @@ var Symbolview = Class.extend({
     });
   },
 
-  reorder: function () {
-    var nodes = $(".file-node", this.fileContentContainer);
-    var len = nodes.length;
-    var filelist = this.FileBase.workflow.data.filelist;
-    var numberNodes = filelist.length;
-    var newPosition = {};
-    var j;
-    for (j = 0; j < numberNodes; j++) {
-      newPosition[filelist[j].name] = j;
-    }
-    var name = "";
-    var i;
-    for (i = 0; i < len; i++) {
-      name = $(nodes[i]).data().data.name;
-      $(nodes[i]).css("order", newPosition[name]);
-    }
-  },
-
-  reactOnChange: function (data) {
-    //noinspection JSUnresolvedVariable
-    var changeSize = data.subject_infos.length;
-    var change = {};
-    var newNodes = [];
-    var i;
-    for (i = 0; i < changeSize; i++) {
-      //noinspection JSUnresolvedVariable
-      change = data.subject_infos[i];
-      if (change.mtime !== undefined) {
-        newNodes.push(change);
-      } else {
-        this.removeNode(change.name);
-      }
-    }
-    if (newNodes.length) {
-      this.addNodes(newNodes);
-    }
-  },
-
-  removeNode: function (name) {
-    var nodes = $(".file-node", this.fileContentContainer);
-    var i;
-    for (i = 0; i < nodes.length; i++) {
-      if ($(nodes[i]).data().data.name === name) {
-        $(nodes[i]).remove();
-        break;
-      }
-    }
-  },
-
-  addNodes: function (data) {
-    this.wf = this.FileBase.workflow;
-    var container = $(this.template).children();
-    var docFragment = document.createDocumentFragment();
-    $(docFragment).append(container);
-    $(docFragment).render(data, this.FileBase.view.directives);
-    $(".file-view-symbol", this.fileContentContainer).append(docFragment);
-    this.wf.data.filelist.push.apply(this.wf.data.filelist, data);
-    this.FileBase.helper.sortItems(this.wf.data, this.wf.sort, this.wf.reverse);
-    this.reorder();
-  },
-
   setIconSize: function () {
     "use strict";
     var iconSize = this.FileBase.instance.getPreference("IconSize");

vispa/extensions/file/static/js/extension.js

@@ -161,11 +161,7 @@ var FileBrowserView = vispa.ExtensionView.Center.extend({
       // The following two parameters are defined in remote/filesystem.py
       // MAX_INLINE_SUBJECTS = 10
       // MAX_SUBJECT_NAMES = 25
-      if (self.fb.workflow.currentView.type == "Symbol" && data.subject_count <= 10) {
-        self.fb.workflow.currentView.reactOnChange(data);
-      } else {
-        self.fb.updateView(100);
-      }
+      self.fb.view.reactOnChange(data);
 
     });