Skip to content

Commit 05a7cf0

Browse files
VincentTamMatt Erickson
authored andcommitted
Staticman - try to avoid spam by using javascript to write the form action (daattali#521)
1 parent 43dd472 commit 05a7cf0

File tree

4 files changed

+66
-57
lines changed

4 files changed

+66
-57
lines changed

_includes/staticman-comments.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_titl
2020
<div class="page__comments-form">
2121
<h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h3>
2222
<p class="small">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
23-
<form id="new_comment" class="page__comments-form js-form form" method="post" action="{{ site.staticman.endpoint | default: 'https://staticman3.herokuapp.com/v3/entry/github/' }}{{ site.staticman.repository }}/{{ site.staticman.branch }}/comments">
23+
<form id="new_comment" class="page__comments-form js-form form" method="post">
2424
<div class="form-group">
2525
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label><br>
2626
<textarea type="text" rows="12" cols="36" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
@@ -48,7 +48,8 @@ <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
4848
</div>
4949
<!-- Start comment form alert messaging -->
5050
<p class="hidden js-notice">
51-
<strong class="js-notice-text"></strong>
51+
<strong class="js-notice-text-success hidden">{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}</strong>
52+
<strong class="js-notice-text-failure hidden">{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}</strong>
5253
</p>
5354
<!-- End comment form alert messaging -->
5455
{% if site.staticman.reCaptcha.siteKey %}
@@ -58,6 +59,7 @@ <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
5859
{% endif %}
5960
<div class="form-group">
6061
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
62+
<button type="submit" id="comment-form-submitted" tabindex="5" class="btn btn--primary btn--large hidden" disabled>{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}</button>
6163
</div>
6264
</form>
6365
</div>
@@ -67,6 +69,13 @@ <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
6769
<script async src="https://www.google.com/recaptcha/api.js"></script>
6870
{% endif %}
6971
</div>
72+
7073
<!-- Load script to handle comment form submission -->
71-
{% include staticman-script.html %}
74+
<!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
75+
<script>
76+
if (typeof jQuery == 'undefined') {
77+
document.write('<script src="{{ "/js/jquery-1.11.2.min.js" | relative_url }}"></scr' + 'ipt>');
78+
}
79+
</script>
80+
<script src="{{ "/js/staticman.js" | relative_url }}"></script>
7281
{% endif %}

_includes/staticman-script.html

Lines changed: 0 additions & 47 deletions
This file was deleted.

css/staticman.css

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,6 @@
6666
.staticman-comments .form {
6767
position: relative;
6868
}
69-
/*
70-
Disabled state
71-
========================================================================== */
72-
.staticman-comments input[disabled][disabled], .staticman-comments textarea[disabled], .staticman-comments input[readonly][readonly], .staticman-comments textarea[readonly] {
73-
opacity: 0.5;
74-
cursor: not-allowed;
75-
}
7669
/*
7770
Focus & active state
7871
========================================================================== */

js/staticman.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
layout: null
3+
---
4+
5+
(function ($) {
6+
var $comments = $('.js-comments');
7+
8+
$('#new_comment').submit(function () {
9+
var form = this;
10+
11+
$(form).addClass('disabled');
12+
13+
{% assign sm = site.staticman -%}
14+
var endpoint = '{{ sm.endpoint | default: "https://staticman3.herokuapp.com/v3/entry/github/" }}';
15+
var repository = '{{ sm.repository }}';
16+
var branch = '{{ sm.branch }}';
17+
18+
$.ajax({
19+
type: $(this).attr('method'),
20+
url: endpoint + repository + '/' + branch + '/comments',
21+
data: $(this).serialize(),
22+
contentType: 'application/x-www-form-urlencoded',
23+
success: function (data) {
24+
$('#comment-form-submit').addClass('hidden');
25+
$('#comment-form-submitted').removeClass('hidden');
26+
$('.page__comments-form .js-notice').removeClass('notice--danger');
27+
$('.page__comments-form .js-notice').addClass('notice--success');
28+
showAlert('success');
29+
},
30+
error: function (err) {
31+
console.log(err);
32+
$('#comment-form-submitted').addClass('hidden');
33+
$('#comment-form-submit').removeClass('hidden');
34+
$('.page__comments-form .js-notice').removeClass('notice--success');
35+
$('.page__comments-form .js-notice').addClass('notice--danger');
36+
showAlert('failure');
37+
$(form).removeClass('disabled');
38+
}
39+
});
40+
41+
return false;
42+
});
43+
44+
function showAlert(message) {
45+
$('.page__comments-form .js-notice').removeClass('hidden');
46+
if (message == 'success') {
47+
$('.page__comments-form .js-notice-text-success').removeClass('hidden');
48+
$('.page__comments-form .js-notice-text-failure').addClass('hidden');
49+
} else {
50+
$('.page__comments-form .js-notice-text-success').addClass('hidden');
51+
$('.page__comments-form .js-notice-text-failure').removeClass('hidden');
52+
}
53+
}
54+
})(jQuery);

0 commit comments

Comments
 (0)