Mootools Message Class

This Message Class is a simple Mootools class that will send a message to the user in style! It’s more than what you could expect from the alert javascript method, so read on! It’s quite useful.

Before we get started, this is open source code and, like Mootools itself, it is released under the Open Source MIT Licence. But, please give me credit by leaving the url to this site in the js files. Thanks!

Say Method

Click on this to see.

// Simplest way to use the class...
new Message({
	icon: "okMedium.png",
	title: "Success!",
	message: "You have successfully messaged your user."
}).say();

Tell Method

You can get bossy with the “tell” method of the class by forcing the user to respond. Click on this to see.

// Here I'm creating an instance of the Message Class and storing it the msg variable.
var msg = new Message({
	icon: "cautionMedium.png",
	title: "Watch Out!",
	message: "You just might be a redneck!"
});
// Execute the command!
msg.tell();

Ask Method

You can also ask a question by using the ask method. (See how clever I am? I named the methods after the what they do!) You can also send a callback function to complete a transaction when the user chooses “Yes”. Wow! Think of the power! Get the class to perform a task by sending either a function in the form of a string, or an element that has an assigned click event. When the user clicks “Yes”, the class will fire the function or the click event (which ever you passed in the callback option).

Click on this to see.

new Message({
	icon: "mediumQuestion.png",
	title: "Question!",
	message: "If a woman is yelling at a man and he's not there to hear it, is he still wrong?",
	callback: "saySimple()"
}).ask();

Waiter, Comment and Tip Methods

There are all kinds of things that this bad-boy can do. Click on the following links to marvel at the possibilities!

You can create a waiter using the waiter method.
Click here to dismiss the waiter.

You can create a comment box pop up.

How the heck did I do that? Here’s the code:

document.id('commentLink').addEvent('click', function(e){
	// Just creating an object here so that you can see that it's possible to send one.
	// Imagine the power in that!
	var obj = new Element('div', {
		'id': 'dummy',
		'events': {
			'click': function(){
				sendComment();
				this.destroy();
			}
		}
	});
	new Message({
		icon: "speakMedium.png",
		iconPath: "/2010/images/",
		width: 300,
		fontSize: 14,
		passEvent: e,
		autoDismiss: false,
		title: 'Have a Comment?' ,
		message: '<textarea id="commentText" cols="3" rows="5" class="msgEditable"></textarea>',
		callback: obj
	}).say();
});
var sendComment = function(){
	new Message({
		icon: "okMedium.png",
		iconPath: "/2010/images/",
		title: "Received!",
		message: "We've received your comments, and we'll ...uhhh... get back to you."
	}).say();
}

You can even create a tool tip. Yeah… I know it’s a built-in plugin in Mootools, but I think that this does it better. (I could never get the Mootools tooltip plugin to work the way I wanted.) Besides, I already created this class, so extending it to do tips was simple. Click on these to see the tip method in action:

I’m a tip
…and I’m a tip
…and I’m a tip too!

With the tip method, the HTML is important because we use the rel property in the a tag to pass a title and a message. This way, you can set your tips right in the HTML.

<a href="javascript:" class="tips" rel="Tip!::This is tip #1">I'm a tip</a>
<a href="javascript:" class="tips" rel="Tip!::This is tip #2">...and I'm a tip</a>
<a href="javascript:" class="tips" rel="Tip!::This is tip #3">...and I'm a tip too!</a>

The Javascript:

$$('.tips').addEvent('click', function(e){
	new Message({
		iconPath: '/2010/images/',
		icon: 'mediumQuestion.png',
		passEvent: e,
		callingElement: this
	}).tip();
});

Notice how the tips disappear on mouse rollout. This is achieved by passing the element that called the tip method. Pass this element using the callingElement option in the class’ constructor just like I did above.

Positioning

Just when you thought you’ve seen it all, you get a blast of another cool feature: positioning! That’s right, if you like it on top, you can position the message to align to the top by passing the “top: true” option. If you want it aligned to the left, simply pass the “left: true” option, and voilà… instant positioning! Just the way you like it.

Details

Ok… so the Message class is the bomb! So, what are the details? Here they are:

Constructor:

Message({options});

Options:

callingElement: (element: default to null). You use this option when you need the message to auto hide on the mouse out event. Essential when using the tip method.

callback: (string or element). The function that you want to fire when the user confirms the message by pressing “Yes”. i.e.: “myFunction()”, or just send an element with a click event attached to it.

top: (boolean: defaults to false) Set the message to come out from the top edge of the window. Defaults to the bottom.

left: (boolean: defaults to false) Set the message to the left. Defaults to right.

centered: (boolean: defaults to false) Set the message to the center of the window.

offset: (integer: defaults to 30) Determines the padding to give from the edge of the browser window frame.

width: (mixed: defaults to ‘auto’) The CSS value of your message. Pass a number to change it.

iconPath: (string: defaults to ‘image/icons/’) The path of the icons that you’d like to use.

icon: (string: defaults to null) The file name of your icon image. Note: your icon is expected to be 40 x 40! Can be changed in the CSS.

title: (string: defaults to null) The title of your message.

message: (string: defaults to null) Your message.

delay: (integer: defaults to 0) Delays the display of your message. Integer is interpreted in milliseconds.

autoDismiss: (boolean: defaults to true) The message will dismiss on it’s own. Note: this is shut off automatically when user input is needed.

dismissOnEvent: (boolean: defaults to false) The message will dismiss on the mouseout event. Note: this is used automatically when an event is passed.

isUrgent: (boolean: defaults to false) Use the “urgent” transitioning to get the user’s attention. Note: this is automatically used on the ask and tell methods.

callback: (string: defaults to null) Send a function in the form of a string to be fired on confirmation of an ask method.

passEvent: (event: defaults to null) Passing an event will make the message appear at the your cursor location (offset by 5 px).

tipMode: (boolean: defaults to false) Tip mode is a short-cut that sets the autoDismiss and dismissOnEvent to true.

fxTransition: (Fx.Transition: defaults to null) Set your own transition. The default transition will simply fade in. * fxDuration: (mixed: defaults to ‘normal’) Set the transition duration. Intergers are interpreted in milliseconds.

fxUrgentTransition: (Fx.Transition object: defaults to Fx.Transitions.Bounce.easeOut) Set your own urgent transition

fxOutTransition: (Fx.Transition object: defaults to null) Set the out transition. The default will simply fade out.

fxOutDuration: (mixed: defaults to ‘normal’) Set the transition duration. Intergers are interpreted in milliseconds.

Methods

Note:

* All options can be passed in the constructor! Some can also be passed in the method. * When isUrgent is on, a “Yes”, “No” or “Ok” confirmation link is added to dismiss the message.

Say

Syntax:
myMessage. say(title, message, icon, isUrgent, callback);

Options:
- title (string: required) The title of your message.
- message (string: required) Your message.
- icon (string: optional) The image icon that you’d like to use in the message. Note: your icon is expected to be 40 x 40! Can be changed in the CSS.
- isUrgent (boolean: optional) Setting it to true will make the message use the Fx.Transition.Bounce.easeOut effect and in the centered position. This is to get the user’s attention.
- callback (string: optional) Sent a function witten in the form of a string to use as a way to fire another function upon a “Yes” click.

Ask

Syntax:
myMessage.ask(title, message, callback, icon, isUrgent);

Options: they are the same as the say method except that the callback is required (or rather expected) and isUrgent is true by default. “Yes” and “No” links will be added to dismiss the message. A click on the “Yes” link will fire the callback function.

Tell

Syntax:
myMessage.tell(title, message, icon, isUrgent);

Options: they are the same as the say method except that isUrgent is boolean and is true by default. An “OK” link will be added to dismiss the message.

Waiter

Syntax:
myMessage.waiter(title, message, icon, isCentered);

Options: They are the same as the say method except that isCentered is boolean and is true by default.

Tip

Syntax:
myMessage.Tip(title, message, icon);

Options: they are the same as the say method.

Events:

onComplete: Fires when the hide message transition is complete.

onShow: Fires when the message shows. Specifically, it will fire when the show transition is fully complete.

Requirements and Other Notes

This class requires the Mootools Javascript Framework. I’m developed it on 1.2.4, and it’s dependent upon these plugins Element.Position, Element.Measure and Element.Shortcuts. (I hope I didn’t forget any… and if I did, please message me at beaudoin.jason@gmail.com!). I tested it on IE 7 +, Firefox, Safari and Google Chrome. I don’t support IE6 because nobody should be using that browser. (Friends don’t let friends use IE6. Remember that!) Also, I use CSS 3 in this example. If you’re viewing this in IE 8 or lower, you’re not going to see the CSS 3 support.

Speaking of CSS, you can find the one I used here. But, it’s also included in the package download file, also found at the top of this page on the right-hand menu.