fix file append

3 files changed, 153 insertions, 138 deletions

diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index 2b76171..4c7d420 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -56,7 +56,7 @@ var CommentForm = FormView.extend({
     console.log(this.parent)
     console.log(data)
     data.comment && this.parent.comments.load([data.comment])
-    data.files && this.parent.files.load(data.files)
-    data.files && this.parent.gallery.load(data.files)
+    data.files && this.parent.files.add(data.files)
+    data.files && this.parent.gallery.add(data.files)
   }
 })
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index 98b9350..bbea7da 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -1,196 +1,207 @@
 var FilesView = FormView.extend({
-  
   el: "#files",
-  
+
   events: {
     "click .file": "pick",
     "click #sortByName": "clickSortByName",
     "click #sortByDate": "clickSortByDate",
     "click #sortBySize": "clickSortBySize",
   },
-  
-  initialize: function(){
-    this.__super__.initialize.call(this)
-    this.template = this.$(".template").html()
-    this.templateTotal = this.$(".templateTotal").html()
+
+  initialize: function () {
+    this.__super__.initialize.call(this);
+    this.template = this.$(".template").html();
+    this.templateTotal = this.$(".templateTotal").html();
   },
-  
-  load: function(files, thread){
-    if (! files.length) {
-      this.$el.hide()
+
+  load: function (files, thread) {
+    if (!files.length) {
+      this.$el.hide();
     }
-    var total = 0, has_music = false
+    var total = 0,
+      has_music = false;
+
+    this.files = files || this.files;
+    this.thread = thread || this.thread;
+    this.files.forEach(
+      function (file) {
+        if (is_image(file.filename)) {
+          // return
+        }
+        total += file.size;
+        has_music =
+          has_music || file.filename.match(/(mp3|wav|ogg|opus|flac)$/i);
+      }.bind(this)
+    );
+
+    this.total = total;
+    this.has_music = has_music;
 
-    this.files = files || this.files
-    this.thread = thread || this.thread
-    this.files.forEach(function(file){
-      if (is_image(file.filename)) {
-        // return
-      }
-      total += file.size
-      has_music = has_music || file.filename.match(/(mp3|wav|ogg|opus|flac)$/i)
-    }.bind(this))
-    
-    this.total = total
-    this.has_music = has_music
-    
     if (this.has_music) {
-      audio.init()
+      audio.init();
     }
 
     if (this.thread) {
-      const sort = this.thread.settings.sort || "name_asc"
-      this.resort(sort)
+      const sort = this.thread.settings.sort || "name_asc";
+      this.resort(sort);
     }
   },
   
+  add: function(files) {
+    this.files = this.files.concat(files);
+    this.resort(this.currentSort, this.reversed ? "desc" : "asc");
+  },
+
   files: [],
   sortedFiles: [],
-  currentSort: 'name',
+  currentSort: "name",
   reversed: false,
-  resort: function(sort, reverse){
+  resort: function (sort, reverse) {
     if (sort.indexOf("_")) {
-      var s = sort.split("_")
-      sort = s[0]
-      reverse = s[1]
+      var s = sort.split("_");
+      sort = s[0];
+      reverse = s[1];
     }
     if (reverse === "asc" || !reverse) {
-      this.reversed = false
-    }
-    else {
-      this.reversed = true
+      this.reversed = false;
+    } else {
+      this.reversed = true;
     }
     switch (sort) {
-      case 'name':
-        return this.sortByName()
-      case 'date':
-        return this.sortByDate()
-      case 'size':
-        return this.sortBySize()
+      case "name":
+        return this.sortByName();
+      case "date":
+        return this.sortByDate();
+      case "size":
+        return this.sortBySize();
     }
   },
-  
-  clickSortByName: function(e){
-    e && e.preventDefault()
-    if (this.currentSort !== 'name') {
-      this.currentSort = 'name'
-      this.reversed = false
+
+  clickSortByName: function (e) {
+    e && e.preventDefault();
+    if (this.currentSort !== "name") {
+      this.currentSort = "name";
+      this.reversed = false;
     } else {
-      this.reversed = !this.reversed
+      this.reversed = !this.reversed;
     }
-    this.sortByName()
-    return this
+    this.sortByName();
+    return this;
   },
-  clickSortByDate: function(e){
-    e && e.preventDefault()
-    if (this.currentSort !== 'date') {
-      this.currentSort = 'date'
-      this.reversed = true
+  clickSortByDate: function (e) {
+    e && e.preventDefault();
+    if (this.currentSort !== "date") {
+      this.currentSort = "date";
+      this.reversed = true;
     } else {
-      this.reversed = !this.reversed
+      this.reversed = !this.reversed;
     }
-    this.sortByDate()
-    return this
+    this.sortByDate();
+    return this;
   },
-  clickSortBySize: function(e){
-    e && e.preventDefault()
-    if (this.currentSort !== 'size') {
-      this.currentSort = 'size'
-      this.reversed = true
+  clickSortBySize: function (e) {
+    e && e.preventDefault();
+    if (this.currentSort !== "size") {
+      this.currentSort = "size";
+      this.reversed = true;
     } else {
-      this.reversed = !this.reversed
+      this.reversed = !this.reversed;
     }
-    this.sortBySize()
-    return this
+    this.sortBySize();
+    return this;
   },
 
-  sortByName: function(){
-    this.currentSort = 'name'
-    this.sort((a,b) => cmp(a.filename, b.filename))
+  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))
+  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))
+  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).reverse() : this.files.sort(f)
-    this.sortedFiles.forEach(file => {
-      this.appendFile(file)
-    })
-    this.appendTotal()
+
+  sort: function (f) {
+    this.$el.empty();
+    this.sortedFiles = this.reversed
+      ? this.files.sort(f).reverse()
+      : this.files.sort(f);
+    this.sortedFiles.forEach((file) => {
+      this.appendFile(file);
+    });
+    this.appendTotal();
     if (this.has_music) {
-      audio.index()
+      audio.index();
     }
   },
-  
-  parse: function(file){
-    var size = hush_size(file.size)
-    var datetime = verbose_date(file.date, true)
-    var date_class = carbon_date(file.date)
-    var link = make_link(file)
 
-    var t = this.template.replace(/{{id}}/g, file.id)
-                         .replace(/{{username}}/g, file.username)
-                         .replace(/{{link}}/g, link)
-                         .replace(/{{filename}}/g, file.filename)
-                         .replace(/{{date_class}}/g, date_class)
-                         .replace(/{{date}}/g, datetime[0])
-                         .replace(/{{time}}/g, datetime[1])
-                         .replace(/{{size_class}}/g, size[0])
-                         .replace(/{{size}}/g, size[1])
-    var $t = $(t)
+  parse: function (file) {
+    var size = hush_size(file.size);
+    var datetime = verbose_date(file.date, true);
+    var date_class = carbon_date(file.date);
+    var link = make_link(file);
+
+    var t = this.template
+      .replace(/{{id}}/g, file.id)
+      .replace(/{{username}}/g, file.username)
+      .replace(/{{link}}/g, link)
+      .replace(/{{filename}}/g, file.filename)
+      .replace(/{{date_class}}/g, date_class)
+      .replace(/{{date}}/g, datetime[0])
+      .replace(/{{time}}/g, datetime[1])
+      .replace(/{{size_class}}/g, size[0])
+      .replace(/{{size}}/g, size[1]);
+    var $t = $(t);
     if (app.debug) {
-      $t.find('.user').append(' #' + file.id)
+      $t.find(".user").append(" #" + file.id);
     }
-    return $t
+    return $t;
   },
-  
-  prependFile: function(file){
-    var $el = this.parse(file)
-    this.$el.prepend($el)
+
+  prependFile: function (file) {
+    var $el = this.parse(file);
+    this.$el.prepend($el);
   },
 
-  appendFile: function(file){
-    var $el = this.parse(file)
-    this.$el.append($el)
+  appendFile: function (file) {
+    var $el = this.parse(file);
+    this.$el.append($el);
   },
-  
-  appendTotal: function(){
-    var size = hush_size(this.total)
-    var nameClass = this.sort === 'name' ? 'bold' : ''
+
+  appendTotal: function () {
+    var size = hush_size(this.total);
+    var nameClass = this.sort === "name" ? "bold" : "";
     if (nameClass && this.reverse) {
-      nameClass += ' italic'
+      nameClass += " italic";
     }
-    var dateClass = this.sort === 'date' ? 'bold' : ''
+    var dateClass = this.sort === "date" ? "bold" : "";
     if (dateClass && this.reverse) {
-      dateClass += ' italic'
+      dateClass += " italic";
     }
-    var sizeClass = this.sort === 'size' ? 'bold' : ''
+    var sizeClass = this.sort === "size" ? "bold" : "";
     if (sizeClass && this.reverse) {
-      sizeClass += ' italic'
+      sizeClass += " italic";
     }
-    var t = this.templateTotal.replace(/{{size_class}}/g, size[0])
-                              .replace(/{{size}}/g, size[1])
-                              .replace(/{{nameClass}}/g, nameClass)
-                              .replace(/{{dateClass}}/g, dateClass)
-                              .replace(/{{sizeClass}}/g, sizeClass)
-    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|opus|flac)$/i)) return
-    e.preventDefault()
-    audio.play( e.target.dataset.index ) // index set in audio.js
+    var t = this.templateTotal
+      .replace(/{{size_class}}/g, size[0])
+      .replace(/{{size}}/g, size[1])
+      .replace(/{{nameClass}}/g, nameClass)
+      .replace(/{{dateClass}}/g, dateClass)
+      .replace(/{{sizeClass}}/g, sizeClass);
+    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|opus|flac)$/i))
+      return;
+    e.preventDefault();
+    audio.play(e.target.dataset.index); // index set in audio.js
+  },
+});
 
 var FILE_SORTS = [
   { key: "name_asc", label: "Name, a-z" },
@@ -199,4 +210,4 @@ var FILE_SORTS = [
   { 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/gallery.js b/public/assets/js/lib/views/details/gallery.js
index de9a6a4..b3eedf3 100644
--- a/public/assets/js/lib/views/details/gallery.js
+++ b/public/assets/js/lib/views/details/gallery.js
@@ -14,6 +14,10 @@ var GalleryView = View.extend({
     if (! files.length) {
       this.$el.hide()
     }
+    this.add(files)
+  },
+
+  add: function(files) {
     files.forEach(function(file){
       if (! is_image(file.filename)) {
         return
@@ -48,4 +52,4 @@ var GalleryView = View.extend({
     this.$el.append($el)
   },
   
-})
\ No newline at end of file
+})