Sometimes, We Write Stuff...
Jazz Up Your Forms With MooTools Pt. 2
In the second part of this tutorial, I'm going to show you how I did the live comment preview with the auto-expansion of the preview and the input textarea. I'll be building upon the first part of this tutorial, so be sure to check that one out first if you haven't already. So, let's get to it...
The HTML
Since we're using the same form from part one, I'm only going to show you new code here. First, let's create our comment preview box:
<div id="cmt_preview">
<p><strong>Here's a preview of your comment:</strong></p>
<div class="comment_item">
<div class="comment_num"><sup>#</sup><a href="#123">123</a></div>
<div class="comment_name">by: <a id="author_preview" href="#">Your Name</a></div>
<div class="comment_date">5-12-2008</div>
<div class="comment_msg" id="preview_box"><p>Your comment preview</p></div>
</div>
</div>
As you can see, it's really nothing spectacular – it's just a basic comment box wrapped in a div, which has an ID of 'cmt_preview'.
The CSS
Here's the little bit of CSS styling I'm using. None of it is essential, it's just some basic styling I have applied so it matches/aligns with my form. Obviously you can use whatever you want...
#cmt_preview {
width: 540px;
padding-top: 20px;
margin: 20px auto;
color: #9CBD84;
}
/* ----- general comment item styling ----- */
.comment_item {
position: relative;
width: 519px;
padding: 10px;
margin: 0 auto;
margin-bottom: 28px;
background-color: #405953;
}
.comment_name {
display: block;
font-size: 13px;
color: #c4bf99;
font-weight: bold;
}
.comment_name a, .comment_name a:visited {
font-size: 18px;
font-weight: bold;
text-transform: capitalize;
color: #c8c01e;
letter-spacing: -1px;
}
.comment_name a:hover {
text-decoration: none;
color: #E1D939;
}
.comment_date {
font-size: 13px;
font-style: italic;
padding-bottom: 8px;
color: #78918b;
}
.comment_msg p {
color: #beb782;
font-size: 16px;
padding: 6px 0;
}
.comment_num {
position: absolute;
right: 10px;
font-size: 38px;
line-height: 38px;
color: #49655e;
}
div.comment_num a, div.comment_num:visited{
color: #49655e !important;
}
div.comment_num a:hover {
text-decoration: none;
}
div.comment_num sup {
font-size: 20px;
position: relative;
margin: 0;
padding: 0;
color: #49655e
}
The Javascript
I'm going to break the javascript down into pieces, just to make it easier to understand what's going on. You can view the code in it's full form in the demo links at the bottom of this post. First, we will establish a list of 'spam' catching stuff and the variable names for the items we'll be dealing with. (I am just doing this to make the code easier to read.) You'll want to substitute in 'spam' words of your choice... use your imagination.
var spam_tag_prevents = new Array("wordxx","wordyy","wordzz","<object", "<embed", "<a");
var commentName = $('theName'); //input field for author's name
var commentURL = $('theURL'); //input field for author's url
var commentInput = $('message'); //textarea input for comment
var authorPreview = $('author_preview'); //preview of comment author's name
var previewText = $('comment_preview'); //preview of comment text
Next, we get the original height of the textarea input. I am doing this in case the form was submitted and a validation error occured. (Otherwise, the previous contents could 'bust' out of the original textarea until we press a key.)
var inputScroll = commentInput.getScrollSize();
var orig_inputHeight = inputScroll.y;
commentInput.setStyle('height', orig_inputHeight);
Below is an optional step, but it sure makes things look better in IE. (It removes the always visible scrollbar in the textarea for IE. Note that we don't want to do this in the CSS, for degradability purposes!!)
commentInput.setStyle('overflow','hidden');
Next, we'll set up some functions to perform updates to our comment preview items. In this case, will be updating the commenter's name, url, and comment text. Here is the author preview function:
var previewTheAuthor = function(evt){
authorPreview.set('html', this.value.stripScripts());
}
And the function to handle the author's URL. Note that I've placed a regex check here to make sure it's valid, although I actually perform additional checks with PHP on my site when submitted.
var previewTheUrl = function(evt){
var tempURL = this.value.stripScripts();
var regexp_url = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if(tempURL.test(regexp_url, "i")){
authorPreview.href = tempURL;
}
}
Now, we'll write the function for handling the comment text preview, along with a little spam prevention. This is also where the re-sizing occurs:
var previewTheComment = function(evt){
var spam_flag = false;
//asshat prevention step 1
this.value = this.value.stripScripts();
//another asshat check
for(var z=0; z < spam_tag_prevents.length; z++){
if(this.value.contains(spam_tag_prevents[z])){
spam_flag = true;
}
}
//set the contents, if it doesn't contain spam or undesired tags (again, just for an example here)
if(spam_flag != true){
previewText.set('html', this.value);
}
//update textarea height
var theScroll = this.getScrollSize();
var scrollHeight = theScroll.y;
this.setStyle('height', scrollHeight);
//update comment preview height
var previewScroll = previewText.getScrollSize();
var previewHeight = previewScroll.y;
if(previewHeight > orig_inputHeight){
previewText.setStyle('height','auto');
}
}
And finally, we call the appropriate function when a key is released on your keyboard:
try{
$('theName').addEvent('keyup',previewTheAuthor);
}catch(e){}
try{
$('theURL').addEvent('keyup',previewTheUrl);
}catch(e){}
$('message').addEvent('keyup',previewTheComment);
Conclusion
That's all there is to it. I kept things very simple here, but I highly recommend that you do further validtion on things – either through MooTools or thru PHP. (Or better yet, through both!) Beyond the validation, I'm sure many of you out there can improve upon the stuff above... and I welcome you to share your thoughts/ideas here!
doesn't work in Firefox 3...