Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Staticman Comment Reply #222

Open
wants to merge 30 commits into
base: master
from
Open
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
61c84f8
Adding support for reply
VincentTam Nov 14, 2018
63b6817
Tonight's work on nested comments
VincentTam Nov 14, 2018
7ffa297
This noon's work: fix bugs and better jumps
VincentTam Nov 15, 2018
2cde70e
Try fixing logic error
VincentTam Nov 15, 2018
2171889
Work of this afternoon.
VincentTam Nov 15, 2018
97e26e9
Tonight's UX work
VincentTam Nov 15, 2018
3d77062
Staicman reply is here !
VincentTam Nov 16, 2018
d2f6105
Fixes left alignment mismatch
VincentTam Nov 16, 2018
b1270c4
Merge branch 'master' into reply
VincentTam Nov 16, 2018
18531a3
Added missing fields in documentation
VincentTam Nov 16, 2018
191eb1a
Adding new fucntional: KaTeX+Markdown live preview
VincentTam Nov 18, 2018
287489e
Save my work
VincentTam Nov 18, 2018
d969cc3
Basic support for comment previews
VincentTam Nov 19, 2018
e4254c5
added i18n key and translations for reply button
VincentTam Nov 20, 2018
11390ce
Debug broken KaTeX macros
VincentTam Nov 21, 2018
e50da4d
Fixed missing units
VincentTam Dec 12, 2018
8f3b0c3
Merge branch 'master' into reply
VincentTam Dec 12, 2018
cf29bf1
Merge branch 'master' into reply
VincentTam Jul 27, 2019
fe547af
More static href
VincentTam Jul 29, 2019
4c08241
Added self-hosted Showdown & fixed missing {{ end }}
VincentTam Jul 29, 2019
056024b
Removed overcomplicated smooth scroll JS code
VincentTam Jul 29, 2019
a6ab6e0
Added back comment form id attr
VincentTam Jul 29, 2019
9d994ee
Removed excess spaces
VincentTam Jul 29, 2019
492c265
Improved nested Staticman nested comments UI
VincentTam Jul 30, 2019
f00c776
Added back missing reply target notice
VincentTam Jul 30, 2019
6c68c1a
Added back missing MM comment_form_info
VincentTam Jul 30, 2019
0224d1a
Some visual adjustments
VincentTam Jul 30, 2019
e1ae0b5
Remove POST target from HTML to avoid spam bots
VincentTam Aug 11, 2019
da7b296
Solved nesting HTML p tag error
VincentTam Aug 12, 2019
4aee8fe
Added gravatar alt text for HTML validator
VincentTam Aug 12, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Improved nested Staticman nested comments UI

1. Comment author, reply target author and time are at the same line.
2. Improved comment button appearance.
3. Show reply target name and avatar on top of the comment form.
4. Copied notice about email addr & req'd field from Minimal Mistakes.
5. Replaced modal with notice under the comment form like MM.
6. Disable the comment form during form submission like MM.
7. Clear comment preview after clicking "reset".
  • Loading branch information...
VincentTam committed Jul 30, 2019
commit 492c265dff38f6e51f872c9ef1716e268096b4e6
@@ -0,0 +1,98 @@
.staticman-comments {
padding: 20px 0px 0px 0px;
}

.staticman-comments .static-comment {
margin-bottom: 20px;
margin-top: 20px;
}

.staticman-comments .comment-content {
border-top: 1px solid #EEEEEE;
padding: 4px 0px 4px 0px;
}

.staticman-comments .comment-content > * {
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-preview {
margin-top: 20px;
}

.staticman-comments .comment-avatar {
float: left;
width: 48px;
height: 48px;
margin-right: 10px;
}

.staticman-comments .comment-timestamp {
float: right;
font-family: 'Lora', 'Times New Roman', serif;
font-size: 18px;
font-weight: normal;
}


.staticman-comments .static-comment-reply {
margin-left: 2em;
}

.staticman-comments .btn {
background-color: #eee8d5;
}

.staticman-comments .comment-reply-btn a {
margin: 5px 0px 15px 58px;
color: #002B36;
}

.staticman-comments .reply-notice img.comment-avatar {
display: inline-block;
float: none;
width: 2rem;
height: 2rem;
margin: 0 .6rem;
}

.staticman-comments a.close-btn {
margin: 0 .6rem;
color: #c34853;
}

.staticman-comments a.close-btn:hover {
text-decoration: none;
}

.staticman-comments .js-form.form--loading {
opacity: 0.5;
cursor: not-allowed;
}
File renamed without changes.
@@ -0,0 +1,98 @@
// Static comments
// from: https://github.com/eduardoboucas/popcorn/blob/gh-pages/js/main.js
$( document ).ready(function() {
var $comments = $('.js-comments');

$('.js-form').submit(function () {
var form = this;

$(form).addClass('form--loading');
$('button[type="submit"]:enabled').addClass('hidden'); // hide "submit"
$('button[type="submit"]:disabled').removeClass('hidden'); // show "submitted"

$.ajax({
type: $(this).attr('method'),
url: '{{ .api }}',
data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
showAlert('success');
setTimeout(function(){ clearForm() }, 3000); // display success message for 3s
$(form).removeClass('form--loading');
},
error: function (err) {
console.log(err);
showAlert('failed');
$(form).removeClass('form--loading');
}
});

return false;
});

function showAlert(msg) {
if (msg == 'success') {
$('.js-form .submit-success').removeClass('hidden'); // show submit success message
$('.js-form .submit-failed').addClass('hidden'); // hide submit failed message
} else {
$('.js-form .submit-success').addClass('hidden'); // hide submit success message
$('.js-form .submit-failed').removeClass('hidden'); // show submit failed message
}
$('button[type="submit"]:enabled').removeClass('hidden'); // show "submit"
$('button[type="submit"]:disabled').addClass('hidden'); // hide "submitted"
}

function clearForm() {
resetReplyTarget();
$('.js-form input')
.filter(function() {
return this.name.match(/^fields\[.*\]$/);
})
.val(''); // empty all text & hidden fields
$('.js-form textarea').val(''); // empty text area
$('.js-form .submit-success').addClass('hidden'); // hide submission status
$('.js-form .submit-failed').addClass('hidden'); // hide submission status
$('#commentPreview').html(''); // empty comment preview
}

function resetReplyTarget() {
$('.js-form .reply-notice .reply-name').text(''); // reset reply target
$('.js-form .reply-notice img').remove(); // remove reply avatar
$('.js-form .reply-notice a').remove(); // remove '×' button
$('.js-form .reply-notice').addClass('hidden'); // hide reply target display
$('.js-form input[name="fields[replyThread]"]').val('');
$('.js-form input[name="fields[replyID]"]').val('');
$('.js-form input[name="fields[replyName]"]').val('');
}

// record reply target when "reply to this comment" is pressed
$('article.static-comment').on('click', 'a.reply-btn', function (evt){
resetReplyTarget();
var cmt = $(evt.delegateTarget);
$('.js-form input[name="fields[replyThread]"]').val(this.title);
$('.js-form input[name="fields[replyID]"]').val(cmt.attr("id"));
authorTag = cmt.find('.comment-author');
replyName = authorTag.text();
$('.js-form input[name="fields[replyName]"]').val(replyName);

// display reply target avatar and name
$('.js-form .reply-notice').removeClass('hidden');
$('.js-form .reply-name').text(replyName);
avatarTag = cmt.find('.comment-avatar');
// use clone to avoid removal of avatar in comments by resetReplyTarget()
$('.js-form .reply-arrow').after(avatarTag.clone());
// add button for removing reply target (static method would give error msg)
closeBtn = $("<a class='close-btn'>×</a>");
$('.js-form .reply-notice').append(closeBtn);
});

// handle removal of reply target when '×' is pressed
$('.js-form .reply-notice').on('click', 'a.close-btn', function(){
resetReplyTarget();
});

// clear form when reset button is clicked
$('.js-form button[type="reset"]').click(function (){
clearForm();
});
});
@@ -54,6 +54,8 @@
translation: "comentário"
- id: moreComment
translation: "comentários"
- id: commentFormInfo
translation: "Seu e-mail não será publicado. Os campos obrigatórios estão marcados"
- id: useMarkdown
translation: "Você pode usar sintaxe MarkDown"
- id: yourName
@@ -64,6 +66,16 @@
translation: "Seu website"
- id: replyToMsg
translation: "Responder a este comentário"
- id: btnSubmit
translation: "Enviar Comentário"
- id: btnSubmitted
translation: "Enviado"
- id: btnReset
translation: "Reiniciar"
- id: successMsg
translation: "Obrigado pelo seu comentário! Ele aparecerá no site assim que for aprovado."
- id: errorMsg
translation: "Desculpe, ocorreu um erro no envio. Por favor verifique se todos os campos obrigatórios foram preenchidos e tente novamente."

# Delayed Disqus
- id: show
@@ -54,6 +54,8 @@
translation: "Kommentar"
- id: moreComment
translation: "Kommentare"
- id: commentFormInfo
translation: "Ihre E-Mail Adresse wird nicht veröffentlicht. Benötigte Felder sind markiert"
- id: useMarkdown
translation: "Sie können Markdown-Syntax verwenden"
- id: yourName
@@ -64,6 +66,16 @@
translation: "Ihre Website"
- id: replyToMsg
translation: "Auf diesen Kommentar antworten"
- id: btnSubmit
translation: "Kommentar absenden"
- id: btnSubmitted
translation: "Versendet"
- id: btnReset
translation: "Zurücksetzen"
- id: successMsg
translation: "Danke für den Kommentar! Er wird nach Prüfung auf der Seite angezeigt."
- id: errorMsg
translation: "Entschuldigung, es gab einen Fehler. Bitte fülle alle benötigten Felder aus und versuche es erneut."

# Delayed Disqus
- id: show
@@ -54,6 +54,8 @@
translation: "comment"
- id: moreComment
translation: "comments"
- id: commentFormInfo
translation: "Your email address will not be published. Required fields are marked"
- id: useMarkdown
translation: "You can use Markdown syntax"
- id: yourName
@@ -64,6 +66,16 @@
translation: "You website"
- id: replyToMsg
translation: "Reply to this comment"
- id: btnSubmit
translation: "Submit comment"
- id: btnSubmitted
translation: "Submitted"
- id: btnReset
translation: "Reset"
- id: successMsg
translation: "Thanks for your comment! It will show on the site once it has been approved."
- id: errorMsg
translation: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."

# Delayed Disqus
- id: show
@@ -54,6 +54,8 @@
translation: "komento"
- id: moreComment
translation: "komentoj"
- id: commentFormInfo
translation: "Via retpoŝta adreso ne estos publikigita. Bezonata kampoj markitaj"
- id: useMarkdown
translation: "Vi povus uzi Markdown-sintakson"
- id: yourName
@@ -64,6 +66,16 @@
translation: "Via retpaĝaro"
- id: replyToMsg
translation: "Aldoni komenton al ĉi tiu komento"
- id: btnSubmit
translation: "Sendi komenton"
- id: btnSubmitted
translation: "Sendita"
- id: btnReset
translation: "Rekomencigi"
- id: successMsg
translation: "Dankon pro via komento! Ĝi montros en la retejo kiam gî estos aprobita."
- id: errorMsg
translation: "Pardonu, estis eraro kun via sendado. Bonvolu certigi vin ke ĉiuj bezonataj kampoj estas kompletigita kaj provu denove."

# Delayed Disqus
- id: show
@@ -54,6 +54,8 @@
translation: "comentario"
- id: moreComment
translation: "comentarios"
- id: commentFormInfo
translation: "Tu dirección de correo electrónico no se publicará. Los campos obligatorios están marcados"
- id: useMarkdown
translation: "Puedes usar la sintaxis de Markdown"
- id: yourName
@@ -64,6 +66,16 @@
translation: "Tu sitio web"
- id: replyToMsg
translation: "Contestar a este comentario"
- id: btnSubmit
translation: "Enviar Commentario"
- id: btnSubmitted
translation: "Enviado"
- id: btnReset
translation: "Reiniciar"
- id: successMsg
translation: "Gracias por su comentario!, Este se visualizará en el sitio una vez haya sido aprobado"
- id: errorMsg
translation: "Lo sentimos, ha ocurrido un error al enviar su comentario. Por favor asegurese que todos los campos han sido diligenciados e intente de nuevo"

# Delayed Disqus
- id: show
@@ -54,6 +54,8 @@
translation: "commentaire"
- id: moreComment
translation: "commentaires"
- id: commentFormInfo
translation: "Votre adresse email ne sera pas visible. Les champs obligatoires sont marqués"
- id: useMarkdown
translation: "Vous pouvez utiliser la syntaxe Markdown"
- id: yourName
@@ -64,6 +66,16 @@
translation: "Votre site web"
- id: replyToMsg
translation: "Répondre à ce commentaire"
- id: btnSubmit
translation: "Envoyer"
- id: btnSubmitted
translation: "Envoyé"
- id: btnReset
translation: "Réinitialiser"
- id: successMsg
translation: "Merci pour votre commentaire, il sera visible sur le site une fois approuvé."
- id: errorMsg
translation: "Désolé, une erreur est survenue lors de la soumission. Vérifiez que les champs obligatoires ont été remplis et réessayez."

# Delayed Disqus
- id: show
@@ -54,6 +54,8 @@
translation: "commento"
- id: moreComment
translation: "commenti"
- id: commentFormInfo
translation: "Il tuo indirizzo email non sarà pubblicato. Sono segnati i campi obbligatori"
- id: useMarkdown
translation: "Puoi usare la sintassi Markdown"
- id: yourName
@@ -64,6 +66,16 @@
translation: "Il tuo website"
- id: replyToMsg
translation: "Rispondi a questo commento"
- id: btnSubmit
translation: "Invia commento"
- id: btnSubmitted
translation: "Inviato"
- id: btnReset
translation: "Azzera"
- id: successMsg
translation: "Grazie per il tuo commento! Verrà visualizzato nel sito una volta che sarà approvato."
- id: errorMsg
translation: "C'è stato un errore con il tuo invio. Assicurati che tutti i campi richiesti siano stati completati e riprova."

# Delayed Disqus
- id: show
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.