[JavaScript] Format Code on VBForums (Greasemonkey/tampermonkey)

[kfcSmitty]

I've been getting annoyed with how many people don't wrap their code in the code tags on the forum, so I wrote a quick script to handle that.

This has not been tested anywhere but vbforums, and only works in Chrome and Firefox using Tampermonkey(Chrome) or Greasemonkey(Firefox).


What it does:

The code just adds a red box to the top left corner of your screen, so it is out of the way of everything on vbforums. When you click the red box, it will go green, which means the functions is available.

When the box is green, simply highlight the text you want to wrap in a code tag and it will format it properly. When done adding code tags, click the green box and it will go red.

Example:

Before:
*

After:

// ==UserScript==
// @name       Format Code sections
// @namespace  http://vbforums.com
// @version    0.1
// @description  Add code tags around selected text
// @match      http://www.vbforums.com/showthread.php?*
// @copyright  2012+, You
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// ==/UserScript==

var codeOriginals = {};
var enabled = false;

$('body').append('<div id="enableCodeSelection" style="background-color: red; width: 15px; height: 30px; z-index: 9999; position: fixed; top: 100px; left: 0px;"></div>');

$("#enableCodeSelection").click(function(e){
	if(enabled){
		enabled = false;
		$(this).css("background-color", "red");
	}else{
		enabled = true;
		$(this).css("background-color", "green");
	} //end if
});

$(window).mouseup(function (e){
    if(enabled){
        var selection = getSelectionHtml();
        var selectedText = "";
        var selectionParent;
        
        if (typeof window.getSelection != "undefined") {
            selectedText = $(selection).html();
            selectionParent = window.getSelection().anchorNode.parentElement;
        } //end if
    
        if(selectedText != ""){
            var parentText = $(selectionParent).html();
            var id = (new Date).getTime().toString();
            codeOriginals[id] = selectedText;
            
            var wrapperStart = '<div class="bbcode_container"><div class="bbcode_description">Code: (<a href="" id="' + id + 
                '" class="removeCodeStyle">Remove</a>)</div><pre class="bbcode_code" style="max-height: 372px;">';
            var wrapperEnd = '</pre></div>'
    
            var newText = wrapperStart + selectedText + wrapperEnd;
            
            //if you're inside a code element and trying to add another
            if(selectionParent.className.indexOf("postcontent") == -1){
                if(selectedText.indexOf(wrapperStart) == -1 && selectedText.indexOf(wrapperEnd) == -1){
                    return;
                } //end if
            } //end if
            
            //don't let the user select over a code window.
            if(selectedText.indexOf(wrapperStart) > -1 && selectedText.indexOf(wrapperEnd) > -1){
                return;
            } //end if
     
            $(selectionParent).html(parentText.replace(selectedText, replaceBreaks(newText)));
    
            $('.removeCodeStyle').click(function (ev){
                ev.preventDefault();
                ev.stopPropagation();
    
               $(this).closest(".bbcode_container").before(codeOriginals[$(this).attr("id")]);
               $(this).closest(".bbcode_container").remove(); 
                
               delete codeOriginals[$(this).attr("id")];
            });
            
            window.getSelection().removeAllRanges();
            
        } //end if
    } //end if
});

function replaceBreaks(selectedText){
	selectedText = selectedText.replace(/<br>/g,"").replace(/<br \/>/g,"");

    return selectedText;
} //end function

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container;
        } //end if
    } //end if
    return html;
}