CodeSushi

UPDATE 2: ok, this greasemonkey script is now outdated.. please use the firefox plugin instead. it has it's own url here. Everything below this point is just history now


I have recently started using sparkpeople to track my diet and exercise (we'll see how long that lasts). It's a nice site for the most part, but there are a few features I'd like to see… so instead of just begging for them through official channels, I've started to create them on my own.



The nutrition tracking page shows you your target calories, carbs, fat and protein and the number you have used for the day, but it doesn't show how many you have left of each.



Greasemonkey is a firefox add-on that allows you to install scripts that can interact with web pages as you surf them. You can use this to add additional functionality to web sites you use regularly or combine functionality from multiple websites together.



I have created a greasemonkey script that adds a “remaining” stat to the nutrition page, it looks like this:





If you have the greasemonkey add-on installed, you can click here and install the script. It should do its thing any time you are on your nutrition page.



UPDATE: I am just going to update this post as I add things to this script… I have now added some summary stuff in the side bar, it looks like this:

admin diet, firefox, greasemonkey, javascript, sparkpeople

I decided to add syntaxhighlighter to this blog's theme, so it's always available when I feel like pooping some code into a post. It's a pretty cool little deal that does a great job on fairly short code chunks. You can specify that you want the code to start out collapsed when the page loads so your readers have to click to expand the code.. I think this is a cool way to roll… sometimes I want to read about the idea before I start ogling the code. However I find it pretty annoying that once you expand the code, there is no way to collapse it again short of reloading the page… so I hacked in some code to shCore.js.



my changes only effect lines 10-18 and 27-45 in the following code fragment:

//
// Toolbar functions
//
dp.sh.Toolbar.Commands = {
	ExpandSource: {
		label: '+ expand source',
		check: function(highlighter) { return highlighter.collapse; },
		func: function(sender, highlighter)
		{
            // dan's hack for expand collapse toggle.
            var a = document.createElement("a");
            a.setAttribute('href', '#');
            a.onclick = function() {
                dp.sh.Toolbar.Command('CollapseSource',this);
                return false;
            }
            a.appendChild(document.createTextNode("- collapse source"));
            // end hack section

            sender.parentNode.insertBefore(a, sender);
			sender.parentNode.removeChild(sender);

            highlighter.div.className = highlighter.div.className.replace('collapsed', '');
		}
	},

    // dan's hack for expand collapse toggle.
    CollapseSource: {
		label: '- collapse source',
		check: function(highlighter) { return false; },
		func: function(sender, highlighter)
		{
            var a = document.createElement("a");
            a.setAttribute('href', '#');
            a.onclick = function() {
                dp.sh.Toolbar.Command('ExpandSource',this);
                return false;
            }
            a.appendChild(document.createTextNode("+ expand source"));
            sender.parentNode.insertBefore(a, sender);
			sender.parentNode.removeChild(sender);
			highlighter.div.className = highlighter.div.className + ' collapsed';
		}
	},
    // end dan's hack

there might be a better way to do this.. but I didn't see one after a brief look at the tool bar stuff… and this change suited my needs perfectly.

I also added a couple key words (def, it) to the Java “brush” so I could use it more effectively for Groovy code, which I'll be needing for my next post.

admin javascript, syntaxhighlighter