File: faster sorting for SymbolView (nodes don't have to be rerendered, just positions are changed)

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

@@ -2,7 +2,8 @@
   position: absolute;
   top: 40px;
   left: 0;
-  bottom: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
   overflow: auto;
   -webkit-user-select: none;
 }
@@ -190,3 +191,6 @@
   margin-right: 3px;
   -webkit-user-select: none;
 }
+.fileselector .file-view-symbol {
+  bottom: 0;
+}

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

@@ -32,7 +32,7 @@
   .file-node {
     width: @@node-width;
     height: @@node-height;
-//    order: 1;
+    //    order: 1;
   }
   .symbol-icon-p {
     margin-top: @@margin-top;
@@ -48,25 +48,27 @@
     width: @@node-width;
   }
 }
+
 .selectionbox-position (@size) {
   @left: 'file-symbol-selectionbox-left-@{size}';
   .file-selection-box {
     left: @@left;
   }
 }
+
 .properties-position (@margin) {
   .file-properties {
     margin-top: @margin;
     top: 1 - @margin;
   }
 }
+
 .file-view-symbol {
   position: absolute;
   top: 40px;
   left: 0;
-//  display: flex;
-//  flex-wrap: wrap;
-  bottom: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
   overflow: auto;
   -webkit-user-select: none;
   &.icon-tiny {
@@ -181,3 +183,9 @@
     -webkit-user-select: none;
   }
 }
+
+.fileselector {
+  .file-view-symbol {
+    bottom: 0;
+  }
+}

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

 var FileBaseSorting = Class.extend({
 
-  init: function(FileBase) {
-    var self = this;
+  init: function (FileBase) {
     this.FileBase = FileBase;
-
-    // shortcuts for the different sortings
-    this.currentSort = "name";
-    this.currentReverse = false;
-    // this.sortArray = {
-    //   "name": ["name", "type"],
-    //   "time": ["name", "time", "type"],
-    //   "size": ["name", "size", "type"],
-    //   "ext": ["name", "ext", "type"]
-    // };
-    // this.defaultSorting = {
-    //   "name": [false, true],
-    //   "time": [false, false, true],
-    //   "size": [false, false, true],
-    //   "ext": [false, false, true],
-    // };
   },
 
-  // setReverseSorting: function(type) {
-  //   if (type == "time") {
-  //     this.wf.reverse[1] = !this.wf.reverse[1];
-  //   } else if (type == "size") {
-  //     this.wf.reverse[0] = !this.wf.reverse[0];
-  //     this.wf.reverse[1] = !this.wf.reverse[1];
-  //   } else if (type == "name") {
-  //     this.wf.reverse[0] = !this.wf.reverse[0];
-  //   } else if (type == "ext") {
-  //     this.wf.reverse[0] = !this.wf.reverse[0];
-  //     this.wf.reverse[1] = !this.wf.reverse[1];
-  //     this.wf.reverse[2] = false;
-  //   }
-  // },
-
-  toggleSortButtons: function(type, reverse) {
-    type = type === undefined ? this.currentSort : type;
-    reverse = reverse === undefined ? this.currentReverse : reverse;
+  toggleSortButtons: function (type, reverse) {
+    type = type === undefined ? this.FileBase.workflow.sort : type;
+    reverse = reverse === undefined ? this.FileBase.workflow.reverse : reverse;
     var sortGlyphicons = ["name", "time", "size", "ext"];
     var sortMenu = this.FileBase.instance._getFastMenuEntryNode("Sort");
     if (sortMenu === null) {
@@ -54,7 +22,7 @@ var FileBaseSorting = Class.extend({
         glyph.addClass("glyphicon glyphicon-sort");
       } else {
         var glyphClass = sortGlyphicons[i] == "name" ? "glyphicon glyphicon-sort-by-alphabet" :
-          "glyphicon glyphicon-sort-by-order";
+            "glyphicon glyphicon-sort-by-order";
         if (sortGlyphicons[i] == "time") {
           glyphClass = !reverse ? glyphClass + "-alt" : glyphClass;
         } else {
@@ -67,19 +35,25 @@ var FileBaseSorting = Class.extend({
     }
   },
 
-  changeSort: function(type) {
+  changeSort: function (type) {
     this.wf = this.FileBase.workflow;
     type = type === undefined ? "name" : type;
-    if (this.currentSort != type) {
+    if (this.wf.sort != type) {
       this.wf.reverse = false;
-      this.currentReverse = false;
       this.toggleSortButtons(type, false);
     } else {
       this.wf.reverse = !this.wf.reverse;
-      this.currentReverse = !this.currentReverse;
-      this.toggleSortButtons(type, this.currentReverse);
+      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();
     }
-    this.currentSort = type;
-    this.FileBase.refresh(this.wf.data, type);
+    else {
+      this.FileBase.refresh(this.wf.data, type);
+    }
+
+
   }
 });

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

@@ -18,7 +18,7 @@ var FileBaseView = Class.extend({
       "data": {
         "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

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

 var Symbolview = Class.extend({
-  init: function(FileBase) {
+  init: function (FileBase) {
     this.FileBase = FileBase;
     this.instance = FileBase.instance;
     this.type = "Symbol";
@@ -7,9 +7,9 @@ var Symbolview = Class.extend({
     this.fileContentContainer = FileBase.view.fileContentContainer;
   },
 
-  render: function() {
+  render: function () {
     var self = this;
-    this.instance.getTemplate("html/symbol.html", function(error, template) {
+    this.instance.getTemplate("html/symbol.html", function (error, template) {
       self.fileContentContainer.append(template);
       self.template = template;
       if (self.FileBase.workflow.data === null) {
@@ -20,7 +20,7 @@ var Symbolview = Class.extend({
     });
   },
 
-  setContent: function(data) {
+  setContent: function (data) {
     var self = this;
     this.data = data;
 
@@ -48,15 +48,31 @@ var Symbolview = Class.extend({
     $(".symbol-name", this.fileContentContainer).ellipsis({
       row: 2,
       position: "middle"
-        // onlyFullWords: true
+      // onlyFullWords: true
     });
   },
 
-  setIconSize: function() {
+  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 = {};
+    for (var j = 0; j < numberNodes; j++)
+      newPosition[filelist[j].name] = j;
+    //console.table(newPosition);
+    var name = "";
+    for (var i = 0; i < len; i++) {
+      name = $(nodes[i]).data().data.name;
+      $(nodes[i]).css("order", newPosition[name]);
+    }
+  },
+
+  setIconSize: function () {
     "use strict";
     var iconSize = this.FileBase.instance.getPreference("IconSize");
     var container = $(".file-view-symbol", this.fileContentContainer);
-    ["tiny", "small", "medium", "large"].forEach(function(size) {
+    ["tiny", "small", "medium", "large"].forEach(function (size) {
       container.toggleClass("icon-" + size, size == iconSize);
     });
   }