@@ -81,14 +81,13 @@
<div id="respond">
- <h3>Leave a Reply</h3>
+ <form action="demo.html" method="post" id="commentform" class="encouraged-form">
+ <h3>Leave a Reply</h3>
- <div class="cancel-comment-reply">
- <small><a rel="nofollow" id="cancel-comment-reply-link" href="/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14#respond" style="display:none;">Click here to cancel reply.</a></small>
- </div>
-
-
- <form action="demo.html" method="post" id="commentform">
+ <div class="cancel-comment-reply">
+ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14#respond" style="display:none;">Click here to cancel reply.</a></small>
+ </div>
+
<p><input type="text" name="author" id="author" value="Jon Doe" size="22" tabindex="1" aria-required='true' />
<label for="author"><small>Name (required)</small></label></p>
@@ -114,8 +113,8 @@
<!-- end -->
</div>
- <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="javascript/jquery/jquery.scrollTo-min.js" type="text/javascript"></script>
- <script src="javascript/jquery/encouraged-commentary-min.js" type="text/javascript"></script>
+ <script src="javascript/jquery/encouraged-commentary.js" type="text/javascript"></script>
</body>
</html>
\ No newline at end of file
demo.html
@@ -30,7 +30,8 @@
margin: 0.5em 0;
}
- .comment blockquote {
+ .comment blockquote,
+ #encouraged-preview blockquote {
border-left: 2px solid #666;
color: #999;
font-size: 0.875em;
@@ -42,4 +43,19 @@
a {
color: #f90;
+ }
+
+ textarea {
+ width: 450px;
+ height: 150px;
+ }
+
+ #respond {
+ position: relative;
+ }
+
+ #comment-lightbox h3 {
+ color:#000000;
+ font-size:1em;
+ margin: 0 0 0.5em 0;
}
\ No newline at end of file
demo/demo.css
@@ -13,8 +13,34 @@
* http://github.com/jimjeffers/encouraged-commentary/tree/master
*/
+//
+// Global vars. Should really grab all of the vars including the ones initialized in the ready block below into a dedicated
+// global object. That would be a smarter method.
+//
+var form;
+var commentList;
+var lightbox;
+var lightboxBackground;
+var quote;
+var preview;
+var noLightbox;
+var noPreview;
+
$(document).ready( function() {
//
+ // Check for vars within the dom.
+ //
+ form = $($('.encouraged-form').get(0));
+ commentList = $($('.commentlist').get(0));
+ var sortedCommentary = commentList.hasClass('sorted-commentary');
+ var noRelatives = commentList.hasClass('no-relatives');
+ var noReplies = commentList.hasClass('no-replies');
+ noPreview = commentList.hasClass('no-preview');
+ var noQuoteControl = commentList.hasClass('no-quote-control');
+ var noReplyControl = commentList.hasClass('no-reply-control');
+ noLightbox = commentList.hasClass('no-lightbox');
+
+ //
// Text highlighted comments.
//
$(document.body).append("<span id=\"comment-respond\">Respond</span>");
@@ -24,7 +50,6 @@ $(document).ready( function() {
var permalink = "";
var author = "";
- var quote = "";
$('.commentlist > .comment, .quotable').each( function() {
$(this).mouseup(function(e){
@@ -60,8 +85,22 @@ $(document).ready( function() {
if(permalink && author) {
directive = "<p><a href=\""+permalink+"\">@"+author+"</a>:</p>\n"
}
- $('#comment').val(directive+"<blockquote>"+quote+"</blockquote>\n<p>\n<!-- Start your comment below this line. -->\n\n</p>");
- $.scrollTo('#comment', {duration: 1000});
+ quote = directive+"<blockquote>"+quote+"</blockquote>\n<p>\n";
+ if(noLightbox) {
+ if(!form) {
+ $('#comment').val(quote+"<!-- Start your comment below this line. -->\n\n</p>");
+ }
+ $.scrollTo('#comment', {duration: 1000});
+ } else {
+ setupLightbox();
+ }
+
+ if(!noPreview) {
+ preview.html(quote);
+ }
+
+ addOrShowDeleteQuoteControl(directive);
+
$(this).fadeTo(1,0);
widget.hide();
});
@@ -82,13 +121,11 @@ $(document).ready( function() {
//
// Comment traversing utilities :: related comments & replies trick.
//
- var commentList = $($('.commentlist').get(0));
var relatedComments = new Array();
var relatedReplies = new Array();
- var sortedCommentary = commentList.hasClass('sorted-commentary');
$('.commentlist .comment p:first-child a:first-child').each(function() {
- if(this.text.substring(1,-1) == "@") {
- var targetAuthor = this.text.substring(1,this.text.length);
+ if($(this).text().substring(1,-1) == "@") {
+ var targetAuthor = $(this).text().substring(1,$(this).text().length);
var replyComment = findCommentFor(this);
var replyAuthor = findAuthorFor(replyComment);
var replyPermalink = findPermalinkFor(replyComment);
@@ -110,10 +147,10 @@ $(document).ready( function() {
});
var quoteReplyControls = '';
- if(!commentList.hasClass('no-quote-control')) {
+ if(!noQuoteControl) {
quoteReplyControls += '<a href="#" class="comment-quote">Quote</a>'
}
- if(!commentList.hasClass('no-reply-control')) {
+ if(!noReplyControl) {
quoteReplyControls += '<a href="#" class="comment-reply">Reply</a>'
}
$('.commentlist > .comment').each( function() {
@@ -138,12 +175,12 @@ $(document).ready( function() {
function(){
if(relatedComments[currentAuthor.text].length > 1 || relatedReplies[currentAnchor]) {
if($(this).find('div.comment-controls div.related-replies, div.comment-controls div.related-comments').length < 1) {
- if(relatedReplies[currentAnchor] && !commentList.hasClass('no-replies')){
+ if(relatedReplies[currentAnchor] && !noReplies){
var wording = "";
(relatedReplies[currentAnchor].length > 1) ? wording = "replies" : wording = "reply";
commentControls.append('<div class="related-replies"><h6>'+(relatedReplies[currentAnchor].length)+' '+wording+' to this comment</h6><ol>'+printReplies(relatedReplies[currentAnchor])+'</ol></div>');
}
- if(relatedComments[currentAuthor.text].length > 1 && !commentList.hasClass('no-relatives')){
+ if(relatedComments[currentAuthor.text].length > 1 && !noRelatives){
var wording = "";
(relatedComments[currentAuthor.text].length-1 > 1) ? wording = "comments" : wording = "comment";
commentControls.append('<div class="related-comments"><h6>'+(relatedComments[currentAuthor.text].length-1)+' other '+wording+' from '+currentAuthor.text+'</h6><ol>'+printRelatives(relatedComments[currentAuthor.text],reference)+'</ol></div>');
@@ -182,6 +219,48 @@ $(document).ready( function() {
}
});
});
+
+ //
+ // Comment form handler.
+ //
+ if(form) {
+ if(form.find('input[type="submit"]').get(0)) {
+ $(form.find('input[type="submit"]').get(0)).removeAttr("disabled");
+ }
+ $(form.find('input[type="submit"]').get(0)).attr("disabled",false);
+ if(!noPreview){
+ form.append('<div id="encouraged-preview"> </div>');
+ preview = $($('#encouraged-preview').get(0));
+ var comment = $($('#comment').get(0));
+
+ comment.keyup(function(){
+ preview.html(quote+fixWhiteSpace(comment.val()));
+ if(comment.val().length > 400 && !comment.hasClass('extended')) {
+ comment.addClass('extended');
+ } else if(comment.val().length < 400 && comment.hasClass('extended')) {
+ comment.removeClass('extended');
+ }
+ });
+ }
+ }
+
+ if(!noLightbox) {
+ $("body").append('<div id="comment-lightbox"></div><div id="comment-lightbox-background"></div>');
+ lightbox = $('#comment-lightbox').hide();
+ lightboxBackground = $('#comment-lightbox-background').hide();
+ lightboxBackground.click(hideLightbox);
+ }
+
+ //
+ // Handle form submission.
+ //
+ form.submit(function(){
+ $($('#comment').get(0)).val(preview.html());
+ if(form.find('input[type="submit"]').get(0)) {
+ $(form.find('input[type="submit"]').get(0)).attr("disabled",true);
+ };
+ return true;
+ });
});
/*
@@ -268,21 +347,48 @@ function getAnchor(href){
/*
FUNCTION:
+ SetupLightbox()
+ Grabs the HTML comment form and leaves an invisible anchor in it's place.
+*/
+function setupLightbox() {
+ if(!$('#encouraged-comment-form-anchor').get(0)) {
+ lightbox.after('<a href="#" id="encouraged-comment-form-anchor"></a>');
+ }
+ lightbox.html(form);
+ lightbox.append('<a href="#" id="encouraged-comment-lightbox-toggle">Close</a>');
+ $('#encouraged-comment-lightbox-toggle').click(hideLightbox);
+ lightbox.fadeIn("normal");
+ lightboxBackground.show().fadeTo("slow",0.3);
+};
+
+/*
+ FUNCTION:
+ HideLightbox()
+ Fade out the lightbox and put the comment form back in it's place.
+*/
+function hideLightbox() {
+ lightbox.hide();
+ $($('#encouraged-comment-form-anchor').get(0)).after(form);
+ lightboxBackground.fadeOut("slow");
+};
+
+/*
+ FUNCTION:
SetupComment(HTML object, string)
Sets up a comment body in the comment form based off the target.
- This method is used by the automated respond or quote buttons.
- The text highlight and respond works slightly differently.
*/
-function setupComment(target,quote) {
+function setupComment(target,quoted) {
var comment = findCommentFor(target);
var directive = '<p><a href="'+findPermalinkFor(comment).href+'">@'+findAuthorFor(comment).text+'</a></p>';
- if(quote) {
+ if(quoted) {
quote = "<blockquote>";
if(comment.find('.entry-content > p').length > 0) {
comment.find('.entry-content > p').each(function() {
var directivePresent = false;
if($(this).find("a:first-child").length > 0) {
- if($(this).find("a:first-child").get(0).text.substring(1,-1) == "@") {
+ if($($(this).find("a:first-child").get(0)).text().substring(1,-1) == "@") {
directivePresent = true;
}
}
@@ -300,8 +406,52 @@ function setupComment(target,quote) {
} else {
quote = "";
}
- $('#comment').val(directive+quote+"\n<p>\n<!-- Start your comment below this line. -->\n\n</p>");
- $.scrollTo('#comment', {duration: 1000});
+
+ quote = directive + quote;
+
+ if(noLightbox) {
+ if(noPreview) {
+ $('#comment').val(quote+"\n<p>\n<!-- Start your comment below this line. -->\n\n</p>");
+ }
+ $.scrollTo('#comment', {duration: 1000});
+ } else {
+ setupLightbox();
+ }
+
+ if(!noPreview) {
+ preview.html(quote);
+ }
+};
+
+/*
+ FUNCTION:
+ AddOrShowDeleteQuoteControl(String)
+*/
+function addOrShowDeleteQuoteControl(directive){
+ var deleteCommentControl = form.find('#encouraged-comment-delete').get(0);
+ if(directive == "") {
+ directive = "Article";
+ } else {
+ if($(directive).find('a').get(0)){
+ directive = $($(directive).find('a').get(0)).text().replace('@','');
+ }
+ }
+
+ if(!deleteCommentControl) {
+ form.append('<a href="#" id="encouraged-comment-delete">Quoting: '+directive+' (click to cancel)</a>');
+ deleteCommentControl = $(form.find('#encouraged-comment-delete').get(0));
+ deleteCommentControl.click(function(){
+ $(this).hide();
+ quote = "";
+ if(!noPreview){
+ preview.html(fixWhiteSpace($('#comment').val()));
+ }
+ return false;
+ });
+ } else {
+ $(deleteCommentControl).show();
+ $(deleteCommentControl).html("Quoting: "+directive+" (click to cancel)");
+ }
};
/*
@@ -325,9 +475,18 @@ function getSelText()
txt = document.selection.createRange().text;
} else return;
if(String(txt).length > 2) {
- txt = String(txt).replace(/\n\n/g,"</p><p>").replace(/\n/g,"<br/>");
- return "<p>"+txt+"</p>";
+ return fixWhiteSpace(txt);
} else {
return false;
}
+};
+
+/*
+ FUNCTION:
+ FixWhiteSpace(String)
+ Converts whitespace in strings to html.
+*/
+function fixWhiteSpace(str) {
+ str = String(str).replace(/\n\n/g,"</p><p>").replace(/\n/g,"<br/>");
+ return "<p>"+str+"</p>";
};
\ No newline at end of file
javascript/jquery/encouraged-commentary.js
@@ -145,3 +145,100 @@ into your own stylesheet and enhance them to your own taste.
background: #f90;
color: #333;
}
+
+
+ /* Styles for the preview container. */
+ #encouraged-preview {
+ color: #999;
+ font-size: 0.875em;
+ line-height: 1.25em;
+ left: 470px;
+ position: absolute;
+ top: 133px;
+ width: 400px;
+ }
+
+ /* Alternate height for large comments. */
+ .extended {
+ height: 300px;
+ }
+
+ /* Kind of important if you are using the preview with or without the lightbox */
+ .encouraged-form {
+ position: relative;
+ }
+
+ /* This is to style the opt out of quoting button. */
+ #encouraged-comment-delete {
+ left: 470px;
+ position: absolute;
+ top: 90px;
+ }
+
+ /* Lightbox Styles */
+ #comment-lightbox {
+ background: #fff;
+ border: 10px solid #000;
+ height: 480px;
+ left: 50%;
+ margin-left: -320px;
+ margin-top: -240px;
+ overflow: hidden;
+ position: fixed;
+ top: 50%;
+ width: 640px;
+ z-index: 2001;
+ }
+
+ /* This layer is the fade behind the lightbox */
+ #comment-lightbox-background {
+ background: #000;
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 2000;
+ }
+
+ /* All of the work below here is to restyle the comment form when it is pulled into the lightbox. */
+ #comment-lightbox .encouraged-form {
+ padding: 10px;
+ }
+
+ #comment-lightbox .encouraged-form label {
+ color: #000;
+ font-size: 0.75em;
+ }
+
+ #comment-lightbox .encouraged-form #comment {
+ height: 290px;
+ width: 290px;
+ }
+
+ #comment-lightbox .encouraged-form #encouraged-preview {
+ background: #fff;
+ height: 430px;
+ left: 330px;
+ overflow: auto;
+ padding: 10px;
+ top: 30px;
+ width: 290px;
+ }
+
+ #comment-lightbox #encouraged-comment-delete {
+ padding: 4px 0 0 0;
+ top: 0;
+ left: 330px;
+ }
+
+ /* This styling is applied to the close button that is automatically generated when the lightbox is called. */
+ #encouraged-comment-lightbox-toggle {
+ background: #000;
+ color: #fff;
+ display: block;
+ right: 0;
+ position: absolute;
+ padding: 0 0 4px 4px;
+ top: 0;
+ }
\ No newline at end of file
stylesheets/base.css
b30b1ccfa3f74fbdfc8b0d4ba54a2fe01c9b8fc5
Jimmy Jeffers
jim@sumocreations.com
http://github.com/jimjeffers/encouraged-commentary/commit/0bf09cc99d45775350d0b8af8590d165e1b12b97
0bf09cc99d45775350d0b8af8590d165e1b12b97
2009-01-17T19:03:30-08:00
2009-01-17T19:03:30-08:00
Added live preview, lightbox, and separation of HTML from comment text.
8f0aabb7d5cc6ce7c5b42f272f94e7b29fe050e4
Jimmy Jeffers
jim@sumocreations.com