toggle form

7 files changed, 182 insertions, 197 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index adfd19e..a62e206 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -408,14 +408,17 @@
 
 /** POST FORM */
 
-form.streamForm {
+.streamForm {
   width: 100%;
   max-width: 720px;
   padding-left: 4rem;
 }
-form.streamForm textarea {
+.streamForm form {
   width: 100%;
-  height: 5vmin;
+}
+.streamForm textarea {
+  width: 100%;
+  height: 5rem;
   font-family: "Trebuchet MS", sans-serif;
   font-size: 1rem;
   padding: 0.5rem;
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) {
diff --git a/public/assets/js/vendor/view/formview.js b/public/assets/js/vendor/view/formview.js
index 21f3170..32463c8 100644
--- a/public/assets/js/vendor/view/formview.js
+++ b/public/assets/js/vendor/view/formview.js
@@ -1,169 +1,172 @@
 var FormView = View.extend({
-
   method: "post",
   useMinotaur: false,
 
   events: {
-    "submit form": "save"
+    "submit form": "save",
   },
 
-  initialize: function(opt){
+  initialize: function (opt) {
     if (opt && opt.parent) {
-      this.parent = opt.parent
+      this.parent = opt.parent;
     }
-    this.$form = this.$("form")
-    this.$errors = this.$(".errors")
+    this.opt = opt;
+    this.$form = this.$("form");
+    this.$errors = this.$(".errors");
   },
 
-  reset: function(){
-    this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("")
+  reset: function () {
+    this.$("input,textarea")
+      .not("[type='submit']")
+      .not("[type='hidden']")
+      .val("");
   },
-  
-  showErrors: function(errors){
+
+  showErrors: function (errors) {
     if (errors && errors.length) {
       this.$errors.empty();
       for (var i in errors) {
-        this.$errors.append('<div>' + errors[i] + '</div>');
+        this.$errors.append("<div>" + errors[i] + "</div>");
       }
       this.$errors.css("opacity", 1.0);
-      setTimeout(function(){
-        this.$errors.show().css("opacity", 1.0);
-      }.bind(this), 200)
+      setTimeout(
+        function () {
+          this.$errors.show().css("opacity", 1.0);
+        }.bind(this),
+        200
+      );
     }
   },
-  
-  serialize: function(){
-    var fd, fh, hasCSRF = false
 
-    var file_els = this.$("input[name][type='file']")
+  serialize: function () {
+    var fd,
+      fh,
+      hasCSRF = false;
+
+    var file_els = this.$("input[name][type='file']");
     if (file_els.length) {
-      fd = new FormData()
-    }
-    else {
-      fh = {}
+      fd = new FormData();
+    } else {
+      fh = {};
     }
-    this.$("input[name], select[name], textarea[name]").each( function(){
+    this.$("input[name], select[name], textarea[name]").each(function () {
       if (this.type == "file") {
         for (var i = 0; i < this.files.length; i++) {
           fd.append(this.name, this.files[i]);
         }
-      }
-      else {
+      } else {
         if (fd) {
-          fd.append(this.name, this.value)
+          fd.append(this.name, this.value);
         } else {
-          fh[this.name] = this.value
+          fh[this.name] = this.value;
         }
-        hasCSRF = hasCSRF || this.name == "_csrf"
+        hasCSRF = hasCSRF || this.name == "_csrf";
       }
     });
-    
-    if (! hasCSRF) {
+
+    if (!hasCSRF) {
       if (fd) {
-        fd.append("_csrf", $("[name=_csrf]").attr("value"))
+        fd.append("_csrf", $("[name=_csrf]").attr("value"));
       } else {
-        fh["_csrf"] = $("[name=_csrf]").attr("value")
+        fh["_csrf"] = $("[name=_csrf]").attr("value");
       }
     }
-    
-    return fd || JSON.stringify(fh)
+
+    return fd || JSON.stringify(fh);
   },
-  
-  save: function(e, successCallback, errorCallback){
-    e && e.preventDefault()
+
+  save: function (e, successCallback, errorCallback) {
+    e && e.preventDefault();
 
     this.$errors.hide().css("opacity", 0.0);
 
     if (this.validate) {
-      var errors = this.validate()
+      var errors = this.validate();
       if (errors && errors.length) {
         if (errorCallback) {
-          errorCallback(errors)
-        }
-        else {
-          this.showErrors(errors)
+          errorCallback(errors);
+        } else {
+          this.showErrors(errors);
         }
-        return
+        return;
       }
     }
-    
-    var action = typeof this.action == "function" ? this.action() : this.action
-    if (! action) return
 
-    var data = this.serialize()    
-    var headers = new Headers()
-    headers.append("csrf-token", $("[name=_csrf]").attr("value"))
+    var action = typeof this.action == "function" ? this.action() : this.action;
+    if (!action) return;
+
+    var data = this.serialize();
+    var headers = new Headers();
+    headers.append("csrf-token", $("[name=_csrf]").attr("value"));
     if (typeof data === "string") {
-      headers.append("content-type", "application/json")
+      headers.append("content-type", "application/json");
     }
-    
-    this.$form.addClass('sending')
+
+    this.$form.addClass("sending");
     fetch(action, {
       method: this.method.toUpperCase(),
       headers: headers,
-      credentials: 'same-origin',
+      credentials: "same-origin",
       body: data,
-    }).then(raw => raw.json())
-    .then(response => {
-      this.$form.removeClass('sending')
-      if (response.error) {
-        var errors = []
-        if (response.error.errors && response.error.errors.length) {
-          for (var key in response.error.errors) {
-            errors.push(response.error.errors[key].message);
+    })
+      .then((raw) => raw.json())
+      .then((response) => {
+        this.$form.removeClass("sending");
+        if (response.error) {
+          var errors = [];
+          if (response.error.errors && response.error.errors.length) {
+            for (var key in response.error.errors) {
+              errors.push(response.error.errors[key].message);
+            }
+          } else {
+            errors.push(response.error);
           }
-        } else {
-          errors.push(response.error)
+          if (errorCallback) {
+            errorCallback(errors);
+          } else {
+            this.showErrors(errors);
+          }
+          return;
         }
-        if (errorCallback) {
-          errorCallback(errors)
+        if (successCallback) {
+          successCallback(response);
         }
-        else {
-          this.showErrors(errors)
+        if (this.success) {
+          this.success(response);
         }
-        return
-      }
-      if (successCallback) {
-        successCallback(response)
-      }
-      if (this.success) {
-        this.success(response)
-      }
-    }).catch(response => {
-      console.log(response)
-      this.$form.removeClass('sending')
-      var errors = []
-      if (response.error) {
-        if (response.error.errors && response.error.errors.length) {
-          for (var key in response.error.errors) {
-            errors.push(response.error.errors[key].message);
+      })
+      .catch((response) => {
+        console.log(response);
+        this.$form.removeClass("sending");
+        var errors = [];
+        if (response.error) {
+          if (response.error.errors && response.error.errors.length) {
+            for (var key in response.error.errors) {
+              errors.push(response.error.errors[key].message);
+            }
+          } else {
+            errors.push(response.error);
           }
         }
-        else {
-          errors.push(response.error)
+        if (errorCallback) {
+          errorCallback(errors);
+        } else {
+          this.showErrors(errors);
         }
-      }
-      if (errorCallback) {
-        errorCallback(errors)
-      }
-      else {
-        this.showErrors(errors)
-      }
-    })
-//       complete: function(response){
-//         if (this.useMinotaur) {
-//           Minotaur.hide()
-//         }
-//       }
-// 
-//     if (this.useMinotaur) {
-//       Minotaur.show()
-//     }
-    
-    this.beforeSend && this.beforeSend()
-  },
+      });
+    //       complete: function(response){
+    //         if (this.useMinotaur) {
+    //           Minotaur.hide()
+    //         }
+    //       }
+    //
+    //     if (this.useMinotaur) {
+    //       Minotaur.show()
+    //     }
 
-})
+    this.beforeSend && this.beforeSend();
+  },
+});
 
 /*
 
diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs
index 194310f..bcb4670 100644
--- a/views/hootstream/templates.ejs
+++ b/views/hootstream/templates.ejs
@@ -65,27 +65,31 @@
 </script>
 
 <script class="threadFormTemplate" type="text/html">
-  <form class="streamForm threadForm">
-    <input type="text" name="title" placeholder="Enter a title">
-    <textarea name="comment" placeholder="Add a comment"></textarea>
-    <div class="inputs">
-      <input name="files" type="file" multiple>
-      <select name="keyword" id="keywords"></select>
-      <input type="submit" value="POST" />
-      <div class="loader"></div>
-    </div>
-    <div class='errors'></div>
-  </form>
+  <div class="streamForm threadForm">
+    <form>
+      <input type="text" name="title" placeholder="Enter a title">
+      <textarea name="comment" placeholder="Add a comment"></textarea>
+      <div class="inputs">
+        <input name="files" type="file" multiple>
+        <select name="keyword" id="keywords"></select>
+        <input type="submit" value="POST" />
+        <div class="loader"></div>
+      </div>
+      <div class='errors'></div>
+    </form>
+  </div>
 </script>
 
 <script class="commentFormTemplate" type="text/html">
-  <form class="streamForm commentForm">
-    <textarea name="comment" placeholder="Add a comment"></textarea>
-    <div class="inputs">
-      <input name="files" type="file" multiple>
-      <button>POST</button>
-      <div class="loader"></div>
-    </div>
-    <div class='errors'></div>
-  </form>
+  <div class="streamForm commentForm">
+    <form>
+      <textarea name="comment" placeholder="Add a comment"></textarea>
+      <div class="inputs">
+        <input name="files" type="file" multiple>
+        <button>POST</button>
+        <div class="loader"></div>
+      </div>
+      <div class='errors'></div>
+    </form>
+  </div>
 </script>