store sort of files

4 files changed, 80 insertions, 16 deletions

diff --git a/public/assets/js/lib/views/details/details.js b/public/assets/js/lib/views/details/details.js
index 2cfb46b..6d208da 100644
--- a/public/assets/js/lib/views/details/details.js
+++ b/public/assets/js/lib/views/details/details.js
@@ -39,7 +39,7 @@ var DetailsView = View.extend({
     this.form.load(data.thread)
     this.comments.load(data.comments, data.thread)
     this.files.load(data.files, data.thread)
-    this.gallery.load(data.files, data.thread)
+    this.gallery.load(this.files.sortedFiles, data.thread)
     if (data.thread.keyword) {
       $.get(this.keywordAction + data.thread.keyword, this.populateKeyword.bind(this))
     }
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index 3c7f84f..cdefc1f 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -4,8 +4,9 @@ var FilesView = FormView.extend({
   
   events: {
     "click .file": "pick",
-    "click #sortByName": "sortByName",
-    "click #sortByDate": "sortByDate",
+    "click #sortByName": "clickSortByName",
+    "click #sortByDate": "clickSortByDate",
+    "click #sortBySize": "clickSortBySize",
   },
   
   initialize: function(){
@@ -14,7 +15,7 @@ var FilesView = FormView.extend({
     this.templateTotal = this.$(".templateTotal").html()
   },
   
-  load: function(files){
+  load: function(files, thread){
     if (! files.length) {
       this.$el.hide()
     }
@@ -35,23 +36,36 @@ var FilesView = FormView.extend({
       audio.init()
     }
 
-    this.sortByName()
+    this.resort(thread.settings.sort || "name_asc")
   },
   
   files: [],
   sortedFiles: [],
   currentSort: 'name',
   reversed: false,
-  reverse: function(e){ 
-    if (this.currentSort === 'name') {
-      this.sortByName()
+  resort: function(sort, reverse){
+    if (sort.indexOf("_")) {
+      var s = sort.split("_")
+      sort = s[0]
+      reverse = s[1]
+    }
+    if (reverse === "asc" || !reverse) {
+      this.reversed = false
     }
     else {
-      this.sortByDate()
+      this.reversed = true
+    }
+    switch (sort) {
+      case 'name':
+        return this.sortByName()
+      case 'date':
+        return this.sortByDate()
+      case 'size':
+        return this.sortBySize()
     }
   },
   
-  sortByName: function(e){
+  clickSortByName: function(e){
     e && e.preventDefault()
     if (this.currentSort !== 'name') {
       this.currentSort = 'name'
@@ -59,10 +73,10 @@ var FilesView = FormView.extend({
     } else {
       this.reversed = !this.reversed
     }
-    this.sort((a,b) => cmp(a.filename, b.filename))
+    this.sortByName()
     return this
   },
-  sortByDate: function(e){
+  clickSortByDate: function(e){
     e && e.preventDefault()
     if (this.currentSort !== 'date') {
       this.currentSort = 'date'
@@ -70,13 +84,37 @@ var FilesView = FormView.extend({
     } else {
       this.reversed = !this.reversed
     }
-    this.sort((a,b) => cmp(a.date, b.date))
+    this.sortByDate()
+    return this
+  },
+  clickSortBySize: function(e){
+    e && e.preventDefault()
+    if (this.currentSort !== 'size') {
+      this.currentSort = 'size'
+      this.reversed = true
+    } else {
+      this.reversed = !this.reversed
+    }
+    this.sortBySize()
     return this
   },
+
+  sortByName: function(){
+    this.currentSort = 'name'
+    this.sort((a,b) => cmp(a.filename, b.filename))
+  },
+  sortByDate: function(){
+    this.currentSort = 'date'
+    this.sort((a,b) => cmp(a.date, b.date))
+  },
+  sortBySize: function(){
+    this.currentSort = 'size'
+    this.sort((a,b) => cmp(a.size, b.size))
+  },
   
   sort: function(f){
     this.$el.empty()
-    this.sortedFiles = this.reversed ? this.files.sort(f) : this.files.sort(f).reverse()
+    this.sortedFiles = this.reversed ? this.files.sort(f).reverse() : this.files.sort(f)
     this.sortedFiles.forEach(file => {
       this.appendFile(file)
     })
@@ -142,4 +180,13 @@ var FilesView = FormView.extend({
     audio.play( e.target.dataset.index ) // index set in audio.js
   },
 
-})
\ No newline at end of file
+})
+
+var FILE_SORTS = [
+  { key: "name_asc", label: "Name, a-z" },
+  { key: "name_desc", label: "Name, z-a" },
+  { key: "date_asc", label: "Date, oldest" },
+  { key: "date_desc", label: "Date, newest" },
+  { key: "size_asc", label: "Size, smallest" },
+  { key: "size_desc", label: "Size, largest" },
+]
diff --git a/public/assets/js/lib/views/details/settings.js b/public/assets/js/lib/views/details/settings.js
index 565dfeb..b1fd956 100644
--- a/public/assets/js/lib/views/details/settings.js
+++ b/public/assets/js/lib/views/details/settings.js
@@ -10,6 +10,7 @@ var ThreadSettingsForm = FormView.extend({
     "click .close_link": "hide",
     "change [name=color]": "changeColor",
     "change [name=privacy]": "toggleAllowed",
+    "change [name=sort]": "changeSort",
     "click #allowed_names [type=checkbox]": "removeAllowed",
     "keydown [name=allowed_field]": "keydownAllowed",
     "blur [name=allowed_field]": "updateAllowed",
@@ -58,6 +59,15 @@ var ThreadSettingsForm = FormView.extend({
     })
     $color.val(thread && thread.color? thread.color: keyword? keyword.color: "")
 
+    var $sort = this.$('[name=sort]')
+    FILE_SORTS.forEach((sort) => {
+      var option = document.createElement('option')
+      option.value = sort.key
+      option.innerHTML = sort.label
+      $sort.append(option)
+    })
+    $sort.val(thread.settings.sort || "name_asc")
+
     this.toggleAllowed()
     this.fetchKeywords()
 
@@ -173,6 +183,7 @@ var ThreadSettingsForm = FormView.extend({
         hootbox: $("[name=hootbox]:checked").val() ? true : false,
         shorturls: $("[name=shorturls]:checked").val() ? true : false,
         noupload: $("[name=noupload]:checked").val() ? true : false,
+        sort: $("[name=sort]").val()
       },
     }
     return JSON.stringify(data)
@@ -211,6 +222,12 @@ var ThreadSettingsForm = FormView.extend({
     set_background_color(color_name)
   },
 
+  changeSort: function(){
+    var sort_name = this.$("[name=sort]").val()
+    console.log(">", sort_name)
+    app.view.files.resort(sort_name)
+  },
+
   deleteThread: function(e){
     var data = this.options.parent.data
     var id = data.thread.id
diff --git a/public/assets/js/lib/views/profile/profile.js b/public/assets/js/lib/views/profile/profile.js
index 14511f9..a738950 100644
--- a/public/assets/js/lib/views/profile/profile.js
+++ b/public/assets/js/lib/views/profile/profile.js
@@ -26,7 +26,7 @@ var ProfileView = View.extend({
     // this.comments.load(data.comments, data.thread)
     this.gallery.load(files)
     this.files.load(files)
-    this.files.sortByDate().reverse()
+    this.files.resort("date", "asc")
     this.threadbox.load({ threads, user })
   },