AmplifyJS Demo: Multiple subscribers

Multiple subscribers to the same topic

by cillay

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/redmond/jquery-ui.css">
<script src="https://raw.github.com/appendto/amplify/master/core/amplify.core.js"></script>
<div id="input">
    <input id="txtUsername" type="text" value="TriNUG" class="ui-corner-all" />
    <button id="btnGetTweets" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Get Tweets</button>
</div>
<div id="output"></div>
<div id="details"></div>

CSS

body {
    padding: 20px;
    font: normal 0.85em 'Segoe UI', Verdana, Arial, sans-serif;
}

#output li {
    border: 1px solid cornflowerblue;
    padding: 10px;
    margin-top: 15px;
}

button {
    font-size: bold 16px 'Segoe UI', Verdana !important;
    padding: 4px !important;
    height: 31px;
    position: relative;
    top: 1px;
}

#output {
    display: block;
    width: 75%;
    float: left;
}

#details {
    border: 1px solid cornflowerblue;
    padding: 10px;
    margin-top: 15px;
    display: block;
    width: 20%;
    float: right;
    min-height: 250px;
    display: none;
}

#details p {
    font-size: 1.15em;
    font-weight: bold;
}

#txtUsername {
    height: 28px;
    line-height: 24px;
    margin-top: 4px;
    background-image: url('http://a0.twimg.com/profile_images/1884991115/at-sign_mini.png');
    background-clip: border-box;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 3px 3px;
    padding-left: 26px;
    font: normal 24px Arial, sans-serif;
    color: #333;
    display: inline-block;
    position: relative;
    top: 2px;
}
#output li {
  /* fallback */
  background-color: #FAFAFF;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9E4FF), to(#FDFDFF));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #C9E4FF, #FDFDFF);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #C9E4FF, #FDFDFF);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #C9E4FF, #FDFDFF);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #C9E4FF, #FDFDFF);
}

JavaScript

/* FORM
 ****************************************************************************************/
$(function() {
    $('#btnGetTweets').bind('click', function() {
        amplify.publish('UserSelected', $('#txtUsername').val());
    });
});
        
/* DATA
 ****************************************************************************************/
$(function() {
    var getTwitterUrl = function(user) {            
        return 'http://twitter.com/status/user_timeline/' + user + ".json?callback=?";
    };
    var getTweets = function(user) { 
        $.getJSON(getTwitterUrl(user), function(data) {
            amplify.publish('Tweets', data);
        });
    };
    amplify.subscribe('UserSelected', function(user) {
        getTweets(user);
    });
});
        
/* PRESENTATION
 ****************************************************************************************/
$(function() {
    var showTweets = function(tweets) {
        var tweetList = $('<ul>');
        $.each(tweets, function(index, item) {
            $('<li>', { "html" : item.text }).addClass('ui-corner-all').appendTo(tweetList);
        });
        $('#output').fadeOut(300, function() {
            $(this).empty().append(tweetList).fadeIn(900);
            amplify.publish('TweetsRendered', tweetList.children());             
        });
    };
    amplify.subscribe('Tweets', function(tweets) {
        showTweets(tweets);
    });
});
        
/* DECORATION
 ****************************************************************************************/
$(function() {
    var prettifyTweets = function(tweetElements) {
        $.each(tweetElements, function(index, item) {
            var html = $(item).html(); 
            html = linkify(html);
            html = twitterize(html);
            $(item).prepend(html);
        });
    };
    var linkify = function(text) {
        var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return text.replace(exp,"<a href='$1'...