Greasemonkey

After Aaron pointed me towards twilog.org, I got interested in changing the way twitter looks to me, but without going via a third-party site and the API. The answer of course is Greasemonkey!

Here is version 0.01 of my script to change the way twitter looks. At the moment, it doesn't do very much! A lot of the work is in there, just a few changes and tweaks needed and it should be up and running though!

Version 0.01 of the code is attached to this page, but have a look at it too:

// ==UserScript==
// @name           Twitter - Twilog.org
// @namespace      http://eoinbailey.com/greasemonkey
// @description    Make twitter look better - more like twilog.org
// @include        http://twitter.com/
// ==/UserScript==
/*
TODO: Show the number of tweets per day
*/

var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";


var twitterTimeWords = new Array("about", "less than");
var previousPostDay = -1;

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle(
'body {' +
'  font-family: calibri, sans-serif, cursive ! important;' +
'   font-size: 13px !important;' +
'}' +
'.listable {' +
'   display: none !important;' +
'}' +
'.status-body {' +
'   margin-left: 10px !important;' +
'   width: 470px !important;' +	
'}' +
'.entry-meta span {' +
'    display: none !important;' +
'}' +
'.entry-meta span.published {' +
'    display: inline !important;' +
'}'+
'.dayHeader {' +
'    background-color: #F4E5BE !important;' +
'    padding: 4px 4px 4px 14px;' +
'    border-top: solid 1px black;' +
'    border-bottom: solid 1px black;' +
'}' +
'.dayHeader li:hover {' +
'    background-color: #F4E5BE !important;' +
'}');

/*
The first element that you find on the page with the code below is the current status message
It is partially hidden, which is why you don't see it on the page so need to ignore the first
result.

Find all the time elements on the page - in the order they appear on the page.
Have to work out if they are the current day... yesterday... etc...
*/
var allPublishedTimeElements, thisPublishedTimeElement;
allPublishedTimeElements = document.evaluate(
    "//span[@class='published']",
    document,
    null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null);
for (var i = 1; i < allPublishedTimeElements.snapshotLength; i++) {
    thisPublishedTimeElement = allPublishedTimeElements.snapshotItem(i);
	var timeSincePost = thisPublishedTimeElement.innerHTML;

	var x = orderPost(timeSincePost,thisPublishedTimeElement);

	thisPublishedTimeElement.innerHTML = x; //timeSincePost;
}

/*
 Determines where the post should be ordered on the page

less than XX seconds ago
a minute ago
XX minutes ago
XX hours ago
5:26 PM Aug 15th
12:08 AM Aug 1st
*/
function orderPost(postTime, tweetID) {
	// Remove the word ago.. if it's there
	// assumption is that 'ago' is always the last word if it is there
	// That may not be true!
	var agoIndex = postTime.indexOf("ago");
	if (agoIndex != -1) {
		postTime = postTime.substring(0, agoIndex-1);
	}
	
	for (var j = 0; j < twitterTimeWords.length; j++) {
		if (postTime.indexOf(twitterTimeWords[j]) != -1) {
			// this tweet does have one of the twitter time words in it.
			postTime = postTime.substr(twitterTimeWords[j].length+1);
		}
	}
	var d = new Date();
	var currentEpochTime = d.getTime();
	var postEpochTime = currentEpochTime;

	// TODO
	// have to deal with seconds too...
	
	if (postTime.indexOf("minute") != -1) {
		// TODO
		// Have to check for 'a minute' - stupid
		postEpochTime = currentEpochTime - postTime.substring(0, postTime.indexOf("minute")-1)*60*1000;
//		myDate = new Date(postEpochTime);
//		return checkTime(myDate.getHours())+":"+checkTime(myDate.getMinutes());
	}
	else if (postTime.indexOf("hour") != -1) {
		postEpochTime = currentEpochTime - postTime.substring(0, postTime.indexOf("hour")-1)*60*60*1000;	
	}
	
	var myDate = new Date(postEpochTime);

	if (previousPostDay != myDate.getDate()) {
		// We have changed day...
		// TODO: Add a new element that shows which day these tweets were posted on.
		previousPostDay = myDate.getDate();
	
/*		var content = tweetID.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML;
		var dayHeader = '
Posted on '+month[myDate.getMonth()]+' '+previousPostDay+' '+myDate.getFullYear()+'
';
		tweetID.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML = dayHeader+content;*/
	}
		
	return checkTime(myDate.getHours())+":"+checkTime(myDate.getMinutes());
}


function checkTime(i) {
	if (i<10) {
  		i="0" + i;
  	}
	return i;
}

// END OF FILE