Twitter search serverless

by Danish Farman

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">
    <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?q=' + search).done(function(data) {
                var template = Handlebars.compile($('#entry-template').html())
                var content = template({
                    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())
})