diff options
Diffstat (limited to 'public/assets/js')
| -rw-r--r-- | public/assets/js/lib/views/details/commentform.js | 22 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/details.js | 11 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootcomment.js | 60 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 18 | ||||
| -rw-r--r-- | public/assets/js/vendor/view/formview.js | 215 |
5 files changed, 152 insertions, 174 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) { 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(); + }, +}); /* |