Twitter search serverless
HTML
<script src="https://oauth.io/auth/download/latest/oauth.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<div id="connect">
<button class="btn btn-primary" id="btn-connect">Connect with twitter</button>
<p>If nothing happen after the connexion, it's maybe because the twitter rate limit exceeded</p>
</div>
<div id="res">
<div class="input-group">
<input type="text" class="form-control" value="@oauth.io" id="search" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="btn-search">Search</button>
</span>
</div>
<div id="search-res"></div>
</div>
<script id="entry-template" type="text/x-handlebars-template">
Total: {{count}}
<ul id="timeline">
{{#each statuses}}
<li>
<img class="thumbnail" src="{{user.profile_image_url}}" />
<span class="content">
<span class="author">{{user.name}}</span>
<span class="text">{{link text}}</span>
</span>
</li>
{{/each}}
</ul>
</script>
CSS
#connect { text-align: center; padding-top: 15px}
#connect p {color: #AAA; margin-top: 20px}
#res { display: none; width: 500px; margin: 0 auto; margin-top: 30px; }
#timeline { list-style-type: none; padding: 15px 10px; }
#timeline li { clear: left; margin-bottom: 10px; padding-bottom: 10px; min-height: 70px; border-bottom: 1px solid #EEE }
#timeline li .thumbnail { float: left; position: relative; left: -10px }
#timeline li .content { display: block; margin-left: 15px; margin-top: 5px }
#timeline li .author { font-weight: bold; display: block }
JavaScript
$('#btn-connect').click(function() {
//Initialize the SDK with my OAuth.io public key, then display the OAuth authorization form
OAuth.initialize('oEcDIQahkO4TUAND-yTs-H6oY_M')
OAuth.popup('twitter', function(err, twitter) {
//hide the connect and show the search form
$('#connect').slideUp('fast')
$('#res').slideDown('fast')
//when click on the search button, make the search on Twitter and display the result
$('#btn-search').click(function() {
var search = encodeURIComponent($('#search').val())
twitter.get('/1.1/search/tweets.json?count=100&q=' + search).done(function(data) {
var template = Handlebars.compile($('#entry-template').html())
var content = template({
count: data.statuses.length,
statuses: data.statuses
})
$('#search-res').html(content)
})
})
$('#btn-search').click()
})
})
//replace URL by html link
Handlebars.registerHelper('link', function(text) {
var exp = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig
var exp2 = /(@[A-Za-z0-9]+)/ig
return new Handlebars.SafeString(text.replace(exp,'<a href="$1">$1</a>').replace())
})