aboutsummaryrefslogtreecommitdiff
path: root/javascript/app
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/app')
-rw-r--r--javascript/app/components/file-tree.js26
-rw-r--r--javascript/app/styles/app.scss4
-rw-r--r--javascript/app/templates/components/file-tree.hbs12
3 files changed, 39 insertions, 3 deletions
diff --git a/javascript/app/components/file-tree.js b/javascript/app/components/file-tree.js
index c86a71d..d255229 100644
--- a/javascript/app/components/file-tree.js
+++ b/javascript/app/components/file-tree.js
@@ -35,23 +35,47 @@ const containsHaskellModule = function(node) {
});
}
+const fileExtension = function (filename) {
+ const idx = filename.lastIndexOf('.');
+ return (idx < 1) ? "" : filename.substr(idx + 1);
+}
+
export default Ember.Component.extend({
query: null,
+ sortType: "alphabetical",
+ sortTypeObserver : Ember.observer('sortType',function() {
+ Ember.run.next(this,() => {
+ this.jstree.refresh();
+ });
+ }),
didInsertElement : function () {
this._super(...arguments);
const element = this.element.getElementsByClassName('file-tree')[0];
+ const component = this;
const jstreeElement = Ember.$(element).jstree({
'core' : {
'data' : directoryTreeToJsTree(this.get('packageId'),this.get('directoryTree'))
},
"plugins" : [
- "search"
+ "search",
+ "sort"
],
"search": {
"case_insensitive": true,
"show_only_matches" : true,
"show_only_matches_children": true
+ },
+ 'sort' : function (a,b) {
+ const node1 = this.get_node(a).data;
+ const node2 = this.get_node(b).data;
+ if(component.get("sortType") === "alphabetical") {
+ return node1.name > node2.name;
+ } else {
+ const extendedName1 = (node1.tag === "Dir" ? "0" : "1") + fileExtension(node1.name) + node1.name;
+ const extendedName2 = (node2.tag === "Dir" ? "0" : "1") + fileExtension(node2.name) + node2.name;
+ return extendedName1 > extendedName2;
+ }
}
});
diff --git a/javascript/app/styles/app.scss b/javascript/app/styles/app.scss
index c847bfa..b87c0d8 100644
--- a/javascript/app/styles/app.scss
+++ b/javascript/app/styles/app.scss
@@ -477,13 +477,13 @@ ul.autocomplete-items {
top:0;
left:0;
right:0;
- height:50px;
+ height:65px;
margin:5px;
}
.file-tree-content {
position:absolute;
- top:50px;
+ top:70px;
left:0;
right:0;
bottom:0;
diff --git a/javascript/app/templates/components/file-tree.hbs b/javascript/app/templates/components/file-tree.hbs
index b5e38ef..3559efe 100644
--- a/javascript/app/templates/components/file-tree.hbs
+++ b/javascript/app/templates/components/file-tree.hbs
@@ -2,6 +2,18 @@
<div class="input-group">
{{input class="form-control" value=query placeholder="Filename"}}<a class="hide-file-tree" href="#" {{action "hide"}}>Hide</a>
</div>
+ <div>
+ {{#radio-button
+ value="alphabetical"
+ groupValue=sortType}}
+ <span>Sort by name</span>
+ {{/radio-button}}
+ {{#radio-button
+ value="type"
+ groupValue=sortType}}
+ <span>Sort by type</span>
+ {{/radio-button}}
+ </div>
</div>
<div class="file-tree-content">
<div class="file-tree"></div>