2 * jQuery Twitter Search Plugin
3 * Examples and documentation at: http://jquery.malsup.com/twitter/
4 * Copyright (c) 2010 M. Alsup
5 * Version: 1.04 (15-SEP-2011)
6 * Dual licensed under the MIT and GPL licenses:
7 * http://www.opensource.org/licenses/mit-license.php
8 * http://www.gnu.org/licenses/gpl.html
9 * Requires: jQuery v1.3.2 or later
13 $.fn.twitterSearch = function(options) {
14 if (typeof options == 'string')
15 options = { term: options };
16 return this.each(function() {
19 $frame = $(this), text, $text, $title, $bird, $cont, height, paused = false,
20 opts = $.extend(true, {}, $.fn.twitterSearch.defaults, options || {}, $.metadata ? $frame.metadata() : {});
22 opts.formatter = opts.formatter || $.fn.twitterSearch.formatter;
23 opts.filter = opts.filter || $.fn.twitterSearch.filter;
25 if (!opts.applyStyles) { // throw away all style defs
26 for (var css in opts.css)
30 if (opts.title === null) // user can set to '' to suppress title
31 opts.title = opts.term;
33 opts.title = opts.title || '';
34 text = opts.titleLink ? ('<a href="'+ opts.titleLink +'">'+ opts.title + '</a>') : ('<span>' + opts.title +'</span>');
37 $text.css(opts.css['titleLink']);
38 $title = $('<div class="twitterSearchTitle"></div>').append($text).appendTo($frame).css(opts.css['title']);
40 $bird = $('<img class="twitterSearchBird" src="'+opts.birdSrc+'" />').appendTo($title).css(opts.css['bird']);
42 $bird.wrap('<a href="'+ opts.birdLink +'"></a>');
44 $cont = $('<div class="twitterSearchContainter"></div>').appendTo($frame).css(opts.css['container']);
46 if (opts.colorExterior)
47 $title.css('background-color',opts.colorExterior);
48 if (opts.colorInterior)
49 $cont.css('background-color',opts.colorInterior);
51 $frame.css(opts.css['frame']);
52 if (opts.colorExterior)
53 $frame.css('border-color',opts.colorExterior);
55 height = $frame.innerHeight() - $title.outerHeight();
59 $cont.hover(function(){paused = true;},function(){paused = false;});
61 $('<div class="twitterSearchLoading">Loading tweets..</div>').css(opts.css['loading']).appendTo($cont);
65 function grabTweets() {
66 var url = opts.url + opts.term;
69 // grab twitter stream
73 error: function(xhr, status, e) {
76 complete: function() {
78 if (opts.refreshSeconds)
79 setTimeout(regrab, opts.refreshSeconds * 1000);
81 success: function(json) {
83 failWhale(json.error);
86 $cont.fadeOut('fast',function() {
89 // iterate twitter results
90 $.each(json.results, function(i) {
91 if (!opts.filter.call(opts, this))
92 return; // skip this tweet
94 tweet = opts.formatter(this, opts),
96 $tweet.css(opts.css['tweet']);
97 $img = $tweet.find('.twitterSearchProfileImg').css(opts.css['img']);
98 $tweet.find('.twitterSearchUser').css(opts.css['user']);
99 $tweet.find('.twitterSearchTime').css(opts.css['time']);
100 $tweet.find('a').css(opts.css['a']);
101 $tweet.appendTo($cont);
102 $text = $tweet.find('.twitterSearchText').css(opts.css['text']);
104 w = $img.outerWidth() + parseInt($tweet.css('paddingLeft'));
105 $text.css('paddingLeft', w);
109 $cont.fadeIn('fast');
111 if (json.results.length < 2) {
112 if (opts.refreshSeconds)
113 setTimeout(grabTweets, opts.refreshSeconds * 1000);
117 // stage first animation
118 setTimeout(go, opts.timeout);
128 function failWhale(msg) {
129 var $fail = $('<div class="twitterSearchFail">' + msg + '</div>').css(opts.css['fail']);
130 $cont.empty().append($fail);
134 if (paused || grabbing) {
138 var h, $el = $cont.children(':first'), el = $el[0];
139 $el.animate(opts.animOut, opts.animOutSpeed, function() {
140 h = $el.outerHeight();
141 $el.animate({ marginTop: -h }, opts.animInSpeed, function() {
142 $el.css({ marginTop: 0, opacity: 1 });
144 try { el.style.removeAttribute('filter'); } // ie cleartype fix
147 $el.css(opts.css['tweet']).show().appendTo($cont);
149 setTimeout(grabFlag ? grabTweets : go, opts.timeout);
156 $.fn.twitterSearch.filter = function(tweet) {
160 $.fn.twitterSearch.formatter = function(json, opts) {
164 text = json.text.replace(/(http:\/\/\S+)/g, '<a href="$1">$1</a>');
165 text = text.replace(/\@(\w+)/g, '<a href="http://twitter.com/$1">@$1</a>');
167 str = '<div class="twitterSearchTweet">';
169 str += '<img class="twitterSearchProfileImg" src="' + json.profile_image_url + '" />';
170 str += '<div><span class="twitterSearchUser"><a href="http://www.twitter.com/'+ json.from_user+'/status/'+ json.id_str +'">'
171 + json.from_user + '</a></span>';
172 pretty = prettyDate(json.created_at);
173 if (opts.time && pretty)
174 str += ' <span class="twitterSearchTime">('+ pretty +')</span>'
175 str += '<div class="twitterSearchText">' + text + '</div></div></div>';
179 $.fn.twitterSearch.defaults = {
180 url: 'http://search.twitter.com/search.json?callback=?&q=',
181 anchors: true, // true or false (enable embedded links in tweets)
182 animOutSpeed: 500, // speed of animation for top tweet when removed
183 animInSpeed: 500, // speed of scroll animation for moving tweets up
184 animOut: { opacity: 0 }, // animation of top tweet when it is removed
185 applyStyles: true, // true or false (apply default css styling or not)
186 avatar: true, // true or false (show or hide twitter profile images)
187 bird: true, // true or false (show or hide twitter bird image)
188 birdLink: false, // url that twitter bird image should like to
189 birdSrc: 'http://cloud.github.com/downloads/malsup/twitter/tweet.gif', // twitter bird image
190 colorExterior: null, // css override of frame border-color and title background-color
191 colorInterior: null, // css override of container background-color
192 filter: null, // callback fn to filter tweets: fn(tweetJson) { /* return false to skip tweet */ }
193 formatter: null, // callback fn to build tweet markup
194 pause: false, // true or false (pause on hover)
195 refreshSeconds: 0, // number of seconds to wait before polling for newer tweets
196 term: '', // twitter search term
197 time: true, // true or false (show or hide the time that the tweet was sent)
198 timeout: 4000, // delay betweet tweet scroll
199 title: null, // title text to display when frame option is true (default = 'term' text)
200 titleLink: null, // url for title link
203 a: { textDecoration: 'none', color: '#3B5998' },
204 bird: { width: '50px', height: '20px', position: 'absolute', left: '-30px', top: '-20px', border: 'none' },
205 container: { overflow: 'hidden', backgroundColor: '', height: '600px', width: '170px' },
206 fail: { background: '#6cc5c3 url(http://cloud.github.com/downloads/malsup/twitter/failwhale.png) no-repeat 50% 50%', height: '100%', padding: '10px' },
207 frame: { border: '0px solid #C2CFF1', borderRadius: '0px', '-moz-border-radius': '0px', '-webkit-border-radius': '0px' },
208 tweet: { padding: '5px 10px', clear: 'left' },
209 img: { 'float': 'left', margin: '5px', width: '48px', height: '48px' },
210 loading: { padding: '20px', textAlign: 'center', color: '#888' },
212 time: { fontSize: 'smaller', color: '#888' },
213 title: { 'display': 'none'},
214 titleLink: { textDecoration: 'none', color: '#3B5998' },
215 user: { fontWeight: 'bold' }
219 // fn to handle jsonp with timeouts and errors
220 // hat tip to Ricardo Tomasi for the timeout logic
221 $.getJSONP = function(s) {
222 s.dataType = 'jsonp';
225 // figure out what the callback fn is
226 var $script = $(document.getElementsByTagName('head')[0].firstChild);
227 var url = $script.attr('src') || '';
228 var cb = (url.match(/callback=(\w+)/)||[])[1];
231 var t = 0, cbFn = window[cb];
233 $script[0].onerror = function(e) {
235 handleError(s, {}, "error", e);
242 window[cb] = function(json) {
248 t = setTimeout(function() {
250 handleError(s, {}, "timeout");
252 window[cb] = function(){};
255 function handleError(s, xhr, msg, e) {
256 s.error && s.error.call(s.context, xhr, msg, e);
257 s.global && $.event.trigger("ajaxError", [xhr, s, e || msg]);
258 s.complete && s.complete.call(s.context, xhr, e || msg);
263 * JavaScript Pretty Date
264 * Copyright (c) 2008 John Resig (jquery.com)
265 * Licensed under the MIT license.
267 // converts ISO time to casual time
268 function prettyDate(time){
269 var date = new Date((time || "").replace(/-/g,"/").replace(/TZ/g," ")),
270 diff = (((new Date()).getTime() - date.getTime()) / 1000),
271 day_diff = Math.floor(diff / 86400);
273 if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
275 var v = day_diff == 0 && (
276 diff < 60 && "just now" ||
277 diff < 120 && "1 minute ago" ||
278 diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
279 diff < 7200 && "1 hour ago" ||
280 diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
281 day_diff == 1 && "Yesterday" ||
282 day_diff < 7 && day_diff + " days ago" ||
283 day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
285 window.console && console.log(time);