4 files changed, 43 insertions, 68 deletions

diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index 6dddd26..708657d 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -13,6 +13,15 @@ var CommentForm = FormView.extend({
     this.__super__.initialize.call(this, opt);
     this.template = this.$(".template").html();
     this.$comment = this.$("[name=comment]");
+    console.log("initialize");
+  },
+
+  show: function () {
+    this.$el.show();
+  },
+
+  hide: function () {
+    this.$el.hide();
   },
 
   load: function (thread) {
@@ -40,8 +49,9 @@ var CommentForm = FormView.extend({
 
   validate: function () {
     var errors = [];
-    var comment = $("[name=comment]").val();
+    var comment = this.$("[name=comment]").val();
     var files = this.$("[name=files]").val();
+    console.log(comment, files);
     if ((!comment || !comment.length) && !files) {
       errors.push("Please enter a comment or add some files.");
     }
@@ -52,11 +62,11 @@ var CommentForm = FormView.extend({
     $("[name=comment").val("");
     $("[name=files").val("");
     // window.location.reload()
-    console.log(this);
-    console.log(this.parent);
+    // console.log(this);
+    // console.log(this.parent);
     console.log(data);
-    data.comment && this.parent.comments.load([data.comment]);
-    data.files && this.parent.files.add(data.files);
-    data.files && this.parent.gallery.add(data.files);
+    if (this.opt.onSubmit) {
+      this.opt.onSubmit(data);
+    }
   },
 });
diff --git a/public/assets/js/lib/views/details/details.js b/public/assets/js/lib/views/details/details.js
index 465655b..c1e7bf6 100644
--- a/public/assets/js/lib/views/details/details.js
+++ b/public/assets/js/lib/views/details/details.js
@@ -8,7 +8,10 @@ var DetailsView = View.extend({
     this.comments = new CommentsView({ parent: this });
     this.files = new FilesView({ parent: this });
     this.gallery = new GalleryView({ parent: this });
-    this.form = new CommentForm({ parent: this });
+    this.form = new CommentForm({
+      parent: this,
+      onSubmit: this.onSubmit.bind(this),
+    });
     this.threadbox = new ThreadBox({ parent: this });
     this.settings = new ThreadSettingsForm({ parent: this });
     $(".settings_link").click(this.openSettings.bind(this));
@@ -63,4 +66,10 @@ var DetailsView = View.extend({
     e && e.preventDefault();
     this.settings.show();
   },
+
+  onSubmit: function (data) {
+    data.comment && this.comments.load([data.comment]);
+    data.files && this.files.add(data.files);
+    data.files && this.gallery.add(data.files);
+  },
 });
diff --git a/public/assets/js/lib/views/stream/hootcomment.js b/public/assets/js/lib/views/stream/hootcomment.js
deleted file mode 100644
index 93c57e4..0000000
--- a/public/assets/js/lib/views/stream/hootcomment.js
+++ /dev/null
@@ -1,60 +0,0 @@
-var HootCommentForm = FormView.extend({
-  events: {
-    "focus textarea": "focus",
-    "mouseup input[type=file]": "focus",
-    "keydown textarea": "keydown",
-  },
-
-  action: "",
-
-  initialize: function (opt) {
-    this.__super__.initialize.call(this, opt);
-    this.template = this.$(".template").html();
-    this.$comment = this.$("[name=comment]");
-  },
-
-  load: function (thread) {
-    this.action = "/api/thread/" + thread.id + "/comment";
-    this.$comment.addClass("empty");
-    if (thread.settings.noupload) {
-      this.$("[type=file]").hide();
-    }
-  },
-
-  keydown: function (e) {
-    if ((e.ctrlKey || e.metaKey || e.altKey) && e.keyCode == 83) {
-      // "s" key
-      e.preventDefault();
-      e.stopPropagation();
-      this.save();
-    }
-  },
-
-  focus: function () {
-    this.$el.addClass("focused");
-    this.$comment.removeClass("empty");
-    $("[name=comment]").prop("required", false);
-  },
-
-  validate: function () {
-    var errors = [];
-    var comment = $("[name=comment]").val();
-    var files = this.$("[name=files]").val();
-    if ((!comment || !comment.length) && !files) {
-      errors.push("Please enter a comment or add some files.");
-    }
-    return errors.length ? errors : null;
-  },
-
-  success: function (data) {
-    $("[name=comment").val("");
-    $("[name=files").val("");
-    // window.location.reload()
-    console.log(this);
-    console.log(this.parent);
-    console.log(data);
-    data.comment && this.parent.comments.load([data.comment]);
-    data.files && this.parent.files.add(data.files);
-    data.files && this.parent.gallery.add(data.files);
-  },
-});
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index dcac22c..4a846d7 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -5,7 +5,6 @@ var HootStream = View.extend({
     "click a": "onClickLink",
     "click .filename": "onClickFilename",
     "click .action": "onClickAction",
-    "submit .streamForm form": "onSubmitComment",
   },
 
   initialize: function ({ parent }) {
@@ -20,6 +19,7 @@ var HootStream = View.extend({
     this.commentFormTemplate = this.$(".commentFormTemplate").html();
     this.onClickLink = this.onClickLink.bind(this);
     this.onClickFilename = this.onClickFilename.bind(this);
+    this.forms = {};
   },
 
   onClickLink: function (event) {
@@ -118,15 +118,31 @@ var HootStream = View.extend({
   },
 
   onShowCommentForm: function (event, thread) {
+    if (this.forms[thread]) {
+      this.forms[thread].hide();
+      this.forms[thread].$el.remove();
+      this.forms[thread] = null;
+      return;
+    }
     const $threadTitle = $(event.target).closest(".threadTitle");
     const $form = $(this.commentFormTemplate);
     $form.data("thread", thread);
     $form.insertAfter($threadTitle);
     $form.find("textarea").focus();
+    const commentForm = new CommentForm({ parent: this });
+    commentForm.action = `/api/thread/${thread}/comment`;
+    commentForm.setElement($form);
+    commentForm.initialize({
+      parent: this,
+      onSubmit: this.onSubmitComment.bind(this),
+    });
+    this.forms[thread] = commentForm;
   },
 
   onSubmitComment: function (event) {
     event.preventDefault();
+    console.log("onsubmit");
+    this.forms[thread] = null;
   },
 
   load: function (data, filters) {