Color-code Users Online in Last 24 Hours

[K'DIZZLE]

So yeah as the title says, is there anyone who can make a plug-in for this please? I'm incredibly OCD and this code saved my life on PB v4. I would love you forever... seriously. You would help me so much i'mnotevenkiddingrightnow.

Basically it uses the color-code [by numerical or alphabetical] to place users in order by which they were online in the last 24 hours. Sorry if that doesn't make sense... hopefully someone knows/remembers what I'm talking about.

[Former Member]

Do you mean alphabetizing users? I don't understand this plugin request, I'm sorry. You can assign groups colors and then their names will show as the group color if they are in that group, thus 'color sorting' them if that's what you mean. If you mean the blocks of color that show what color means which group, that's an existing plugin. If you mean you want it to show by who was active most recently, it's already sorted that way. Can you explain more?

[K'DIZZLE]

I know I was being confusing. Like on the old proboards there was a code that would automatically kind of... link all the group colors together that were online in the last 24 hours. Like it wouldn't be all over the place- it looked really neat. For instance if one group was red, one was blue, and one was green, instead of it having people organized like this:

margo, carmen, alice, donald, kenny, matthew, brittany, cathy.

It would arrange them like this:

donald, margo, alice, brittany, kenny, cathy, carmen, matthew,

[K'DIZZLE]

bump

[Wormopolis]

as soon as I can figure out how to extract color from elements that dont have it explicitly assigned by css, I will get you a footer code. since there isnt really a call for options, I dont think a plugin is necessary

[Chris]

Mar 21, 2014 1:50:09 GMT -8 Wormopolis said:

as soon as I can figure out how to extract color from elements that dont have it explicitly assigned by css, I will get you a footer code. since there isnt really a call for options, I dont think a plugin is necessary

The old (pre-jquery) way was to use getComputedStyle or currentStyle (IE) to determine CSS applied through means other than inline style (i.e with a css rule). You had to detect which method is supported in the browser then use it but with jQuery all that is done for you in the background:

$(element).css('color') would return the color value using the appropriate method because even if set inline it could still be overridden by a rule using an important modifier so it uses the getComputedStyle/currentStyle method to determine the active value rather than just reading it off the element.

[Wormopolis]

I thought that too, but when i was putputting it, it was ocming back as blank on all regular members. only staffed or grouped members had a color.

Im not done experimenting. I just need to sit down again. 2 doubles at work in a row took a lot out of me.

[Chris]

Now that is strange, is this on IE7? The only problem I see with sorting by color is whether or not the browser natively returns color values in rgb(R,G,B) format (Firefox) or hex, that would make quite a difference in which color comes first.

SPOILER: Click to show

Before

---

After

---

Sorting by group however should be a bit more consistent across browsers

SPOILER: Click to show

Before

---

After

---

keep in mind that the original V4 code was meant to sort alphabetically but due to changes made with the 4.5 upgrade it started sorting by the font color specified on group names and people seemed to like it <shrug>

[Peter]

I think RGB is returned back from all browsers apart from anything before IE7. Not 100% sure on that, but from working with RGB stuff a while back, it was consistent.

If it needs to be converted, maybe a tidy way of doing it would be to write a css hook, just overwrite the getter. In fact, it's probably already been done, as it's jQuery.

Edit:  Forgot to say;  I had no issues getting the RGB either.

[Chris]

I recall recently (word count plugin I believe) having to use the _HEXtoRGB from the colorpicker widget in order to normalize before comparing color values since console logs were showing both hex and RGB as returned values across browsers as well as within some browsers where there was an inline style and it used hex or rgb. Maybe jQuery normalizes them because I was actually using the native calls (getComputedStyle/runtimeStyle) not the jQuery css method but this was less than a year ago so if they have standardized it natively then it has to be a fairly recent change.

[Wormopolis]

I likely had something just written wrong. I was just trying out raw and fast code.

if you already have something working, just toss it out there. no need to wait on me.

[Wormopolis]

put this into main footer:


<script type="text/javascript">
function rgbTOhex(rgb) {
if (rgb.match(/rgb\((.*?)\)/i)) {
rgbarray=RegExp.$1.split(',');
newhexarray=rgbarray.map(function(num){
return ('0'+(parseInt(num)).toString(16).toUpperCase()).slice(-2);
});
return newhexarray.join('');
} else {
return rgb;
}
}

var namescontainer=$('tr.last td.info.last a.user-link').first().parent();
var names=$('tr.last td.info.last a.user-link').remove();
endkeep=namescontainer.find('a.members-link').remove();
namescontainer.empty();
names.sort(function(a,b){
return rgbTOhex($(b).css('color'))>rgbTOhex($(a).css('color'))?1:(rgbTOhex($(b).css('color'))<rgbTOhex($(a).css('color'))?-1:0)});
names.each(function(){
namescontainer.append($(this),', ');
});
if (endkeep) namescontainer.append(' and ',endkeep);

</script>


[Chris]

Wormopolis , that code doesn't appear to be working for me at least on Firefox. (it changes the position of first name with the second then stops without error)

What I came up yesterday with was partly based on an unreleased v4.5 main footer code but the mechanics which were worked out for 4.5 seems to also work on 5.0 although I haven't installed it on a real forum to test.

code:

<script type="text/javascript">
$(function () {

	var sortBy = ['css', 'color'], 
		rgb2hex = $.ui.colorPicker.prototype._RGBtoHEX;
	$.fn.reverse = [].reverse;
	$('.container.stats .info').each(function (num, section) {
		var user_links;
		var users = (function (jqMeth, jqParam, asc) {
			user_links = $('.user-link', section);
			var	re_rgb = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:\s*,\s*\d+)?\)$/
			return user_links.sort(function (u1, u2) {
				var uu1 = $(u1),
				uu2 = $(u2);
				uu1 = uu1[jqMeth].apply(uu1, ("undefined" != typeof jqParam ? [jqParam] : []));
				uu2 = uu2[jqMeth].apply(uu2, ("undefined" != typeof jqParam ? [jqParam] : []));
				if ('color' == jqParam) {
					uu1 = tohex(uu1);
					uu2 = tohex(uu2);
				}
				if(!isNaN(+uu1))uu1 = +uu1;
				if(!isNaN(+uu2))uu2 = +uu2;
				if (uu1 == uu2) {
					return 0;
				}
				if (uu1 > uu2) {
					return (asc ? 1 : -1);
				}
				return (asc ? -1 : 1);
				function tohex(rgb){
					if(/^rgba?\(/.test(rgb)){
						rgb = rgb.replace(re_rgb,function(m,p1,p2,p3){
							return "#" + rgb2hex(+p1,+p2,+p3);
						});
					}
					return rgb;
				}
			})
		}).apply(this, sortBy)
		//use native DOM manipulation to avoid livequery overhead
		if (users.length > 1) {
			var container = users[1].parentNode, new_whirled_order = document.createDocumentFragment();
			$.each(users, function (i, e) {
				var oldLink = document.createDocumentFragment();
				while (e.nextSibling && e.nextSibling.nodeName.toLowerCase() !== 'a') {
					oldLink.appendChild(e.nextSibling);
				}
				if( i < users.length -1 ){
					if(oldLink.lastChild.nodeType == 3 && !/,\s*$/.test(oldLink.lastChild.nodeValue) ){
						oldLink.lastChild.nodeValue += ", ";
					}else if(oldLink.lastChild.nodeType !== 3){
						oldLink.appendChild(document.createTextNode(','))
					}
				}else if( oldLink.lastChild.nodeType == 3 && /,\s*$/.test(oldLink.lastChild.nodeValue) ){
					oldLink.lastChild.nodeValue = oldLink.lastChild.nodeValue.replace(/,\s*$/,"")
				}
				oldLink.insertBefore(user_links.get(i), oldLink.firstChild);
				new_whirled_order.appendChild(oldLink);				
			});
			if(container.firstElementChild && container.firstElementChild.classList.contains('members-link')){
				container.insertBefore(document.createTextNode(' and '),container.firstChild)
			}
			container.insertBefore(new_whirled_order,container.firstChild);
		}
	})
})
</script>

If you wish to configure to sort by other criteria then the line to change would be var sortBy = ['css','color'], what that requires is a jQuery method (css in this case) and the parameter to pass to that method ('color' in this case) and an optional third boolean arg specifying to sort in ascending order (default is descending) . It then sorts using the return value of the call. Examples of other configurations:

• var sortBy = ['idFromClass','group', true]
  sorts by group number in ascending order
• var sortBy = ['idFromClass','user']
  sort by user ID (numeric)
• var sortBy = ['attr','title']
  sort by user ID (the one you use to login)
• var sortBy = ['html']
  sort alphabetically (by display name)
• var sortBy = ['html', ,true]
  sort alphabetically (by display name) in ascending order

The list could go on...



As for the hex2rgb and rgb2hex functions, we can use the ones already included in the colorpicker if a need arises in the future

$.ui.colorPicker.prototype._RGBtoHEX
and
$.ui.colorPicker.prototype._HEXtoRGB

[Peter]

Here is what I get when I run it (using Wormopolis')...

Before:


After:

[Chris]

Mar 22, 2014 3:59:51 GMT -8 Peter said:

Here is what I get when I run it (using Wormopolis')...

Before:


After:

That's strange, I get that if run from Chrome console but in Firebug I get what I described

By the way, I saw an emulation mode in Chrome yesterday which amazingly has like 30 devices to choose from (ipad, galaxy, etc.) making me seriously consider switching to Chrome