Rounded Posts (minimalist)

[Bones]

Browsers Tested: Firefox

• (v9) supports rounding but not on Proboards forums since Proboards offers no doctype.
  
• functional in but not extensively tested.
  
• May not work with codes that ascertain environment during user initiated action rather than at runtime.
  
• If using a forum resize code then this code should be installed below that code in order to grab the new forum dimensions.
  

Edit: BUGFIX (June 8, 2012): newer versions of Firefox that go by the DOM4 specs have dropped the isSameNode method from DOM3 and since this code used that method it generated an error. The line has been replaced with a typed comparison: cnode.isSameNode(enode) cnode === enode

<script>
//Rounded Posts (minimalist) [Last update: Apr 19, 2011]
(function(rowClass,rowNode,defAvatar){
var alwaysShowCustom = false; //show customTitle/warning (valid only if member group or rank is set to always show)
var alwaysShowStars = false; //show user's stars
var monitorChange = true; //use mutation events to monitor and reflect changes made by other codes (higher resource usage)
if (rowClass && rowClass.charAt && /^(on(\w+))$/i.test(rowClass)){
rowClass= (rowNode||window).addEventListener?[(rowNode||window).addEventListener,RegExp.$2]:[(rowNode||window).attachEvent,RegExp.$1];
rowClass[0].call((rowNode||window),rowClass[1],arguments.callee,false); return;
}
var c=document.getElementsByClassName,d,f;
if(!c)
c = function(className, parentElem){ var results=[];
if(document.evaluate){
var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
var query = document.evaluate(q, parentElem || document,
null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, length = query.snapshotLength; i < length; i++)
results.push(query.snapshotItem(i));
return results;
}else if(document.querySelectorAll){
return (parentElem||document).querySelectorAll('.'+className)
}else{
var children = (parentElem || document.body).getElementsByTagName('*');
var elements = [], child;
for (var i = 0, length = children.length; i < length; i++) {
child = children[i];
if (RegExp('\\b'+className+'\\b').test(child.className))
elements.push(child);
}
return elements;
}
}
f = function(pnode,snode,enode){
var df = document.createDocumentFragment(),cnode;
if(!pnode||!pnode.childNodes)return df;
snode=snode?snode:0; enode=enode?enode:pnode.childNodes.length-1;
if(!snode.nodeType && !enode.nodeType){if(isNaN(snode)||isNaN(enode))return df;}
if(!snode.nodeType)snode=pnode.childNodes[Number(snode)];
if(!enode.nodeType)enode=pnode.childNodes[Number(enode)];
cnode = snode; while(cnode){df.appendChild(cnode.cloneNode(1));if(cnode === enode)break;cnode=cnode.nextSibling};
return df;
}
//test browser support for border-radius (exit code if not supported)
d = document.createElement('div'); d.style.borderWidth="3px"; d.style.borderStyle= "solid";
d.style.borderRadius = d.style.MozBorderRadius = d.style.WebkitBorderRadius = '10px;';
if("undefined" == typeof(d.style.borderTopLeftRadius) && "undefined" == typeof(d.style.MozBorderRadiusTopleft) && "undefined" == typeof(d.style.WebkitBorderTopLeftRadius))throw (new Error("border-radius not supported in this browser"));

//test browser support for background-size (use generic too-large avatar if image exceeds dimensions and not background resizable)
d.style.width = d.style.height = "97px"; d.style.backgroundImage = 'url("http://i52.tinypic.com/174lg7.png")';
d.style.backgroundSize = d.style.MozBackgroundSize = d.style.WebkitBackgroundSize = d.style.OBackgroundSize = "97px 97px";
var useBgSize = d.style.cssText.match(/((-\w+-)?background-size):\s*97/i);
if(useBgSize[1])useBgSize=useBgSize[1]; else useBgSize=null;

var o2a = function(a){try{return Array.prototype.slice.call(a)}catch(e){var b,c=[]; for(b in a)c.push(a[b]);return c;}}
var posts = (rowClass && rowClass=='.self' && rowNode && rowNode.nodeName)?[rowNode]:o2a(c.call((rowNode||document),(rowClass||'tr_post'),rowNode));
var d = function(tag,attr,children){
var e = tag.nodeName?tag:document.createElement(tag),a,b; attr=attr?attr:{};
for(a in attr)try{
if(/^class$/i.test(a)){a="className";}else if(/^for$/i.test(a)){a="htmlFor";}
if(/^style$/i.test(a)){e.style.cssText=attr[a];}else{ e[a]=attr[a];}}catch(f){}
if(children && children.length && children.sort){
for(a=0,b=children.length;a<b;a++){
if("string"==typeof children[a]){e.appendChild(document.createTextNode(children[a]));
}else if(children[a] && children[a].nodeName){e.appendChild(children[a])}
}
}
return e;
}
var p = function(list,tag,clone){ //accepts array of nodes and returns array of parentnodes matching tag
for(var x=0,y=[],z;x<list.length&&(z=list[x].parentNode);x++){
while(z && z.nodeName!=tag.toUpperCase())z=z.parentNode;
if(z)y.push(clone?z.cloneNode(-1):z); else y.push((clone?list[x].cloneNode(-1):list[x]));
}return y;
},cn='cloneNode';
window.PJNotify = function(msg){
msg=unescape(msg);
if(window.removePageSpan)clearTimeout(removePageSpan);
loadPageSpan(this,'',1,3);
pageSpan.style.display="block"; pageSpan.style.backgroundColor="#FFFFBF"; pageSpan.style.zIndex=11; pageSpan.style.color="#000";
pageSpan.innerHTML=msg;
removePageSpan=setTimeout("pageSpan.style.display='none';",5000); pageSpan.onblur=function(){hidePageSpan();pageSpan.style.zIndex=1;}
}
if(defAvatar)defAvatar=d('img',{src:defAvatar}); else defAvatar = d('img',{src:"http://i52.tinypic.com/174lg7.png",width:65,height:65});
var tooLargeAvatar = useBgSize?d('img', {src:'http://i53.tinypic.com/2mh7c76.jpg',width:119,height:119,title:'This avatar was too large!'}):null;
var ac = arguments.callee;
if(!ac.state)ac.state={};
for(var a = 0,l=posts.length,tBod=null;a<l;a++){
if(!posts[a].nodeName || posts[a].nodeName != 'TR'){continue;}else newpost = posts[a].parentNode.rows[2];
if(newpost) newpost = newpost.getElementsByTagName('ul')
if(newpost[0] && !/ul_thread/.test(newpost[0].className))
newpost=null; else newpost=newpost[0];
if(!newpost){
tBod = posts[a].parentNode;
tBod.rows[0].cells[0].style.cssText = tBod.rows[tBod.rows.length-1].cells[0].style.cssText = tBod.rows[1].cells[0].style.cssText =
tBod.rows[1].cells[1].style.cssText="-moz-border-radius:15px;-webkit-border-radius:15px; border-radius:15px;";
var newpost = posts[a].parentNode.insertRow(2).insertCell(-1);
newpost.colSpan=2; newpost.className = posts[0].firstChild.className;
newpost = newpost.appendChild(d('ul',{className:'ul_thread',style:'list-style:none;padding:0px;margin-left:'+posts[0].firstChild.offsetWidth+'px;width:80%;float:right;'}));
b=tBod.parentNode; while(b && !/bordercolor/.test(b.className))b=b.parentNode;
if(b)b.style.backgroundColor = "transparent";
}
if(!ac.state[posts[a].id]) ac.state[posts[a].id] = {'html':'','h_event':null}
if(ac.state[posts[a].id]['html']==posts[a].innerHTML)continue;
else ac.state[posts[a].id]['html'] = posts[a].innerHTML;
//if(!ac.state[posts[a].id].h_event) ac.state[posts[a].id].h_event=null;
posts[a].style.display="";
var mp = {td:posts[a].firstChild}
mp.links = mp.td.getElementsByTagName('a');
mp.userlink = (mp.links[2]&&/group(\d+)/.test(mp.links[2].className)?(mp.links[2]):'Guest');
if(mp.userlink.href){
mp.groupid=RegExp.$1;
mp.username = (/user=(\w+)/.test(mp.userlink.href))?RegExp.$1:'Guest';
while(mp.userlink.previousSibling===mp.userlink.nextSibling)mp.userlink=mp.userlink.parentNode;
}else{ mp.userlink = mp.td.getElementsByTagName('br')[0].previousSibling; mp.username = mp.userlink.data; mp.groupid = mp.status = 'guest';}
mp.images = mp.td.getElementsByTagName('img'); mp.stars=[]; mp.customtitlewarning = d('div');
for(var b=0,m=mp.images.length;b<m;b++) if(mp.images[b].alt=="*")mp.stars.push(mp.images[b][cn](1));
b = mp.userlink.nodeName?mp.userlink.nextSibling:null;
m=d('div');var br=-1,stars=(mp.stars && mp.stars[0]?1:0);
while(b && b.nextSibling && b.nextSibling.nodeName!='CENTER'){
if(b.nextSibling.data && /member is (offline)?/.test(b.nextSibling.data)){
mp.status = RegExp.$1.length?'offline':d('b',null,['online']);
m.innerHTML=m.innerHTML.replace(/^<br\s*\/?>/i,'').replace(/<br\s*\/?>$/i,''); break;
}
if(b.nextSibling.nodeName=='BR'){ br+=1;
if(br==0 && !mp.groupname ){mp.groupname=m;
}else if(br==1+stars){mp.customtitlewarning=m;}
b=b.nextSibling; m=d('div');
}else{
m.appendChild(b.nextSibling[cn](1)); b=b.nextSibling;
}
}
mp.avatar= mp.td.getElementsByTagName('center');
if(mp.avatar[0]){
mp.other={};m = f(mp.td, mp.avatar[mp.avatar.length-1].nextSibling);
d('div',null,[m[cn](1)]).innerHTML.replace(/br\s*\/?>([\w\s]+?):\s*(.+?)(?=\<(?:br|td)|$)/gi,function(rm,r1,r2){
if(/(Joined|Gender|Posts|Location)/.test(r1))mp[r1]=r2; else mp.other[r1]=r2;
return rm;
})
mp.personal = (mp.avatar[mp.avatar.length-1].innerText||mp.avatar[mp.avatar.length-1].textContent).replace(/<\!-\-[\s\S]+?-\-\>/,'').replace(/(^\s+|\s+$)/g,'')
mp.avatar = mp.avatar[mp.avatar.length-1].getElementsByTagName('img');
mp.communications = p(mp.avatar[0]? o2a(mp.avatar).slice(mp.avatar[0].alt=="[avatar]"?1:0):[],'a',1);
if(!mp.avatar[0] || mp.avatar[0].alt!="[avatar]")mp.avatar=defAvatar;else mp.avatar = mp.avatar[0][cn](1);
mp.stats = d('div',null,[d('div',null,mp.stars),mp.groupname,d('div',null,[mp.customtitlewarning]),m,d('div',null,mp.communications),mp.personal]);
}else{mp.communications=[];mp.avatar=defAvatar;}
mp.avatar.unscaled = d("img",{src:mp.avatar.src});
var post = {
td:mp.td.nextSibling,
header:mp.td.nextSibling.getElementsByTagName('table')[0].rows[0],
content:mp.td.nextSibling.getElementsByTagName('table')[0].rows[1],
footer:mp.td.nextSibling.getElementsByTagName('table')[0].rows[2]
}
m=(post.footer&&post.footer.getElementsByClassName)?post.footer.getElementsByClassName('user_signature'):(post.footer?c.call(post.footer,'user_signature',post.footer):[]);
if(m[0])post.signature = m[0]; else post.signature=null;
if(mp.avatar.unscaled.width && mp.avatar.width && (m=(mp.avatar.unscaled.width+mp.avatar.unscaled.height)/(mp.avatar.width+mp.avatar.height)) && (m>1.3)){
if(!useBgSize)mp.avatar=tooLargeAvatar;
}
var mpwidth = mp.td.offsetWidth, avwidth= (mp.avatar.width?(mp.avatar.width):65), statwidth = parseFloat((mpwidth-avwidth)/2).toFixed(2), fs=parseFloat(getComputedStyle(mp.td,null).getPropertyValue('font-size')).toFixed(2),statpos=0;
if(fs*7>statwidth)statpos = (fs*7-statwidth)+'px';
var Post = (document.getElementById(posts[a].id.replace(/tr_post/,''))||newpost.appendChild(d('li',{id:posts[a].id.replace(/tr_post/,''),className:posts[a].className+' li_post '+mp.username+' usergroup'+mp.groupid,style:'margin-bottom:8px;border:3px solid; vertical-align:center;-moz-border-radius:15px;-webkit-border-radius:15px; border-radius:15px; clear:both; position:relative;padding:15px 15px 0px;min-height:'+(mp.avatar.height*1.5)+';'})));
Post.innerHTML = "";
d(Post,null,
[
d('div',{className:'post-author mini-profile',align:'center',style:'position:absolute;width:'+posts[a].firstChild.offsetWidth+'px;left:-'+mp.td.offsetWidth+'px;'},
[
d('div',{align:'left',style:'border:3px solid; -moz-border-radius:100%;-webkit-border-radius:'+ ((mp.avatar.width?(mp.avatar.width):65)/2)+ 'px;border-radius:'+ ((mp.avatar.width?(mp.avatar.width):65)/2)+ 'px;width:'+(mp.avatar.width?(mp.avatar.width):65)+'px;height:'+(mp.avatar.height?(mp.avatar.height):65)+ 'px;background: url("'+mp.avatar.src+'") repeat;'+ (useBgSize?(useBgSize+":"+ (mp.avatar.width?(mp.avatar.width):65)+"px "+ (mp.avatar.height?(mp.avatar.height):65)+"px;"):"")},
[
d('div',{style:'position: relative; width:'+statwidth+'px; height: 50%; border-width: 0px 0px 3px; border-style: none none solid; left: '+(mp.avatar.width?(mp.avatar.width):65)+'px;'},[d('span',{className:'userstat',style:'position:relative;left:-'+(statpos?(parseFloat(statpos))+'px;top:-'+(fs*1.5):7)+'px;'},[mp.status])])
]
),
d('div',{className:'user-name'},[mp.userlink[cn](1)]),
d('div',{className:'user-group'},[mp.groupname&&mp.groupid!='guest'?mp.groupname[cn](1):'']),
d('div',{className:'user-stars'},[mp.stars&&mp.stars[0]&&alwaysShowStars?d('span',null,mp.stars):'']),
d('div',{className:'user-custom'},[mp.customtitlewarning&&alwaysShowCustom?mp.customtitlewarning[cn](1):'']),
d('div',{className:'post-time'},[(function(post){var t = post.header.firstChild.nextSibling.lastChild[cn](1); t.innerHTML = t.innerHTML.replace(/^.+?(Reply|Started|Result)(\s#\d+)?(\son\s)?/,'').replace(' \xbb','').replace('via the ','<br>');return t;}).call(this,post)])
]
),
d('div',{style:'text-align:right;',className:'post-header'},[(post.header.cells[2]?post.header.cells[2].lastChild[cn](1):'')]),
d('div',{className:'post-content'},[f(post.content.firstChild,1)]),
d('div',{className:'post-footer',style:'position:relative;bottom:8px;padding-top:15px;'},[post.footer.firstChild.getElementsByTagName('table')[0][cn](1),
(function(){if(post.signature)return d('div',{className:'post-signature',style:'width:95%;border:2px solid;-moz-border-radius:15px;-webkit-border-radius:15px; border-radius:15px;margin-top:15px;padding:15px;'},[post.signature[cn](1)]); else return ''})()
]),
]
)

posts[a].style.display="none";

if(mp.userlink && mp.userlink.nodeName && mp.userlink.nodeType!=3){
b=Post.getElementsByClassName? Post.getElementsByClassName('userstat'): c('userstat',Post);
if(b[0]){
b[0].onmouseover = function(){PJNotify.call(this,arguments.callee.stats);}; b[0].onmouseover.stats = mp.stats.innerHTML;
}
}
if(!(rowNode && ac.state[posts[a].id].h_event) && document.addEventListener && monitorChange){
ac.state[posts[a].id].h_event = function(evt){if(!this.dirty())return;if(arguments.callee.active[this.id])return; arguments.callee.active[this.id]=this; this.dirty.html=this.innerHTML;ac.call(this,'.self',this);arguments.callee.active[this.id]=null;}
ac.state[posts[a].id].h_event.active={}
posts[a].dirty = function(){if(!arguments.callee.html){arguments.callee.html=this.innerHTML;return false;}return (arguments.callee.html==this.innerHTML);}
posts[a].addEventListener('DOMSubtreeModified', ac.state[posts[a].id].h_event, false);
}
}
if(rowClass==undefined && location.hash[0] && (a=document.getElementById(location.hash.replace(/^#/,''))) && a && a.scrollIntoView)a.scrollIntoView(true);
})()
</script>

Attachments:

[Rei Kon]

There appears to be an issue with this at least in chrome where it displays the border colour instead of the background line all the way across - screenshot -

i51.tinypic.com/2hh18gw.png

Also there appears to be issues in Safari -

i56.tinypic.com/sg258x.png

[Bones]

Apr 10, 2011 20:10:48 GMT -8 Rei Kon said:

There appears to be an issue with this at least in chrome where it displays the border colour instead of the background line all the way across - screenshot -

i51.tinypic.com/2hh18gw.png

Also there appears to be issues in Safari -

i56.tinypic.com/sg258x.png

Thanks for the feedback but as you can see I only flagged the code for Firefox. Generally I do a code for a single browser and work out the logistics and usability before considering compatibility in other browsers. As an example I discovered a usability error when using the code if karma is enabled (no way to exalt/smite) so I fixed that.
I did look into the chrome/safari oddity and discovered that webkit's vendor implementation of border-radius has trouble with values specified as percentages so I fixed that. The well known webkit bug of using percentages in a container that is itself defined in percentages is also evident from your screen shot but I won't tackle that until it has been put through an extensive set of scenarios and proven stable in a single browser first.

[Rei Kon]

That's fine - I just thought I'd raise the issues to you being a chrome user myself

[Bones]

updated

Attachments:

[Wormopolis]

you want me to make a demo board for this to link to?

[Bones]

Apr 21, 2011 22:54:18 GMT -8 Wormopolis said:

you want me to make a demo board for this to link to?

Nope,not on this forum anyway...
Way too many codes running on here to be considered "minimalist"

I see too many timers/intervals and IE expressions running.
For compatibility reasons the code hides the original posts then monitors them for changes made by other codes and auto-updates itself. The unblink worm avatar code for example causes it to constantly fire on each update so it can change the avatars. Also codes that cannot work with hidden posts (display="none") such as the jump to post after posting code will encounter problems.

I've already tested it against your forum

..and found it lacking

Edit: modified code to remove spaces inserted by Proboards on long lines