Skip to content

Instantly share code, notes, and snippets.

@dascgo
Created April 19, 2011 00:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save dascgo/926608 to your computer and use it in GitHub Desktop.
/*
Turn #newtwitter into a lobby kiosk!
// STEPS:
- Go to Twitter
- Sign in (in this example, as one of my test accounts dascgo_qa44, yours
will be diffent)
- Set up a search (we.rw OR wereward OR izea OR spn.tw OR socialspark)
- Run this in the FB Console:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://localhost/twitter_lobby/app.js';
head.appendChild(script);
*/
var izea = {
// set up some variables...
selected: -1,
root: "http://localhost/twitter_lobby/",
keywords: [
"spn.tw",
"we.rw",
"wereward",
"izea",
"socialspark"
],
// These will be assigned with setIntervals...
timers: {
new_tweets: false,
highlight_tweet: false,
},
// this is what is called when our script is loaded.
init: function(){
// bring in out stylesheet...
var css_url = "<link rel='stylesheet' type='text/css' href='" + izea.root + "layout.css'>";
$("head").append(css_url);
// these functions will be described as we get to them in the code...
izea.adjust_css();
izea.adjust_elements();
izea.associate_tweets();
izea.clean_out_old_tweets();
izea.highlight_tweet();
// watch for new tweets to come in.
izea.timers.new_tweets = setInterval(izea.show_new_tweets, 100);
// cycle through the tweets on the screen to "highlight" them
// (click on them to expand the right hand panel)
izea.timers.highlight_tweet = setInterval(izea.highlight_tweet, 20000);
},
// Naturally, twitter.com has it's own CSS... I need to adjust some of these
// styles to fit what I want to do.
adjust_css: function(){
$(".stream").css({
"background-color": "rgba(255, 255, 255, 0.0)",
"padding-left": "5px"
});
$("#page-outer").css("padding-top", "45px");
$("#page-container").css("overflow", "visible");
// Since this is a kiosk, turn off scrolling
// and set the background...
$("body").css({
"overflow": "hidden",
"background": "url(" + izea.root + "images/izea_bg.jpg) no-repeat top center",
"background-size": "100% 100%"
});
// This is a tricky, because a style is created based on the logged in user.
// I'm using one of my test accounts (dascgo_qa44) so I had to make sure
// the selector was pointed correctly.
$("body.user-style-dascgo_qa44 #page-container, body.user-style-dascgo_qa44 .user-sidebar-color").css("background", "none");
},
// Some things we can hide outright... also, I want to add some of
// my own elements to achieve the design I was after.
adjust_elements: function(){
// Hide some Twitter stuff
$("#top-stuff, .search-header, .search-title, .stream-tabs").hide();
$(".dashboard").html("");
// Add my stuff... the css defines the content (a bg image) of the divs
$("body").append("<div id='izea_header'></div>");
$("body").append("<div id='izea_footer'></div>");
},
// Occasionally, an element appears on the page saying there are X more
// tweets to load. Clicking this will show the new tweets. Since we are not
// available to click, we need to watch for this element to appear and click
// on it programmatically.
show_new_tweets: function(){
// If the new tweets bar is there...
if($("#new-tweets-bar").length > 0){
// See how many tweets we are currently showing
var current_length = $('.main-content .stream-item').length;
// Click to load more tweets:
$("#new-tweets-bar").click();
// See how many tweets we added...
var new_length = $('.main-content .stream-item').length;
// Adjust our cycle counter that loops through the tweets
izea.selected = izea.selected + (new_length - current_length);
// Clean out the ones that are offscreen.
izea.clean_out_old_tweets();
}
},
// Since this is running as a kiosk, should it be running for days, there
// could be thousands and thousands of elements in the DOM. As a precaution,
// I remove any that are no longer in the viewport...
clean_out_old_tweets: function(){
// First off, get rid of the promoted tweet if one loaded up...
$(".promoted-tweet").parent().remove();
var view_height = $(window).height() - $("#izea_footer").height();
$('.main-content .stream-item').each(function(index){
// We loop through all the tweets and if their offset top is greater
// than the viewable area (they are below the fold), then remove them...
// If they are viewable, we need to remove some elements from them I'm
// not interested in seeing.
if($(this).offset().top > view_height){
$(this).remove();
}else{
$(".main-content .stream-item .tweet-row:eq(2), .main-content .stream-item .tweet-row:eq(3)").hide();
}
});
// Set our index for cycling to the last tweet shown. I'm not doing a
// length - 1, because the looping function does that first thing.
if(izea.selected > $('.main-content .stream-item').length){
izea.selected = $('.main-content .stream-item').length;
}
// Put a logo by each tweet....
izea.associate_tweets();
},
// Since this tool is intented to monitor mentions of various products we
// have, I wanted to show the product logo by the tweet. This function will
// look at the text of each tweet and compare it to our keywords. If we
// match for a product, we add a div to the tweet element.
associate_tweets: function(){
// loop through each tweet shown
$('.main-content .stream-item .tweet-text').each(function(index){
// Only add the logo to the tweet if we have not yet done that.
if($('.main-content .stream-item:eq(' + index + ') .izea_icon').length == 0){
// get the tweet text
var tweet = this.innerHTML.toLowerCase();
// for each tweet, loop through our keywords
for(var i = 0, l = izea.keywords.length; i < l; i++){
// is that keyword in the tweet?
if(tweet.indexOf(izea.keywords[i]) > -1){
// we found a keyword in the tweet text so create a div with a
// background image that aligns with the keyword
var div = "<div class='izea_icon' style='background: url(" + izea.root + "images/brands/" + izea.keywords[i] + ".png) top left no-repeat; background-size: 100%;'></div>";
// add that div to the dom
$('.main-content .stream-item:eq(' + index + ')').append(div);
continue;
}
}
}
});
},
// Clicking on a tweet will give your more information about the Tweeter,
// the content, etc. We want to take advantage of this so we need to "click"
// on a tweet to see this. This function is called every X seconds.
highlight_tweet: function(){
// set our next index
izea.selected = izea.selected - 1;
if(izea.selected < 0){
izea.selected = $('.main-content .stream-item').length - 1;
}
// One of the tweets should be faded out a bit, so let's just
// turn the opacity back up to 1.0 for all tweets so we don't need
// to remember the last clicked on tweet.
$(".main-content .stream-item").css("opacity", "1.0");
// Set the opacity of the one we want selected to 0.5
$(".main-content .stream-item:eq(" + izea.selected + ")").css("opacity", "0.5").click();
// The panel that comes up has a few elements we can hide, let's do so:
$(".pane-toolbar").hide();
$(".pane-components").css("overflow", "hidden");
$(".main-content .stream-item .tweet-actions").hide();
// Sometimes the panel is not open all the way... this ensures.
$(".details-pane").css("left", "540px !important");
}
};
// Fire off the script:
izea.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment