[CB] Live Preview v1

[Peter]

What this script does is provides you with a live preview of what your reply will look like. Just above the reply box where you type out your message, there will be a new row called "Live Preview:", as soon as you start typing, it will display what your post will look like once you have submitted. It supports smileys and most of the UBBC tags (except for glow, marquee and shadow).

Works in IE and FF.

This script is more suited to forums that don't have people posting large posts, otherwise you will find that it may start to lag while it is parsing the tags.

Add to global footer.

<script type="text/javascript">
<!--

// Created by PopThosePringles


var smileysObj = new Object();

var iRegSmileys = [
    /\s:\)/g, /\s;\)/g, /\s:D/g, /\s;D/g, /\s>:\(/g, /\s:\(/g, /\s:o/g, /\s8\-\)/g, /\s\?\?\?/g,
    /\s::\)/g, /\s:P/g, /\s:-\[/g, /\s:\-X/g, /\s:\-\//g, /\s:\-\*/g, /\s:\'\(/g
];

var iRegUBBC = [
    [/\[(\/)?(b|i|u|s|sup|sub)\]/gim, "<$1$2>"],
    [/\[(\/)?(hr|pre|blockquote)\]/gim, "<$1$2>"],
    [/\[(left|center|right)\]/gim, "<div align='$1'>"],
    [/\[\/(left|center|right)\]/gim, "</div>"],
    [/\[url=(http:\/\/)?(.*?)\](.*?)\[\/url\]/gim, "<a href=\"http://$2\">$3</a>"],
    [/\[url\]((\[\w+\])*)((http:\/\/)?(.*?)((\[\/\w+\])*))\[\/url\]/gim, "<a href=\"http://$5\">$1$4$6</a>"],
    [/\[email\]((\[\w+\])*)(.*?)((\[\/\w+\])*)\[\/email\]/gim, "<a href=\"mailto:$3\">$1$3$4</a>"],
    [/\[img\](.*?)\[\/img\]/gim, "<img src=\"$1\" border=\"0\" />"],
    [/\[size=(\d+)\]/gim, "<font size=\"$1\">"],
    [/\[\/size\]/gim, "</font>"],
    [/\[color=(\#[0-9A-F]{6}|[a-z]+)\]/gim, "<span style=\"color: $1;\">"],
    [/\[font=(.*?)\]/gim, "<span style=\"font-family: $1;\">"],
    [/\[\/(font|color)\]/gim, "</span>"],
    [/\[table\]/gim, "<table border='1'>"],
    [/\[(\/table|\/?tr|\/?td)\]/gim, "<$1>"],
    [/\[quote\]/gim, '<br /><b>Quote:</b><table class="bordercolor" cellspacing="1" width="90%"><tr><td width="100%"><table class="quote" cellpadding="2" cellspacing="0" width="100%"><tr><td width="100%"><font class="quote" face="Arial,Helvetica" size="1">'],
    [/\[\/quote\]/gim, "</font></td></tr></table></td></tr></table>"],
    [/\[list\]/gim, "<ul><br />"],
    [/\[\/list]/gim, "</ul>"],
    [/\[\*\]/gim, "<li>"],
    [/\[\/*\]/gim, "<br /></li>"],
    [/\[code\]/gim, '<blockquote><b>Code:</b><table class="bordercolor" cellspacing="1" width="90%"><tr><td><table class="code" cellpadding="2" cellspacing="0" width="100%"><tr><td><font class="code" face="Courier New" size="2">'],
    [/\[\/code\]/gim, "</font></td></tr></tbody></table></td></tr></tbody></table></blockquote>"]
];

String.prototype.htmlentities = function(){
    var iTemp = this;

    if(this){
        for(m = 0; m < this.length; m ++){
            switch(this.charCodeAt(m)){
                case 60 :
                    iTemp = iTemp.replace(this.charAt(m), "&lt;");
                    break;
                case 62 :
                    iTemp = iTemp.replace(this.charAt(m), "&gt;");
                    break;
            }
        }
    }
    return iTemp.replace(/\n/g, "<br />");
}

String.prototype.str_replace = function(){
    var pDiv = document.getElementById("livepreview");
    if(this && arguments.length == 2){
        if(new RegExp(arguments[0]).exec(this)){
            pDiv.innerHTML = this.replace(arguments[0], arguments[1]);
        }
    }
}

String.prototype.parse = function(){
    var pDiv = document.getElementById("livepreview");
    var noUBBCRe = /\[noubbc\](.*?)\[\/noubbc\]/gim;

    if(this.match(noUBBCRe)){
        var inPat = RegExp.$1.replace(/\]/g, "<font>]</font>");
        pDiv.innerHTML = pDiv.innerHTML.replace(noUBBCRe, inPat);
    }

    for(s = 0; s < iRegSmileys.length; s ++){
        if(new RegExp(iRegSmileys).test(this)){
            pDiv.innerHTML = pDiv.innerHTML.replace(new RegExp(iRegSmileys), ' <img src="' + smileysObj.has[0] + '" border="0" />');
        }
    }

    for(r = 0; r < iRegUBBC.length; r ++){
        if(iRegUBBC[r][0].test(this)){
            pDiv.innerHTML.str_replace(iRegUBBC[r][0], iRegUBBC[r][1]);
        }
    }
}

function grabSmileys(obj){
    if(obj){
        var smileys = [];
        var iImg = obj.getElementsByTagName("img");

        for(i = 0; i < iImg.length; i ++){
            if(iImg.item(i).parentNode.href){
                if(iImg.item(i).parentNode.href.match(/add\("%20(.*?)"\)/i)){
                    smileys.push([iImg.item(i).src, RegExp.$1]);
                }
            }
        }
        smileysObj.has = smileys;
    }
}

function doLiveRow(){
    var iFont = document.createElement("font");
    var iPTxt = document.createTextNode("Live Preview:");
    var iCell = document.getElementsByTagName("td");

    iFont.size = "2";
    iFont.appendChild(iPTxt);

    for(c = 0; c < iCell.length; c ++){
        if(iCell.item(c).className == "windowbg2" && iCell.item(c).width == "30%" && iCell.item(c).innerHTML.match(/Add Smilies:/)){
            grabSmileys(iCell.item(c + 1));
            var rowNum = (iCell.item(c).parentNode.rowIndex + 1);
            var nRow = iCell.item(c).parentNode.parentNode.insertRow(rowNum);
            var nCell = nRow.insertCell(0);
            nCell.className = "windowbg2";
            nCell.appendChild(iFont);
            nCell = nRow.insertCell(1);
            nCell.className = "windowbg2";
            nCell.id = "livepreview";
        }
    }
}

function livePreview(){
    var pDiv = document.getElementById("livepreview");

    pDiv.innerHTML = document.postForm.message.value.htmlentities();
    pDiv.innerHTML.parse();
    pDiv.innerHTML.parse(); // IE fix
}

if(document.postForm && document.postForm.message){
    doLiveRow();
    document.postForm.message.onkeyup = livePreview;
    document.postForm.message.onfocus = livePreview;
}

//-->
</script>

I'm sure there will be problems with this due to the amount of patterns being used. Let me know if you do come across a bug or something