1 files changed, 64 insertions, 7 deletions

diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index e8832a7..b68d42c 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -4,6 +4,8 @@ var FilesView = FormView.extend({
   
   events: {
     "click .file": "pick",
+    "click #sortByName": "sortByName",
+    "click #sortByDate": "sortByDate",
   },
   
   initialize: function(){
@@ -17,23 +19,61 @@ var FilesView = FormView.extend({
       this.$el.hide()
     }
     var total = 0, has_music = false
+    this.files = files
     files.forEach(function(file){
       if (is_image(file.filename)) {
         // return
       }
-      this.appendFile(file)
       total += file.size
       has_music = has_music || file.filename.match(/(mp3|wav|ogg)/i)
     }.bind(this))
     
-    var size = hush_size(total)
-    var t = this.templateTotal.replace(/{{size_class}}/g, size[0])
-                              .replace(/{{size}}/g, size[1])
-    this.$el.append(t)
+    this.total = total
+    this.has_music = has_music
     
-    if (has_music) {
+    if (this.has_music) {
       audio.init()
     }
+
+    this.sortByName()
+  },
+  
+  files: [],
+  sortedFiles: [],
+  currentSort: 'name',
+  reverse: false,
+  
+  sortByName: function(e){
+    e && e.preventDefault()
+    if (this.currentSort !== 'name') {
+      this.currentSort = 'name'
+      this.reverse = false
+    } else {
+      this.reverse = !this.reverse
+    }
+    this.sort((a,b) => cmp(a.filename, b.filename))
+  },
+  sortByDate: function(e){
+    e && e.preventDefault()
+    if (this.currentSort !== 'date') {
+      this.currentSort = 'date'
+      this.reverse = true
+    } else {
+      this.reverse = !this.reverse
+    }
+    this.sort((a,b) => cmp(a.date, b.date))
+  },
+  
+  sort: function(f){
+    this.$el.empty()
+    this.sortedFiles = this.reverse ? this.files.sort(f) : this.files.sort(f).reverse()
+    this.sortedFiles.forEach(file => {
+      this.appendFile(file)
+    })
+    this.appendTotal()
+    if (this.has_music) {
+      audio.index()
+    }
   },
   
   parse: function(file){
@@ -64,11 +104,28 @@ var FilesView = FormView.extend({
     this.$el.append($el)
   },
   
+  appendTotal: function(){
+    var size = hush_size(this.total)
+    var nameClass = this.sort === 'name' ? 'bold' : ''
+    if (nameClass && this.reverse) {
+      nameClass += ' italic'
+    }
+    var dateClass = this.sort === 'date' ? 'bold' : ''
+    if (dateClass && this.reverse) {
+      dateClass += ' italic'
+    }
+    var t = this.templateTotal.replace(/{{size_class}}/g, size[0])
+                              .replace(/{{size}}/g, size[1])
+                              .replace(/{{nameClass}}/g, nameClass)
+                              .replace(/{{dateClass}}/g, dateClass)
+    this.$el.append(t)
+  },
+  
   pick: function(e){
     if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
     if (! e.target.href || ! e.target.href.match(/(mp3|wav|ogg)/i)) return
     e.preventDefault()
-    audio.play( e.target.dataset.index )
+    audio.play( e.target.dataset.index ) // index set in audio.js
   },
 
 })
\ No newline at end of file