Post by Chris on Oct 4, 2006 2:56:09 GMT -8
Updates:
|
Overview: Enhances the standard UBBC tables by adding pseudo-tags for colSpan (column span), rowSpan (row span) and bgColor (background color). In addition, a pseudo-tag to make a cell span all columns (like a header) and a generic attribute tag is defined. The corresponding pseudo-tags are:
- [cs=n] - where n is the number of columns the cell should span
- [rs=n] - where n is the number of rows the cell should span
- [bg=color] - where color can be any of the predefined HTML colors or a 6-digit hexadecimal custom color
- [th] - makes the TD span all columns
- [atrb=name,value,bTable] - where name is the name of any valid attribute and value is the value to assign to that attribute. The bTable, if present, will apply the attribute to the table rather than the cell. (This pseudo-tag is the most powerful and can be used exclusively to set any valid attribute including the predefined ones above.)
These pseudo-tags should only go between the [td] and [/td] tags. They do not have or need closing tags.
Example:
- Correct:
[tr]
[td][cs=2]This cell spans two columns[/td]
[/tr]- Incorrect:
[tr]
[cs=2][/cs]
[td]This cell won't span two columns and in addition the [/cs] is not needed[/td]
[/tr]
Preview:
Installation: Place in Global Footer
Tested Browsers:
- Internet Explorer 6
- Firefox 1.5/2.0 (RC2)
<script type="text/javascript">
<!--
/*
Name: ENHANCED UBBC TABLE TAGS
Location: Global Footer
Created by EtonBones at yahoo d o t com
Do not redistribute without permission
Feel free to edit provided a notation is
added to this header stating that fact.
THIS HEADER MUST REMAIN INTACT.
*/
/*********** *****START EDITABLE USER OPTIONS***********************
If not concerned about the security risk posed by allowing users the ability
to set events such as onclick and onmouseover in their posts
set the following variable to false*/
var DisallowEvents=true;
/*If UBBC Undo installed and you would like enhanced tags added to history
set the following variable to true*/
var UUInstalled=false;
/******END EDITABLE USER OPTIONS (NO FURTHER EDITING NECESSARY)*******/
var NoGood="Enhanced tags need to be between the [td] and [/td]";
function enhanceTable(){
var td=document.getElementsByTagName("td");
for(i=0;i<td.length;i++){
if(td[i].width=="20%" && td[i].className.match(/windowbg/) && /(Posts:\s*[\d,]+|Guest)/.test(td[i].innerText||td[i].textContent)){
var msg=td[i].nextSibling.getElementsByTagName('tr')[1];
if(msg.getElementsByTagName('table').length){
for(l=0;l<msg.getElementsByTagName('table').length;l++){
parseTags(msg.getElementsByTagName('table')[l]);
//separate func needed since rowspans need to be set first in order to count columns
parseTH(msg.getElementsByTagName('table')[l]);
}
}
}else if(document.postForm && td[i].width=="30%" && td[i].className.match(/windowbg2/) && !document.getElementById('enhancedTable')){
var TR=td[i].parentNode;
var newTR=TR.parentNode.insertRow(TR.rowIndex+1);
TR.id="enhancedTable";
var newTD=document.createElement('td');
newTD.width='30%';
newTD.className='windowbg2';
newTD.innerHTML='<font size="2">Enhanced Table Tags:</font>';
newTR.appendChild(newTD);
newTD=document.createElement('td');
newTD.width='70%';
newTD.className='windowbg2';
newTD.innerHTML='<font size="2">Select Tag:</font><select name="etags" onChange=" addEtag(this.options[this.selectedIndex].value);this.selectedIndex=0;" ><option value="" selected="1">Enhanced Table Tags</option><option value="[th]" >Header</option><option value="[cs=2]">Span Columns</option><option value="[rs=2]">Span Rows</option><option value="[bg=white]">Background Color</option><option value="[atrb=border,0,true]">Any Attribute</option></select> ';
newTR.appendChild(newTD);
}else if(document.postForm && td[i].width=="100%" && td[i].className.match(/titlebg/) && td[i].innerHTML.match(/Topic Summary/)){
var table=td[i].parentNode.parentNode;
var re= /(?:[^\"])(\[(th|cs|rs|bg|atrb).*?\])/gim;
if(table.className.match(/tbody/i))table=table.parentNode;
for(l=2;l<table.rows.length;l=l+2){
if(table.rows[l].cells[0].innerHTML.match(/(?:[^\"\=])(\[(th|cs|rs|bg|atrb).*?\])/gim)){
while(table.rows[l].cells[0].innerHTML.match(/(?:[^\"\=])(\[(th|cs|rs|bg|atrb).*?\])/im ) ){
table.rows[l].cells[0].innerHTML= table.rows[l].cells[0].innerHTML.replace(/(?:[^\"\=])(\[(th|cs|rs|bg|atrb).*?\])/im, stripAnchor(RegExp.$1,RegExp.$2) ) ;
}
}
}
}
}
}
function stripAnchor(str){
var t=/(<A href\=.*\>(.*?)\<\/A\>)/i
if(!str)return "";
var s=str.substr(0,1);
if(s=='\"')return str;
if(s=="\[") s="";
if(str.match(t))str=str.replace(RegExp.$1,RegExp.$2);
return s+"<a title=\""+str+"\">*</a>";
}
function parseTags(TBL){
if(TBL.className !=""){
TBLS=TBL.getElementsByTagName('table')
for(k=0;k<TBLS.length;k++)parseTags(TBLS[k]);
return true;
}
var cell=TBL.getElementsByTagName('td');
var nada="";
for (j=0;j<cell.length;j++){
if(cell[j].innerHTML.match(/(\[cs\=(\d+)\])/i)){
cell[j].setAttribute("colSpan",RegExp.$2);
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
if(cell[j].innerHTML.match(/(\[rs\=(\d+)\])/i)){
cell[j].setAttribute("rowSpan",RegExp.$2);
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
if(cell[j].innerHTML.match(/(\[bg\=(.*?)\])/i)){
cell[j].setAttribute("bgColor",RegExp.$2);
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
while(cell[j].innerHTML.match(/(\[atrb\=(.*?)\])/i)){
var r1=RegExp.$1;
var r2=RegExp.$2;
var atrb=""; var atrbVal="";
var applyTable=false;
var oObj;
if(r2.split(',').length>0){ atrb=r2.split(',')[0]; atrb=atrb.replace(/^\s*|\s*$/g,"");}
if(r2.split(',').length>1) {atrbVal=r2.split(',')[1]; atrbVal=atrbVal.replace(/^\s*|\s*$/g,"");}
if(atrbVal.match(/(<A href\=.*\>(.*)\<\/A\>)/i))atrbVal=atrbVal.replace(RegExp.$1,RegExp.$2);
if(r2.split(',').length>2)applyTable=r2.split(',')[2]?true:false;
oObj=applyTable?TBL:cell[j];
if(atrb != ""){
if(atrb.toLowerCase()=="style"){
oObj.style.cssText+=atrbVal;
}else if(atrb.toLowerCase().substr(0,2)=="on" && DisallowEvents){
nada="<a title=\"Disallowed: "+r1.replace("[","").replace("]","") +"\">*</a>";
}else{
document.expando=false; //IE workaround for casing
try{
oObj.setAttribute(atrb,atrbVal);
}catch(e){
nada="<a title=\"Casing Error: "+r1.replace("[","").replace("]","") +"\">*</a>";
}finally{
document.expando=true;
}
}
}
cell[j].innerHTML=cell[j].innerHTML.replace(r1,nada);
}
}
}
function parseTH(TBL){
if(TBL.className !=""){
TBLS=TBL.getElementsByTagName('table')
for(k=0;k<TBLS.length;k++)parseTags(TBLS[k]);
return true;
}
var cell=TBL.getElementsByTagName('td');
for (j=0;j<cell.length;j++){
if(cell[j].innerHTML.match(/(\[th\])/i)){
cell[j].setAttribute("colSpan",columns(TBL));
cell[j].innerHTML=cell[j].innerHTML.replace(RegExp.$1,'');
}
}
}
function columns(TBL){
//w3c states that a colSpan=0 should make a cell span all columns but IE doesn't honor this, so...
var columns=0;
var tmp;
for(o=0;o<TBL.rows.length;o++){
tmp=0;
for(p=0;p<TBL.rows[o].cells.length;p++){
tmp++
if(TBL.rows[o].cells[p].rowSpan>1)tmp=tmp+TBL.rows[o].cells[p].rowSpan-1;
}
if(tmp>columns)columns=tmp;
}
return columns;
}
function addEtag(tag){
if(tag!=""){
if(UUInstalled){
if(isInsideCell()){
addX(tag);
}else{
alert(NoGood);
document.postForm.message.focus();
}
}else{
if(isInsideCell()){
add(tag);
}else{
alert(NoGood);
document.postForm.message.focus();
}
}
}
}
function isInsideCell(){
//Function purpose: determine if insertion point falls within the bounds of a cell
var msg=document.postForm.message;
if(document.postForm.message.createTextRange){
getCursorPositionIE();
var tmp= document.postForm.message.value.substr(0,document.postForm.message.selectionStart).split("\n").length-1;
setCursorPositionIE(msg.selectionStart-tmp);
}
msg.selectionStart=msg.selectionEnd;
var curr=msg.selectionStart;
if(msg.value.substr(0,curr).lastIndexOf("[td]")==-1 || msg.value.substr(0,curr).lastIndexOf("[td]")<msg.value.substr(0,curr).lastIndexOf("[/td]"))
return false;
if(msg.value.substr(curr).indexOf("[/td]")==-1 || (msg.value.substr(curr).indexOf("[/td]")>msg.value.substr(curr).indexOf("[td]") && msg.value.substr(curr).indexOf("[td]")!=-1))
return false;
if(msg.value.substr(0,curr).lastIndexOf("[")>msg.value.substr(0,curr).lastIndexOf("]"))
return false;
if(msg.value.substr(curr).indexOf("]")<msg.value.substr(curr).indexOf("[") )
return false;
return true;
}
if(location.href.match(/action\=(display|pmview|recent|userrecent|goto|search|calendarview)/) || ( document.postForm ))
enhanceTable();
function setCursorPositionIE(start,end) {
if(document.selection){
var element=document.postForm.message;
end=(end)?end:start;
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
}
function getCursorPositionIE(){
if(document.selection){
var element = document.postForm.message;
element.focus();
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText( element );
stored_range.setEndPoint( 'EndToEnd', range );
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
element.selectionFaux=true;
}
}
//-->
</script>
Known Bugs:
only one attribute from each type is parsed in any single cellfixed
Workaround: if setting multiple attributes for table then place one atrb tag in each cell as needed. Multiple attrib tags for cell not possible.-
attribute names are case-sensitive in IE.fixed (casing errors noted in preview to allow correction)
Example: [atrb=rowspan,5] is not the same as [atrb=rowSpan,5]. The latter will have the desired effect and the former will have no visible effect. Ensure proper casing on all attribute names. -
atrb values that contain urls (e.g. for cell background image, etc.) sometimes fail to be appliedfixed -
Page stretches when modifying a post with long enhanced tags in it (usually atrb tags with url contents)fixed -
Custom tables with any cell that is 20% in width will cause the code to fail since it mistakes this for the mini-profile(updated 3/7/2010) Codes that add tables to the mini-profile will cause the code to fail since it changes the DOM cell collection and changes the offset of the cell containing the post relative to the mini-profile(updated 3/7/2010)Codes that add tables to the mini-profile and runs before the enhanced tables code will cause the code to fail to recognize the mini-profile since post count is no longer an easily identifiable string of characters(updated 1/2/2011)
To Do:
disallow event attributes in non-MS browsers to avoid exploitation opportunities. IE doesn't allow events as attributes using the setAttribute method which is a good thing in this case.done
Example: you cannot set an onclick event using setAttribute in IE.
Suggestions for improvements welcomed.
I'm new to Javascript and wrote this as a learning exercise.
I'm new to Javascript and wrote this as a learning exercise.
