“Full Screen” Wiki Editing in FogBugz

I’ve been doing a lot of writing in our FogBugz wikis of late, and I eventually found it irritating that so much of my vertical screen real estate was being eaten up by the FogBugz controls and such that take up permanent residence at the top of the screen.  So, I put together this simple Greasemonkey script that installs a full-screen toggler link in the upper-right corner of FogBugz wiki editing pages.  It should work with any standard FogBugz 6.x install — if you’ve styled your wikis significantly, or if the wiki in question is open to the community, then all bets are off (mostly because I didn’t test the thing that much!).

Normal view:

“Full Screen” view:

It’s only about 100 pixels or so, but that can be a lot when you’re doing some technical writing and are regularly scrubbing up and down a document as you go along.

Here's the full source of the GreaseMonkey script:

[sourcecode language="javascript"] // ==UserScript== // @name FogBugz - expandable wiki editor // @namespace http://snowtide.com/fogbugz // @description adds a button to fogbugz wiki editors that toggles the editor to fill the browser window; this works on fogbugz 6.x sites with default styling (although it doesn't work on the edit page you use when you first create a wiki) // @include default.?pg=pgWiki* // ==/UserScript==

// JQuery load approach from http://www.joanpiedra.com/jquery/greasemonkey/

// Add jQuery var GM_JQ = document.createElement('script'); GM_JQ.src = 'http://jquery.com/src/jquery-latest.js'; GM_JQ.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded function GM_wait() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); } else { $ = unsafeWindow.jQuery; installFullScreenToggler(); } }


function installFullScreenToggler () { var tbFullDisplayOpts = ['none', null];

// I wonder what the best way would be to reliably identify a site as a fogbugz wiki page?
var mainArea = $('#mainArea');
var tbFull = $('#tbFull')[0];

if (mainArea && tbFull) { mainArea.prepend($("<a href='#' style='float:right;display:block'>Full Screen</a>").click(function () {
tbFull.style.display = tbFullDisplayOpts[0];

// need to trigger the wiki editor's resize handler -- couldn't find a way to fire a dummy resize event
window.resizeTo(window.outerWidth, window.outerHeight + 1);
window.resizeTo(window.outerWidth, window.outerHeight - 1); }));
} } [/sourcecode]