[CB] Style Tags v2.1.2

[Bennett 🚀]

Found a bug?
If you ever find a bug, please PM me about it. I'll fix it up as soon as I can!

UPDATE:
This newest version has a new "predictive" style tag conversion so you don't have to do it yourself! Of course, if you turn that off, the user can still convert them themselves when posting!

Global Footer

<style>
.nospaces br { display: none; }
</style>
<script type="text/javascript">
/********
Style UBBC Tags v2.1.2
Coded by iPokemon
Special thanks to Eton Bones and Wormopolis
Eton: For helping with optimization
Wormopolis: For being an awesome guy and letting me bounce ideas off of him
Do not repost or claim as your own
*********/

/***** Edit Below Here *****/

var protectedClasses = [".class1","#id",".class3:hover"]; //user-defined protected classes
var showQuickReply = true; //show quick reply buttons; true = yes, false = no
var customClass = "windowbg2"; //post form or modify form
var customClass2 = "windowbg"; //quick reply area
var predictive = true; //true = convert old style tags when posting or modifying, false = leave old tags alone but make them work

/***** Edit Above Here *****/

var pbClasses = /^(\.windowbg|\.windowbg2|\.titlebg|\.catbg|\.cattext|\.titletext|\.nav|\.hr|\.bordercolor|\.quote|\.code|\.menubg|\.newstitlebg|\.forumjump|\.pagedropmenu)/;
function inArray(v,a){
for(w=0;w<a.length;w++){ if(a[w] == v) return true; } return false;
}
function curlyBrackets(){
var text = document.getElementsByName("message")[0].value;
text = text.replace(/\{div\}/g,"[div]").replace(/\{\/div\}/g,"[/div]").replace(/\{nospaces\}/g,"[nospaces]").replace(/\{\/nospaces\}/g,"[/nospaces]").replace(/\{div\s(.+?)\}/g,"[div $1]");
document.getElementsByName("message")[0].value=text;
}
function post_converter(){
var text = document.getElementsByName("message")[0].value;
text = text
.replace(/newclass=\.\./gi,"newclass=")
.replace(/newclass=\./gi,"newclass=")
.replace(/\[classy=(.+?)\]/gi,"[div class=\"$1\"]")
.replace(/\[\/classy\]/gi,"[/div]")
.replace(/&{1}#0*91;/g,"[")
.replace(/&{1}#0*93;/g,"]")
.replace(/\[style=(.+?)\]/gi,"[div style=\"$1\"]")
.replace(/\[\/style\]/gi,"[/div]")
.replace(/\[newclass=(.+?)\]/gi,"[newclass=.$1]")
.replace(/&{1}quot;/g,'"');
document.getElementsByName("message")[0].value = text;
}
function board_converter(text){
text = text
.replace(/\[classy=(.+?)\]/gi,"[div class=\"$1\"]")
.replace(/\[\/classy\]/gi,"[/div]")
.replace(/\[style=(.+?)\]/gi,"[div style=\"$1\"]")
.replace(/\[\/style\]/gi,"[/div]")
.replace(/\[newclass=(.+?)\]/gi,"[newclass=.$1]");
return text;
}
if(document.postForm || document.modifyForm){
if(predictive) post_converter();
var sub = document.getElementsByName("message")[0].parentNode.parentNode.parentNode.nextSibling;
var clo = sub.cloneNode(true);
clo.id = "style-tags-tr";
clo.firstChild.className = customClass;
clo.firstChild.id = "style-tags";
clo.firstChild.firstChild.innerHTML = "Style Tags:";
clo.firstChild.nextSibling.innerHTML = "<input type='button' onclick='post_converter();' value='Converter' />  <input type='button' onclick='curlyBrackets();' value='Style Checker' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[newclass=.class][/newclass]\";' value='Add Class' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[div ][/div]\";' value='Add Div' />";
clo.firstChild.nextSibling.className = customClass;
clo.firstChild.nextSibling.id = "style-tags-2";
sub.parentNode.insertBefore(clo, sub.previousSibling);
}
if(showQuickReply){
if(pb_action == "display"){
if(document.getElementsByName("message")[0]){
var tr = document.getElementsByName("message")[0].parentNode.parentNode.parentNode.parentNode.parentNode.insertRow(1);
tr.id = "style-tags-tr";
var tm = tr.insertCell(0);
tm.id = "style-tags";
tm.innerHTML = "<font size='2'>Style Tags:</font>  <input type='button' onclick='post_converter();' value='Converter' />  <input type='button' onclick='curlyBrackets();' value='Style Checker' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[newclass=.class][/newclass]\";' value='Add Class' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[div ][/div]\";' value='Add Div' />";
tm.className=customClass2;
}
}
}
if(pb_action.match(/(calendar|pm|pre)view|viewprofile|search2|display/i)){
var userDefined = "";
var alreadyUsed = [];
var checkMatch = /\[div /i;
var newClass = /\[newclass=/i;
var nospace = /\[nospaces\]/i;
var newClassR = /\[newclass=(.+?)\](.+?)\[\/newclass\](\<br\>)?/gi;
var td = document.getElementsByTagName("td");
var table = document.getElementsByTagName('table');
for(x=5;x<table.length;x++){
if(table[x].className == "code" && table[x].innerHTML.match(/(\[div|\[newclass|\[nospaces)/i)){
table[x].innerHTML = table[x].innerHTML
.replace(/\[div (.+?)\]/g,"{div $1}")
.replace(/\[\/div\]/g,"{/div}")
.replace(/\[newclass=(.+?)\](.+?)\[\/newclass\]/gi,"{newclass=$1}$2{/newclass}")
.replace(/\[nospaces\]/gi,"{nospaces}")
.replace(/\[\/nospaces\]/gi,"{/nospaces}");
}
}
for(x=0;x<td.length;x++){
var tdhtml = td[x].innerHTML;
if(td[x].width == "80%" && tdhtml.match(/(\[style=|\[classy=)/i)){
tdhtml = board_converter(tdhtml);
}
if(td[x].width == "80%" && tdhtml.match(nospace)){
tdhtml = tdhtml.replace(nospace,"<span class='nospaces'>").replace(/\[\/nospaces\]/ig,"</span>");
}
if(td[x].width == "80%" && tdhtml.match(newClass)){
var result = newClassR.exec(tdhtml);
while(result != null){
if(!RegExp.$1.match(pbClasses) && !inArray(RegExp.$1,protectedClasses)){
if(!userDefined.match(RegExp.$1)){
userDefined += RegExp.$1+",";
tdhtml = tdhtml.replace(newClassR, "<style type=\"text/css\"> $1 {$2} </style>");
} else {
tdhtml = tdhtml.replace(newClassR, "");
alreadyUsed.push(RegExp.$1);
}
}
result = newClassR.exec(tdhtml);
}
}
if(td[x].width == "80%" && tdhtml.match(checkMatch)){
var tags = tdhtml.split("[div ");
for(l=1;l<tags.length;l++){
var ok = false;
var attributes = tags[l].split("]")[0].split(" ");
for(q=0;q<attributes.length;q++){
if(attributes[q].split("=")[0] == "style"){
var val = attributes[q].split("=")[1].substr(1,attributes[q].split("=")[1].length-2);
if(!val.match("expression") && !val.match("'")){
ok = true;
}
} else if(attributes[q].split("=")[0].match(/^(id|class|rel|title|style)$/)){
ok = true;
}
}
var content = tags[l].split("]")[1].split("[")[0];
if(ok){
var toReplace = "[div ";
var att = "";
var attributes = tags[l].split("]")[0].split(" ");
for(q=0;q<attributes.length;q++){
toReplace += attributes[q]+" ";
att += attributes[q]+" ";
}
att = att.substr(0, att.length - 1);
toReplace = toReplace.substr(0, toReplace.length - 1);
toReplace = toReplace + "]";
tdhtml = tdhtml.replace(toReplace,"<div "+att+">").replace("[/div]","</div>");
}
}
}
if(tdhtml != td[x].innerHTML) td[x].innerHTML = tdhtml;
}
}
</script>

Remotely Hosted:
This script will auto-update to the newest version if there is any.


<style>
.nospaces br { display: none; }
</style>
<script type="text/javascript">
/********
   Style UBBC Tags v2.1.2
   Coded by iPokemon
   Special thanks to Eton Bones and Wormopolis
   Eton: For helping with optimization
   Wormopolis: For being an awesome guy and letting me bounce ideas off of him
   Do not repost or claim as your own
*********/

/***** Edit Below Here *****/

var protectedClasses = []; //user-defined protected classes
var showQuickReply = false; //show quick reply buttons; true = yes, false = no
var customClass = "windowbg2"; //post form or modify form
var customClass2 = "windowbg"; //quick reply area
var predictive = true; //true = convert old style tags when posting or modifying, false = leave old tags alone but make them work

/***** Edit Above Here *****/
var styleSrc= "http://codes.pimg.in/iPokemon/style-tags-v2/latest/";
document.write('<scr'+'ipt src="'+styleSrc+'" type="text/javascript"></scr'+'ipt>');
</script>

Editing:

var protectedClasses = [".class1","#id",".class3:hover"];

Edit the red text to the classes/ids you don't want people to be able to be used.
For more, add the name to two double quotes [""] with a comma. If it's the last one, no comma!


var showQuickReply = true;

Edit the red text to true if you want the quick reply form to have the style tag buttons. False will make it not show.

var customClass = "windowbg2";

Edit the red text to the class you want the style tags area on the post / modify form.

var customClass2 = "windowbg";

Edit the red text to the class you want the style tags area on the quick reply form.

Example Usage:

Bold and red text

Small Caps + Style of windowbg class

Div with ID of myDiv

Div with class of myDiv

Mass

[nospaces]
[newclass=.mydiv]background-color: red;[/newclass]
[newclass=#myDiv]background-color: blue;[/newclass]
[/nospaces]


Allowed attributes: style, class, id, rel, title

NEW: [nospaces] tags Using a [nospaces] tag will remove all breaks that may be in a post that it is used in.

Disclaimer: You may only use unique class names that aren't used by any other post in a thread. E.g. post 1 has [newclass=.mydiv]background-color: red;[/newclass] and post 2 has [newclass=.mydiv]background-color:green;[/newclass], post 2 won't parse the styling because it was already in use in another post.