Hi! :)

Hey there @Nyuszika7H

I figure we should coordinate the changes to the /status script, maybe I can roll yours into mine and we can make it a joint project

what syntax did you prefer? (how did you change it?)

@TheRenamedException a moment

no problem :-)

inject(function($)
{
	window.SEChatStatus = publicObj = {

I like putting braces on the same line as the function statement to avoid automatic semicolon insertion.

Also, I don't get why you have two names for one object…

var SEChatStatus = { would work fine, too. Since you're injecting the code, you can access the variables later…

@Nyuszika7H meh, that's fine, I can work that way

I always do braces on the next line, but, I'm easy

And almost all variables start with a my.

@Nyuszika7H any variable which starts with my is private

it's a closure

only the properties of publicObj are public but we can rename publicObj SEChatStatus if you prefer

so for example, myUserStatuses is not available outside the closure

Another thing: I don't like mixing variables and functions…

@Nyuszika7H what do you mean?

var myStatusTypes = $.makeArray(['available', 'busy', 'away']);

	var myUserStatuses = {};

	var myGetCurrentUserid = function()
	{
		return $('#active-user').data('user');
	}

I prefer function declarations, like this:

function myFunction() {
    // some code
}

why?

Hmm, maybe that would make it public?

is testing it in the console

As far as I am concerned the two are the same but we can do it your way if you have a strong preference (and are going to contribute something to the code aside from syntactical nitpicks ;-)

@TheRenamedException yep :)

You don't need cache: true in jQuery.ajax, since that's the default value. So we can shorten it like this:

Long version:

$.ajax({
			url:'/users/usermessage/'+myGetCurrentUserid(),
			type: 'POST',
			data: {
				'fkey':fkey().fkey,
				'message': statusMsg
			}
		});

Short version:

@Nyuszika7H balpha told me to add that; I am unfamiliar with it myself

$.post('/users/usermessage/' + myGetCurrentUserid(), { 'fkey': fkey().fkey, 'message': statusMsg });

I'm a Prototype.js guy, so I am not as up-to-speed on jQuery as I should be

but chat has an older version of jQuery, IDK if your form will work

Yes, it will work…

I think I needed to pass the URL as a key in the object

Added in 1.0…

Oh, you're using $.post not $.ajax

I know it did not work with $.ajax

yeah, edited it… it was a mistake

@TheRenamedException It makes easier to distinguish variables and functions. And you can put all function declarations at the bottom, but you can't do that with function expressions.

@Nyuszika7H As long as the functionality is the same, I'm easy

I think part of the reason why is because in my own projects I often redefine the functions, by binding them to objects and the like, that could be why. But we can do it with declarations

function test() {
    foo(); // ReferenceError: foo is not defined
    bar(); // logs 'test2 to the console

    var foo = function() {
        console.log('test1');
    };
    function bar() {
        console.log('test2');
    }

    foo(); // logs 'test1' to the console
}

Ah, but that's not how my code is :-)

everything is a function, almost nothing gets executed directly

because I'm creating an object

but, like I said, it doesn't matter to me :-)

Yesterday, I looked at your code… couldn't guess how you call ChatExtension.define, since I couldn't find it in your code… now I see: it's inside the init function.

right

init is the entry point, like main() in a C program

$(document).ajaxComplete()? Hmm, I think document.body would be better.

Again, I was told to use that form by someone :-)

So sure, let's change to document.body

As for the init() function: this is something I strongly want to keep. I will document it if it makes you feel better :-)

no problem with the init function :)

cool

Note, the ajaxComplete call is going away

Sorry if I'm saying too many things, but I just can't live with these :P

I am replacing that with local storage stuff

@TheRenamedException yeah but you need to check for support:

@Nyuszika7H are you really 12? You're a very opinionated 12 year old =b

if (window.localStorage) {
    // local storage is supported :)
} else {
    // no local storage support! :(
}

@TheRenamedException yep :)

@Nyuszika7H why? I am supporting only Chrome and Firefox, which have localStorage. But that's OK, I will just show an alert if there is no localStorage

@TheRenamedException OK :)

if (!window.localStorage) {
  alert('Get a better browser -- this one does not support local storage!');
  return false;
}

:-D

return; is enough to stop executing a function ;)

True. Actually I will throw an error instead

throw new Error('IE Sux'); // ;-)

Do you use subversion @Nyuszika7H?

Did you know that it's very easy to catch IE users?

@TheRenamedException what?

Subversion. svn. Source control. For sharing source with a team / collaboration

var IE = false;
//@cc_on IE = navigator.appVersion;

if (IE < 9) {
    // An user with IE7/8, or… oh god, no! IE6!
}

@TheRenamedException no

Do you use git or something else?

No, but I was going to install it…

I use subversion. It's an extremely useful skill to know. I'll set up a svn repo for the code and I can help you get up and running

That way you can combine your changes with mine

My next goal on this project is to replace the ajaxComplete handler with a localStorage handler

this way the script will work in all rooms

@TheRenamedException ajaxCoimplete? :P

Local Storage tip:

localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
localStorage.removeItem('foo');

// OR

localStorage['foo'] = 'bar';
localStorage['foo'];
delete localStorage['foo'];

// OR if the item name is a valid identifier:

localStorage.foo = 'bar';
localStorage.foo;
delete localStorage.foo;

All three does the same thing. :)

Invalid example:

localStorage.123myItem = 'this is invalid';
localStorage.#12345 = 'this is also invalid';

Thanks. I have not worked with localSTorage before

Identifiers must start with a letter, a dollar sign ($) or an underscore (_). They can also contain numbers, but only from the second character. You can also use a limited subset of Unicode, e.g. á, é.

makes sense

I am probably just going to be reading from localstorage

watching for when the Status Control Room messages appear

but I may put users' existing statuses into localStorage

after I make the script work in all open tabs, my next goal is to make it fetch user statuses that have already been set, not just notify on updates

What features do you want to add or change?

@TheRenamedException a moment…

And there's another thing: sessionStorage. It's the same, except it's cleared when the tab/window is closed. :)

@Nyuszika7H I did not know about that; thanks! I may not use that as all I am trying to do is built upon what balpha and Marc Gavel have already done with chat

did you know that only one open tab/window polls for messages and the rest use localStorage?

@TheRenamedException nope

yeah, they did a really nice job. That's why status doesn't work (for me) in here but does in the Tavern

that's why I am dropping the ajax complete handler in favor of local storage ;-)

Another tip: if you want to store objects or arrays in local storage, you can use JSON.stringify() and later convert back with JSON.parse().

Cool. I am very familiar with JSON, we use it a lot in the applications my company builds

What's your OS of choice @Nyuszika7H?

@TheRenamedException I'm using Win7 x64, but I'm going to install Ubuntu, too.

Cool, I'll find a tutorial for svn on windows. I used to use TortoiseSVN myself, that's a good tool

Under Ubuntu svn is easy

I am creating the svn repo now

I don't know it right now, let me think about it a bit :)

sure :-)

One thing I think should be done is those ugly borders should be changed to something nicer

I just did the borders as a quick proof of concept

I am thinking maybe colored squares? Or images? Like badges over top of the gravatar, you know? I'm open to ideas

@TheRenamedException yeah, sure

maybe add some padding and a background?

$('.user-gravatar32').css({
    'background': 'blue',
    'margin-top': '-5px',
    'padding': '5px'
});

ah, that might look better, yes

Yeah, but a lighter color would be better.

I think a blueish color would be fine for default.

for "available"?

You don't think green, like "go"?

not for available

if status is not set

oh

yes, good idea

Hmm, something is not exactly correct, try it in the Tavern, Gravatars are overlapping each other

ah, got it

better to style the container (.avatar) instead of the image itself

Aww, I hate that jsLint complains if I don't add a semicolon at the very end, but also complains if I add an extra comma at an object's end:

var obj = {
    'foo': 'bar',
    'baz': 'quux',
}

Try it now:

$('.avatar').css({
    'background': '#0ff',
    'margin-top': '-5px',
    'padding': '3px'
});

@Nyuszika7H thank you for fixing that, it was driving me crazy

@Nyuszika7H this will break IE

It frustrates me to no end

@TheRenamedException I know :)

@Nyuszika7H My company has javascripts that are many thousands of lines long. Finding the one extra comma fouling it all up is the bane of my existence ;-)

@Nyuszika7H give me a username and password and I will grant you access. You can email it to@ sechatstatus@josh.gitlin.name or post here

ok @Nyuszika7H I have to go to a meeting, it being a work day for me and all. EMail me the username and password you want and I'll set up access so you can commit to the code base

OK let's see what's on my schedule for the remainder of the day... "Bugfixing". This must refer to bug-fixing the status script! \o/