Message Board Quick Reply with Quoting

From KickApps Documentation

Description

The following code snippet will easily add both a Quick Reply feature and a Quote button to your message board disussions. This code snippet uses the Javascript Event API.

Code

Ka.events.listen('mb-view-discussion-page-load', function() {
	if (Ka.Info.USERID != '') {
		
		// create function for handing quote button
		quoteFunction = function(el) {
			var quote = $j(el).parents('.ka_genForumItemWrap').find('.ka_replyContents').html().replace("<!-- text-->", "", "ig"),
				author = $j(el).parents(".ka_genForumItemWrap").find(".ka_userName a").html(),
				quoteContents = "<div class='quoteContainer'><div class='quoteAuthor'>Posted By: " + author + "</div>" + quote + "</div>";

			$j("#quoteContents").html(quoteContents)
			$j("#quickReplyQuote").val(quoteContents);
			$j("#quickReply").ScrollTo();
		}
		
		// construct the URL for the displayNewDiscussion page
		var url = "/service/displayNewDiscussionThread.kickAction?as=" + Ka.Info.AFFILIATESITEID  
			+ "&w=" + Ka.Util.getLocationParam('w')
			+ "&d=" + Ka.Util.getLocationParam('d')
			+ "&dt=new"
			+ "&pg=dtpage"
			+ " #ka_msgb_newForm";

		// create the div that will hold our new form
		$j('<div id="quickReply"><fieldset><legend>Quick Reply</legend><div id="quoteContents"></div><div class="inner"></div></fieldset></div>')
			.insertAfter('#ka_repliesContainer');

		// load the content from the displayNewDiscussion page and store it in the new div
		$j("#quickReply .inner").load(url, function() { 
			$j("#ka_msgb_newForm")
				.find('#optionalMedia, label[for=ka_discussionSubject], #ka_discussionSubject').remove().end()
				.find('#ka_DiscussionName').hide().end()
				.find('.ka_formControl input').click(function() {
					var content = ($j('#quickReplyContent').val());
					if (content.length == 0) {
						return false;
					}
					var quote = $j("#quickReplyQuote").val();
					$j('#ka_DiscussionName').val(quote + content.replace('\n', '<br />', 'ig'));
					return true;
				}).val("Post Quick Reply").end()
			$j("<input type='hidden' id='quickReplyQuote' value='' /><textarea id='quickReplyContent'></textarea>").insertAfter("#ka_msgb_newForm #ka_DiscussionName")
		});
		
		$j('#ka_RepliesList ul.ka_sprite_mBoard li.ka_FBS_flag')
			.after('<li class="mbQuote"><a onclick="quoteFunction(this)" href="#quickReplyContent">Quote</a></li>');

	}
});

And some CSS to make it look nice:

body#ka_replies #ka_mainContainer #quickReply textarea { width:98% !important;}
body#ka_replies #ka_mainContainer #quickReply label { text-align:left; color:#444444;}

body#ka_replies #ka_mainContainer #quickReply fieldset { border:1px solid #ccc; padding:10px !important; }
body#ka_replies #ka_mainContainer #quickReply legend { color:#444444;}

.quoteContainer { border:1px solid #444; margin:0 0 10px 10px; padding:5px; }
.quoteAuthor { border-bottom:1px solid #444; font-weight:bold; margin-bottom:3px; padding-bottom:3px; }

body.ka_messageBoards #ka_contentContainer ul.ka_forumBodyStatsList li.mbQuote { background:transparent url(http://css.kickstatic.com/kickapps/images/sprites/sprite_media.gif) no-repeat scroll 0 -1122px; }