Personal Font Style | The Admin Resource

Personal Font Style Nov 16, 2008 15:41:29 GMT -5

Quote

Post by Triad on Nov 16, 2008 15:41:29 GMT -5

This script allows all users on a board to have custom font styles for their posts via cookies set on the Modify Profile page by automatically inserting the UBBC.

The administrators may choose which fonts, colors, and sizes the users on the forum may use, but I have added a "Custom" option that, if set by an administrator, allows users to add any hex color they wish since it would take a while to list them all.

Previews
- Selecting Styles
- Selecting custom hex color
- Posting

Editing instructions below.

<script type="text/javascript"><!--
/*
Personal Font Style
Created By Triad
*/

var personalFont = {

custom: true,

sizes: [1,7],

fonts: [
"Verdana",
"Times New Roman",
"Comic Sans MS",
"Arial",
"Courier New",
"Century",
"Autumn",
"Lucida Console",
"Rockwell",
"Scribble",
"Tahoma",
"Trebuchet"
],

colors: [
"Black",
"Red",
"Yellow",
"Pink",
"Green",
"Orange",
"Purple",
"Blue",
"Biege",
"Brown",
"Teal",
"Navy",
"Maroon",
"LimeGreen"
],

form: null,

findForm: function(){
var f = document.getElementsByTagName("form");
var n = (f[f.length-1].message) ? 1 : 2;
this.form = f[f.length-n];
},

setCookie: function(){
var data = "/"; // Slash added for Opera bug

if(document.getElementById("fontFace").selectedIndex > 0)
data += "font=" + document.getElementById("fontFace").options[document.getElementById("fontFace").options.selectedIndex].value + "/";
if(document.getElementById("fontColor").selectedIndex > 0)
data += "color=" + document.getElementById("fontColor").options[document.getElementById("fontColor").options.selectedIndex].value + "/";
if(document.getElementById("fontSize").selectedIndex > 0)
data += "size=" + document.getElementById("fontSize").options[document.getElementById("fontSize").options.selectedIndex].value + "/";
if(document.getElementById("fontBold").checked == true)
data += "b/";
if(document.getElementById("fontUnderline").checked == true)
data += "u/";
if(document.getElementById("fontItalic").checked == true)
data += "i";

document.cookie = "personal_"+pb_username+"="+encodeURI(data)+";expires="+(new Date()).toGMTString().replace(/\d{4}/,"2050");
},

getCookie: function(){
if(document.cookie.match(new RegExp("personal_"+pb_username+"=(.+?)($|

","gi")))
return decodeURI(RegExp.$1);
return null;
},

checkIt: function(_style){
var c = this.getCookie();
if(c == null)
return false;

var _s = c.split(/\//i);
var a = (navigator.appName == "Microsoft Internet Explorer") ? 0 : 1;
for(x=a; x<_s.length; x++){
if(_s[x] == _style)
return true;
}

return false;
},

addUBBC: function(){
var c = personalFont.getCookie();
if(c == null)
return true;

var start = "";
var end = "";

var _s = c.split(/\//i);
var a = (navigator.appName == "Microsoft Internet Explorer") ? 0 : 1;
for(x=a; x<_s.length; x++){ // Start x at 1 for Opera and 0 for IE
if(_s[x] != ""){
start += "[" + _s[x] + "]";
end = "[/" +_s[x].replace(/=.+/i, '') + "]" + end;
}
}

personalFont.form.message.value = (document.title.split(/\s-\s/i)[1].match(/(modify\spost|preview)/i) || (document.referrer.match(/action=(post|display&(thread|board))/i) && location.href.match(/index.cgi?$/i))) ? personalFont.form.message.value : start + personalFont.form.message.value + end;
},

setupOptions: function(){
parent:
for(var td = document.getElementsByTagName("td"),x=6,y=td.length; x<y; x++){
if(td[x].width == "160" && td[x].innerHTML.match(/username:/i)){
if(pb_username.match(td[x+1].firstChild.innerHTML)){
for(var tb = document.getElementsByTagName("table"),i=3,j=tb.length-1; i<j; i++){
if(tb.width == "650" && tb.innerHTML.match(/location:/i)){
var _font_1 = document.createElement("font");
_font_1.size = "-1";
_font_1.appendChild(document.createTextNode("Font Face:"));
var _font_2 = document.createElement("font");
_font_2.size = "-2";
_font_2.appendChild(document.createTextNode("You may customize the default font face, color, size, and style of your posts here."));
var _font_3 = document.createElement("font");
_font_3.size = "-1";
_font_3.appendChild(document.createTextNode("Font Color:"));
var _font_4 = document.createElement("font");
_font_4.size = "-1";
_font_4.appendChild(document.createTextNode("Font Size:"));
var _select_1 = document.createElement("select");
_select_1.id = "fontFace";
_select_1.options[0] = new Option("--------------------");
for(a=0; a<this.fonts.length; a++){
_select_1.options[a+1] = new Option(this.fonts, this.fonts );
if(this.getCookie() && this.getCookie().match(new RegExp("font=" + this.fonts ,"i")))
_select_1.selectedIndex = a+1;
}
var _select_2 = document.createElement("select");
_select_2.id = "fontColor";
_select_2.options[0] = new Option("--------------------");
for(a=0; a<this.colors.length; a++){
_select_2.options[a+1] = new Option(this.colors , this.colors );
if(this.getCookie() && this.getCookie().match(new RegExp("color=" + this.colors ,"i")))
_select_2.selectedIndex = a+1;
} if(this.custom){
var temp_value = "c";
var temp_name = "* Custom *";
if(this.getCookie() && this.getCookie().match(/color=([0-9a-f]{6})/i)){
if(!RegExp.$1.match(this.colors))
temp_value = temp_name = RegExp.$1;
}
_select_2.options[_select_2.options.length] = new Option(temp_name, temp_value);
if(temp_value != "c")
_select_2.selectedIndex = _select_2.options.length-1;
_select_2.onchange = function(){
if(this.options[this.options.selectedIndex].value == temp_value){
var _a = prompt("You may enter your own 6 digit HEX code here.","");
if(_a == null)
return false;
if(_a.length == 6){
this.options[this.options.selectedIndex].value = _a;
this.options[this.options.selectedIndex].innerHTML = _a;
temp_value = _a;
} else {
alert("That is not a valid HEX code.");
this.selectedIndex = 0;
}
}
}
}
var _select_3 = document.createElement("select");
_select_3.id = "fontSize";
_select_3.options[0] = new Option("--------------------");
for(a=0; a<=parseInt(this.sizes[1]-this.sizes[0]); a++){
_select_3.options[a+1] = new Option(a+1, a+1);
if(this.getCookie() && this.getCookie().match(new RegExp("size=" + parseInt(a+1),"i")))
_select_3.selectedIndex = a+1;
}
var _input_1 = document.createElement("input");
_input_1.type = "checkbox";
_input_1.id = "fontBold";
_input_1.checked = this.checkIt("b");
var _input_2 = document.createElement("input");
_input_2.type = "checkbox";
_input_2.id = "fontUnderline";
_input_2.checked = this.checkIt("u");
var _input_3 = document.createElement("input");
_input_3.type = "checkbox";
_input_3.id = "fontItalic";
_input_3.checked = this.checkIt("i");

var main_row = tb.insertRow(tb.rows.length);

var main_cell = main_row.insertCell(0);
main_cell.width = "160";
var _table = document.createElement("table");
_table.width = "100%";
var _tbody = document.createElement("tbody");
var _row = document.createElement("tr");
var _cell = document.createElement("td");
_cell.appendChild(_font_1);
_row.appendChild(_cell);
_tbody.appendChild(_row);
_row = document.createElement("tr");
_cell = document.createElement("td");
_cell.appendChild(_font_3);
_row.appendChild(_cell);
_tbody.appendChild(_row);
_row = document.createElement("tr");
_cell = document.createElement("td");
_cell.appendChild(_font_4);
_row.appendChild(_cell);
_tbody.appendChild(_row);
_table.appendChild(_tbody);
main_cell.appendChild(_table);

main_cell = main_row.insertCell(1);
main_cell.width = "245";
var _table = document.createElement("table");
_table.width = "100%";
var _tbody = document.createElement("tbody");
var _row = document.createElement("tr");
var _cell = document.createElement("td");
_cell.width = "122";
_cell.appendChild(_select_1);
_row.appendChild(_cell);
_cell = document.createElement("td");
_cell.width = "122";
_cell.rowSpan = "3";
_cell.align = "left";
_cell.appendChild(_input_1);
_cell.appendChild(document.createTextNode(" Bold"));
_cell.appendChild(document.createElement("br"));
_cell.appendChild(_input_2);
_cell.appendChild(document.createTextNode(" Underline"));
_cell.appendChild(document.createElement("br"));
_cell.appendChild(_input_3);
_cell.appendChild(document.createTextNode(" Italic"));
_row.appendChild(_cell);
_tbody.appendChild(_row);
_row = document.createElement("tr");
_cell = document.createElement("td");
_cell.width = "122";
_cell.appendChild(_select_2);
_row.appendChild(_cell);
_tbody.appendChild(_row);
_row = document.createElement("tr");
_cell = document.createElement("td");
_cell.width = "122";
_cell.appendChild(_select_3);
_row.appendChild(_cell);
_tbody.appendChild(_row);
_table.appendChild(_tbody);
main_cell.appendChild(_table);

main_cell = main_row.insertCell(2);
main_cell.width = "245";
main_cell.rowSpan = "3";
main_cell.appendChild(_font_2);

if(document.all){ // IE fix
_input_1.checked = this.checkIt("b");
_input_2.checked = this.checkIt("u");
_input_3.checked = this.checkIt("i");
}

break parent;
}
}
}
}
}
}
};

if(location.href.match(/action=modifyprofile/i) && document.modifyForm){
personalFont.setupOptions();
if(document.addEventListener)
document.modifyForm.addEventListener("submit", personalFont.setCookie, false);
else if(document.attachEvent)
document.modifyForm.attachEvent("onsubmit", personalFont.setCookie);
else
document.modifyForm.onsubmit = personalFont.setCookie;
}

if(document.postForm || location.href.match(/action=display&(thread|board)/i)){
personalFont.findForm();
if(document.addEventListener)
personalFont.form.addEventListener("submit", personalFont.addUBBC, false);
else if(document.attachEvent)
personalFont.form.attachEvent("onsubmit", personalFont.addUBBC);
else
personalFont.form.onsubmit = personalFont.addUBBC;
}
//--></script>

Global Footers

custom: true

Set this to false if you want your users to only be able to use the colors you have listed.

this.sizes

These are all the available font sizes for your users to choose from which are from the starting number to the ending number.

this.fonts

These are all the fonts that your users will be able to choose from. You may add or remove from the list. Remember to not put a comma on the last line.

this.colors

These are all the colors that your users will be able to choose from (unless custom is enabled). You may add or remove from the list, and you can use hex codes. Remember to not put a comma on the last line.

Since this script uses cookies, if you ever delete them you will have to reset your font settings in your mini profile.

This script appears to look exactly like my previous code which was horrible, but I have fixed many bugs. However, I'm sure there are still some hiding out there so please post all your problems here.

Tested in FireFox, Internet Explorer, Safari, and Opera