Enhanced UBBC Lists

[Bones]

Browser Tested: Internet Explorer, Firefox, Opera, Chrome and Safari
Description:

---

It was recently brought to my attention that the only code that allows posting lists other than the standard Proboards bulleted list was in fact outputting a list simulated with text rather than a true HTML list. This code seeks to rectify that.

Placement:

---

GLOBAL FOOTER
(or board footer if you wish it only to be used in a specific board)

Code:

---

<script type="text/javascript">
<!--
(function(){ /*Enhanced UBBC Lists */
    if(!arguments[0])return;
    var d=document,g="getElementsByTagName",hr=d[g]('hr'),h=-1,j,k,l,m,n;
   
    for(;(j=hr[(++h)]){
        if(j.className=='hr' && j.parentNode.colSpan && j.parentNode.colSpan==3){
            for(j=j.parentNode[g]('ul'),k=j.length-1;k>=0;k--){
                if((l=j[k][g]('li')) && l[0].innerHTML.match(/(\[liststyle\](.+?)\[\/liststyle\])/i)){
                    m=RegExp.$2;l[0].innerHTML = l[0].innerHTML.replace(RegExp.$1,"");
                    j[k].className="advancedList";
                    if(/(href|src)\s*=\s*('|")?([^\s]+?)\2/i.test(m)){
                        m = RegExp.$3;
                        if(!/\/([^\/]+?)\.(bmp|jpe?g|gif|png)$/i.test(m))continue;
                        n=RegExp.$1;
                        j[k].className += " "+ RegExp.$2+"_"+ n.replace(/\s/g,'').replace(/-(\w)/g, function (mh,p){return p.toUpperCase();})
                    }
                    if(/^https?\:\/\//i.test(m)){j[k].style.listStyleImage = "url('"+m+"')";j[k].className += " image";continue;}
                    switch(m){
                        case "#": n='decimal'; break;
                        case "a": n='lower-alpha';break;
                        case "A": n='upper-alpha';break;
                        default: n=m;
                    }
                    j[k].style.listStyleType = n;
                    n=n.replace(/\s/g,'').replace(/-(\w)/g, function (mh,p){return p.toUpperCase();})
                    j[k].className += " " + n
                    for(n=0;n<l.length;n++){
                        if(l[n].innerHTML.match(/(\[liststyle\](.+?)\[\/liststyle\])/i)){
                            l[n].innerHTML = l[n].innerHTML.replace(/\[liststyle\](.+?)\[\/liststyle\]/gi,function(mh,p){ var m
                            if((m=p.match(/(setstyle|setclass)\.+)/i)) && !m)return mh;
                            if(/(setclass)/i.test(m[1])){
                                if(m[1]=="SETCLASS")j[k].className += " "+m[2]; else l[n].className += (l[n].className.length?" ":"")+m[2];
                            }else{
                                if(m[2].split('').pop()!=";")m[2]+=";";
                                if(m[1]=="SETSTYLE")j[k].style.cssText+=m[2]; else l[n].style.cssText+=m[2];
                            }
                            return "";
                            })
                        }
                        l[n].innerHTML = "<span>"+l[n].innerHTML+"</span>";
                        l[n].className = "li"+n+" "+ ((n%2)==0?"even":"odd");
                    }
                }
            }
        }
    }
})(/(display|preview|search2)/.test(pb_action))
// -->
</script>

Usage:

---

[ul]
[li]first entry [liststyle]#[/liststyle]
[/li][li]second entry
[/li][li]third entry
[/li][/ul]

The code looks for [liststyle]...[/liststyle] in the first entry in a Proboards list, if found it will use the value specified by that tag to set the style of the list. If you have nested lists and want to style those you'll need to put the liststyle in the first entry of those lists as well. The [liststyle]...[/liststyle] will be removed once the style it specifies is applied

This code adopts the same type identifiers set by the original code

• # = numbered
  
• a = lowercase letters
  
• A = uppercase letters
  
• images.proboards.com/new/show.png = url to an image to use for the list
  

Advanced Usage:

---

In addition, if you know the specific types of list you can use those directly rather than the pre-defined identifiers in the list above.
(e.g [liststyle]lower-roman[/liststyle]).

Here's a current cross-browser list of the types allowed (taken from w3school)

• none - No marker
  
• circle - The marker is a circle (already used by Proboards on second-tier lists)
  
• disc - The marker is a filled circle. This is default (already used by Proboards on top-tier lists)
  
• square - The marker is a square (already used by Proboards on third-tier lists)
  
• armenian ^*- The marker is traditional Armenian numbering
  
• decimal - The marker is a number
  (corresponds to the shorthand "#" used in original code and adopted by this code)
  
• decimal-leading-zero^* - The marker is a number padded by initial zeros (01, 02, 03, etc.)
  
• georgian^* - The marker is traditional Georgian numbering (an, ban, gan, etc.)
  
• lower-alpha - The marker is lower-alpha (a, b, c, d, e, etc.)
  (corresponds to the shorthand "a" used in original code and adopted by this code)
  
• lower-greek ^*- The marker is lower-greek (alpha, beta, gamma, etc.)
  
• lower-latin^* - The marker is lower-latin (a, b, c, d, e, etc.)
  
• lower-roman - The marker is lower-roman (i, ii, iii, iv, v, etc.)
  
• upper-alpha - The marker is upper-alpha (A, B, C, D, E, etc.)
  (corresponds to the shorthand "A" used in original code and adopted by this code)
  
• upper-latin^* - The marker is upper-latin (A, B, C, D, E, etc.)
  
• upper-roman - The marker is upper-roman (I, II, III, IV, V, etc.)
  
• inherit^* - Specifies that the value of the list-style-type property should be inherited from the parent element
  

* not supported by IE on Proboard forums since Proboard forums lack a declared DOCTYPE

Examples:

---

To get a numbered list instead of bulleted:
[list]
[*]first entry [liststyle]#[/liststyle]
[*]second entry
[*]third entry
[/list]

---

This would create a lowercase lettered list
[list]
[*]first entry [liststyle]a[/liststyle]
[*]second entry
[*]third entry
[/list]

---

This would create an uppercase lettered list
[list]
[*]first [liststyle]A[/liststyle] entry
[*]second entry
[*]third entry
[/list]

---

This would create a list using roman numerals (advanced)
[list]
[*]first entry [liststyle]upper-roman[/liststyle]
[*]second entry
[*]third entry
[/list]

That red will be removed once the code runs and extracts the info from it. That red is also position agnostic, it can be at the start, middle or end of that first item in the list.
Lists that do not possess that red in its first entry will be ignored so you can have a standard bulleted list that in turn has a sub-list with only the sub-list numbered

[list]
[*]item 1
[*]item 2

[list]
[*]fi[liststyle]#[/liststyle]rst entry
[*]second entry
[*]third entry
[/list]

[*]item 3
[/list]

[Wormopolis]

outstanding!