Google, JavaScript

Google MiniMessage… now anywhere you need it

One of the things you notice quickly when building gadgets for the Google Apps Platform is that there are significant inconsistencies between the different environments, the API’s available and the way they needs to be configured and deployed… some of the time the differences are more or less logic and self-explanatory, however in other cases it’s difficult to make sense from it… and its made even less logic when it comes to the lack of proper documentation which in some cases is erroneous or at best, entirely absent… one of those cases is the availability of the MiniMessage API

…since it’s not available in the Gmail Contextual Gadget environment, I decided to implement it myself with the same interface as the Google implementation so the code wouldn’t have to undergo a lot of change when switched between different environments…

MiniMessage = function( container ) {

	this.messages = $( "<ul></ul>" );
	this.messages.addClass( "miniMessage" );

	this.container = container != null ? container : $( document.body );
	this.container.append( this.messages );
};

MiniMessage.prototype.container = null;
MiniMessage.prototype.messages = null;

MiniMessage.prototype.dismissMessage = function( message ) {

	try {
		$( message ).remove();
	}
	catch( Error ) {
		// ignore
	}
};

MiniMessage.prototype.createMessage = function( message ) {

	var messageElement = $( "<li>"+ message.toString() +"</li>" );
	messageElement.addClass( "miniMessageItem" );
	this.messages.append( messageElement );
	return messageElement;
};

MiniMessage.prototype.createStaticMessage = function( message ) {

	return this.createMessage( message );
};

MiniMessage.prototype.createTimerMessage = function( message, seconds, callback ) {

	var messageElement = this.createMessage( message );

	var me = this;
	var dismissMessageFn = function() {
			me.dismissMessage( messageElement );
			callback.call( me, messageElement );
		};
	window.setTimeout( dismissMessageFn, seconds * 1000 )

	return messageElement
};

MiniMessage.prototype.createDismissableMessage = function( message ) {

	var message = this.createMessage( message );
	message.click( this.messageClickHandler.bind( this ) );
};

MiniMessage.prototype.messageClickHandler = function( event ) {
	this.dismissMessage( event.target )
};

Since basically every JavaScript project I do in some way or another uses jQuery, I opted to allow dependency on this, however should it be necessary to omit the use of jQuery (which is only used for DOM manipulation anyways), it would to change the constructor to use native DOM management functions…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s