Merge pull request #99 from badele/staticman

Add staticman support (static comments coupled with Github pull request)

static/css/staticman.css

@@ -0,0 +1,92 @@
+.staticman-comments {
+  padding: 20px 0px 0px 0px;
+}
+
+.staticman-comments .comment-content{
+  border-top: 1px solid #EEEEEE;
+  padding: 4px 0px 30px 0px;
+}
+
+.staticman-comments .comment-content p {
+  padding: 5px 0px 5px 0px;
+  margin: 5px 58px 0px 58px;
+}
+
+.staticman-comments .textfield {
+    width: 420px;
+    max-width: 100%;
+    padding: 0.5rem 0;
+    width: 100%;
+}
+
+.staticman-comments input {
+    border: 1px solid rgba(0,0,0,0.12);
+    padding: 4px 5px;
+    width: 100%;
+}
+
+
+.staticman-comments .g-recaptcha {
+    padding: 0.5rem 0;
+}
+
+.staticman-comments textarea {
+    border: 1px solid rgba(0,0,0,0.12);
+    padding: 4px 5px;
+    vertical-align: top;
+    height: 10em;
+    width: 100%;
+}
+
+.staticman-comments .comment-avatar {
+  float:left;
+  width: 48;
+  height: 48;
+  margin-right: 10px;
+}
+
+.staticman-comments .show-modal {
+	overflow: hidden;
+	position: relative;
+}
+
+.staticman-comments .show-modal:before {
+	position: absolute;
+	content: '';
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+	background-color: rgba(0, 0, 0, 0.85);
+}
+
+.show-modal .modal {
+	display: block;
+}
+
+.modal {
+	display: none;
+	position: fixed;
+	width: 300px;
+	top: 50%;
+	left: 50%;
+	margin-left: -150px;
+	margin-top: -150px;
+	min-height: 0;
+	height: 30%
+	z-index: 9999;
+  padding: 0.5rem;
+  border: 1px solid rgba(0,0,0,0.25);
+  background-color: rgba(220,220,220,0.9);
+  height: 10em;
+
+}
+
+form--loading:before {
+	content: '';
+}
+
+.form--loading .form__spinner {
+	display: block;
+}

static/js/staticman.js

@@ -0,0 +1,40 @@
+// Static comments
+// from: https://github.com/eduardoboucas/popcorn/blob/gh-pages/js/main.js
+(function ($) {
+  var $comments = $('.js-comments');
+
+  $('.js-form').submit(function () {
+    var form = this;
+
+    $(form).addClass('form--loading');
+
+    $.ajax({
+      type: $(this).attr('method'),
+      url: $(this).attr('action'),
+      data: $(this).serialize(),
+      contentType: 'application/x-www-form-urlencoded',
+      success: function (data) {
+        showModal('Perfect !', 'Thanks for your comment! It will show on the site once it has been approved. .');
+        $(form).removeClass('form--loading');
+      },
+      error: function (err) {
+        console.log(err);
+        showModal('Error', 'Sorry, there was an error with the submission!');
+        $(form).removeClass('form--loading');
+      }
+    });
+
+    return false;
+  });
+
+  $('.js-close-modal').click(function () {
+    $('body').removeClass('show-modal');
+  });
+
+  function showModal(title, message) {
+    $('.js-modal-title').text(title);
+    $('.js-modal-text').html(message);
+
+    $('body').addClass('show-modal');
+  }
+})(jQuery);