This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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