diff options
| -rw-r--r-- | public/assets/css/hootstream.css | 22 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootcomment.js | 60 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 31 | ||||
| -rw-r--r-- | views/hootstream/templates.ejs | 10 |
4 files changed, 106 insertions, 17 deletions
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css index c06ec13..adfd19e 100644 --- a/public/assets/css/hootstream.css +++ b/public/assets/css/hootstream.css @@ -362,6 +362,7 @@ padding: 0.25rem; margin-bottom: 0; } +#hootstream form button, #hootform form button { margin: 0; padding: 0.25rem; @@ -392,7 +393,7 @@ } #hootform input[type="text"]:focus { border-bottom: 1px solid rgba(40, 20, 20, 0.2); - border-radius: 2px 2px 0 0; + border-radius: 2px; /*color: #211;*/ } #hootform input[type="text"]:focus { @@ -405,6 +406,25 @@ caret-color: #888; } +/** POST FORM */ + +form.streamForm { + width: 100%; + max-width: 720px; + padding-left: 4rem; +} +form.streamForm textarea { + width: 100%; + height: 5vmin; + font-family: "Trebuchet MS", sans-serif; + font-size: 1rem; + padding: 0.5rem; + border: 2px solid #211; + outline: 0; + background: rgba(127, 127, 127, 0.2); + color: #fff; +} + /** HOOT FILTERS */ #hootfilters { diff --git a/public/assets/js/lib/views/stream/hootcomment.js b/public/assets/js/lib/views/stream/hootcomment.js new file mode 100644 index 0000000..93c57e4 --- /dev/null +++ b/public/assets/js/lib/views/stream/hootcomment.js @@ -0,0 +1,60 @@ +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 37cd4f8..dcac22c 100644 --- a/public/assets/js/lib/views/stream/hootstream.js +++ b/public/assets/js/lib/views/stream/hootstream.js @@ -5,6 +5,7 @@ var HootStream = View.extend({ "click a": "onClickLink", "click .filename": "onClickFilename", "click .action": "onClickAction", + "submit .streamForm form": "onSubmitComment", }, initialize: function ({ parent }) { @@ -15,6 +16,8 @@ var HootStream = View.extend({ this.lastlogTemplate = this.$(".lastlogTemplate").html(); this.fileTemplate = this.$(".fileTemplate").html(); this.imageTemplate = this.$(".imageTemplate").html(); + this.threadFormTemplate = this.$(".threadFormTemplate").html(); + this.commentFormTemplate = this.$(".commentFormTemplate").html(); this.onClickLink = this.onClickLink.bind(this); this.onClickFilename = this.onClickFilename.bind(this); }, @@ -71,7 +74,7 @@ var HootStream = View.extend({ this.onExpand(event, thread); break; case "post": - this.onShowForm(event, thread); + this.onShowCommentForm(event, thread); break; } }, @@ -80,15 +83,13 @@ var HootStream = View.extend({ // $.get(`/api/stream?thread=${thread}`).then((response) => { console.log(response); - let sort; + let settings; try { - const settings = JSON.parse(response.threads[0].settings); - sort = settings.sort; - } catch (error) { - // console.error(error); - sort = null; - } - audio.index(this.sortFiles(response.files, sort)); + settings = JSON.parse(response.threads[0].settings); + } catch (error) {} + audio.index( + this.sortFiles(response.files, settings ? settings.sort : null) + ); audio.play(0); }); }, @@ -116,8 +117,16 @@ var HootStream = View.extend({ ); }, - onPost: function (thread) { - // + onShowCommentForm: function (event, thread) { + const $threadTitle = $(event.target).closest(".threadTitle"); + const $form = $(this.commentFormTemplate); + $form.data("thread", thread); + $form.insertAfter($threadTitle); + $form.find("textarea").focus(); + }, + + onSubmitComment: function (event) { + event.preventDefault(); }, load: function (data, filters) { diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs index 2f6de87..194310f 100644 --- a/views/hootstream/templates.ejs +++ b/views/hootstream/templates.ejs @@ -64,8 +64,8 @@ <div class="image"><a href="{{link}}">[{{filename}}, {{size}}]</a></div> </script> -<script class="thread-form" type="text/html"> - <form> +<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"> @@ -78,12 +78,12 @@ </form> </script> -<script class="comment-form" type="text/html"> - <form> +<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> - <input type="submit" value="POST" /> + <button>POST</button> <div class="loader"></div> </div> <div class='errors'></div> |