jquery.tweetbox

version 0.1.0

A user input for composting tweets with customizable #Hashtag, @Mention and URL highlighting.

Installation

<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/rangy-core.js" type="text/javascript"></script>
<script src="/path/to/rangy-textrange.js" type="text/javascript"></script>
<script src="/path/to/jquery.scrollfade.js"></script>

Usage

First draw a div:

<div id="compose">
default content on #this thing.
</div>

Then use the jquery plugin:

$('#compose').tweetbox({css:{padding:'10px'}});

Also add your CSS classes

.mention{color:red;background-color:rgba(255,0,0,.04);}
.hashtag{color:blue;background-color:rgba(0,0,255,.04);}
.url{color:green;background-color:rgba(0,255,0,.04);text-decoration:underline;}
div.tweet-box-bottom{background-color:#5facdd;}
button.tweet-box-button{
	background-color:#81c0e9;
	border:1px solid #3990cd;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	color:white;
	font-weight:bold;
}
div.tweet-box-info{
	font-size:12px;
	color:rgba(255,255,255,.8);
}

Configuration Variables

cb callback function for submission
css CSS to apply to the editor
default default content, good for replies (if not specified in HTML)
postfix add content to an end of a tweet, reduces available characters
limit change the twitter character limit (from 140)
highlight regular expressions matching content and what span[class] they get
action specify if it is a tweet or retweet
button hash for button text key being the action

Using Configuration

$('.compose').tweetbox({
  css:{
	color:'#888'
  },
  postfix:' #tweetrm'
});

Some other useful methods:

//trigger highlighting refresh
$('.window').tweetbox('highlight');

//change info next to the submit button
$('.window').tweetbox('info','start typing!');

Useful CSS Classes

tweet-box-editable
tweet-box-button
tweet-box-info
tweet-box-bottom

Browser Support

New Chrome and Mozilla supported. IE does work, it just doesn't highlight anything..

Known Bugs

When doing newlines sometimes creates unexpected behavior.

Todo

IE highlighting
better testing & support

-Greg Bate

gdbate/jquery-tweetbox