“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:

// ==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(); }
}

GM_wait();

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];
            tbFullDisplayOpts.reverse();

            // 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);
        }));
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s