Last active
December 27, 2015 08:19
-
-
Save KZeni/7294999 to your computer and use it in GitHub Desktop.
Code adds tag cloud feature to Giant Bomb chat room (http://www.giantbomb.com/chat/). Should be able to copy & paste this into your browser's console to try it out on your own. Otherwise, let's see if this feature is added at some point.
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
// Set global variables to be used when switching between auto/manual refresh & their interactivity | |
origInitialTagCloudH = '80px'; | |
initialTagCloudH = origInitialTagCloudH; | |
// Fuction to update tag cloud... simply execute updateTagCloud() when you want a fresh cloud | |
function updateTagCloud(){ | |
// Get text from chat | |
text = ''; | |
$('#conversation-main .msg').each(function(){text+= $(this).text()+' ';}); | |
// Get word list sorted & labelled based on frequency of use | |
var words = (function(){ | |
var sWords = text.toLowerCase().trim().replace(/[,;.]/g,'').split(/[\s\/]+/g).sort(); | |
var iWordsCount = sWords.length; // count w/ duplicates | |
// array of words to ignore | |
var ignore = ['the','a','an','I','i','i\'m','it\'s','me','myself','my','we','ourselves','ourself','ours','our','you','yourself','yours','your','yourselves','y','he','him','himself','his','she','her','herself','hers','it','itself','its','they','them','em','themselves','theirs','their','aboard','about','above','absent','across','after','against','along','alongside','amid','amidst','among','amongst','around','as','aslant','astride','at','atop','barring','before','behind','below','beneath','beside','besides','between','beyond','but','by','despite','down','during','except','failing','following','for','from','in','inside','into','like','mid','minus','near','next','notwithstanding','of','off','on','onto','opposite','outside','over','past','plus','regarding','round','save','since','than','through','throughout','till','times','to','toward','towards','under','underneath','unlike','until','up','upon','via','with','within','without','anent','betwixt','circa','cum','per','qua','re','sans','unto','concerning','considering','regarding','but','except','plus','save','ago','apart','aside','away','hence','withal','and','nor','or','yet','so','both','either','neither','not','also','will','would','got','shall','should','may','might','can','could','must','have','ought','had','dare','need','do','well','still','however','nevertheless','otherwise','moreover','addition','furthermore','besides','first','second','finally','thus','anyway','then','too','while','although','though','because','unless','since','is','that','be','this','if','what','are','how','all','put','just','way','one','has','was','some','when','more','only','something','see','there','very','don','things','other','any','each','really','even','much','same','different','does','many','most','once','thats','cause','ok','here','out','ve','ll','which','http:','-',':','.','?']; | |
ignore = (function(){ | |
var o = {}; // object prop checking > in array checking | |
var iCount = ignore.length; | |
for (var i=0;i<iCount;i++){ | |
o[ignore[i]] = true; | |
} | |
return o; | |
}()); | |
var counts = {}; // object for math | |
for (var i=0; i<iWordsCount; i++) { | |
var sWord = sWords[i]; | |
if (!ignore[sWord]) { | |
counts[sWord] = counts[sWord] || 0; | |
counts[sWord]++; | |
} | |
} | |
var arr = []; // an array of objects to return | |
for (sWord in counts) { | |
arr.push({ | |
text: sWord, | |
frequency: counts[sWord] | |
}); | |
} | |
// sort array by descending frequency | http://stackoverflow.com/a/8837505 | |
return arr.sort(function(a,b){ | |
return (a.frequency > b.frequency) ? -1 : ((a.frequency < b.frequency) ? 1 : 0); | |
}); | |
}()); | |
(function(){ | |
var iWordsCount = words.length; // count w/o duplicates | |
// Assemble array containing the words & their frequency (already sorted) | |
wordArray = []; | |
for (var i=0; i<iWordsCount; i++) { | |
var word = words[i]; | |
wordArray.push([word.frequency,word.text]); | |
} | |
highestFrequency = wordArray[0][0]; // Get the highest frequency (to be used to size words) | |
//console.log(wordArray); | |
}()); | |
// Remove old tag cloud | |
$('#tag-cloud li').remove(); | |
// Populate with latest set of words | |
for (var i=0; i<wordArray.length; i++) { | |
word = wordArray[i][1]; | |
frequency = wordArray[i][0]; | |
relativeFrequency = frequency/highestFrequency; | |
if(relativeFrequency>=0.1 && word != '') // Only show if it's greater than a certain relative freqeuncy (prevents a mile long list of once-used words), and make sure the word isn't blank (comes into play when the chat's still loading) | |
$('#tag-cloud').append('<li style="font-size:'+relativeFrequency+'em;">'+word+' <em>('+frequency+')</em></li>'); | |
} | |
// Make height interactive (only show full list on hover) | |
tagCloudH = $('#tag-cloud').css('height','auto').height(); | |
$('#tag-cloud').css('height',initialTagCloudH).on({ | |
mouseenter:function(){ | |
$(this).stop().animate({height:tagCloudH},400); | |
},mouseleave:function(){ | |
$(this).stop().animate({height:initialTagCloudH},400); | |
} | |
}); | |
} | |
// Create placeholder for tag cloud | |
$('#history').prepend('<button id="auto-refresh-tag-cloud" class="btn" style="float:right;">Enable Live Cloud</button><button id="refresh-tag-cloud" class="btn btn-primary">Get Fresh Cloud</button><ul id="tag-cloud" />'); | |
// Add styles to head (done here to simplify/centralize edit) | |
$('head').append('<style>#tag-cloud { clear:both; margin:0.1em 0; font-size:4em !important; } #tag-cloud li { display:inline-block; border:none; margin:0; padding:0.2em 1em; box-shadow:none; } #tag-cloud li em { font-size:0.7em; opacity:0.2; cursor:default; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }</style>'); | |
// Initiate Tag Cloud | |
updateTagCloud(); | |
setTimeout(function(){updateTagCloud();},5000); // Refresh after chat has loaded. | |
// Refresh Tag Cloud on Button Click | |
$('#refresh-tag-cloud').on('click',function(){updateTagCloud();}); | |
// Toggle Auto-Refresh on Button Click | |
autoRefreshTagCloud = false; // Default | |
$('#auto-refresh-tag-cloud').on('click',function(){ | |
if(!autoRefreshTagCloud){ | |
tagCloudRefresh = setInterval(function(){updateTagCloud()},1000); // Refresh every second | |
$(this).text('Disable Live Cloud'); | |
autoRefreshTagCloud = true; | |
initialTagCloudH = 'auto'; // Show all of the tags | |
$('#refresh-tag-cloud').hide(); // Don't need the manual refresh anymore | |
}else{ | |
clearInterval(tagCloudRefresh); | |
$(this).text('Enable Live Cloud'); | |
autoRefreshTagCloud = false; | |
initialTagCloudH = origInitialTagCloudH; // Go back to the show/hide behavior | |
$('#tag-cloud').stop().animate({height:initialTagCloudH},400); | |
$('#refresh-tag-cloud').show(); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated it so now there's a button to enable/disable auto-refresh! Screenshot to prove it.